ES2015入门系列5-解构赋值

chuyao 发布于2019-08-20 17:40 / 1371人阅读

摘要：用过的同学肯定见过类似下面的代码这就是为带来的另一个新的语法解构赋值。解构赋值是用来让我们从数组或者对象中提取数据赋值给不同的变量。解构赋值操作不会抛错，如果没有找到，将会用赋值过去。

用过ReactNative的同学肯定见过类似下面的代码:

import { Text, View } from "react-native";

这就是ES2015为JavaScript带来的另一个新的语法：解构赋值。

解构赋值(Destructuring assignment), 是用来让我们从数组或者对象中提取数据赋值给不同的变量。

语法如下:

从数组中解构赋值

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

从对象中解构赋值

let {a, b} = {a: 1, b: 2}

PHP开发者有没有觉得很眼熟? 对了，这不就是:

list($a, $b) = [1, 2];

没错，如你所想，ES2015从数组中解构赋值和PHP的语法一样，也可以忽略某些返回值, 甚至全忽略

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

数组的解构赋值很简单，我们继续来看看对象的解构赋值:

let object = {
  f: 1,
  b: 2
}

let {f, b} = object;

那我想赋值给不同变量的名字该怎么办呢，如下：

let {f: foo, b: bar} = object;

要记住，这样一来，真正初始化并赋值的是foo 和 bar。

解构赋值操作不会抛错(Fail-soft)，如果没有找到，将会用undefined赋值过去。

let [a] = []; // a === undefined
let {b} = {}; // b === undefined

同样，我们也可以设置默认值:

let [a = 1] = []; // a === 1
let {b = 2} = {}; // b === 2

也可以应用在函数参数中:

function draw({color, using = "粉笔"}) {
  console.log("使用" + color + "的" + using + "画画!");
}
draw({color: "红色"});
draw({color: "蓝色", using: "蜡笔"});

结果如下：

> 使用红色的粉笔画画!
> 使用蓝色的蜡笔画画!

海外云主机私有云解构赋值 es6-系列入门系列课程深度学习入门系列课程

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

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

ES2015入门系列8-新对象特性

摘要：继续以代码进行展开在中，如下代码鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎为对象带来的新特性属性简写如果属性名称和变量名称一致，那么可以直接用省略变量名，如下鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎方法简写方法可以省略冒号以及关键字如下鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎解继续以代码进行展开, 在ES5中，如下代码： function makeDuckToy() { var name = 鸭子; var co...

Seay 2019-08-20 17:40 评论0 收藏0
es6快速入门

摘要：快速入门简介以下简称是语言的下一代标准，已经在年月正式发布了。而且声明后必须立即初始化赋值，不能后面赋值。方法默认返回实例对象即，可以指定返回另外一个对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 es6快速入门 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6简...

liujs 2019-08-20 14:39 评论0 收藏0
带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
ES6入门到进阶（一）：let、解构赋值、字符串模板、函数

摘要：注意问题，不在是运行时所在的对象箭头函数里面没有用箭头函数不能当构造函数下一篇入门到进阶二循环数组对象参考视频资料经典入门到进阶一、简介 ES6 -> ECMA 标准 ES6 -> 2015年6月 ES6.0 每年6月份，发布一个版本 ES6环境: webpack3.x Traceur 二、let、const 2.1 关于定义(声明)变量 var a=12; ...

WalkerXu 2019-08-26 11:47 评论0 收藏0
ES6入门之变量的解构赋值

摘要：数组的解构赋值基本用法允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。如下以上都会报错但是如果左边为数组，右边为字符串，将会取字符串的第一个下标的值对于结构，同样可以使用数组的解构赋值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 数组的解构赋值基本用法 ES6 允许按照一定模式...

gityuan 2019-08-23 16:51 评论0 收藏0