es6中变量的解构赋值

责编:menVScode 2018-02-21 16:12 阅读(507)

        ECMAScript 6.0(简称ES6)是继 ECMAScript 5.1 之后 JavaScript 语言下一代标准,发布在2015年6月。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

        变量的解构赋值基本概念

        本质上就是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值。

let a=1;
let b=2;
let c=3;
//上述变量赋值结果等价于下面的赋值结果。
let [a,b,c] = [1,2,3]
console.log(a,b,c) //1 2 3

        结构赋值主要分为

        1. 数组的解构赋值

        方式1

let [a,[[b],c]] = [1,[[2],3]]
console.log(a,b,c) //1 2 3

        方式2

let [,,c] = [1,2,3]
console.log(c) //3

        方式3

let [x] = []
console.log(x) // let x; undefined

        方式4:可以预先指定默认值

let [y=1] = []
console.log(y) // 1


        2. 对象的解构赋值

        方式1:左边变量名与右边属性名一致

let {a,b} = {b:2,a:1}
console.log(a,b) // 1 2

        方式2:左边变量名与右边属性名不一致

let {a:b,c:d} = {a:1,c:3}
console.log(b) // 1
console.log(d) // 3
console.log(a) // 报错:a is not defined


        3. 基本类型的解构赋值

        [1] 字符串的解构赋值

let [a,b,c,d] = '1234'
console.log(a,b,c,d) // 1 2 3 4

        [2] 字符串length的解构赋值(一定要是length单词)

let {length: len} = 'menvscode' 
console.log(len) // 9

        [3] 对数值/布尔值解构赋值

let {toString: ts} = 1
let {toString: bs} = true
console.log(ts) // function toString() { [native code] }
console.log(bs) // function toString() { [native code] }
console.log(ts===Number.prototype.toString) // true
console.log(bs===Boolean.prototype.toString) // true

        [4] null 与 undefined 不能进行解构赋值,否则会报错。

标签: 解构赋值 es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码