ES6中数组复制与合并

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可以用更少的代码实现更多,所以大家多多去学习下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章