【学习记录6】ES6解构：使数据访问更便捷

1.对象解构

let node = {

  type: 'identifier',

  name: 'wenhui'

}

let { type, name } = node

console.log(type)  // identifier

console.log(name)  // wenhui

//  在这段代码中，node.type的值被存储在名为type的变量中；node.name的值被存储在名为name的变量中。

2.解构赋值

let node = {

  type: 'identifier',

  name: 'wenhui'

},

type = 'listeral',

name = 6

( { type, name } = node )

console.log(type)  // identifier

console.log(name)  // wenhui

/*
 在这个实例中，声明变量type和name时初始化了一个值，在后面几行中，通过解构赋值的方法，从node对象读取相应的值重新为这两个变量赋值。

    请注意，一定要用一对小括号包裹解构赋值语句，javascript引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将语句转化为一个表达式，从而实现整个解构赋值的过程。
*/

3.为非同名局部变量赋值

 let node = {

  type: 'identifier',

  name: 'wenhui'

}

let { type: localType, name: localName } = node

console.log(localType)  // identifier

console.log(localName )  // wenhui

 4.嵌套对象解构

let node = {
  type: 'identifier',
  name: 'wenhui',
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  }  
}
let { loc: { start } } = node
console.log(start.line)  // 1
console.log(start.column)  // 1
// 在这个实例中，我们在解构模式中使用了花括号，其含义子在找到node对象中的loc属性后，应当深入一层继续查找start属性。在上面的解构中，所有的冒号前的标识符都代表在对象中的检索位置，其右侧为被赋值的变量名；如果冒号后是花括号，则意味着要赋予的最终值嵌套在对象内部更深的层级中。
// 下面的实例使用了一个与对象属性名不同的局部变量名；


let { loc: { start: localStart } } = node
console.log(localStart .line)  // 1
console.log(localStart .column)  // 1

// 在这个版本中，node.loc.start被存储在了新的局部变量localStart中。解构模式可以应用于任意层级深度的对象，且每一层都具备同等的功能。

5.数组解构

let colors = ['red', 'green', 'blue']
let [first, second] = colors

console.log(first) // red
console.log(second) // green

/*
  在这段代码中，我们从colors数组中结构出了‘red’和‘green’这两个值，并分别存储在变量first和变量second中。在数组解构语法中，我们通过值在数组中的位置进行选取，且可以将其存储在任意变量中，未显示声明的元素都会直接被忽略。
  切记，在这个过程中，数组本身不会发生任何变化。 
*/

// 如果想取数组中第3个值，则不需要提供第一个和第二个元素的变量名称。
let [ , , third] =  colors
console.log(third) // blue

/*
  这段代码使用解构赋值语法从colors中获取第3个元素，third前的逗号是前方元素的占位符，无论数组中的元素有多少个，你都可以通过这种方法提取想要的元素，不需要为每一个元素都指定变量名。
*/

6.es6中的交换变量

let a = 1, b = 2
[a, b] = [b, a]
// 在这个示例中，数据解构赋值看起来像是一个镜像。赋值语句左侧（也就是等号左侧）与其他数组解构示例一样，是一个解构模式。右侧是一个为交换过程创建的临时数组字面量。代码执行过程中，先解构临时数组，将b和a的值复制到左侧数组的前两个位置，最终结果是变量交换了他们的值。

// 如果右侧数组解构赋值表达式的值为null或undefined，则会导致程序抛出错误，这一特性与对象解构赋值很相似。

7.嵌套数组解构

let colors = ['red', [ 'green', 'lightgreen'], 'blue' ]
let [ first, [second] ] = colors
console.log(first) // red
console.log(second) // green

/*
  在此示例中，变量second引用的是colors数组中的值‘green’，该元素包含在数组内部的另一个数组中，所以second两侧的方括号是一个必要的解构模式。同样，在数组中也可以无限深入去解构，就像在对象中一样。
*/

8.不定元素解构

let colors = [ 'red', 'green', 'blue' ]
let [ first, ...rests ] = colors
console.log(first) // red
console.log(rests.length) // 2
console.log(rests[0]) // green
console.log(rests[1]) // blue

/*
  数组colors中的第一个元素被赋值给了first，其余的元素被赋值给rests数组，所以rests包含两个元素‘green’和‘blue’。不定元素语法有助于从数组中提取特定元素并保证其余元素可用，他还有另外一个有趣的应用。复制
*/

let [ ...clonedColors ] = colors
console.log(clonedColors) // [ 'red', 'green', 'blue' ]

9.混合解构

let node = {
  type: 'identifier',
  name: 'wenhui',
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  },
  range: [0, 3]
}

let {
  loc: { start },
  range: [ startIndex ]
} = node

console.log(start.line) // 1
console.log(start.column) // 1
console.log(startIndex) // startIndex

/*
  这段代码分别将node.loc.start和node.range[0]提取到变量start和startIndex中。解构模式中的loc:he range:仅代表他们在node对象中所处的位置（也就是该对象的属性）。当你使用混合解构的语法时，则可以从node提取任意想要的信息。这种方法极为有效，尤其是当你从JSON配置中提取信息是，不再需要遍历整个解构了。
*/