【ES6 五】 展开/剩余运算符

剩余运算符 ...

• ... 剩余运算符可以将最后面的形参放到一个数组中去(接收参数时只能放到最后一个位置)

let fn = (a, ...arr) => {
  console.log(arr);
};
fn("sssss", 1, 3, 2.33, 22, 345);
// [ 1, 3, 2.33, 22, 345 ]

展开运算符 ...

• 展开运算符就是将一个数组全部的元素按个展开取出
• ... 展开运算符在实参传递过程中可以将一个数组传递过去，多个形参可以一一对应的接收

//以前的写法
function fn(a, ...arr) {
  sum.apply(null, arr);
}
function sum(a, b, c, d, e) {
  console.log(a, b, c, d, e); //1 3 2.33 22 345
}
fn("sssss", 1, 3, 2.33, 22, 345);

//展开运算符传值
function fn(a, ...arr) {
  sum(...arr);
}
function sum(a, b, c, d, e) {
  console.log(a, b, c, d, e); //1 3 2.33 22 345
}
fn("sssss", 1, 3, 2.33, 22, 345);

• 展开运算符 合并数组

let arr = [...[1, 2, 3, 4, 5, 6, 7], 8, ...[9, 10, 11]];
console.log(arr);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]

深拷贝 浅拷贝

• 深拷贝 拷贝完之后两个数组的值相等，引用空间互不影响（改变一个数组的值不会影响另一个数组）
• 浅拷贝 拷贝完之后两个数组的值相等，引用空间公用一个（改变一个数组的值会影响另一个数组）

// 直接进行数组赋值为 浅拷贝
let b = [1,2,3,6,4,5];
let a = [b];
let c = b;
b[0] = 100;
console.log(c);  
// [ 100, 2, 3, 6, 4, 5 ]

// 直接进行数组赋值为 浅拷贝
let b = [1,2,3,6,4,5];
let a = [b];
let c = b;
b[0] = 100;
console.log(c);  
// [ 100, 2, 3, 6, 4, 5 ]

• slice 方法拷贝一层数组为深拷贝，如果拷贝层级有两层以上为浅拷贝（第一层均是深拷贝），总的来讲是 浅拷贝

// slice 一层拷贝为深拷贝
let b = [1,2,3,6,4,5];
let a = [b];
let c = b.slice(0);
b[0] = 100;
console.log(c);
// [ 1, 2, 3, 6, 4, 5 ]

//slice 多层拷贝为浅拷贝,第一层仍为深拷贝
let b = [1,2,3,6,4,5];
let a = [b];
let c = a.slice(0);
a[0] =['xxx',5,6,4,8,8];
b[0] = 100;
console.log(c);
// [ [ 100, 2, 3, 6, 4, 5 ] ]

展开运算符... 也是浅拷贝

• ... 展开运算符和slice()方法的概念完全一致，当拷贝的对象只有一维数组或者一层对象时，展开运算符就是深拷贝，超出一层多层的拷贝就是浅拷贝
• 拷贝之后 原对象第一层的值发生变更不会影响，原对象的对二层以上的值发生改变会影响。

// 第一层深拷贝 超出第一层就是浅拷贝
let b = [1,2,3,6,4,5];
let a = [b];
let c = [...a];
a[0] =['xxx',5,6,4,8,8];
b[0] = 100;
console.log(c);
// [ [ 100, 2, 3, 6, 4, 5 ] ]

//对象也仍旧遵循 第一层深拷贝 超出第一层就是浅拷贝
let obj= {
    name:'cometang',
    ah:['摄影','游泳','宅'],
    do:{a:'写代码',b:'还是写代码'}
};
let obj1 = {...obj};
obj.name = 'cometang11111';
obj.ah[0]='爬山';
obj.do.a = '看电影';
console.log(obj1);
//  { name: 'cometang',  
//    ah: [ '爬山', '游泳', '宅' ],  
//    do: { a: '看电影', b: '还是写代码' } }

深拷贝的实现

function deepClone(obj){
    // 如果不是object 可以直接返回
    if(typeof obj !== 'object') return obj;
    //如果是null 就返回null
    if(obj == null) return null;
    //如果是日期类型的数据 就直接返回一个日期
    if(obj instanceof Date) return new Date(obj);
    //如果是正则表达式 就返回一个正则表达式
    if( obj instanceof RegExp) return new RegExp(obj);
    //拿到obj 第一层的实例 直接new 一个相同实例，保留了实例类的继承关系
    let o = new obj.constructor();  
    //循环取值 
    for(let key in obj){
        //如果当前值是一个对象就执行递归判断，如果不是对象就直接赋值
        o[key] = typeof obj[key] === 'object' ?deepClone(obj[key]):obj[key];
    }
    return o;
}
let arr = deepClone([12,5,6,8,9,2,{name:'1111'}]);
console.log(arr);
//[ 12, 5, 6, 8, 9, 2, { name: '1111' } ]