本质:
本质 就是 打包 拆包 的过程。
如何理解 打包 拆包?
举例: 合并 数组 (拆包)
/* 合并数组 */
let arr0 = [1,2,3]
let arr1 = [4,5,6,3]
let arr2 = [7,8,9]
// es5 合并数组 (去重了)
console.log(arr0.concat(arr1,arr2))
// es6 扩展运算符 合并 去重
console.log([...arr0,...arr1,...arr2])
在上方需求中 扩展运算符 是一个 拆包过程,将数组拆开 放到新数组里面。
举例:数组的解构赋值(打包)
const [first,...reset] = [1,2,33,66]
console.log(first,reset) // 1 [2,33,66]
在数组解构赋值中 呈现出打包的特性。
常用功能:
1.数组合并
2.数组去重
3.数组 解构 赋值
4.代替apply方法
5.数组拼接
6.类数组转数组
代码实现:
/* 合并数组 */
let arr0 = [1,2,3]
let arr1 = [4,5,6,3]
let arr2 = [7,8,9]
// es5 合并数组 (去重了)
console.log(arr0.concat(arr1,arr2))
// es6 扩展运算符 合并 去重
console.log([...arr0,...arr1,...arr2])
/* 数组的解构赋值相结合
1.解构:将对象或者数组中的某个成员取出来
2.赋值:取出来的成员赋值给某一个变量 */
const [first,...reset] = [1,2,33,66]
console.log(first,reset)
/* 替代数组 apply 的方法
数组 apply :
*/
//需求 : 数组参数 直接放入 函数
function make(x,y,z){
return x + y + z
}
let arr4 = [1,2,3]
// es5 apply
console.log(make.apply(null,arr4))
//es6 拆包 传入
console.log(make(...arr4))
//需求 : 求数组最大值
var maxArr = [1,2,3,7,5,9,1]
// 1. Math.max ...
console.log(Math.max(...maxArr))
// 2. Math.max apply
console.log(Math.max.apply(null,maxArr))
//需求 : 将 数组 拼接到 另一个数组的尾部
let arr5 = [1,2,3]
let arr6 = [3,4,5]
//es5 apply 拼接
arr5.push.apply(arr5,arr6)
console.log(arr5)
//es6 ... 拆包
arr5.push(...arr6)
console.log(arr5)
/* 类数组 转 数组 */
let doms = document.getElementsByTagName('div')
console.log(doms)
// 拆包
let arr7 = [...doms]
console.log(arr7)
/* 对象 使用 扩展运算符 */
let myObj = {
a : 1,
b : 3,
c : 5
}
let myObj1 = { d : 5}
// 对象 必须要有 大括号
console.log('对象:',{...myObj,...myObj1})
let myObj2 = { d : 6}
// 会替换掉 开发中 用到很多
console.log('对象:',{...myObj,...myObj1,...myObj2})
数组是如何实现 … 扩展运算符的?
Symbol.iterator