h5响应式网站开发成本,规范门户网站的建设和管理办法,下一页p30,云设计平台目录
一、深入对象
#xff08;一#xff09;创建对象三种方式
1.利用对象字面量创建
2.利用 new Object() 创建
3.利用构造函数创建
#xff08;二#xff09;利用构造函数创建对象
1.构造函数介绍
2.约定
3.实例化执行过程
#xff08;三#xff09;实例成员…目录
一、深入对象
一创建对象三种方式
1.利用对象字面量创建
2.利用 new Object() 创建
3.利用构造函数创建
二利用构造函数创建对象
1.构造函数介绍
2.约定
3.实例化执行过程
三实例成员 静态成员
1.实例成员
说明
2.静态成员
说明
四内置构造函数
1.包装类型
String
length:
split(): 拆分成数组
substring(): 截取 startsWith()是否以...开始
includes(): 是否拥有... Number
toFixed(): 小数位
2.引用类型
Object
常用的静态方法
拷贝操作
Array
遍历数组 forEach
过滤数组 filter
迭代数组 map
累计器 reduce
伪数组转化成真数组
其他方法
练习利用构造函数创建多个对象
练习数组合并小案例 练习字符串数组相互转换练习
综合练习购物车 一、深入对象
一创建对象三种方式
1.利用对象字面量创建
bodyscriptconst obj {}/script
/body
2.利用 new Object() 创建
bodyscriptconst obj new Object({uname: 一个人})console.log(obj)/script
/body3.利用构造函数创建
bodyscriptfunction Person(uname, age) {this.name uname,this.age age}const first new Person(张三, 18)const second new Person(李四, 20)console.log(first)/script
/body
二利用构造函数创建对象
1.构造函数介绍
构造函数是一种特殊的函数用来初始化对象用来快速创建多个类似的对象
2.约定
函数名开头大写函数内部用 this指向被创建的对象
使用 new 关键字调用函数的行为被称为实例化
实例化构造参数时没有参数可以省略()
函数内部 不需要 return 返回值是新创建的对象
bodyscriptfunction Person(uname, age) {this.name uname,this.age age}const first new Person(张三, 18)const second new Person(李四, 20)console.log(first)/script
/body
3.实例化执行过程
创建新对象只要有 new 出现就立即创建一个对象
构造函数 this 指向新创建的对象
执行构造函数代码修改 this添加新的属性 this.属性名 这个属性名就是我们自己添加的
返回新对象 三实例成员 静态成员
1.实例成员
通过构造函数创建的对象成为实例对象实例对象中的属性实例属性和方法实例方法称为
实例成员
说明
为构造函数传入参数创建结构相同但是值不同的对象
构造函数创建的实例对象彼此独立互不影响
bodyscriptfunction Person(name) {this.name name}const laoshi new Person(一个人)const tongxue new Person(我是学生)laoshi.name 我是老师tongxue.name 我是一个好学生console.log(laoshi)console.log(tongxue)/script
/body
2.静态成员
构造函数中的属性静态属性和方法静态方法称作静态成员
说明
静态成员只能通过构造函数来访问
bodyscriptfunction Person(name) {this.name name}Person.age 2Person.add function (a, b) {return a b}console.log(Person.age)/script
/body
四内置构造函数
这段复习一下前面的知识
基本数据类型字符串数值布尔undefinednull
引用数据类型对象
js 底层会将基本数据类型创建成对象因此可以调用相应的属性和方法
bodyscriptconst str pink// const str new String(pink) 实际上是创建了个基本数据类型的对象console.log(str.length)const num 12console.log(num.toFixed(2))/script
/body
1.包装类型
String Number Boolean 等类型数据是 js 底层使用Object 构造函数包装好的所以被称为包装类型
String
是内置的构造函数
length:
实例属性 获得字符串的长度
split(): 拆分成数组
语法split(分隔符):
将字符拆分成数组和 join() 正好相反
bodyscriptconst str 我是-一个人const arr str.split(-)console.log(arr)/script
/body
substring(): 截取
语法substring(开始的索引号[结束的索引号])
字符串的截取如果省略后面默认的结束所引号就默认截取到最后
如果有结束索引号结束索引号不包括在截取范围内要再往后一个
下面就截取了数字一
bodyscriptconst str 我是一个人console.log(str.substring(2, 3))/script
/bodystartsWith()是否以...开始 语法startsWith(要搜索的字符串[在字符串中搜索开始的位置])
bodyscriptconst str 我是一个人console.log(str.startsWith(我是))/script
/body
includes(): 是否拥有...
区分大小写 语法includes (要搜索的字符串[在字符串中搜索开始的位置])
bodyscriptconst str 我是一个人console.log(str.includes(是一))/script
/body Number
是内置的构造函数用于创建数值
toFixed(): 小数位
语法toFixed(保留小数位数)
bodyscriptconst num 10.156console.log(num.toFixed(2))/script
/body2.引用类型
ObjectArrayRegExpDate 等
Object
是内置的构造函数用于创建普通对象创建不建议用这个用字面量创建比较好
常用的静态方法
获得对象中的所有的属性
原本我们用的方法是用for in遍历
bodyscriptconst person {name: 一个人,age: 16}for (k in person) {console.log(k)console.log(person[k])}/script
/body 现在我们用的方法是用 Obejct 里面的静态方法
Object.keys(对象名) 获得对象中的所有键
Object.values(对象名) 获得对象中的所有属性值
注意返回的是数组
bodyscriptconst person {name: 一个人,age: 16}console.log(Object.keys(person))console.log(Object.values(person))/script
/body
拷贝操作
将一个对象中的内容拷贝给另一个对象
bodyscriptconst person {name: 一个人,age: 16}const person1 {}Object.assign(person1,person)console.log(person1)/script
/body
也可利用拷贝给一个对象添加属性
bodyscriptconst person {}Object.assign(person,{name:一个人})console.log(person)/script
/body
Array
内置构造函数用于创建数组创建不建议用这个用字面量创建比较好
遍历数组 forEach
过滤数组 filter
迭代数组 map
累计器 reduce
返回累计处理的结果常用于求和
语法数组名.reduce(function(上一次值当前值){ }初始值)
无初始值时
bodyscriptconst arr [5, 8, 10]const total arr.reduce(function (prev, current) {return prev current})console.log(total)/script
/body
有初始值时最后加上初始值就行
bodyscriptconst arr [5, 8, 10]const total arr.reduce(function (prev, current){return prev current}, 10)console.log(total)/script
/body
bodyscriptconst arr [5, 8, 10]const total arr.reduce((prev, current)prev current, 10)console.log(total)/script
/bodyreduce执行过程
无起始值时
第一次循环 prev 第一次数组中的第一个值 5 current 当前值是 8 返回值是 13
第二次循环 prev 是上一次的返回值 13 current 当前值是 10 返回值是 23
有起始值时
起始值就是上一次值 prev
伪数组转化成真数组
Array.from() 其他方法
join(): 将数组元素拼为字符串返回字符串
find(): 返回数组中满足提供的测试函数的第一个返回值就是用于找到含有某个元素的第一个对象
bodyscriptconst str [{name: 华为,price: 10000}, {name: 小米,price: 1000}]const mi str.find(function(item){return item.name 小米})console.log(mi)/script
/bodyd every(): 检测数组中是否所有元素都满足指定条件如果都通过返回 true 如果都不通过返回 false
some():和 every同理 some 是有一个就行返回 true
bodyscriptconst arr [10, 20, 30]const flag arr.every(item item 10)console.log(flag)/script
/body练习利用构造函数创建多个对象
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscriptfunction Goods(name, price, count) {this.name name,this.price price,this.count count}const xiaomi new Goods(小米, 1999, 20)const huawei new Goods(华为, 3999, 59)const vivo new Goods(vivo, 1888, 100)console.log(xiaomi)console.log(huawei)console.log(vivo)/script
/body/html
练习数组合并小案例
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv/divscriptconst spec { size: 40cm*40cm, color: 黑色 }const div document.querySelector(div)div.innerHTML Object.values(spec).join(/)/script
/body/html 练习字符串数组相互转换练习
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody
div/divscriptconst gift 50g的茶叶,清洗球const str gift.split(,).map(item {return span【精品】${item}/span br}).join()document.querySelector(div).innerHTML str/script
/body/html
综合练习购物车
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 100px auto 0;}.item {padding: 15px;transition: all .5s;display: flex;border-top: 1px solid #e4e4e4;}.item:nth-child(4n) {margin-left: 0;}.item:hover {cursor: pointer;background-color: #f5f5f5;}.item img {width: 80px;height: 80px;margin-right: 10px;}.item .name {font-size: 18px;margin-right: 10px;color: #333;flex: 2;}.item .name .tag {display: block;padding: 2px;font-size: 12px;color: #999;}.item .price,.item .sub-total {font-size: 18px;color: firebrick;flex: 1;}.item .price::before,.item .sub-total::before,.amount::before {content: ¥;font-size: 12px;}.item .spec {flex: 2;color: #888;font-size: 14px;}.item .count {flex: 1;color: #aaa;}.total {width: 990px;margin: 0 auto;display: flex;justify-content: flex-end;border-top: 1px solid #e4e4e4;padding: 20px;}.total .amount {font-size: 18px;color: firebrick;font-weight: bold;margin-right: 50px;}/style
/headbodydiv classlist!-- div classitemimg srchttps://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg altp classname称心如意手摇咖啡磨豆机咖啡豆研磨机 span classtag【赠品】10优惠券/span/pp classspec白色/10寸/pp classprice289.90/pp classcountx2/pp classsub-total579.80/p/div --/divdiv classtotaldiv合计span classamount1000.00/span/div/divscriptconst goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.9,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,count: 2,spec: { color: 白色 }},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 109.8,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,count: 3,spec: { size: 40cm*40cm, color: 黑色 }},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,count: 1,spec: { color: 青色, sum: 一大四小 }},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,count: 1,spec: { size: 小号, color: 紫色 },gift: 50g茶叶,清洗球}]const str goodsList.map(item {const { name, price, picture, count, spec, gift } itemconst text gift ? gift.split(,).map(item span classtag${item}/span).join() : return div classitemimg src${picture} altp classname${name}${text}/pp classspec${(Object.values(spec)).join(/)}/pp classprice${price}/pp classcount${× count}/pp classsub-total${(price * count).toFixed(2)}/p/div})document.querySelector(.list).innerHTML strconst total goodsList.reduce((prev, item) prev (item.price * item.count * 100) / 100, 0)document.querySelector(.amount).innerHTML total.toFixed(2)/script
/body/html
