深入理解ES6 005【学习笔记】

解构：使用数据访问更便捷

如果使用var、let或const解构声明变量，则必须要提供初始化程序（也就是等号右侧的值）如下会导致错误

// 语法错误
var {tyep,name}

// 语法错误
let {type,name}

// 语法错误
const {type,name}

使用解构给已经声明的变量赋值，哪下

let node = {
  type:"Identifier",
  name:"foo"
},
type = "Literal",
name = 5;

// 使用解构语法为多个变量赋值 ，请注意一定要使用小括号包裹解构赋值的方法（js引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句侧，添加小括号后可以将语句转化为一个表达式
({type,name}=node)
console.log(type) // Identifier
console.log(name) // foo

解构赋值表达式的值与表达式右侧（也就是=右侧）的值相等，如此一来，在任何可以使用值的地方你都可以使用解构赋值表达式，如下：

let node = {
  type:"Identifier",
  name:"foo"
},
type = "Literal",
name = 5;

function outputinfo(value){
  console.log(value===node); // true
}

outputinfo({type,name} = node);

console.log(type) // "Identifier"
console.log(name) // "foo"
// 表达式的值为右侧的值，这个写法是value传的是node,并给type和name进行了赋值
// 调用outputInfo()函数时传入了一个解构表达式，由于javascript表达式的值为右侧的值，因此此处传入的参数等同于node，且变量type和name被重新赋值，最终将node传入outputInfo()函数

解构赋值表达式（也就是=右侧的表达式）如果为null或undefined会导致程序抛出错误。任何尝试读取null或undefined的属性的行为都会触发运行时错误。

默认值

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined

let node = {
  type:"Identifier",
  name:"foo"
}
let {type,name,value} = node;
console.log(type) //Identifier
console.log(name) // foo
console.log(value) // undefined

// 默认值 当指定属性不存在时，可以随意定义一个默认值，在属性名称后添加一个等号(=)和相应的默认值即可

let node = {
  type:"Identifier",
  name:"foo"
}
let {type,name,value=true} = node; // 只有当node上没有该属性或者该属性值为undefined时该值才生效
console.log(type) //Identifier
console.log(name) // foo
console.log(value) // true

非同名局部变量赋值

解构赋值使用的都是与对象属性同名的局部变量，例如，node.type的值被存储在了变量type中。但如果你希望使用不同命名的局部变量来存储对象属性的值，

let node = {
  type:"Identifier",
  name:"foo"
}
let {type:localType,name:localName="bar"} = node;
console.log(type) //Identifier
console.log(name) // foo

// 不同名本地变量，并使用默认值
let node = {
  type:"Identifier"
}
let {type:localType,name:localName="bar"} = node;
console.log(type) //Identifier
console.log(name) // bar

嵌套对象解构

解构嵌套对象仍然与对象字面量的语法相似，可以将对象拆解以获取你想要的信息

let node = {
  type:"Identifier",
  name:"foo",
  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

// 使用不同的名的本地变量来
let node = {
  type:"Identifier",
  name:"foo",
  loc:{
    start:{
      line:1,
      column:1
    },
    end:{
      line:1,
      column:4
    }
  }
}
let {loc:{start:localStart}} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1

下面这条语句，由于右侧只有一对花括号，因而其不会声明任何绑定，loc不是即将创建的绑定，它代表了在对象中检索属性的位置。

// 未声明任何变量！
let {loc:{}} = node

数组解构

与对象解构的语法相比，数组解构就简单多了，它使用的是数组字面量，且解构操作全部在数组内完成，而不是像对象字面量语法一样使用对象

let colors = ["red","green","blue"]
let [firstColor,secondColor]=colors
console.log(firstColor) //red
console.log(firstColor) // green
// 只为感兴趣的元素提供变量，切记，在这个过程中，数组本身不会发生任何变化
let [,,thirdColor] = colors;
console.log(thirdColor) // blue

数组解构赋值

数组解构赋值上下文，但不需要用小括号包裹表达式、

有关数组解构赋值的这些语法已经足够使用了，数组解构语法还有一个独特的用例：变量交换的应用

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

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

嵌套数组解构

let colors = ["red",["green","lightgreen"],"blue"];
// 
let [firstColor,[secondColor]] = colors;
console.log(firstColor); // red
console.log(secondColor); // green

不定元素

可以通过...语法将数组中的其余元素赋值给一个特定的变量，

let colors = ["red","green","blue"]
let [firstColor,...restColors] = colors;
console.log(firstColor) // "red"
console.log(restColors[0]); // green
console.log(restColors[1]); // blue

es5经常使用concat()方法来克隆数组，如果调用时不传递参数就会返回当前函数的副本。es6可以通过不定元素的语法来实现相同的目标

// es5
var colors = ["red","green","blue"];
var clonedColors = colors.concat();
console.log(clonedColors) // [red,green,blue]
// es6
let colors = ["red","green","blue"];
let [...clonedColors] = colors;
console.log(clonedColors); // [red,green,blue]

在被解构的数组中，不定元素必须为最后一个条目，在后面继续添加逗号会导致程序抛出语法错误，可以使用对象解构来创建更多复杂的表达式，如此一来，可以从任何混杂着对象和数组的数据解构中提取你想要的信息

let node = {
  type: "Identifier",
  name: "foo",
  loc: {
    start: {
      line: 1,
      column: 4
    },
    end: {
      line: 1,
      column: 4
    }
  },
  range: [0,3]
}

let {
  loc:{start},
  range:[startIndex]
}
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); 0

解构参数

当定义一个接受大量可选参数的javascript函数时，我们通常会创建一个可选对象，将额外的参数定义为这个对象属性

• 必须传值的解构参数
• 解构参数的默认值

function setCookie(name,value,{
  source = false,
  path = '/',
  domain = 'example.com',
  expires = new Date(Date.now()+360000*1000)
}){
  // 设置cookie的代码
}

setCookie("type","js",{secure:true,expires:60000})
// 解构参数有一个奇怪的地方，默认情况下，如果调用函数时不提供被解构的参数会导致程序抛出错误。如下，如果不传递第3个参数，会报错
// 程序报错！
setCookie("type","js");
// 缺失第3个参数，其值为undefined,而解构参数只是将解构声明应用在函数参数的一个简写方法，即如果解构赋值表达式右值为null或undefined，则程序会报错，同理，若调用setCookie()函数不传入第3个参数，也会导致程序抛出错误
// 好的做法是为其提供相同的默认值
const setCookieDefaults = {
  secure:false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now()+360000000)
}
function setCookie(name,value,{
   secure:false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now()+360000000)
}=setCookieDefaults) {
  // ....
}

在对象和数组解构中，都可以为值为undefined的对象属性或数组元素设置默认值，且赋值表达式右值不可为null或undefined，否则程序会抛出错误。可以使用var、let或const来解构声明变量，但按照语法规定必须要指定相应的初始化程序。