JavaScript 学习笔记（JS进阶 Day2）

写在前面

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：\
1. JavaScript 学习笔记（Day1） \
2. JavaScript 学习笔记（Day2） \
3. JavaScript 学习笔记（Day3） \
4. JavaScript 学习笔记（Day4） \
5. JavaScript 学习笔记（Day5） \
6. JavaScript 学习笔记（WEB APIs Day1） \
7. JavaScript 学习笔记（WEB APIs Day2） \
8. JavaScript 学习笔记（WEB APIs Day3） \
9. JavaScript 学习笔记（WEB APIs Day4） \
10. JavaScript 学习笔记（WEB APIs Day5） \
11. JavaScript 学习笔记（WEB APIs Day6） \
12. JavaScript 学习笔记（JS进阶 Day1）

---

::: block-1

目录

• 1 深入对象
• 2 内置构造函数
• 3 综合案例
  :::

1 深入对象

1.1 创建对象三种方式

P164：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=164

1. 利用对象字面量创建对象

const o = {
  name: '佩奇'
}

2. 利用 new Object 创建对象

const o = new Object({ name: '佩奇' })
console.log(o) // {name: '佩奇'}

3. 利用构造函数创建对象

1.2 构造函数

P165：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=165

构造函数在技术上是常规函数。

不过有两个约定：

1. 它们的命名以大写字母开头。
2. 它们只能由 "new" 操作符来执行。

function Pig(name, age, gender) {
  this.name = name
  this.age = age
  this.gener = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const George = new Pig('乔治', 3, '男')
// 创建猪妈妈对象
const Mum = new Pig('猪妈妈', 30, '女')
// 创建猪爸爸对象
const Dad = new Pig('猪爸爸', 32, '男')
console.log(Peppa）// {name: '佩奇', age: 6, gener: '女'}

说明：

1. 使用 new 关键字调用函数的行为被称为实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return，返回值即为新创建的对象
4. 构造函数内部的 return 返回的值无效，所以不要写return
5. new Object（） new Date（） 也是实例化构造函数

实例化执行过程

P166：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=166

说明：

1. 创建新对象
2. 构造函数this指向新对象
3. 执行构造函数代码，修改this，添加新的属性
4. 返回新对象

1.3 实例成员&静态成员

P167：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=167

实例成员

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

说明：

1. 实例对象的属性和方法即为实例成员
2. 为构造函数传入参数，动态创建结构相同但值不同的对象
3. 构造函数创建的实例对象彼此独立互不影响。

// 构造函数
function Person() {
  // 构造函数内部的 this 就是实例对象
  // 实例对象中动态添加属性
  this.name = '小明'
  // 实例对象动态添加方法
  this.sayHi = function () {
    console.log('大家好~')
  }
}

// 实例化，p1 是实例对象
// p1 实际就是构造函数内部的 this
const p1 = new Person()
console.log(p1)
console.log(p1.name) // 访问实例属性
p1.sayHi() // 调用实例方法

静态成员

说明：

1. 构造函数的属性和方法被称为静态成员
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 this 指向构造函数本身

// 构造函数
function Person(name, age) {
  // 省略实例成员
}
// 静态属性
Person.eyes = 2
Person.arms = 2
// 静态方法
Person.walk = function () {
  console.log( '^_^人都会走路...")
  // this 指向 Person
  console.log(this.eyes)
}

2 内置构造函数

P168：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=168

在 JavaScript 中最主要的数据类型有 6 种：

基本数据类型：

• 字符串、数值、布尔、undefined、null

引用类型:

• 对象

但是，我们会发现有些特殊情况：

// 普通字符串
const str = 'andy'
console.log(str.length)  // 4

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构造函数创建。

引用类型

• Object，Array，RegExp，Date 等

包装类型

• String，Number，Boolean 等

2.1 Object

P169：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=169

Object 是内置的构造函数，用于创建普通对象。

// 通过构造函数创建普通对象
const user = new object({name: '小明', age: 15})

推荐使用字面量方式声明对象，而不是 Object 构造函数

学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）:

• Object.keys: 获取对象中所有属性（键）
• Object.values: 获取对象中所有属性值
• Object.assign: 用于对象拷贝

const o = { uname: 'pink', age: 18 }
// 1.获得所有的属性名
console.log(0bject.keys(o)) // 返回数组 ['uname', 'age']
// 2．获得所有的属性值
console.log(0bject.values(o)) // ['pink', 18]
// 3．对象的拷贝
const oo = {}
Object.assign(oo, o)
console.log(oo) // { uname: 'pink', age: 18 }
Object.assign(o, { gender: '女' })
console.log(o) // { uname: 'pink', age: 18, gender: '女' }

2.2 Array

P170：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=170

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

const arr = new Array(3, 5)
console.log(arr) // [3,5]

创建数组建议使用字面量创建，不用 Array 构造函数创建

1. 数组常见实例方法-核心方法

方法	作用	说明
forEach	遍历数组	不返回，用于不改变值，经常用于查找打印输出值
filter	过滤数组	筛选数组元素，并生成新数组
map	迭代数组	返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce	累计器	返回函数累计处理的结果，经常用于求和等

reduce

reduce 返回函数累计处理的结果，经常用于求和等

语法：

arr.reduce(function(累计值, 当前元素 [,索引号][,源数组]){}, 起始值)

累计值参数：

1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）

例：

const arr = [1, 5, 8]

// 1．没有初始值
const total = arr.reduce(function (prev, current) {
  return prev + current
})
console.log(total) // 14

// 2．有初始值
const total = arr.reduce(function (prev, current) {
  return prev + current
}, 10)
console.log(total) // 24

// 3. 箭头函数的写法
const total = arr.reduce((prev,current) => prev + current, 10)
console.log(total) // 24

2. 数组常见方法-其他方法

P171：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=171

5. 实例方法join数组元素拼接为字符串，返回字符串(重点)
6. 实例方法find查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined(重点)
7. 实例方法every检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回true，否则返回fallse(重点)
8. 实例方法some检测数组中的元素是否满足指定条件如果数组中有元素满足条件返回true，否则返回false
9. 实例方法concat合并两个数组，返回生成新数组
10. 实例方法sort对原数组单元值排序
11. 实例方法splice删除或替换原数组单元
12. 实例方法reverse反转数组
13. 实例方法findIndex查找元素的索引值

2.3 String

P172：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=172

1. String 常见实例方法

1. 实例属性length用来获取字符串的度长(重点)
2. 实例方法split('分隔符')用来将字符串拆分成数组(重点)
3. 实例方法substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取(重点)
4. 实例方法startswith(检测字符串[，检测位置索引号])检测是否以某字符开头(重点)
5. 实例方法includes(搜索的字符串[，检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或 false(重点)
6. 实例方法toUppercase用于将字母转换成大写
7. 实例方法toLowerCase用于将字母转换成小写
8. 实例方法indexof检测是否包含某字符
9. 实例方法endsWith检测是否以某字符结尾
10. 实例方法replace用于替换字符串，支持正则匹配
11. 实例方法match用于查找字符串，支持正则匹配

渲染赠品案例：

P173：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=173

2.4 Number

P174：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=174

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

常用方法：

toFixed() 设置保留小数位的长度

// 数值类型
const price = 12.345
// 保留两位小数 四舍五入
console.log(price.toFixed(2)) // 12.35

3 综合案例

购物车展示:

P175：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=175

P176：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=176

<center>结束</center>

本文由mdnice多平台发布