扩展运算符

扩展运算符是三个点(...)。ES6中在数组和对象的操作上非常实用。

示例一:数组深拷贝

let arr = ['wenyi','yuanfang','xinyan'];
let arrShallowCopy = arr;
let arrDeepCopy = [...arr];
console.log(arrShallowCopy === arr);   //true
console.log(arrDeepCopy === arr);      //false

上述可以从命名中就已看出,两种方法的意义;arrShallowCopy是对原数组的引用;arrDeepCopy则是产生了新的数组,他们的指向已经不是同一个;相互不受影响。ES6的扩展运算符,大大的解放了数据驱动方式下的深拷贝,用起来方便简洁。

示例二:字符串分割

let a = 'I am wenyi';
let b = [...a];
b    //["I", " ", "a", "m", " ", "w", "e", "n", "y", "i"]

ES5中,字符串分割成数组,还要使用split方法去转换,ES6中,扩展预算符就直接简简单单的搞定。妙处多多~~~

示例三:数组插入另一个数组字面量

let arr2 = [1,2];
let joinArr = [...arr2,3,4,5];
console.log(joinArr)                //[1, 2, 3, 4, 5]
console.log(joinArr === arr2)       //false

从打印结果上看,使用扩展运算符,在深拷贝数组的基础上,还可以插入自己想要添加的值,并且生成的数组与原数组指向不同。

示例四:获取数组最大值

let initArr = [0,-1,98,40];
Math.max(...initArr)     //98

此应用是数组apply的一种方法,ES5会用apply方法,Math.max.apply({},[0,-1,98,40])能得到数组最大值。

示例五:对象浅拷贝

let z = { a: 3, b: 4 };
let n = { ...z };
console.log(z===n);   //false
z.c =6;
z  //{a: 3, b: 4, c: 5}
n  //{ a: 3, b: 4 }
let zzz = {a:3,b:{b1:1,b2:5}};
let nnn = {...zzz};
console.log(zzz===nnn)
zzz.b.b3=6;
zzz    //{a:3,b:{b1:1,b2:5,b3:6}}
nnn    //{a:3,b:{b1:1,b2:5,b3:6}}

扩展运算符和ES6的Object.assign方法等同。这个结果主要是babel转换的时候,会用Object.assign去将ES6的写法转成ES5的一般对象,所以也就有了第一句的等同。有的时候这个一级拷贝用的妙,可以少写很多逻辑。利用共同引用地址(两表一个用于存储,一个用于实时),可以达到两个数据表的同步,从而增删改查在两个表有关联时,就可以直接同步更改数据。事物的两面性,是不是在这里有了很好的体现了?

总结

扩展运算符使编程代码更简短,根据以上例子不难发现,(...)在数组的运用更加灵活。所以在使用上也是,建议在数组中多多应用,对象使用上,用不好,很容易造成代码乱七八糟。如果不清楚原理,就会导致逻辑混乱的现象发生。以上只是个人感悟,如有不同心声,当然欢迎热烈交流!!!