JavaScript进阶（day02:构造函数&数据常用函数）
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学，可以点心心支持一下哈
一、深入对象
1.创建对象三种方式
①利用对象字面量创建对象
②利用new Object创建对象
③利用构造函数创建对象
2.构造函数
构造函数是一种特殊的函数，主要用来初始化对象，可以通过构造函数来快速创建多个类似的对象
命名以大写字母开头
只能由“new”操作符来执行
创建构造函数
总结
案例（利用构造函数创建多个对象）
function Goods(name, price, count) {
this.name = name
this.price = price
this.count = count
}
console.log(new Goods('小米', 1999, 20))
console.log(new Goods('华为', 3999, 59))
console.log(new Goods('vivo', 1888, 100))实例化过程
1，创建新空对象
2，构造函数this指向新对象
3，执行构造函数代码，修改this，添加新的属性
4，返回新对象
3.实例成员&静态成员
实例对象
通过构造函数创建的对象称为实例对象，实例对象的属性和方法即为实例成员
静态成员
总结
二、内置构造函数
引用类型：Object、Array、RegExp、Date等
包装类型：String、Number、Boolean等
1.Object
Object 是内置的构造函数，用于创建普通对象。
三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
1.1Object.keys
2.Object.values
3.Object. assign （了解）
经常使用的场景给对象添加属性
总结
2.Array
Object 是内置的构造函数，用于创建数组。
2.1数组常见实例方法-核心方法
reduce
reduce 返回函数累计处理的结果，经常用于求和等
1.如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
案例（计算薪资）
const arr = [
{
name: '张三',
salary: 10000
},
{
name: '李四',
salary: 10000
},
{
name: '王五',
salary: 20000
}
]
console.log(arr.reduce((pre, current) => pre + current.salary, 0))2.2数组常见方法-其他方法
案例（课堂小练习01）
const spec = { size: '40cm*40cm', color: '黑色' }
document.querySelector('div').innerHTML = Object.values(spec).join('/')2.2数组常见方法-伪数组转换成真数组
静态方法Array.from()
3.String
3.1常见实例方法
1.实例属性length用来获取字符串的度长（重点）
2.实例方法split('分隔符')用来将字符串拆分成数组（重点）
3.实例方法substring(需要截取的第一个字符的索引[，结束的索引号])用于字符串截取（重点）
4.实例方法startswith(检测字符串[，检测位置索引号])检测是否以某字符开头（重点）
5.实例方法includes(搜索字符串[，检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或false（重点）
代转化的对象.toString()
转换为字符串
案例（显示赠品练习）
const gift = '50g的茶叶,清洗球'
// 根据逗号把字符串转为数组
document.querySelector('div').innerHTML = gift
.split(',')
.map(item => `【赠品】${item}
`)
.join('')4.Number
toFixed()
三、综合案例
案例（购物车展示）
let renderList = goodsList
.map(item => {
let { id, name, price, picture, count, spec, gift } = item
// 对商品描述数据进行处理
let specString = ''
// 如果描述数据只有一个,则直接转换为字符串,否则用/进行分隔再转换为字符串
specString = Object.values(spec).join('/')
// 对赠品数据进行处理,使用map返回处理后的新数据
let giftString = ''
if (gift) {
giftString = gift
.split(',')
.map(item => `【赠品】${item}`)
.join('')
}
return `
${name}${giftString ? giftString : ''}
${specString}
${price.toFixed(2)}
${count}
${((price * 100 * count) / 100).toFixed(2)}
`
})
.join('')
document.querySelector('div').innerHTML = renderList
// 数组累加
const total = goodsList.reduce(
(pre, current) => pre + (current.price * 100 * current.count) / 100,
0
)
document.querySelector('.amount').innerHTML = total.toFixed(2)