在JavaScript中使用延展操作运算符的8种方法

开发 前端
延展操作运算符将可迭代的对象扩展为其单独的元素,可迭代对象是可以使用 for 循环进行循环的任何对象。

ES6中引入了延展操作运算符(...)。

延展操作运算符将可迭代的对象扩展为其单独的元素,可迭代对象是可以使用 for 循环进行循环的任何对象。

可迭代的示例:Array,String,Map,Set,DOM节点。

[[328868]]

1. 在log中使用延展操作运算符

你可以在 console.log 中对可迭代对象使用延展操作操作符

  1. let fruits = ['', '', '', '']; 
  2. console.log(...fruits); //    

2. 用延展操作运算符复制数组

  1. let fruits = ['', '', '', '']; 
  2. let fruitsCopy = [ ...fruits ];  
  3. console.log(...fruitsCopy); //  

复制对象

  1. let user = {name : "John", age : 20 } 
  2. let userCopy = {...user} 

延展操作运算符不执行深度复制。

3. 延展操作运算符合并

  1. let fruits = ['', '', '', '']; 
  2. let vegetables = ['', '', '']; 
  3. let fruitsAndVeg = [...fruits, ...vegetables] 

合并对象

合并对象时,如果已经存在某个键,则将其替换为具有相同键的最后一个对象。

  1. let user1 = {name : "John", age : 20 }; 
  2. let user2 = {name : "Ram", salary: '20K' }; 
  3. let userCopy = {...user1, ...user2}; 
  4. userCopy ; // {name : "Ram", age :20 , salary : '20K'}; 

4. 延展操作运算符作为参数传递

  1. function sum(a, b) { 
  2.    return a+b; 
  3. let num = [1,2]; 
  4. sum(...num); // 3 

与 math 函数一起使用

  1. let num = [5,9,3,5,7]; 
  2. Math.min(...num); 
  3. Math.max(...num); 

5. 延展操作运算符在解构变量中

  1. let [melon, ...fruits ] = ['', '', '', '']; 
  2. melon; //  
  3. fruits; // [ '', '', ''] 

解构对象

  1. let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" }; 
  2. let { name, age, ...details } = user; 
  3. name; // Ram 
  4. age; // 20 
  5. details; // {salary: '20K', job : 'Tester'}; 

6. 将NodeList对象转换为数组

NodeList类似于数组,但是没有 Array 的所有方法,例如 forEach,map,filter 等。

  1. let nodeList = document.querySelectorAll('.class') 
  2. var nodeArray = [...nodeList] 

7. 将字符串转换为字符

字符串也是可迭代的对象,因此我们也可以使用 ... 来字符串。

  1. let name = "Ram"
  2. let chars = [...name]; // ["R", "a", "m"] 

8. 从数组中删除重复项

  1. let num = [1, 3, 1, 3, 3, 1]; 
  2. let uniqueNum = [...new Set(num)]; 
  3. uniqueNum; //[ 1, 3 ] 

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2020-06-18 10:26:43

JavaScript开发技术

2021-02-04 07:54:40

JS工具扩展运算符

2021-07-12 15:35:56

JavaScript代码运算符

2018-12-14 10:00:16

BashLinux命令

2022-09-07 00:04:37

JavaScript运算符技巧

2023-10-04 00:01:00

sizeofC 语言

2024-06-11 14:57:00

2021-05-07 06:27:29

JavaScript运算符开发

2021-02-20 23:34:22

JavaScript运算符开发

2017-05-11 16:38:07

javascript逻辑运算符

2013-08-26 09:51:57

2009-08-12 12:46:11

C#运算符重载

2009-08-11 15:51:08

C#运算符算术运算符

2023-04-10 08:58:13

C#关系运算符

2022-04-11 09:37:49

商业智能CIO

2020-10-15 08:11:56

JavaScript逻辑运算符

2009-08-12 15:20:18

C#赋值运算符复合赋值运算符

2009-08-12 15:02:49

C#赋值运算符简单赋值运算符

2020-10-18 10:47:22

空值合并运算符 '??

2015-04-17 16:44:22

swiftOC
点赞
收藏

51CTO技术栈公众号