适用类型:数组、对象、字符串。
/*数组的扩展*/
[...[1, 2, 3]] //[1,2,3]
[...[], 1] //[1]
console.log(1, ...[2, 3], 4) //1 2 3 4
new Date(...[2015, 1, 1]);
/*对象的扩展*/
{...{a:1},b:2} //{a:1,b:2}
console.log({...{a:1},...{b:2}}) //{a: 1, b: 2}
/*字符串的扩展*/
[...[1,2,3],..."qqq"] //[1, 2, 3, "q", "q", "q"]
const data = {
id:123,
msg:{
detail:321
}
}
const { msg:{ detail } } = data
console.log(detail); // 321
const data = {};
const { msg = {}} = data;
const detail = msg. detail;
console.log(msg,detail); // {} undefined
扩展运算符的应用场景
1、函数调用
function add(x, y) {
return x + y;
}
add(...[4, 38]);
function f(v, w, x, y, z) { }
f(-1, ...[0, 1], 2, ...[3]);
2、往数组里push多个元素
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
console.log(arr1); //[0,1,2,3,4,5]
3、替代函数的apply方法
function f(x, y, z) { }
var args = [0, 1, 2];
f.apply(null, args); //ES5 的写法
f(...args); //ES6的写法
4、求一个数组的最大数简化
Math.max.apply(null, [14, 3, 77]) //ES5 的写法
Math.max(...[14, 3, 77]) //ES6 的写法,等同于Math.max(14, 3, 77)
5、扩展运算符后面可以放表达式
const arr = [...(5 > 0 ? ['a'] : []),'b'];
console.log(arr); //['a','b']
6、与解构赋值结合,用于生成数组
const a1 = [1, 2];
const a2 = [...a1]; //写法1
const [...a2] = a1; //写法2
const [first, ...rest] = [1, 2, 3, 4, 5];
first //1
rest //[2, 3, 4, 5]
const [first, ...rest] = [];
first //undefined
rest //[]
const [first, ...rest] = ["foo"];
first //"foo"
rest //[]
7、合并数组
[...arr1, ...arr2, ...arr3] //[ 'a', 'b', 'c', 'd', 'e' ]
8、数组的克隆(坑在这儿 , 特别注意)
var arr1 = [0, 1, 2];
var arr2 = [...arr1];
arr1[0]=100;
console.log(arr2); //[0, 1, 2]
/* 乍一看,arr2与arr1不共用引用地址,arr2不随着arr1变化,接着往下看 */
var arr1 = [0, [1,11,111], 2];
var arr2 = [...arr1];
arr1[1][0]=100;
console.log(arr2); //[0, [100,11,111], 2]
/* 通过打印结果发现,arr2与arr1里边的二维数组共用一块引用地址 */
结论:用一个扩展运算符,并不能实现复合对象类型的深克隆。
注意:项目开发中,遇到复合数据确认已经改变,页面上却没更新的情况,可以从
这块考虑进行排除。楼主从事的是React开发,入过坑,贴出来,希望能给大家带
来一些解决问题的思路。