ES6----变量的解构赋值

1、基本用法

解构赋值:ES6允许按照一定模式将数组和对象中的值按照一定顺序提取出来,对变量进行赋值。其本质是“匹配模式”,只要等号两侧模式相同,变量就会赋予对应的值。

//ES5
let a = 1;
let b = 2;
let c = 3;

//ES6
let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3


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

如果结构不成功,变量值则会是undefined,解构赋值还有一种不完全解构模式,即等号右边只能匹配到左边的一部分,这种情况依然可以赋值成功。

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

2、对象的解构赋值

解构不仅可以用于数组,还可以用于对象,只不过不同的是数组是按照位置赋值,对象则是根据变量以及属性名称进行赋值,这也就要求我们在对对象进行解构赋值时等号两侧的变量与属性名称要一致才能成功。

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

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

如果变量名与属性名不一致,则必须按照下面形式来写

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

从上面的例子可以看出来对象的解构赋值是先找到同属性名,然后再赋值,真正赋值的是变量。上面例子中foo为匹配模式,baz才是变量。

3、字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

4、常用方法

变量值的交换

let x = 1;
let y = 2;

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

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]

函数参数的定义

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

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

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 4,392评论 0 0
  • 基本概念 只要某种数据结构具有Iterator接口都可以采用解构赋值和for of循环 如:1数组(有序)2对象(...
    coolheadedY阅读 1,868评论 0 0
  • 针对ES6的变量赋值的有六种方式 默认数组对象字符串数值与布尔值函数 1,解构赋值允许指定默认值。 2,数组的解构...
    sponing阅读 1,544评论 0 1
  • 1、数组的解构赋值 1.1、基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构...
    壮哉我大前端阅读 2,958评论 0 1
  • 1、数组的解构赋值 1.1、基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构...
    开车去环游世界阅读 1,292评论 0 0

友情链接更多精彩内容