JavaScript — 使用扩展运算符 (…)

简述如何在 JavaScript 中使用展开运算符 (...)

介绍

在 MDN Web Docs 上,它说“扩展语法 (...) 允许在预期零个或多个参数(用于函数调用)或元素(用于数组文字)的地方扩展诸如数组表达式或字符串之类的迭代,或者 在需要零个或多个键值对(对于对象字面量)的地方扩展对象表达式。”

这是很多复杂东西,对吧? 好吧,我会试着为大家总结一下。 希望在本文结束时,大家会知道如何使用扩展运算符。

如何使用展开运算符 …

可以通过三种不同的方式使用扩展运算符:

  1. 对于函数调用
  2. 对于一个数组
  3. 对于一个对象

尽管大家最常在对象或数组中使用它,但了解如何在函数调用中使用它仍然很有用。 我将在下面详细介绍其中的每一个。

函数调用中

顾名思义,“spread”运算符将值展开。 在调用函数时使用扩展运算符的情况下,我们将其称为 myFunction(...args)。 在函数体中,我们可以将 args 变量用作常规数组,将数组中的每个元素作为输入的参数之一。

const sum = (...nums) => {
    // `nums` can be thought of as [1,2,3,4,5]
    
    let total = 0;
    
    for (let i=0; i < nums.length; i++) {
        total = total + nums[i];
    }
    
    return total;
}

sum(1);         // 1
sum(1,2,3);     // 6
sum(1,2,3,4,5); //15

对于一个数组

扩展运算符也可用于数组。 同样,顾名思义,它将值展开。 我们可以在数组中使用此扩展运算符来连接数组和深拷贝数组。 我将向大家展示如何完成这两项任务。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];


const arr3 = [...arr1, 'hello'];
const arr4 = ['hello', ...arr2];
const arr5 = [...arr1, ...arr2];
const arr6 = [...arr1, arr2];

console.log(arr3);
console.log(arr4);
console.log(arr5);
console.log(arr6);

JavaScript — 使用扩展运算符 (...)

对于一个对象

扩展运算符也可用于对象。 再一次,顾名思义,它将值展开。 可以使用扩展运算符合并对象,就像数组一样。 除此之外,扩展运算符可用于更新对象内的属性。

const obj1 = {1:'a', 2:'b'}
const obj2 = {3:'c', 4:'d'}

const obj3 = {...obj1, ...obj2}

console.log(obj3);

JavaScript — 使用扩展运算符 (...)

const obj1 = {1: 'old a', 2:'old b'}
const obj2 = {2: 'new b'}

const obj3 = {...obj1, ...obj2}

console.log(obj3);

JavaScript — 使用扩展运算符 (...)


总结

扩展运算符可以以各种方式使用,我强烈建议各位看官熟悉它。 扩展运算符本质上是语法糖,但如果使用得当,它可以让你的代码更简洁,增强可读性。 相信我,花大约 30 分钟在谷歌上搜索扩展运算符,你会感谢我的。

希望这篇文章能帮助各位理解展开运算符 (...)。 如果各位认为我误解了某些内容,请告诉我,我将对文章进行必要的更改。 谢谢!

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » JavaScript — 使用扩展运算符 (…)