ES6中的解构赋值

ES6中的解构赋值

按照原有值的解构,把原有值中的某一部分内容快速获取到(快速赋值 给一个变量)

数组的解构赋值

解构赋值本身是ES6的语法规范,使用什么关键字来声明这些变量是无所谓的

let ary = [12,23,34];

//传统的取值赋值操作
// let a = ary[0],
//     b = ary[0],
//     c = ary[0];
//
// console.log(a, b, c);
//1
let [a,b,c] = [12,23,34];
console.log(a, b, c);//12,23,34
//2
var [a,b,c] = [12,23,34];
console.log(a, b, c);//12,23,34
//3
[a,b,c] =[12,23,34];
console.log(a, b, c);//12,23,34
//此处相当于给window加全局属性,但是严格模式下不可以出现非使用var/let等声明变量    "use strict"
//4
~function () {
    [a,b,c] =[12,23,34];
    //此处相当于给window加全局属性,但是严格模式下不可以出现非使用var/let等声明变量
    console.log(a, b, c);//12,23,34
}();

//5
~function () {
    [a,b,c] =[12,23,34];
    //此处相当于给window加全局属性,但是严格模式下不可以出现非使用var/let等声明变量
}();
console.log(a, b, c);//12,23,34
//6
~function () {
    let [a,b,c] =[12,23,34];
    //私有属性
}();
console.log(a, b, c);//报错

多维数组的解构赋值,可以让我么能快速获取到需要的结果

//let ary = [12,[23,34],[45,56,[67,78]]];
//let A = ary[1][1];
let [,[,A],[,B,[,C]]] = [12,[23,34],[45,56,[67,78]]];
console.log(A, B, C);//34 56 78

如果只想获取数组中前面的某几项内容,后面的结构不需要补全

let [D] = [12,23,34];
console.log(D); 
let [,E] = [12,23,34];
console.log(E); //=>23

在解构赋值中,我们可以给某一项设置默认值

let [,,,E] = [12,23,34];
console.log(E); //=>undefined

let [,,,F = 0] = [12,23,34];
console.log(F); //=>0

在解构赋值中,支持...xxx的拓展运算符

let [A,...B] = [12,23,34,45,56];
console.log(A, B);//->12 [ 23, 34, 45, 56 ]

let [...C] =[12,23,34,45,56];
console.log(C);//[ 12, 23, 34, 45, 56 ] 数组克隆
let [E,...D,F] = [12,23,34,45,56];
console.log(E, D, F);//Rest element must be last element拓展运算符只能出现在解构赋值中的末尾
let[G,,,...H] = [12,23,34,45,56];
console.log(G, H); //12 [ 45, 56 ]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值