广东省,搜索引擎优化的目的是,站长工具外链查询,代账会计在哪里找一、对象创建引发构造函数产生
1.1 创建对象三种方式#xff1a;
利用对象字面量创建对象 const obj {name: 佩奇}注#xff1a;对象字面量的由来#xff1a;即它是直接由字面形式#xff08;由源代码直接#xff09;创建出来的对象#xff0c;而不是通过构造函数或者…一、对象创建引发构造函数产生
1.1 创建对象三种方式
利用对象字面量创建对象 const obj {name: 佩奇}注对象字面量的由来即它是直接由字面形式由源代码直接创建出来的对象而不是通过构造函数或者方法间接构成的所以就叫做对象字面量。
利用 new Object 创建对象 // 两种添加属性的方式// const obj new Object()// obj.uname 哈哈哈哈// console.log(obj);const obj new Object({ uname: 哈哈哈哈 })console.log(obj);注当使用Object时实际上是调用了js内置的一个构造函数并且通过new关键字来创建一个新的对象。 3. 利用构造函数创建对象 往下看。。。。。
1.2 构造函数 构造函数定义就是一个函数用来创建快速多个类似的对象将多个对象的公共属性封装在一个函数里 注意创建对象的时候首字母大写使用函数创建对象通过new关键字操作符。 //创建一个猪猪 构造函数function Pig (uname, age) {this.unmae unamethis.age age}// 通过new关键字调用函数// 实例化构造函数// console.log(new Pig(佩奇, 6))const p new Pig(佩奇, 6)console.log(p);另外同new Object、 new Date 一样都是实例化构造函数js内置了Date、Object构造函数然后通过new关键字实现实例化函数最后实现实例化对象 const date new Date(2021-3-4)console.log(date);function Goods (name, price, count) {this.nam namethis.price pricethis.count count}const mi new Goods(小米, 1999, 20)console.log(mi)const hw new Goods(华为, 1999, 50)console.log(hw)总结 1.new关键字调用函数的行为被称为实例化 2.构造函数无return构造函数自动返回构建的新的对象。 什么时候需要return就是函数比起输出结果将返回结果给其他程序然后程序使用这个结果做其他事情更重要的时候。这个具体见小编的 js——函数篇。 3.实例化构造函数时没有参数时可以省略 ()
实例化执行过程 ①构造函数先调用加上new立刻创建一个空对象 ②this指向空对象 ③执行构造函数代码利用this添加属性.具体是通过形参传入实参 this指向新对象新对象添加一个name属性 这样实参通过形参就传入到了对象中 生成了对象属性 对象也有了 属性也有了 构造函数就会自动返回一个新的对象 返回的新对象 由new Pig接收。 ④.返回新对象 1.3 实例成员 静态成员
实例成员 通过构造函数创建的对象称为实例对象 实例对象中的属性和方法称为实例成员 实例属性 实例方法 下面举一个不含有参数的利用构造函数创建实例对象 function Pig () {this.name 佩奇this.sayHi function () {console.log(你好)}}const p new Pig()console.log(p.name)p.sayHi()注
实例对象的属性和方法即为实例成员为构造函数传入参数动态创建结构相同但值不同的对象构造函数创建的实例对象彼此独立互不影响
静态成员 构造函数的属性和方法被称为静态成员 静态成员只能构造函数访问。 function Person () {// 省略实例成员}// 静态属性Person.eyes 2Person.arms 2// 静态方法Person.walk function () {console.log(人嗯呢)console.log(this.eyes)}new Person()console.log(Person.eyes)console.log(Person.arms)// 死记硬背遇到方法一定要想到需要调用 并且不用打印调用 方法里面有结果的输出// console.log(Person.walk);//错误Person.walk()说明
构造函数的属性和方法被称为静态成员一般公共特征的属性或方法静态成员设置为静态成员静态成员方法中的 this 指向构造函数本身
二、内置构造函数
一切皆对象 我发现因为构造函数的存在所以都可以new出来一个实例对象 主要的数据类型有6种 基本数据类型字符串、数值、布尔、undefined、null 引用数据类型对象、数组等。 字符串.Length // const str pink// // 有属性// console.log(str.length)// const num 12// // 有方法// console.log(num.toFixed(2));// js底层完成 把简单数据类型包装成了引用数据类型// const str new String(pink)为什么任何数据都有属性和方法 原理其实在js的底层 将字符串类似转化为了对象也就存在了属性和方法 基本包装类型就是基本数据类型包装成了复杂数据类型 实字符串、数值、布尔、等基本类型也都有专门的构造函数这些我们称为包装类型。 JS中几乎所有的数据都可以基于构成函数创建 包装类型 StringNumberBoolean 等基本数据类型
2.1 Object Object 是内置的构造函数用于创建普通对象。 使用 Object 创建对象
const aa new Object({ uname: 哈哈, age: 18 })
console.log(aa); 三个常用静态方法静态方法就是只有构造函数可以调用的在这里是只有Object可以调用的 const o { uanme: pink, age: 18 }// 1.Object.keys 静态方法获取对象中所有属性键 返回数组console.log(Object.keys(o))// 2.Object.values 静态方法获取对象中所有属性值 返回数组console.log(Object.values(o))// 3.Object. assign 静态方法常用于对象拷贝 经常使用的场景给对象添加属性const oo {}Object.assign(oo, o)console.log(oo)// 通过Object给对象添加属性Object.assign(o, { gender: 女 })console.log(o)console.log(Object.keys(o));2.2 Array
Array 是内置的构造函数用于创建数组
const arr new Array(3, 5)
console.log(arr);创建数组建议使用字面量创建不用 Array构造函数创建 数组常见实例方法 数组中的reduce方法 这里不知道大家会不会有个问题为什么function函数没有被调用呢就能够返回值这是因为数组中的reduce方法是js内置函数自定义的方法不需要我们返回由内部操作我们只需要知道function被当做参数传入的时候是回调函数最后返回的结果用一个变量来接收即可。 // 数组reduce方法 两个参数 回调函数 初始值// arr.reduce(function (上一次值当前值) { }, 初始值)const arr [1, 5, 7]// 1.没有初始值const total arr.reduce(function (prev, current) {return prev current})console.log(total)// 2.有初始值const total1 arr.reduce(function (prev, current) {return prev current}, 10)console.log(total1)// 3.箭头函数表示const total2 arr.reduce((prev, current) prev current, 20)console.log(total2);forEach 遍历数组 不返回新数组 也就是不返回值 就想着遍历数组就跟for循环一样什么时候还有返回值呢
scriptconst arr [red, green, pink]// item是必须要写的 // foreach就是纯遍历 加强版的for循环 适合于遍历数组对象const result arr.forEach(function (item, index) {console.log(item)//每个数组元素console.log(index)//索引号})console.log(result)//不返回值/scriptfilter 筛选过滤数组 所以一定会返回一个新的数组 也就是有返回值 scriptconst arr [10, 20, 30]// const newArr arr.filter(function (item, index) {// // 也有用item和index// // console.log(item)// // console.log(index)//过滤条件// return item 20// })// console.log(newArr);// 写成箭头函数const newArr arr.filter(item item 20)console.log(newArr);/scriptmap 迭代数组 返回新数组 如果没有进行字符串拼接等操作默认是直接迭代数组返回一个新的数组和forEach方法类似一个返回数组一个不返回 scriptconst arr [red, blue, pink]const newArr arr.map(function (ele, index) {return ele 颜色})console.log(newArr)// 字符串是黑色的console.log(JSON.stringify(newArr))console.log(arr.join())console.log(newArr.join(|));/script综合案例一 需求一 把尺码和颜色 拼成特定格式要隔开 思路获得所有属性值然后拼接字符串即可 ①获得所有属性值Object.values()返回的是数组 ②拼接数组join 这样就可以转换为字符串了
这里我们需要注意因为我们要求薪资和可是薪资在每个对象中而对象又是在数组中所以当我们直接使用数组进行reduce累计求和需要注意里面的参数实际上是映射到了每一个对象上 // 对象数组const arr [{name: 张三,salary: 10000}, {name: 李四,salary: 10000}, {name: 王五,salary: 20000},]// 映射上每一个对象const total arr.reduce((prev, current) {console.log(prev)console.log(current)})有结果可知有undefined根据reduce的执行过程可知当没有添加初始值时prev执行数组的第一个元素在本案例中是第一个对象所以就会输出第一个对象但是current会输出第二个对象但是因为reduce通过多次遍历元素每一次循环遍历都会将元素加在一起但是显然我们求得的元素使对象不可能求和所以得到undefined因为每一轮循环返回的值回作为新一轮的prev所以prev会返回一个undefined紧接着current会返回之前遍历数组元素的下一个元素。 所以我们现在要解决的是怎么拿到数组元素对象中salary薪资可以通过对象.属性拿到 但是注意一定要写成prev和current.salary,以及添加初始值 // 对象数组const arr [{name: 张三,salary: 10000}, {name: 李四,salary: 10000}, {name: 王五,salary: 20000},]const total arr.reduce((prev, current) {// console.log(prev)// 在数组对象中累加和 不写初始值 错误 prev.salary第一次迭代的时候拿到的是元素 在我们这个代码中是第一个数值 问题是第二次迭代的时候我们想要实现的是prev拿到的是第一次迭代的返回值显然如果我们非要写prev.salary就拿不到第一次迭代的返回值接着就有问题了所以这里我们就用到了初始值// return prev.salary current.salary// return prev current.salary}, 0)console.log(total)const total1 arr.reduce((prev, current) prev current.salary * 1.3, 0)console.log(total1)Array数组常见方法 // 单纯数组 对数组进行查找满足条件的元素const arr [red, blue, green]const re arr.find(function (item) {return item blue})console.log(re)//数组对象const arr1 [{name: 小米,price: 1999}, {name: 华为,price: 2913}]// find查找满足条件的元素 因为是数组对象 所以查找满足条件的对象 只筛选满足条件的第一个元素const mi arr1.find(function (item) {console.log(item)console.log(item.name)return item.name 小米})// 筛选每一个元素const arr2 [10, 20, 30]const flag arr.every(item item 20)console.log(flag);2.3 String
js底层也见了构造函数进行包装 String常见方法 split把字符串转换为数组 //1.split把字符串转换为数组 和join相反const str pink,redconst arr str.split(,)console.log(arr)const str1 2022-4-8const arr1 str1.split(-)console.log(arr1)//2. 字符串的截取 substring(开始的索引号[结束的索引号])// 2.1 如果省略结束的索引号 默认取到最后// 2.2 结束的索引号不包含在想要截取的部分const str 今天很开心啊// 不包含截取console.log(str.substring(3, 5))// 3.startwith 判断是不是以某个字符开头const str pink老师上课中console.log(str.startsWith(ink))// 4.includes 判断某个字符是不是包含在一个字符串中 以及该字符的位置// 从字符串中开始搜索哈哈哈哈的位置 也就是开始搜索的位置const str 我是pink老师console.log(str.includes(pink))console.log(str.includes(pink, 3));基于字符串的小赠品案例;字符串转换为数组的而案例 并且使用join展示在页面上 // 两个小赠品放在了字符串中我们需要将这两个赠以页面要求的格式放在页面上 并且是两行 // 思路将字符串通过split转化为数组利用map方法将数组进行遍历拿到两个元素并且以页面要求的格式返回 最后获取页面元素进行innerHTML const gift 50g的茶叶,清洗球// const str gift.split(,).map(function (item) {// return span赠品 ${item}/span/br// }).join()// console.log(str)// document.querySelector(div).innerHTML str// 箭头函数表示document.querySelector(div).innerHTML gift.split(,).map(item span赠品 ${item}/span/br).join()toFixed() // 方法 可以让数字制定保留的小数位数const num 10.928console.log(num.toFixed(2))const num1 10console.log(num1.toFixed(2));基于构造函数数据常用函数综合案例 功能实现购物车展示 包括渲染图片 标题 颜色 价格 赠品等数据 把整体的结构直接生成然后渲染到大盒子list里面遍历并且返回值map方法最后计算总价模块求和reduce方法具体思路 ①map遍历数据 先写死数据 join转化为字符串 追加给list的innerHTML ②更换数据 先更换不需要处理的数据 图片 商品名称 单价 数量 对象结构的方式 单价保留两位小数 ③更换数据——处理规格文字模块 获取每个对象里面的spec上面对象解构添加spec 获得所有属性值 Object.values()返回的是数组 拼接数组是join‘’这样就可以转换为字符串了 ④更换数据——处理赠品模块 获取每个对象里面的gift上面对象解构添加gift 思路把字符串拆分为数组这样两个赠品就拆分开了 用split 利用map遍历数组同时把数组元素生成到span里面并且返回 因为返回的是数组 所以需要转换为字符串 用join‘’ 注意要判断是否有gift属性 没有的话不需要渲染 利用变成的字符串然后写到p.name里面 scriptconst 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茶叶,清洗球,宝马, 奔驰}]// 因为是数组对象 所以使用map遍历数组 有返回值document.querySelector(.list).innerHTML goodsList.map(item {// console.log(item)// 通过对象解构拿到想要的属性const { picture, name, count, price, spec, gift } item//规格文字模块 const text Object.values(spec).join(/)// 计算小计模块 单价*数量const subTotal ((price * 100 * count) / 100).toFixed(2)//处理赠品模块const str gift ? gift.split(,).map(item span classtag【赠品】10${item}/span).join() : //这里在返回页面的时候先返回一个死的数据 便于梳理思路return div div classitem img src${picture} altp classname${name}span classtag【赠品】10优惠券/span/pp classspec${text}/pp classprice${price}/pp classcountx${count}/pp classsub-total579.80/p/div }).join()// 3.合计模块const total (goodsList.reduce((prev, item) prev (item.price * 100 * item.count) / 100, 0)).toFixed(2)document.querySelector(.amount).innerHTML total/script三 、 完整代码
!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茶叶,清洗球,宝马, 奔驰}]// 1.根据数据渲染页面document.querySelector(.list).innerHTML goodsList.map(item {// console.log(item) //每一条对象 四条数据 遍历了四次 const { picture, name, count, price, spec, gift } item// 规格文字模块const text Object.values(spec).join(/) //Object.values(spec)获取的是数组// 计算小计模块 单价*数量const subTotal ((price * 100 * count) / 100).toFixed(2)// 处理赠品模块const str gift ? gift.split(,).map(item span classtag【赠品】10${item}/span).join() : return div classitemimg src${picture} altp classname${name} ${str}/pp classspec${text}/pp classprice${price.toFixed(2)}/pp classcountx${count}/pp classsub-total${subTotal}/p/div}).join()//3.合计模块const total (goodsList.reduce((prev, item) prev (item.price * 100 * item.count) / 100, 0)).toFixed(2)// console.log(total);document.querySelector(.amount).innerHTML total/script
/body/html
