主体负责人电话修改 网站备案,如何线上营销,资源库网站开发,wordpress调用百度地图吗【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述
**扩展运算符(...)**允许一个表达式在期望多个参数#xff0…【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述
**扩展运算符(...)**允许一个表达式在期望多个参数用于函数调用或多个元素用于数字字面量或多个变量用于解构赋值的位置扩展。扩展运算符是ES6中引入的将可迭代对象展开到其单独的元素中所谓的可迭代对象就是任何能用for of循环进行遍历的对象。如数组数组常用方法、字符串、Map、Set、DOM节点等。
二、拷贝数组对象
使用扩展符拷贝数组是ES6中常用的操作
const arr_01[100,200,300,400,hello]
let arr_02 [...arr_01]
let arr_03 arr_01
arr_02.push(E01,E02)
console.log(arr_02) //[100,200,300,400,hello,E01,E02]
console.log(arr_01) //[100,200,300,400,hello]
arr_03.push(C01)
console.log(arr_01) //[100,200,300,400,hello,C01]扩展运算符拷贝数组只有第一层是深拷贝既对一维数组使用扩展符拷贝就属于深拷贝。
三、合并操作
合并对象在合并对象时如果一个键已经存在它会被具有相同键的最后一个对象给替换。
const halfMonths1 [101,102,103,104]
const halfMonths2 [201,202,203,204]
const halfMonths3 [...halfMonths1,...halfMonths2] //[101,102,103,104,201,202,203,204]
console.log(halfMonths3)四、参数传递
const sum (num1,num2)num1num2
console.log(sum(16,17)) //13
console.log(sum(...[16,17])) //13
console.log(sum(...[16,17,18])) //13从上面的代码看函数定义了多少个参数扩展运算符传入的值就是多少个
五、数组去重
const param [a,b,c,b,b,c]
const param_01 [...new Set(param)]
console.log(param_01) //[a,b,c]与Set一起使用消除数组的重复项。
六、字符串转字符数组
String也是一个可迭代对象所以也可以使用扩展运算符... 将其转为字符数组。
const title goyeer
const arr_title [...title]
console.log(arr_title)进而可以简单进行字符串截取。
const title goyeer
const arr_title [...title]
arr_title.length 2
console.log(arr_title.join()) //go七、NodeList转数组
NodeList对象是节点的集合通常是由属性和方法返回的
NodeList类似于数组但不是数组没有Array的所有方法如find 、map、filter等但是可以使用 forEach()来迭代。
const nodelist document.querySelectorAll(.row)
const nodeArray [...nodelist]
console.log(nodelist)
console.log(nodeArray)八、解构变量
解构数组下面演示
const [first,second,...others] [100,101,102,103,104]
console.log(first)
console.log(second)
console.log(others)解构对象如
const userInfo {name:goyeer,province:jiangsu,city:suzhou}
const {name,..loaction} userinfo
console.log(name) //goyeer
console.log(location) //{province:jiangsu,city:suzhou}九、打印日志
在打印可迭代对象的时候需要打印每一项可以使用扩展符
const years [2018,2019,2020,2021]
console.log(...years) //2018,2019,2020,2021十、总结
扩展运算符...让代码变的简洁而且是ES6中非常使用受欢迎的内容
