JS解构用法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

JS解构用法

• 中括号解构

var [x,y,z] = [10,20,30];
alert(x + ',' + y); // 10,20
var [x,[a,b],y] = [10,[20],40];
alert(a + "," + y); // 20,40
alert(b); // undefined

• 大括号解构

var {name,age,sex} = {
    age: 18,
    name: "钢铁侠",
    sex: "男"
}
alert(name); // 钢铁侠
alert(age); // 18
alert(sex); // 男

使用解构的好处

• 交换两个数

var [x,y] = [10,20];
alert(x + "," + y); // 10,20
[x,y] = [y,x];
alert(x + "," + y); // 20,10 

• 函数可以返回多个值

function show(){
    return["结果1","结果2","结果3"];
}
var [a,b,c] = show();
alert(a + c); // 结果1结果3

• 函数定义函数，和传入参数的顺序改变 【注】参数可以带默认值

// 一般写法
function showSelf(name,age,sex){
    alert("我叫" + name + ",今年" + age + ",性别" + sex); 
}
showSelf("小明",18,"男"); // 我叫小明,今年18,性别男

// 解构写法
function showSelf({name,age,sex = "男"}){
    alert("我叫" + name + ",今年" + age + ",性别" + sex); 
}
showSelf({
    age: 18,
    name: "小明"
}) // 我叫小明,今年18,性别男

• 可以快速取出数组中的某一个元素

var arr = [10,20,30,40,50];
var {0:first,4:last} = arr;
alert(first); // 10
alert(last === arr[4]); // true