ES6语法---解构赋值
2018-01-29 21:25
405 查看
解构赋值概念
按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构。目的是为了提高效率,使用起来更加方便。
以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们。
数组解构
正常解构:ES5: var arr = [1,2,3]; var a = arr[2]; console.log(a);//3 ES6: let[a,b,c] = [1,2,3]; console.log(c);//3
嵌套数组解构:
ES5: var arr = [1,2,[3,4],5]; var a = arr[2][0]; console.log(a);//3 ES6: let[a,b,[c,d],e] = [1,2,[3,4],5]; console.log(c,d);//3,4
空缺变量
ES5: var arr = [1,2,,5]; console.log(arr[2]);//undefined ES6: let[a,b,,e] = [1,2,[3,4],5]; console.log(e);//5
多余变量
ES5: var arr = [1,2,3]; console.log(arr[3]);//undefined ES6: let[a,b,,e] = [1,2,[3,4]]; console.log(e);//undefined
默认值
有默认值,且没有值的,取默认值;有值的取自身的值,不取默认值 let[a,b,c,d='44'] = [1,2,3]; console.log(d);//44 let[a,b,c,d='44'] = [1,2,3,5]; console.log(d);//5
对象解构
ES5: let obj = new Object(); obj.name = "张三"; obj.age = "22"; console.log(obj.name);//张三 ES6: let obj = new Object(); obj.name = "张三"; obj.age = "22"; let {age:age,name:name} = obj; console.log(name,age);//张三 22
字符串解构
ES5: var res = "晚上好"; console.log(res[2]);//好 let[a,b,c] = "晚上好"; console.log(b);//上
函数参数解构
function show({name,age}){ //以前 // var name = obj.name; console.log(name);//李四 //现在 console.log(name,age);//李四,23 } let obj = { name:"李四", age:"23" } show(obj);
相关文章推荐
- 如何理解es6语法的,对象前面加三个点(...) 对象的解构赋值和扩展
- es6语法-解构赋值
- ECMAScript6(ES6)标准之解构赋值语法及应用
- 复习es6-解构赋值+字符串的扩展
- ES6 变量的解构赋值
- ES6:解构赋值
- ES6解构赋值
- ES6学习总结之解构赋值及字符串模板
- es6基础回顾--解构赋值
- 16、ES6 数值和布尔值的解构赋值
- es6 剩余参数+ 解构赋值+默认值
- ES6:变量的解构赋值
- ES6新特性 let、const、变量对象的解构赋值
- es6 变量的解构赋值
- js 交换赋值我认为最简单的方法 (ES6解构)
- ES6新特性四:变量的解构赋值实例
- ES6笔记(3)-- 解构赋值
- ES6变量解构赋值
- ES6解构赋值
- JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)