您的位置:首页 > 其它

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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: