导航
导航
文章目录
  1. 变量的解构赋值
    1. 一、数组的解构赋值
      1. 栗子:
    2. 二、对象的解构赋值
      1. 栗子:
    3. 三、字符串的解构赋值
    4. 四、函数参数的解构赋值

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

变量的解构赋值

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

一、数组的解构赋值

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

1
2
3
4
5
6
7
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]
  • 默认值
1
2
let [foo = true] = [];
foo // true

栗子:

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

二、对象的解构赋值

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

1
2
3
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
  • 默认值
1
2
3
4
5
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5

栗子:

  • 将现有对象的方法,赋值到某个变量。
1
2
3
4
5
6
7
8
9
10
//将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上
let { log, sin, cos } = Math
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
  • 提取json数据
1
2
3
4
5
6
7
8
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

三、字符串的解构赋值

1
2
3
4
5
6
const [a, b, c, d, e] = 'hzzly'
a // "h"
b // "z"
c // "z"
d // "l"
e // "y"
1
2
3
//length属性
let {length : len} = 'hello';
len // 5

四、函数参数的解构赋值

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

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