ES6入门(二)

目录

• ES6入门(二)
  • es6之解构赋值
    • 数组的解构赋值
    • 对象的解构赋值
    • 字符串的解构赋值
    • 数值和布尔值的解构赋值
    • 函数参数的解构赋值
    • 圆括号问题

ES6入门(二)

es6之解构赋值

数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

// 之前我们给变量赋值
let a = 1;
let b = 2;
let c = 3;

//解构赋值
let [a,b,c] = [1,2,3]  //对应位置值相同

解构赋值还可以嵌套赋值

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

// 如果对应位置没有要赋值的量 用逗号代替
let [, , third] = ['a','b','c']
console.log(third) // c

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

解构不成功就会显示 undefined

let [x,y, ...z] = ['a']
console.log(x) // a
console.log(y) // undefined
console.log(z) // undefined

不完全解构,解构依然可以成功

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

如果等号的右边不是数组 (严格的说，必须是可以遍历的的解构) 下面的例子都是 undefined

let [foo] = 1;
let [foo] = false;
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}

注意: 解构赋值也允许默认值

let [foo = true ] = []  
console.log(foo) //true 因为没有赋值 所以 foo是默认值

注意：ES6内部使用严格相等运算符(===)，判断一个位置是否有值。所以只有当一个数组成员严格等于undefined，默认值才会生效

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

特殊情况：

let [x = 1,y = x] = []  // x=1 y=1
let [x = 1,y = x] = [2] // x=2 y=2
let [x = 1,y = x] = [1,2] // x=1 y=2
let [x = y,y = 1] = []; // ReferenceError: y is not defined

在最后一个例子当中 [x = y,y = 1] 在这个 [] 数组当中 相当于一个独立的作用域 在第一个赋值操作中 x=y,因为 y 还没有声明就使用了这个 y ,所以根据我之前提到过的 let 当中声明变量的 暂时性死区 所以会报错。

对象的解构赋值

在对象的解构赋值当中 解构的变量 需要与对象当中的key值对应

let {a,b} = {a:'abc',b:'bcd'} 
console.log(a) // abc
console.log(b) // bcd
let { c } = {a:'abc',b:'bcd'} 
console.log(c) // undefined

使用对象的解构赋值，可以方便地将现有对象的方法，赋值到某个变量

let {log , sin, cos} = Math

const {log} = console
log("helo,world") // hello,world

在上面的代码当中，将 Math 对象的 对数 、正弦、余弦 三个方法，赋值到对应的变量上，使用起来就方便很多。

第二个例子将 console.log 赋值到 log 变量上。 如果变量名与属性名不一致，必须写成下面这样

如果 变量名与属性名不一致,或者我们不想沿用对象里的属性名时，我们必须写成这样

let obj = {first:'hello',last:'world'}
let {first: f, last: l} = obj
console.log(f) // hello
console.log(l) // world

这实际上说明，对象的解构赋值是下面形式的简写 。 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

let {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'} 

let { foo:a } = {foo:'aaa',bar:'bbb'}
console.log(a) // aaa
console.log(foo) // error: foo is not defined 

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

在解构赋值当中，也可以嵌套使用

let obj = {
    p:[
        'hello',
        { y:'world'}
    ]
}

let { p, p:[x,{y}]} = obj
console.log(x)     // hello
console.log(y)     // world
console.log(p)     // ["hello",{y: "world"}]

let obj = {} 
let arr = []

({ foo: obj.prop, bar: arr[0] } = { foo:123, bar:true })
console.log(obj) //  obj.prop = 123  {prop:123}
console.log(arr) //  arr[0] = true   [true]

如果解构赋值是嵌套的对象，而且当子对象所在的父属性不存在，那么就会报错

let { foo: {a}} = {a:'123'}  // 报错

在对象的赋值当中。undefined 才可以使用默认值

特殊情况

如果要将一个已经声明的变量用于解构赋值，必须小心

// 错误的写法
let x ;
{x} = {x:1} 
// SynaxError：syntax error

// 正确的写法
let x;
({x} = {x: 1});

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length:len} = 'hello'
len // 5

类似数组的对象都有一个 length属性，因此还可以对这个属性解构赋值

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError

let { prop: y } = null; // TypeError

函数参数的解构赋值

function add([x,y]) {
    return x + y
}
add([1, 2]) // 3

[[1,2], [3,4]].map(([a,b]) => a + b) // [ 3, 7]

函数参数解构赋值也可以使用默认值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

圆括号问题

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。

由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。