一、基本使用
ES6中函数可以使用 rest参数
接收函数的多余参数,组成一个数组,放在形参的最后面。
let fn = (a, ...value) => { console.log(a); console.log(value[0], value[1]); }; add(10, 20, 30); // 10 // 20 30
数组中的扩展运算符就好比 rest参数
的逆运算,将一个数组转为用逗号分隔的参数序列(也就是展开数组),在语法上,用三个点表示(...
)。
var fruits = [‘apple‘, ‘banana‘, ‘orange‘]; console.log(...fruits); // apple banana orange
二、取代apply
扩展运算符主要应用于函数的调用,比如下面这种情况给俩个数求和,在ES5中可以使用 apply
方法实现:
let add = (a, b) => a + b; let arr = [10, 20]; let result = add.apply(null, arr); console.log(result); // 30
现在不必了,直接使用扩展运算符即可:
let add = (a, b) => a + b; let arr = [10, 20]; console.log(add(...arr)); // 30
而且可以放置于形参中的任意位置,这点和 rest参数
不同:
let add = (a, b, c, d) => a + b + c + d; let arr = [20, 30]; console.log(add(10, ...arr, 40)); // 100
下面是俩个比较实用的取代 apply
方法例子:
// 1、取出一个数字数组中的最大值 // ES5 let arr = [10, 15, 5, 20, 10]; alert(Math.max.apply(null, arr)); // 20 // ES6 let arr = [10, 15, 5, 20, 10]; alert(Math.max(...arr)); // 20 ---------------------------------------------- // 2、将一个数组添加到一个数组里 // ES5 let arr1 = [10, 20]; let arr2 = [30, 40]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); // [ 10, 20, 30, 40 ] console.log(arr2); // [ 30, 40 ] // ES6 let arr1 = [10, 20]; let arr2 = [30, 40]; arr1.push(...arr2); console.log(arr1); // [ 10, 20, 30, 40 ] console.log(arr2); // [ 30, 40 ]
三、其他运用的地方
1、复制数组
在ES5中如果你这样复制数组式其实是不对的:
let arr1 = [10, 20]; let arr2 = arr1; arr1.push(30); console.log(arr1); // [ 10, 20, 30 ] console.log(arr2); // [ 10, 20, 30 ]
因为数组式复合类型的数据,复制的仅仅是指针,其中一个数组发生变化,另一个数组当然随之变化。
因此需要这样做:
let arr1 = [10, 20]; let arr2 = arr1.concat(); arr1.push(30); console.log(arr1); // [ 10, 20, 30 ] console.log(arr2); // [ 10, 20 ]
现在ES6使用扩展运算符更加方便:
let arr1 = [10, 20]; let arr2 = [...arr1]; arr1.push(30); console.log(arr1); // [ 10, 20, 30 ] console.log(arr2); // [ 10, 20 ]
2、合并数组
ES5中合并数组可以这样做:
let arr1 = [10, 20]; let arr2 = [30, 40]; let arr3 = arr1.concat(arr2); arr1.push(50); console.log(arr1); // [ 10, 20, 50 ] console.log(arr2); // [ 30, 40 ] console.log(arr3); // [ 10, 20, 30, 40 ]
ES6中又有了新写法:
let arr1 = [10, 20]; let arr2 = [30, 40]; let arr3 = [...arr1, ...arr2]; arr1.push(50); console.log(arr1); // [ 10, 20, 50 ] console.log(arr2); // [ 30, 40 ] console.log(arr3); // [ 10, 20, 30, 40 ]
注意:
以上俩种写法都是浅拷贝,合并成员是复合类型的数据就要注意了:
let arr1 = [{user: ‘tom‘}]; let arr2 = [{user: ‘jack‘}]; let arr3 = arr1.concat(arr2); let arr4 = [...arr1, ...arr2]; alert(arr1[0] === arr3[0]); // true alert(arr1[0] === arr4[0]); // true
原因还是这些对象成员拷贝的是地址。
原文地址:https://www.cnblogs.com/xlj-code/p/10348541.html
时间: 2024-11-09 21:04:28