ES6笔记（四）- Spread

剩余运算符给我们带来的问题
展开运算符（散列运算符）
- 对数组展开
- 对对象展开
- 展开运算符的最佳实践

剩余运算符给我们带来的一个小问题

我们先来看一个结合ES6剩余运算符的一个小例子（剩余运算符在我的ES6笔记（三）- Function中有交流到）


// 这是我们要书写的求和函数getSum其中使用到了剩余运算符
function getSum( ...numberArr ) {
    let sumResult = 0;
    numberArr.forEach(it => sumResult += it);
    return sumReuslt;
}

// 假设这是我们从后端请求过来的数据, 我们只要一调用getNumber就可以得到我们要相加的数据
function getNumber() {
    let data = [];
    for( let i = 0; i < parseInt(Math.random() * 10); i ++ ) {
        // 我们知道后端每次传递过来的数据数量都不太一样, 所以笔者这里使用随机数
        data.push(Math.random()); 
    }
    return data;
}

const numbers = getNumber();

console.log(numbers); // [ 成员1, 成员2, 成员3, 。。。]

// 这个时候你咋传进getSum啊, getSum的剩余运算符是将参数收集成一个数组

// 而你这个numbers已经是个数组了, 我们传进getSum的话, getSum的numberArr就会变成这样

// numberArr => [numbers]

// 那么后续的操作也会报错, 这个时候我们只有有最笨的手段
function getArrSum( arr ) {
    let result = 0;
    for( let i = 0; i < arr.length; i++ ) {
        result += getSum(arr[i]); // 一个一个传进去加获得最后结果
    }
    return result;
}

getArrSum(numbers);

所以通过上面的情况我们知道, 我们在这种情况下需要的是能够把数组每一项都展开作为参数传递给getSum, 而不是我们写个for循环, 这多恶心啊。

展开运算符

于是ES6给我们提供了一个新的操作, 叫做展开运算符, 我们先来看看混个脸熟

还是上面的例子

function getSum( ...numberArr ) {
    let sumResult = 0;
    numberArr.forEach(it => sumResult += it);
    return sumReuslt;
}

function getNumber() {
    let data = [];
    for( let i = 0; i < parseInt(Math.random() * 10); i ++ ) {
        data.push(Math.random()); 
    }
    return data;
}

const numbers = getNumber();

// 这里我们要进行求和, 由于numbers是一个数组, 我们直接这样操作
console.log(getSum(...numbers)); // ...numbers, 最后输出相应的和

上面的例子只是让你混个脸熟, 你可能会觉得, 诶这哥们怎么也是..., 跟剩余运算符长得一样啊, 这有点懵, 其实虽然长得一样但人家功能和作用的场景是完全不一样的, 两个人也没有半毛钱关系千万不要联想: **剩余运算符就是做收集参数的时候使用的, 展开运算符就像两个同名同姓的人一样, 名字样子一样但是人不一样, 重要的话说三遍

不要联想, 不要联想！！否则你会懵

展开数组

非常的easy和好用啊, 一看你就懂

console.log(...[1, 2, 3]); // 输出1, 2, 3
console.log(1, ...[2, 3, 4], 5); // 输出1, 2, 3, 4, 5

展开对象

const obj = {
    name: 'thor',
    age: 18
}

const newObj = {...obj};
console.log(newObj); // {name: 'thor', age: 18}

展开运算符的最佳实践

用来浅拷贝数组和对象

// 浅拷贝数组
const arr = [1, 2, 3];
// 下面这句话啥意思: 将arr的每一项展开放进一个新的数组里, 你品你细品, 是不是实现了数组的浅拷贝
const newArr = [...arr]; 
console.log(arr === newArr); // false
console.log(arr, newArr); // [1, 2, 3], [1, 2, 3]

// 浅拷贝对象在展开对象那块已经写过了

函数的参数如果需要散列参数, 但是我们又只能得到一个数组的情况下可以使用展开运算股

例子上面已经走过了

合并对象（等同于Object.assign）

const obj1 = {name: 'thor', age: 18, money: 1000};
const obj2 = {money: 100000};

const obj3 = {...obj1, ...obj2};
console.log(obj3); // {name: 'thor', age: 18, money: 100000};