变量的解构赋值

Elle 发布于2019-08-20 14:51 / 2309人阅读

摘要：变量的解构赋值的用途交换变量的值从函数中返回多个值返回一个数组返回一个对象函数参数的赋值提取数据函数参数的默认值。

解构赋值

解构赋值是ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值；

解构赋值主要有一下几种

数组的解构赋值

let [a,b,c] = [1,2,3];

允许有默认值

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

let [x,y="b"] = ["a"]; //x="a";y="b";

对象的解构赋值

对象的解构和数组不同的地方是，数组的元素必须是按次序排列的，变量的值由它的位置决定；对象的属性是无序的，变量名与属性名相同就可以了。

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

如果变量名和属性名不一致，或者想要给这个变量名和属性名不一样，可以这样使用。

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

这相当于给给变量赋值，而且变量名不需要和属性名一样。

如果对一个已经声明的变量，需要谨慎

let x;
{x} = {x: 1};//SyntaxError

因为Javascript引擎会将{x}理解成一个代码块，从而发生语法错误。

({x} = {x:1})

字符串解构赋值

let [a,b,c,d,e] = "hello";
a//"h"
b//"e"

类似数组的对象都有一个length属性，因此可以对这个属性解构赋值

let {length: len} = "hello";
len//5

数值和布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

ES6内部使用的是严格相等运算符（===），判断一个位置是否有值。如果一个组员不严格等于undefined,默认值是不会生效的。

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

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

let {x=3} = {x: undefined};
x//3

let {x=3} = {x:null};
x//null;

变量的解构赋值的用途

交换变量的值

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

从函数中返回多个值

// 返回一个数组

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

// 返回一个对象

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

函数参数的赋值

提取JSON数据

函数参数的默认值。

   指定了默认值，就可以避免在函数体内写var foo = foo || "init".

遍历Map结构。

   任何部署了Iterator接口的对象，都可以用for...of循环遍历。

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/81971.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