JavaScript高级 —— 学习（二）

一、深入对象

（一）创建对象三种方式

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.利用对象字面量创建

<body><script>const obj = {}</script>
</body>

2.利用 new Object() 创建

<body><script>const obj = new Object({uname: '一个人'})console.log(obj)</script>
</body>

3.利用构造函数创建

<body><script>function 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 返回值是新创建的对象

<body><script>function 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.实例成员

通过构造函数创建的对象成为实例对象，实例对象中的属性（实例属性）和方法（实例方法）称为

实例成员

说明：

为构造函数传入参数，创建结构相同但是值不同的对象

构造函数创建的实例对象彼此独立互不影响

<body><script>function 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.静态成员

构造函数中的属性（静态属性）和方法（静态方法）称作静态成员

说明：

静态成员只能通过构造函数来访问

<body><script>function Person(name) {this.name = name}Person.age = 2Person.add = function (a, b) {return a + b}console.log(Person.age)</script>
</body>

（四）内置构造函数

这段复习一下前面的知识

基本数据类型：字符串，数值，布尔，undefined，null

引用数据类型：对象

js 底层会将基本数据类型创建成对象，因此可以调用相应的属性和方法

<body><script>const 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() 正好相反

<body><script>const str = '我是-一个人'const arr = str.split('-')console.log(arr)</script>
</body>

substring(): 截取

语法：substring(开始的索引号[，结束的索引号])

字符串的截取，如果省略后面默认的结束所引号，就默认截取到最后

如果有结束索引号，结束索引号不包括在截取范围内，要再往后一个

下面就截取了数字一

<body><script>const str = '我是一个人'console.log(str.substring(2, 3))</script>
</body>

startsWith()：是否以...开始

语法：startsWith(要搜索的字符串[，在字符串中搜索开始的位置])

<body><script>const str = '我是一个人'console.log(str.startsWith('我是'))</script>
</body>

includes(): 是否拥有...

区分大小写

语法：includes (要搜索的字符串[，在字符串中搜索开始的位置])

<body><script>const str = '我是一个人'console.log(str.includes('是一'))</script>
</body>

Number：

是内置的构造函数，用于创建数值

toFixed(): 小数位

语法：toFixed(保留小数位数)

<body><script>const num = 10.156console.log(num.toFixed(2))</script>
</body>

2.引用类型：

Object，Array，RegExp，Date 等

Object：

是内置的构造函数，用于创建普通对象，创建不建议用这个，用字面量创建比较好

常用的静态方法：

获得对象中的所有的属性

原本我们用的方法是用for in遍历

<body><script>const person = {name: '一个人',age: 16}for (k in person) {console.log(k)console.log(person[k])}</script>
</body>

现在我们用的方法是用 Obejct 里面的静态方法

Object.keys(对象名) 获得对象中的所有键

Object.values(对象名) 获得对象中的所有属性值

注意：返回的是数组

<body><script>const person = {name: '一个人',age: 16}console.log(Object.keys(person))console.log(Object.values(person))</script>
</body>

拷贝操作

将一个对象中的内容拷贝给另一个对象

<body><script>const person = {name: '一个人',age: 16}const person1 = {}Object.assign(person1,person)console.log(person1)</script>
</body>

也可利用拷贝给一个对象添加属性

<body><script>const person = {}Object.assign(person,{name:'一个人'})console.log(person)</script>
</body>

Array：

内置构造函数用于创建数组，创建不建议用这个，用字面量创建比较好

遍历数组 forEach

过滤数组 filter

迭代数组 map

累计器 reduce

返回累计处理的结果，常用于求和

语法：数组名.reduce(function(上一次值，当前值){ }，初始值)

无初始值时：

<body><script>const arr = [5, 8, 10]const total = arr.reduce(function (prev, current) {return prev + current})console.log(total)</script>
</body>

有初始值时：最后加上初始值就行

<body><script>const arr = [5, 8, 10]const total = arr.reduce(function (prev, current){return prev + current}, 10)console.log(total)</script>
</body>

<body><script>const arr = [5, 8, 10]const total = arr.reduce((prev, current)=>prev + current, 10)console.log(total)</script>
</body>

reduce执行过程：

无起始值时：

第一次循环： prev 第一次数组中的第一个值 5 current 当前值是 8 返回值是 13

第二次循环： prev 是上一次的返回值 13 current 当前值是 10 返回值是 23

有起始值时：

起始值就是上一次值 prev

伪数组转化成真数组

Array.from()

其他方法：

join(): 将数组元素拼为字符串，返回字符串

find(): 返回数组中满足提供的测试函数的第一个返回值，就是用于找到含有某个元素的第一个对象

<body><script>const str = [{name: '华为',price: 10000}, {name: '小米',price: 1000}]const mi = str.find(function(item){return item.name === '小米'})console.log(mi)</script>
</body>d

every(): 检测数组中是否所有元素都满足指定条件，如果都通过返回 true ，如果都不通过返回 false

some():和 every同理 some 是有一个就行返回 true

<body><script>const arr = [10, 20, 30]const flag = arr.every(item => item >= 10)console.log(flag)</script>
</body>

练习：利用构造函数创建多个对象

界面展示：

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function 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 lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div></div><script>const spec = { size: '40cm*40cm', color: '黑色' }const div = document.querySelector('div')div.innerHTML = Object.values(spec).join('/')</script>
</body></html>

练习：字符串数组相互转换练习

界面展示：

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
<div></div><script>const 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 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茶叶,清洗球'}]const str = goodsList.map(item => {const { name, price, picture, count, spec, gift } = itemconst text = gift ? gift.split(',').map(item => `<span class="tag">${item}</span>`).join('') : ''return ` <div class="item"><img src="${picture}" alt=""><p class="name">${name}${text}</p><p class="spec">${(Object.values(spec)).join('/')}</p><p class="price">${price}</p><p class="count">${'×' + count}</p><p class="sub-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>