ES6中的解构、扩展运算符(...)、rest参数(...)的使用
2018-10-07 22:12
1136 查看
解构
es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构
//对象的解构
[code]const stu={ name:'shawn', age:'20', gender:'男' } const {name,age,gender}=stu console.log(name,age,gender) //shawn 20 男
//对象作为函数参数解构
[code]const stu={ name:'shawn', age:'20', gender:'男' } function stuInfo({name,age,gender}){ return `${name}的年龄是${age},性别是${gender}`; } console.log(stuInfo(stu)); //shawn的年龄是20,性别是男
//数组的解构
[code]const names = ["Henry","Bucky","Emily"]; const [name1,name2,name3] = names; console.log(name1,name2,name3);//Henry Bucky Emily
//返回数组个数
[code]const {length} = names; console.log(length); //3
扩展运算符...
作用是把数组或类数组对象展开成一系列用逗号隔开的值
[code]const arr1 = [1,2,3] const arr2 = [4,5,6] const arr3=[...arr1,...arr2] console.log(arr3) //[1, 2, 3, 4, 5, 6]
应用场景
//数组深拷贝
[code]const arr2 = arr1; const arr3 = [...arr1]; console.log(arr1===arr2); //true, 说明arr和arr2指向同一个数组 console.log(arr1===arr3); //false, 说明arr3和arr指向不同数组
//把一个数组插入另一个数组字面量
[code]const arr = [1,2,3] const arr1 = [...arr, 4, 5, 6]; console.log(arr1);//[1, 2, 3, 4, 5, 6]
//字符串转数组
[code]var str = 'love'; var arr = [...str]; console.log(arr);//[ 'l', 'o', 'v', 'e' ]
rest参数...
作用与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
//主要用于不定参数,所以ES6开始可以不再使用arguments对象
[code]bar = function(one, ...unknow) { console.log(one); console.log(unknow); } bar(1, 2, 3, 4,5); //1 //[ 2, 3, 4 ,5]
阅读更多
相关文章推荐
- es6中的解构赋值、扩展运算符和rest参数使用详解
- 在es6中,对rest参数和扩展运算符的理解(待更新)
- ES6中的rest参数与扩展运算符详解
- ES6-rest参数和扩展运算符
- ES6(六: 函数扩展)(默认值,rest参数,扩展运算符)
- ES6 rest参数和扩展运算符
- ES6-rest参数和扩展运算符
- ES6 rest参数和扩展运算符
- ES6 rest与扩展运算符
- es6扩展运算符,rest运算符,箭头函数,
- ES6 随记(3.4.1)-- 函数的拓展(参数默认值,扩展运算符)
- rest 参数与扩展运算符
- ES6 解构运算符 rest运算符,...运算符
- rest 参数和扩展运算符
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- ES6学习总结之函数变化(函数默认参数,扩展运算符,箭头函数)
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- ECMAScript6(ES6)标准之函数扩展特性箭头函数、Rest参数及展开操作符
- ES6学习之路3----rest参数与扩展运算符
- ES6-函数的扩展-rest参数