目录
00闭包
html
<!-- 闭包 -->
<html>
<body>
<script>
// 定义：闭包=内层函数（匿名函数）+外层函数的变量（s）
// 作用：封闭数据，提供操作，外部可以访问函数内部变量
function fun() {
let s = 'Hello World'
return function () {
document.write(s)
}
}
let f = fun()
f()
</script>
</body>
</html>01函数进阶
1>函数参数
1.动态参数
arguments是函数内置的伪数组，包含传入的所有实参（函数声明时形参列表为空）
2.剩余参数
将不定数量的剩余参数表示为数组
形参列表形如(形参列表 , ...剩余参数数组名)
3.展开运算符（...）
html
<!-- 展开运算符 -->
<html>
<body>
<script>
let arr = [1, 2, 3]
console.log(...arr) // 1 2 3
// 不改变原数组
</script>
</body>
</html>2>箭头函数
1.基本语法：
function(){} 等效于 () => {}
只有一个形参，小括号可省略
只有一行函数体，大括号可省略
2.箭头函数参数：
无动态参数，有剩余参数
02解构赋值
html
<!-- 数组解构 -->
<html>
<body>
<script>
// 定义：将数组各值快速批量赋值给一系列变量
let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
</script>
</body>
</html>
html
<!-- 对象解构 -->
<html>
<body>
<script>
// 定义：将对象属性和方法快速批量赋值给一系列变量
// 注意：新变量名和对应的属性名要相同
let obj = { myname: 'Tian', age: 20 }
let { myname, age } = obj
console.log(myname) // Tian
console.log(age) // 20
</script>
</body>
</html>03通过forEach方法遍历数组
html
<!-- 通过forEach方法遍历数组 -->
<html>
<body>
<script>
let arr = ['one', 'two', 'three']
arr.forEach(function (item, index) {
console.log(item) // 数组元素
console.log(index) //索引号
})
// one
// 0
// two
// 1
// three
// 2
</script>
</body>
</html>04深入对象
1>构造函数
html
<!-- 构造函数 -->
<html>
<body>
<script>
function Std(uname, age) { // 约定：函数名首字母大写
this.uname = uname
this.age = age
}
console.log(new Std('罗哲秀', 20))
console.log(new Std('雷淇', 19))
</script>
</body>
</html>2>实例成员&静态成员
实例成员：实例对象的属性和方法（实例属性和实例方法）
静态成员：构造函数的属性和方法（静态属性和静态方法）
05内置构造函数
1>Object常用静态方法
Object.keys(obj)【返回对象obj的键（数组）】
Object.values(obj)【返回对象obj的值（数组）】
Object.assign(obj1,obj2)【obj2拷贝给obj1，追加不覆盖】
2>Array常用方法
html
<!-- reduce方法 -->
<html>
<body>
<script>
let arr = [1, 2, 3]
// reduce的参数为回调函数和初始值
let ans1 = arr.reduce((pre, cur) => pre + cur) // 箭头函数为回调函数
console.log(ans1) // 6
let ans2 = arr.reduce((pre, cur) => pre + cur, 60) // 60为初始值
console.log(ans2) // 66
</script>
</body>
</html>
html
<!-- find方法 -->
<html>
<body>
<script>
// 以对象数组为例--------------------
let arr1 = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]
console.log(arr1.find(array => array.age === 19))
// 以字符串数组为例--------------------
let arr2 = ['罗哲秀', '雷淇']
console.log(arr2.find(uname => uname === '雷淇'))
// 箭头函数 uname => uname === '雷淇'
// 等价于
// function myfind(uname) {return uname === '雷淇'}
</script>
</body>
</html>
html
<!-- every和some方法 -->
<html>
<body>
<script>
let arr = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]
// every方法--------------------
// 全部的元素符合条件
let flag = arr.every(array => array.age >= 18)
console.log(flag) // true
// some方法--------------------
// 存在符合条件的元素
flag = arr.some(array => array.age >= 20)
console.log(flag) // true
</script>
</body>
</html>3>String常用属性和方法
实例属性：length
实例方法：
1.split(分隔符)【将字符串分割为数组】
2.substring(indexStart[, indexEnd])【截取字符串，不包括indexEnd】
3.startsWith(Str[, pos]【检测字符串是否以Str开头，从pos开始检测，不写默认为0】
4.includes(Str[, pos])【检测字符串是否含有Str，从pos开始检测，不写默认为0】
06原型
html
<!-- 利用原型对象实现方法共享 -->
<html>
<body>
<script>
// 构造函数
function Stu(uname, age) {
this.uname = uname
this.age = age
}
// 通过原型prototype，向构造函数添加方法共享
Stu.prototype.say = function () {
console.log(`我叫${this.uname}，今年${this.age}岁`);
};
//实例化，并调用共享函数
let LQ = new Stu('雷淇', 19)
let QQ = new Stu('清浅', 20)
LQ.say()
QQ.say()
</script>
</body>
</html>
html
<!-- 原型继承 -->
<html>
<body>
<script>
// 父亲"人"
function people() {
this.hair_color = '黑'
this.leg_number = '两'
this.say = function () {
console.log(`我有${this.hair_color}色的头发和${this.leg_number}条腿`)
}
}
// 孩子"LQ"
function LQ() {
this.dance = () => console.log('跳舞')
}
LQ.prototype = new people
let lq = new LQ
// 孩子"QQ"
function QQ() {
this.sing = () => console.log('唱歌')
}
QQ.prototype = new people
let qq = new QQ
// 调用共享方法和私有方法，验证原型继承
lq.say() // 我有黑色的头发和两条腿
lq.dance() // 跳舞
qq.say() // 我有黑色的头发和两条腿
qq.sing() // 唱歌
</script>
</body>
</html>