ES6扩展符...在数组中的应用
扩展运算符:采用...,将一个数组转为用逗号分隔的参数序列。即更直观的可以称为展开符,eg:对let a = [1,2,3],
...a 结果 1,2,3 将数组里面的东西直接展开放在此处
一、复制数组
在ES6之前,对于数组的复制我们通常是通过“=”或concat来实现;
我们先来定义两个数组
let arr1 = [1, 2, 3], arr2 = [];
1、通过“=”直接复制数组
arr2 = arr1;
arr1 // [1,2,3]
arr1 // [1,2,3]
上述我们通过赋值符号直接复制数组,将arr1赋给arr2,接下来我对arr2进行一个修改,如下:
arr2[0] = 9;
arr1 // [9,2,3]
arr2 // [9,2,3]
发现修改arr2的值会导致arr1也会被更改。这是为什么呢?
因为数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。arr2并不是
arr1的克隆,而是指向同一份数据的另一个指针。所以修改arr2时,会直接导致arr1的变化。
面对上述情况,ES5改进的方式是通过concat
arr2 = arr1.concat();
arr2[0] = 9;
arr1 // [1,2,3]
arr2 // [9,2,3]
上面示例中,arr1会返回原数组的克隆,再修改arr2就不会对arr1产生影响。
说明:concat()方法中可以传1~多个参数,每个参数均为数组形式!
ES6采用了更简洁的方式:扩展运算符
arr2[0] = 9;
[...arr2] = arr1; //或arr2 = [..arr1]
arr1 // [1,2,3]
arr2 // [9,2,3]
二、合并数组
// es5合并数组
let arr3 = [1, 2, 3],
arr4 = [4, 5, 6];
let temp_1 = arr3.concat(arr4);
temp_1 //[1,2,3,4,5,6]
// es6合并数组
let temp_2 = [...arr3, ...arr4];
temp_2 //[1,2,3,4,5,6]
实际项目中,在渲染列表时,一般会对数据进行分页,将新数据追加到旧数据后面直接concat可完美解决.但是,如果插到旧数据的前面去,一般通过循环+unshift达到手段,但是太繁琐!直接利用ES6扩展符或利用applay达到目的。
// 第一种,直接利用...(最简单)
let temp_2 = [...arr3, ...arr4];
// arr3 []1,2,3]
temp_2 //[1,2,3,4,5,6]
// 第二种 利用... + unshift完成
arr3.unshift(...arr4)
arr3 //[1,2,3,4,5,6]
// 第三种:利用apply + unshift
Array.prototype.unshift.apply(arr3, arr4)
arr3 // 4,5,6,1,2,3
// 等价于:
arr3.unshift.apply(arr3, arr4)
三、字符串
1、实现了split()的作用,把一个字符串分割成字符串数组。
ES6之前,我们通常通过split()方法将一个字符串分割成字符串数组,如下:
let str = "today";
let splitStr_1 = str.split("");
splitStr_1 // ["t", "o", "d", "a", "y"]
ES6通过...也可以将将字符串转化为真正的数组。
let splitStr_2 = [...str];
splitStr_2 // ["t", "o", "d", "a", "y"]
2、说明:
与解构赋值结合起来生成数组,此处具体不讨论。后续再总结。
如果扩展运算符后面是一个空数组,则不产生任何效果。
注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。
四、使用于函数调用->参数
let params = [9, 2];
function sub(x, y) {
return x - y
}
sub(...params); // 7
五、在一些应用中替代函数的apply方法
典型的一个例子是利用Math.max.apply()获取数组最大/小值。 Math.max()与Max.min()虽然能取到最值;但是不支持数组;所以es5中这样实现:
Math.max.apply(null, [12, 90, 33]) // 77
// 等价于Math.max(12, 90, 33); //90
// es6中通过扩展运算符解决Math.max()与Max.min()中不能用数组的困境,
Math.max(...[14, 90, 33]) //90
以上只是一些最基本的总结,其他的不在这里说明,由于总项目遇到数组合并,就在这里总结记录下。
总之,相对于ES5,ES6可以用更少的代码实现更多,所以大家多多去学习下。