变量的结构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解耦;

1 数组的解耦赋值

以前,为变量赋值,只能直接指定值。

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 [ , , 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
z // []

如果解构不成功,变量的值就等于undefined

如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一个表达式)。

对于 Set 结构,也可以使用数组的解构赋值。

let [x, y, z] = new Set([‘a‘, ‘b‘, ‘c‘]);
x // "a"

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

默认值

解构赋值允许指定默认值。

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

let [x, y = ‘b‘] = [‘a‘]; // x=‘a‘, y=‘b‘
let [x, y = ‘b‘] = [‘a‘, undefined]; // x=‘a‘, y=‘b‘

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

function f() {
  console.log(‘aaa‘);
}

let [x = f()] = [1];

上面代码中,因为x能取到值,所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

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

上面最后一个表达式之所以会报错,是因为x用到默认值y时,y还没有声明。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

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

对象的解构与数组有一个重要的不同。

数组的元素是按次序排列的,

变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

如果变量名与属性名不一致,必须写成下面这样。

var { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ };
baz // "aaa"

let obj = { first: ‘hello‘, last: ‘world‘ };
let { first: f, last: l } = obj;
f // ‘hello‘
l // ‘world‘

这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
let foo;
({foo} = {foo: 1}); // 成功

let baz;
({bar: baz} = {bar: 1}); // 成功

上面代码中,let命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。

和数组一样,解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    ‘Hello‘,
    { y: ‘World‘ }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意,这时p是模式,不是变量,因此不会被赋值。

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc: { start: { line }} } = node;
line // 1
loc  // error: loc is undefined
start // error: start is undefined

上面代码中,只有line是变量,locstart都是模式,不会被赋值

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

上面代码对数组进行对象解构。数组arr0键对应的值是1[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于“属性名表达式”,参见《对象的扩展》一章。

对象的属性名对应数组的下标

函数参数的解构赋值

时间: 2024-11-10 17:46:28

变量的结构赋值的相关文章

JS ES6的变量的结构赋值

变量的结构赋值用户很多 1.交换变量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回.了解解构赋值,取值这些值非常方便 //返回一个数组 function example(){ return [1,2,3]; } let [a,b,c] = example();[a,b,c]; //[1,2,3] //

ES6-变量的结构赋值

比如有一个对象obj={name:'tom',age:11};,当我们需要将这个对象的name和age赋值给另外的变量时候,es5中是var name = obj.name;var age =obj.age;,在es6中针对这种将对象的属性(或者数组的值)赋值给外面的变量的需求,提供了一种更加简便的方式: //1 变量的解构赋值 let obj = {name:'tom',age:11}; //这种对象的结构赋值要求定义的变量名必须和对象的属性名一致,在这里必须是变量名必须是name和age /

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

c语言:通过指向结构体变量的指针变量输出结构体变量中成员的信息

通过指向结构体变量的指针变量输出结构体变量中成员的信息. 解:程序: #include<stdio.h> #include<string.h> int main() { struct Student { long int num; char name[20]; char sex[10]; float score; }; struct Student stu_1;//定义struct Student类型的变量stu_1 struct Student *p; p = &stu_

深入PHP变量存储结构 标签: PHP存储

1.深入PHP变量存储结构 标签: PHP存储  分类: 编程语言(10)  首先声明,我并没有去读PHP的源码,只是对于PHP的有时候诡异的表现感兴趣,找了一下开发人员laruence的博客结合PHP提供的函数debug_zval_dump刺探得到了本博客所阐述的工作机理.如果你想对PHP变量存储结构有一个了解或想对PHP变量加深理解的话,本文是适合你的,比较深入的去看源代码吧. 为了保证博客的连贯性,首先引用laruence关于PHP变量内部存储结构的部分内容(稍作修改) 在PHP中,所有的

语言中结构体变量和结构体类型的定义

1.结构体类型定义 定义方式1: Typedef struct  LNode {    int  data;  // 数据域    struct LNode   *next;  // 指针域 } *LinkList; 定义方式2: struct  LNode {    int  data;  // 数据域    struct LNode   *next;  // 指针域 }: Typedef struct  LNode  *LinkList; 以上两个定义方式是等价的,是将*LinkList定义

C的日记-结构体变量和结构体数组

[结构体] 定义结构体的两方式    <1>    struct student{};        struct student a={10001,"云中",'M',"北京"};    <2>    struct student{        }a={10001,"云中",'M',"北京"};定义结构体数组a换成a[],struct student stu[3]={{..},{..},{..}};

PHP变量存储结构

首先声明,我并没有去读PHP的源码,只是对于PHP的有时候诡异的表现感兴趣,找了一下开发人员laruence的博客结合PHP提供的函数debug_zval_dump刺探得到了本博客所阐述的工作机理.如果你想对PHP变量存储结构有一个了解或想对PHP变量加深理解的话,本文是适合你的,比较深入的去看源代码吧. 为了保证博客的连贯性,首先引用laruence关于PHP变量内部存储结构的部分内容(稍作修改) 在PHP中,所有的变量都是用一个结构-zval来保存的, 在Zend/zend.h中我们可以看到

【Go语言】【5】变量初始化及赋值

在真正的编码过程中要使用一个变量,必须先声明然后才能使用,GO语言也不例外 1.声明变量 var postCode int    //声明一个整型变量postCode var phoneNum int    //声明一个整型变量phoneNum var name string     //声明一个字符串变量name var address string  //声明一个字符串变量address 接下来我们在main()方法直接打印一下各个值分别是多少: 从上面可以看到尽管我们只是声明了一个变量,但