Javascript ES6系列（2）

理解：解析某一数据的结构，将想要获取的东西取出来，赋值给变量或常量。

javascript">javascript">const [a, b, c] = [1, 2, 3]
console.log(a, b, c) //1 2 3

数组的解构赋值

使用要求：左右都是数组

产生结果：索引值相同的完成赋值

javascript">javascript">const [a, [ , b, ], c] = [1, [2, 3, 4], 5]
console.log(a, b, c) //1 3 5

默认值

javascript">javascript">const [a, b] = []
console.log(a, b) //undefined undefined
const [c = 3, d = 7] = []
console.log(c, d) //3 7

特别说明：只有当数组元素严格等于（===）undefined 时，对应的默认值才会生效，如下述代码

javascript">javascript">const [a = 1, b = 2] = [3, 0]
console.log(a, b) //3 0
const [c = 1, d = 2] = [3, null]
console.log(c, d) //3 null
const [e = 1, f = 2] = [7]
console.log(e, f) //7 2

默认值是表达式的情况

javascript">javascript">const fn1 = () => {
  console.log('fn1执行了')
  return 20
}
const [a = fn1()] = [10]
console.log(a) //10
const [b = fn1()] = []
console.log(b) //fn1执行了 20
上述代码说明默认值表达式是惰性求值的，只有当默认值生效了，它才会执行

常见应用举例

交换变量

javascript">javascript">es6before
var a = 10;
var b = 100;
var temp;
temp = a;
a = b;
b = temp;
console.log(a, b) //100 10
es6after
let a = 10;
let b = 100;
[a, b] = [b, a];
console.log(a, b)  //100 10

函参解构赋值

javascript">javascript">es6before
var arr = [2, 3]
function add(arr) {
  console.log(arr[0] + '+' + arr[1] + '=' + (arr[0] + arr[1]))
}
add(arr) //2+3=5
es6after
const arr = [2, 3]
const add = ([a, b]) => {
  console.log(`${a}+${b}=${a + b}`)
}
add(arr) //2+3=5

类数组解构赋值

javascript">javascript">es6before
function add() {
  console.log(arguments[0] + arguments[1])
}
add(1, 2) //3
es6after
function add() {
  const [a, b] = arguments
  console.log(a + b)
}
add(1, 2) //3

对象的解构赋值

使用：两边都是对象

效果：属性名相同的完成赋值

javascript">javascript">const { age, name } = { name: 'khkkm', age: 18 }
console.log(age, name) //18 'khkkm'

默认值

javascript">javascript">const { name = 'khkkn' } = {}
console.log(name)  // khkkm

特别说明：只有当数组元素严格等于（===）undefined 时，对应的默认值才会生效，如下述代码

javascript">javascript">const { name = 'khkkn' } = { name: null }
console.log(name)  // null

默认值是表达式的情况

javascript">javascript">const fn1 = () => {
  console.log('fn1执行了')
  return 20
}
const { a = fn1() } = { a: 10 }
console.log(a) //10
const { b = fn1() } = {}
console.log(b) //fn1执行了 20
上述代码说明默认值表达式是惰性求值的，只有当默认值生效了，它才会执行

如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

javascript">javascript">let x = 2;
({ x } = { x: 1 })
console.log(x) //1

可以拿到继承的属性

javascript">javascript">const { toString } = {}
console.log(toString) //ƒ [Function: toString]

常见应用举例

函参解构赋值

javascript">javascript">es6before
function fn(obj) {
  console.log(obj.name, obj.age)
}
fn({ name: 'khkkm', age: 18 }) //khkkm 18
es6after
const fn = ({ name, age }) => {   //理解：{name,age} = {name:'khkkm',age:18}
  console.log(name, age)
}
fn({ name: 'khkkm', age: 18 })  //khkkm 18

复杂嵌套

javascript">javascript">es6before
const obj = {
  a: 1,
  b: [2, 3, 4],
  c: {
    d: 5,
    e: 6
  }
}
console.log(obj.b[1], obj.c.d) //3 5
es6after
const {
  a,
  b: [b1, b2, b3],
  c: {
    d: d1,
    e: e1
  }
} = obj
console.log(b2, d1) //3 5

其它的解构赋值

字符串

javascript">javascript">//数组
const [a, b, , , c] = 'khkkm';
console.log(a, b, c) //k h m
//对象
const { 0: a, 1: b, 4: c, length } = 'khkkm'
console.log(a, b, c, length) //k h m 5

数值和布尔值的解构赋值（先将等号右边的值转为对象）

javascript">javascript">//对象
const { toString } = 123
console.log(toString) //[Function: toString]
const { toString } = true
console.log(toString) //[Function: toString]

undefined和null没有解构赋值（因为它们无法转换为对象）