ES6基础-解构赋值

ES6解构赋值

解构：ES6中允许按照一定的模式，从数组和对象中提取相关的信息片段，然后对变量进行赋值,常见的解构赋值：数组，对象， 字符串...

1. 数组解构

    let [a, b, c] = [10, 20, 30]
 console.log(a, b, c) // 10, 20, 30  let [a, b, c] = [{name: 1}, {name: 2}, {name: 3}]  console.log(a, b, c) // {name: 1}, {name: '2'}, {name: '3'}  let [a, ...rest] = [1,2,3,4,5]  console.log(a, rest) // 1, [2,3,4,5]  let [a, [b], c] = [1, [2, 3], 4]  console.log(a, b, c) // 1 [2, 3], 4  let [a, b, c] = [1]  console.log(a, b, c) // 1, undefined, undefined [默认解构]  let [x = 1] = [undefined] // x = 1  let [x = 1] = [null] // x = null  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] = [] // 报错 

2. 对象的解构

对象的具有相同的变量的位置,可以提起对象中对应的变量值, 数组的元素是按次序排列的，变量的取值有它的位置决定； 对象的属性没有次序，变量必须和属性同名，才能取到对应的值

  let {a, b} = {a: 1, b: 2} // a=1 b=2  let {a, b} = {b: 3, a: 4} // a=4 b=3  let { c } = {b: 3, a: 4} // undefined [修改变量名]  let {foo: baz} = {foo: 'aaa', bar: 'bbb'} // baz='aaa'  let { first: f, last: l } = {first: 'hello', last: 'world'} // f:hello l:world [对象解构的内部机制：先找到同名属性，然后在赋值对应的变量]  let {foo: foo, bar: bar} = {foo: 'aaa', bar: 'bbb'} [解构的嵌套结构的对象]  let obj = { p: [ "hello", {y: 'world'} ] }  let {p: [x, {y}]} = obj // x: hello y:world [对象的解构默认值]: 默认值生效的条件是，对象的属性值严格等于undefined  let {x = 3} = {} // x = 3  let {x, y = 5} = {x: 1} // x=1 y= 5  let {x: y=3} = {} // y=3  let {message: msg="something went wrong"} = {} // msg=something went wrong 

3. 字符串的解构赋值

字符串的解构赋值，实质就是把字符串被转换成了一个类似数组的对象

   const [a, b, c, d, e] = 'hello'
   let {length: len} = 'hello' // 5 

4. 数值和布尔的解构赋值

解构赋值时，如果等号右边的数值是布尔值，则会先转化为对象 解构的规则是：只要等号右边的值不是对象或数组，就将其先转化对象，由于undefined和null 无法转换为对象，所以对他们进行解构赋值就是报错

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

5. 函数参数的解构赋值

  function add([x,y]) {
    return x + y } add([1, 2])  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] [for 循环]  var arr = [[11, 12], [21, 22], [31, 32]]  for (let [a, b] of arr) { console.log(a, b) } [循环解构对象]  var arr = [{name: 'chris', age: 26}, {name: 'jack', age: 27}, {name: 'peter',age: 28}];  for (let {age, name} of arr) { console.log(name, age) } 

7. 应用情况
   1. 在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构
   2. 在自己定义函数是，如果调用者传来的是数组和对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构
   3. 在调用第三方函数的时候，如果该函数接受多个参数,并且传入的是数组,则使用扩展运算符

转载于:https://www.cnblogs.com/kuishen/p/11016975.html