解构赋值

作用域

let 和 var

1. let 在声明前不可被使用，var 可以
2. let 不可在通作用于在重复声明（注意同作用域这个条件）
3. const 声明的值不可被改变,且需要声明时即赋值，其他与let基本相同
4. const 声明基本数据类型和对象时的区别： 基本数据类型 时，变量里存放的是存放变量的地址，而对象时存放的指向对象值得地址的指针，由此引发的当你往对象里存入值时并不影响原始指针，所以添加新的属性和改变值均没有问题。
5. Object.freeze（） 的使用，它会返回某个对象冻结和新对象，但是深层嵌套的对象则不糊受到影响

6. 没有写明 var 变量声明会出现的问题： 会将它变为一个window下的一个属性

   a = 1 window.a // 1

解构赋值

数组用法

let a =  1
let b = 2
let c = 3

let [ a , b , c ]  = [3,4,5]  // 快速赋值的方法，从数组中取出值
//按照顺序对 对应位置的的变量进行赋值

使用...

let [head,...tail] = [1,[2,3,4]]
console.log(tail) // [Array(3)]
console.log(tail[0]) // [2,3,4]

let [head,...tail] = [1,2,3,4]
console.log(tail) // [2,3,4]

将除了显示声明的变量及其赋值以外的值放入 ...后的变量里,此变量将会是一个承载后面值得数组,此方法声明的变量在赋值时右值需要是数组形式
let [foo] = false 就会报错

默认值得使用

let [ x = 1 ] = [undefined] // x => 1
let [y = 2]  = [null] // y => null

即在对应右值中数组成员等于 undefined时才会生效

当默认值是一个函数时

function f() {
   console.log(a hello)
} 

let [x = f()] = [1] //虽然这里的f()应该会被立即执行，
但是并没有，除非右值是undefined

将变量用作默认值，需要在使用前变量已经声明才行
let [x = 1, y = x] let [x = y, y = 1] //错误，此时y还没有被声明

对象的结构赋值

对象的结构赋值按照属性名称来对应，不是数组那样按照对应位置，且必须变量与属性同名，才能得到对应的值

let {obj , obj2} = {obj: "a", obj2: "b"}

---

let [obj:obj , obj2:obj2] => let {obj , obj2}

在 let [obj:obj , obj2:obj2]中 第一个obj用来作为匹配的，后面obj将会是被赋值的变量，所以当你需要使用不同名的变量进行赋值时只需要将第一个obj改成你需要的用到的属性名即可

let {obj: obj2} = {obj: "3" }

---

深层嵌套的赋值则会用到这种“匹配原则”

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}

let { loc, loc: { start }, loc: { start: { line }} } = node
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

// 赋值
let obj = {};
let arr = [];

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

obj // {prop:123}
arr // [true]

子对象的赋值

let {foo: {bar}} = {baz: 'baz'};

将某个方法 赋值给变量

let {sin} = Math

字符串的解构赋值

const [ a, b , c , d , e ] = "hello"

let  {length: len} = "hello"
console.log(len) //5

数组和布尔值的解构赋值

当右值不是对象和数组时，就先将其转换为对象然后进行解构赋值

let {toString: s} = 123

let {toString: s } = true

函数参数的解构赋值

function sum ([a,b]) {
    return a + b
}

sum([2,3]) // 5

虽然传入的是一个数组，但是当成变量来使用
[[1, 2], [3, 4]].map(([a, b]) => a + b)

---

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
// 形式参数的默认值

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
// 实参的默认值

最终会将传入的对象参数解构成变量分别赋值以供使用

其他使用

交换变量的值

let x = 1
let y = 2
[x , y] = [y , x] 

返回对象和数组格式的值

function rArray() {
    return [1,2,3,4]
}

let [ a , b , c , d ] = rArray()
// 返回数组

function rObj() {
    return {
      a: "hello",
      b: "world"
    }
}

let {a, b} = rObj()
// 返回对象


function f([x, y, z]) { ... }
f([1, 2, 3])
// 参数是一组有次序的值


function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})
// 参数是一组无次序的值

提取JSON中的值

let jsonData = {
    id： 22,
    status: "OK',
    data : [22,33]
}

let {id, status , data: number} = jsonData
console.log(id , status , number)

获取对象中的键值

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

加载模块

const { SourceMapConsumer, SourceNode } = require("source-map")

(文参考自阮一峰老师的文章，仅供自己学习记录使用，如要准确详尽请自行查阅更多资料)[http://es6.ruanyifeng.com/#docs/destructuring]

转载于:https://www.cnblogs.com/daixixi/p/9530245.html