本质:

本质 就是 打包 拆包 的过程。

如何理解 打包 拆包?

举例: 合并 数组 (拆包)

			/* 合并数组 */
			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

作者 译文

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注