扩展运算符常见的所有应用场景(90%的人都进过第八个的坑)

本文详细介绍了扩展运算符在数组、对象、字符串等类型中的应用,包括函数调用、数组操作、对象合并等方面。特别指出第八个应用场景——数组克隆时的注意事项,这是一个常见陷阱。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

适用类型:数组、对象、字符串。

/*数组的扩展*/
[...[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开发,入过坑,贴出来,希望能给大家带
来一些解决问题的思路。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值