【ES6】JavaScript-变量的解构赋值-数组解构-对象解构-对象的属性-对象的方法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

1. 数组的解构

只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值

let a = 1; //以前，为变量赋值，只能直接指定值
let b = 2;
let c = 3;
// ES6等价写法 可以从数组中提取值，按照对应位置，对变量赋值
let [a, b, c] = [1, 2, 3];

一个小例子

cosnt F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;

console.log(xiao); // 小沈阳
console.log(liu); // 刘能
console.log(zhao); // 赵四
console.log(song); // 宋小宝

使用嵌套数组进行解构

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined // 如果解构不成功，变量的值就等于undefined
z // []

不完全解构

等号左边的模式，只匹配一部分的等号右边的数组

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

2. 对象的解构

有一个对象

let person = {
    
    
	name: 'YK',
	age: 18
};

不使用对象解构需要这样

let personName = person.name;
let personAge = person.age;
console.log(personName, personAge); // YK 18

使用完整的对象解构

let {
    
    name: personName, age:personAge} = person;
console.log(personName, personAge); // YK 18

使用简写的对象解构

let {
    
    name, age} = person;
console.log(name, age); // YK 18

变量必须与属性同名，才能取到正确的值

两种情况

// 1. 不匹配的情况
let {
    
    name, job} = person;
console.log(name, job); // YK undefined
// 2. 赋默认值
let {
    
    name, job='student'} = person;
console.log(name, job); // YK student

一个小例子

const zhao = {
    
    
	name: '赵本山',
	age: '不详',
	xiaopin: function(){
    
    
		console.log("我可以演小品");
	}
};

let {
    
    name, age, xiaopin} = zhao;
console.log(name); // 赵本山
console.log(age); // 不详
console.log(xiaopin); // f(){console.log("我可以演小品");}

xiaopin(); // 我可以演小品
	

3. 解构的用途

1. 交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

2. 从函数返回多个值

// 返回一个数组

function example() {
    
    
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
    
    
  return {
    
    
    foo: 1,
    bar: 2
  };
}
let {
    
     foo, bar } = example();

3. 函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) {
    
     ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({
    
    x, y, z}) {
    
     ... }
f({
    
    z: 3, y: 2, x: 1});

4. 解构内部

• 解构在内部使用函数ToObject()把源数据解构转换成对象
• 原始值会被当成对象，而null与undefined不能解构

5. 几个注意点

1. 嵌套解构——浅赋值
2. 部分解构——无“回滚”

参考资料

1. 尚硅谷ES6教程 https://www.bilibili.com/video/BV1uK411H7on?p=6
2. 阮一峰ES6教程 https://es6.ruanyifeng.com/#docs/destructuring
3. JavaScript高级程序设计(第四版)P216 -220 https://www.ituring.com.cn/book/2472