ES6中数组复制与合并

红太狼 2021-11-11 11:10 335阅读 0赞

**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