JavaScript的解构赋值

ES6中新增的结构赋值特别的方便,可以用于多种场合,例如值的转换、浅拷贝等。

解构赋值遵循 模式匹配 的原则,只要是左右格式一样,就能正常赋值。

解构时也可以起别名,使用冒号 :

数组解构赋值

let [x, y] = [1, 2];
console.log(x, y); //相当于 x=1,y=2

对象解构赋值

对象解构赋值的时候和顺序无关,只看对应的属性名和变量名。

//方式一
let obj = {
    name: "flying",
    age: "24"
}
let {name,age} = obj;

//方式二
let {name,age} = {name:"flying", age: "24"};

//方式三
let {age,name} = {name:"flying", age: "24"}
console.log(name); //flying
console.log(age);  //24

字符串解构赋值

也可以当作对象解构。

let [a,b,c,d,e,f] = 'flying';
console.log(a); //f

//知识点一:当作对象解构
//知识点二:起别名
let {length:len} = 'flying';
console.log(len); //6

函数参数的解构

let foo = ([x, y])=>{
    return x * y;
}

console.log( foo([6, 7]) ); //42

//也可以是二维数组
let arr = [
    [2,3],
    [4,5],
    [6,7]
];

let new_arr = arr.map(([x,y])=>{
    return x * y;
});

console.log(new_arr);  //[6, 20, 42]

解构赋值的应用

值的互换。

let x = 1;
let y = 2;
[y,x] = [x,y];
console.log(x, y); //结果是 y=1,x=2

数组合并。

let arr1 = [1,2,3]
let arr2 = [4,5,6]

arr1.push(...arr2)
console.log(arr1);	// 结果是 [1,2,3,4,5,6]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值