读书笔记-es6变量的解构赋值

变量的解构赋值

这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

一、数组的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定

let [a, b, c] = [1, 2, 3]
a // 1
b // 2
c // 3
let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]

• 默认值

let [foo = true] = [];
foo // true

栗子：

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

二、对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

• 默认值

var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5

栗子：

• 将现有对象的方法，赋值到某个变量。

//将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上
let { log, sin, cos } = Math    
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

• 提取json数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

三、字符串的解构赋值

const [a, b, c, d, e] = 'hzzly'
a // "h"
b // "z"
c // "z"
d // "l"
e // "y"

//length属性
let {length : len} = 'hello';
len // 5

四、函数参数的解构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

Github地址： https://github.com/hzzly/learn-es6