WEBSTORM前端 —— 第6章：JavaScript进阶 —— 第2节：构造函数数据常用函数
目录
一、深入对象
1.1创建对象三种方式
1. 利用对象字面量创建对象
2. 利用 new Object 创建对象
3. 利用构造函数创建对象
1.2 构造函数
1.3实例成员&静态成员
1.实例成员
2.静态成员
二、内置构造函数
2.1 Object
1.方法1
2.方法2
3.方法3
4.方法4
2.2 Array
1. 数组常见实例方法-核心方法
2. 数组常见方法-其他方法
2.3 String
1. 常见实例方法
2.练习：请完成以下需求
3.练习：显示赠品练习
2.4 Number
三、综合案例
1.购物车展示
一、深入对象
1.1创建对象三种方式
1. 利用对象字面量创建对象
2. 利用 new Object 创建对象
3. 利用构造函数创建对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// const obj = new Object()// obj.uname = 'pink老师'// console.log(obj)const obj = new Object({ uname: 'pink' })console.log(obj)</script>
</body></html>1.2 构造函数
- 构造函数 ：是一种特殊的函数，主要用来初始化对象
- 使用场景：常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。
构造函数在技术上是常规函数。
不过有两个约定：
1. 它们的命名以大写字母开头。
2. 它们只能由 "new" 操作符来执行。
构造函数语法：大写字母开头的函数
创建构造函数：
说明：
1. 使用 new 关键字调用函数的行为被称为实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return，返回值即为新创建的对象
4. 构造函数内部的 return 返回的值无效，所以不要写return
5. new Object（） new Date（） 也是实例化构造函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 创建一个猪 构造函数 function Pig(uname, age) {this.uname = unamethis.age = age}// console.log(new Pig('佩奇', 6))// console.log(new Pig('乔治', 3))const p = new Pig('佩奇', 6)console.log(p)// const pepa = { uname: '佩奇', age: 6 }// const obj = new Object()function Goods(name, price, count) {this.name = namethis.price = pricethis.count = countthis.sayhi = function () { }}const mi = new Goods('小米', 1999, 20)console.log(mi)const hw = new Goods('华为', 3999, 59)console.log(hw)console.log(mi === hw)mi.name = 'vivo'console.log(mi)console.log(hw)// const date = new Date('2022-4-8')// console.log(date)// 静态成员 Goods.num = 10console.log(Goods.num)Goods.sayhi = function () { }</script>
</body></html>练习：利用构造函数创建多个对象
需求：①：写一个Goods构造函数②：里面包含属性 name 商品名称 price 价格 count 库存数量③：实例化多个商品对象，并打印到控制台，例如小米 1999 20华为 3999 59vivo 1888 100
实例化执行过程
说明：
1. 创建新对象
2. 构造函数this指向新对象
3. 执行构造函数代码，修改this，添加新的属性
4. 返回新对象
1.3实例成员&静态成员
1.实例成员
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
说明：
1. 实例对象的属性和方法即为实例成员
2. 为构造函数传入参数，动态创建结构相同但值不同的对象
3. 构造函数创建的实例对象彼此独立互不影响。
2.静态成员
构造函数的属性和方法被称为静态成员
说明：
1. 构造函数的属性和方法被称为静态成员
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 this 指向构造函数本身
二、内置构造函数
2.1 Object
Object 是内置的构造函数，用于创建普通对象。
推荐使用字面量方式声明对象，而不是 Object 构造函数
学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
现在有新的方法了~~~~学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
1.方法1
作用：Object.keys 静态方法获取对象中所有属性（键）
语法：
注意： 返回的是一个数组
2.方法2
作用：Object.values 静态方法获取对象中所有属性值
语法：
注意： 返回的是一个数组
3.方法3
作用：Object. assign 静态方法常用于对象拷贝
语法：
4.方法4
作用：Object. assign 静态方法常用于对象拷贝
使用：经常使用的场景给对象添加属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const o = { uname: 'pink', age: 18 }// 1.获得所有的属性名console.log(Object.keys(o)) //返回数组['uname', 'age']// 2. 获得所有的属性值console.log(Object.values(o)) // ['pink', 18]// 3. 对象的拷贝// const oo = {}// Object.assign(oo, o)// console.log(oo)Object.assign(o, { gender: '女' })console.log(o)</script>
</body></html>2.2 Array
Array 是内置的构造函数，用于创建数组。创建数组建议使用字面量创建，不用 Array构造函数创建
1. 数组常见实例方法-核心方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// const arr = ['red', 'blue', 'green']// const re = arr.find(function (item) {// return item === 'blue'// })// console.log(re)const arr = [{name: '小米',price: 1999},{name: '华为',price: 3999},]// 找小米 这个对象，并且返回这个对象// const mi = arr.find(function (item) {// // console.log(item) //// // console.log(item.name) //// console.log(111)// return item.name === '华为'// })// 1. find 查找// const mi = arr.find(item => item.name === '小米')// console.log(mi)// 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回falseconst arr1 = [10, 20, 30]const flag = arr1.every(item => item >= 20)console.log(flag)</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// arr.reduce(function(累计值, 当前元素){}, 起始值)// arr.reduce(function (prev, item) {// // console.log(11)// // console.log(prev)// return prev + item// }, 0)// arr.reduce(function (prev, item) {// console.log(11)// // console.log(prev)// return prev + item// })const arr = [1, 2, 3]const re = arr.reduce((prev, item) => prev + item)console.log(re)</script>
</body></html>练习：员工涨薪计算成本
需求：①：给员工每人涨薪 30%②：然后计算需要支出的费用数据：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{name: '张三',salary: 10000}, {name: '李四',salary: 10000}, {name: '王五',salary: 20000},]// 涨薪的钱数 10000 * 0.3 // const money = arr.reduce(function (prev, item) {// return prev + item.salary * 0.3// }, 0)const money = arr.reduce((prev, item) => prev + item.salary * 0.3, 0)console.log(money)</script>
</body></html>2. 数组常见方法-其他方法
2.3 String
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
1. 常见实例方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>//1. split 把字符串 转换为 数组 和 join() 相反// const str = 'pink,red'// const arr = str.split(',')// console.log(arr)// const str1 = '2022-4-8'// const arr1 = str1.split('-')// console.log(arr1)// 2. 字符串的截取 substring(开始的索引号[， 结束的索引号])// 2.1 如果省略 结束的索引号，默认取到最后// 2.2 结束的索引号不包含想要截取的部分// const str = '今天又要做核酸了'// console.log(str.substring(5, 7))// 3. startsWith 判断是不是以某个字符开头// const str = 'pink老师上课中'// console.log(str.startsWith('pink'))// 4. includes 判断某个字符是不是包含在一个字符串里面const str = '我是pink老师'console.log(str.includes('pink')) // true</script>
</body></html>2.练习：请完成以下需求
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div></div><script>const gift = '50g的茶叶,清洗球'// 1. 把字符串拆分为数组// console.log(gift.split(',')) [,]// 2. 根据数组元素的个数，生成 对应 span标签// const str = gift.split(',').map(function (item) {// return `<span>【赠品】 ${item}</span> <br>`// }).join('')// // console.log(str)// document.querySelector('div').innerHTML = strdocument.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】 ${item}</span> <br>`).join('')</script>
</body></html>3.练习：显示赠品练习
2.4 Number
Number 是内置的构造函数，用于创建数值
常用方法： toFixed() 设置保留小数位的长度
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// toFixed 方法可以让数字指定保留的小数位数const num = 10.923// console.log(num.toFixed())console.log(num.toFixed(1))const num1 = 10console.log(num1.toFixed(2))</script>
</body></html>三、综合案例
1.购物车展示
分析业务模块：①：渲染图片、标题、颜色、价格、赠品等数据②：单价和小计模块③：总价模块分析业务模块：①：把整体的结构直接生成然后渲染到大盒子.list 里面②：那个方法可以遍历的同时还有返回值③：最后计算总价模块，那个方法可以求和？map 方法reduce 方法分析业务模块：①：先利用map来遍历，有多少条数据，渲染多少相同商品- 可以先写死的数据- 注意map返回值是 数组，我们需要用 join 转换为字符串- 把返回的字符串 赋值 给 list 大盒子的 innerHTML②：里面更换各种数据，注意使用对象解构赋值- 先更换不需要处理的数据，图片，商品名称，单价，数量- 采取对象解构的方式- 注意 单价要保留2位小数， 489.00 toFixed(2)- 获取 每个对象里面的 spec , 上面对象解构添加 spec- 获得所有属性值是： Object.values() 返回的是数组- 拼接数组是 join(‘’) 这样就可以转换为字符串了③：利用reduce计算总价- 求和用到数组 reduce 方法 累计器- 根据数据里面的数量和单价累加和即可- 注意 reduce方法有2个参数，第一个是回调函数，第二个是 初始值，这里写 0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {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>
</head><body><div class="list"><!-- <div class="item"><img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt=""><p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p><p class="spec">白色/10寸</p><p class="price">289.90</p><p class="count">x2</p><p class="sub-total">579.80</p></div> --></div><div class="total"><div>合计：<span class="amount">1000.00</span></div></div><script>const 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) // 每一条对象// 对象解构 item.price item.countconst { picture, name, count, price, spec, gift } = item// 规格文字模块处理const text = Object.values(spec).join('/')// 计算小计模块 单价 * 数量 保留两位小数 // 注意精度问题，因为保留两位小数，所以乘以 100 最后除以100const subTotal = ((price * 100 * count) / 100).toFixed(2)// 处理赠品模块 '50g茶叶,清洗球'const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span> `).join('') : ''return `<div class="item"><img src=${picture} alt=""><p class="name">${name} ${str} </p><p class="spec">${text} </p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${subTotal}</p></div>`}).join('')// 3. 合计模块const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)// console.log(total)document.querySelector('.amount').innerHTML = total.toFixed(2)</script>
</body></html>