变量的解构赋值

harriszh 发布于2019-08-20 18:34 / 2712人阅读

摘要：数组的解构赋值基本用法允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构可以从数组中提取值按照位置的对应关系对变量赋值本质上这种写法属于模式匹配只要等号两边的模式相同左边的变量就会被赋予对应的值如果结构不成功变量的值就等于另一种

数组的解构赋值

1.基本用法
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.
可以从数组中提取值,按照位置的对应关系对变量赋值.
本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值.

var [a, b, c] = [1, 2, 3];
var [d, ...array] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(array); // [2, 3]

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
console.log(bar);
console.log(baz);

let [, , third] = [1, 2, 3];
console.log(third); // 3

2.如果结构不成功,变量的值就等于undefined.
另一种情况是不完全解构,即等号左边的模式只匹配等号右边数组的一部分,
这种情况下,解构依然可以成功.
如果等号的右边不是数组(或者严格的说,不是可遍历的结构),那么将会报错.

let [bar1, foo1] = [1];
console.log(bar1);  // 1
console.log(foo1);  // undefined

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

var [foo = true] = [];
console.log(foo); // true
var [x, y = "b"] = ["a"];
console.log(x); // "a"
console.log(y); // "b"

var [xx, yy = "b"] = ["a", undefined];
console.log(xx);    // "a"
console.log(yy);    // "b"

// 如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined
var [xxx = 1] = [undefined];
var [yyy = 1] = [null];
console.log(xxx);   // 1
console.log(yyy);   // null

// 如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候才会求值
// 因为x能取到值,所以函数f根本不会执行
function f() {
    console.log("aaa");
}
let [xxxx = f()] = [1];

// 默认值可以引用解构赋值的其他变量,但该变量必须已经声明
let [x = 1, y = x] = [];
console.log(x); // 1
console.log(y); // 1

let [xx = 1, yy = xx] = [2];
console.log(xx);    // 2
console.log(yy);    // 2

let [xxx = 1, yyy = xxx] = [1, 2];
console.log(xxx);   // 1
console.log(yyy);   // 2

let [xxxx = yyyy, yyyy = 1] = []; // ReferenceError
console.log(xxxx);  // undefined
console.log(yyyy);  // 1

对象的解构赋值

1.解构不仅可以用于数组,还可以用于对象.
对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定.
而对象的属性没有次序,变量必须与属性同名,才能取到正确的值.
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量.
真正被赋值的是后者,而不是前者.
这实际上说明,对象的解构赋值是以下形式的简写.

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

var { foo, bar } = {
    foo: "aaa",
    bar: "bbb"
};
console.log(foo);   // "aaa"
console.log(bar);   // "bbb"

// 如果变量名与属性名不一致,必须写成下面这样
var { foo1: baz1 } = {
    foo1: "aaa",
    bar: "bbb"
};
// console.log(foo1);   // Uncaught ReferenceError: foo1 is not defined
console.log(baz1);  // "aaa"

let { first: f, last: l } = { first: "hello", last: "world" };
console.log(f); // "hello"
console.log(l); // "world"

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

// 注意,这时p是模式,不是变量,因此不会被赋值
var obj = {
    p: [
        "hello",
        { y: "wrold" }
    ]
};
var { p: [x, { y }] } = obj;
console.log(x); // "hello"
console.log(y); // "world"

// 只有line是变量,loc和start都是模式,不会被赋值
var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
var { loc: { start: { line } } } = node;
console.log(line);

// 嵌套赋值
let obj1 = {};
let arr = [];
({ foo: obj1.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj1);  // {prop:123}, obj1.prop被赋值123,所以obj1是一个对象
console.log(arr);   // [true], arr[0]被赋值为true,所以arr是一个数组

云服务器 GPU云服务器解构赋值 php的变量赋值 php 赋值类的变量外部变量赋值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84717.html

ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《ES6学习2》变量的解构赋值

摘要：解构赋值的分类数组解构赋值对象解构赋值字符串解构赋值数值解构赋值布尔值解构赋值函数参数解构赋值。嵌套情况默认值解构赋值允许设置默认值，当数组成员严格等于，默认值将生效。报错报错函数参数的解构赋值函数的参数也可以使用解构赋值和指定默认值 ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参...

mist14 2019-08-26 13:52 评论0 收藏0