JS高级篇
一、参数
1.动态参数（arguments）
<script>
function get() {
// console.log(arguments) [2,3,4]
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
}
get(1, 2, 3)
</script>
控制台展示
2.剩余参数（…arr）
<script>
function get(a, b, ...arr) {
console.log(a)
console.log(b)
console.log(arr)
}
get(1, 2, 3, 4)
</script>
控制台展示
二、展开运算符
<script>
const arr1 = [1, 2, 3]
// 求数组最大值
console.log(Math.max(...arr1)) // 3
// 求数组最小值
console.log(Math.min(...arr1)) // 1
// 合并数组
const arr2 = [4, 5]
const arr = [...arr1, ...arr2]
console.log(arr) // [1, 2, 3, 4, 5]
</script>
三、数组解构
<script>
const [q, w, e] = [1, 2, 3]
console.log(q) // 1
console.log(w) // 2
console.log(e) // 3
// 交换2个变量的值
let a = 1
let b = 2;
[b, a] = [a, b]
console.log(a, b) // 2 1
</script>
四、遍历（forEach）
<script>
const arr = ['one', 'two', 'three']
arr.forEach(function (element, index) {
console.log(element) // 数组元素
console.log(index) // 索引号
})
</script>
控制台展示
五、筛选数组（filter）
<script>
const arr = [10, 20, 30]
// 返回的符合条件的新数组
const news = arr.filter(function (element, index) {
return element >= 20
})
console.log(news) // [20, 30]
</script>
六、内置构造函数
1.对象的拷贝（assign）
<script>
const t = { username: 'tong', age: 20 }
// 获得所有的属性名
console.log(Object.keys(t))
// 获得所有的属性值
console.log(Object.values(t))
// 对象的拷贝
Object.assign(t, { gender: '男' })
console.log(t)
</script>
控制台展示
2.创建数组（ Array）
<script>
const arr = new Array(1, 2)
console.log(arr) // [1, 2]
</script>
3.累计器（ reduce）
<script>
// arr.reduce(function(累计值, 当前元素){}, 起始值)
const arr = [1, 2]
const r = arr.reduce((p, item) => p + item)
console.log(r) // 3
</script>
表格整理
| 关键字 | 作用 | 说明 |
|---|---|---|
| forEach | 遍历数组 | 不返回，用于不改变值，经常用于查找打印输出值 |
| filter | 过滤数组 | 筛选数组元素，并生成新数组 |
| map | 迭代数组 | 返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据 |
| reduce | 累计器 | 返回函数累计处理的结果，经常用于求和等 |
七、改变this指向
1.call()
fn.call(this的指向,实参)
2.apply()
fn.apply(this的指向,[实参])
3.bind()
fn.bind(this的指向)
注意
bind() 方法不会调用函数，但是能改变函数内部this 指向
总结
（1）Array
重点
- forEach： 用于遍历数组，替代 for 循环
- filter： 过滤数组单元值，生成新数组
- map： 迭代原数组，生成新数组
- join： 数组元素拼接为字符串，返回字符串
- find： 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined
- every： 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false
了解
- some： 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false
- concat： 合并两个数组，返回生成新数组
- sort： 对原数组单元值排序
- splice： 删除或替换原数组单元
- reverse： 反转数组
- findIndex： 查找元素的索引值
（2）String
重点
| 关键字 | 说明 |
|---|---|
| length | 用来获取字符串的度长 |
| split(‘分隔符’) | 用来将字符串拆分成数组 |
| substring（开始索引号[,结束索引号]） | 用于字符串截取 |
| startsWith(字符串) | 检测是否以某字符开头 |
| includes(字符串) | 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false |
了解
| 关键字 | 说明 |
|---|---|
| toUpperCase | 将字母转换成大写 |
| toLowerCase | 将就转换成小写 |
| indexOf | 检测是否包含某字符 |
| endsWith | 检测是否以某字符结尾 |
| replace | 替换字符串，支持正则匹配 |
| match | 查找字符串，支持正则匹配 |
（3）Number
<script>
const num = 10.123456
// 保留两位小数，四舍五入
console.log(num.toFixed(2)) // 10.12
</script>
重点
- toFixed(整数)：用于设置保留小数位的长度