ES2015入門系列5-解構賦值

chuyao 發布于2019-08-20 17:40 / 1591人閱讀

摘要：用過的同學肯定見過類似下面的代碼這就是為帶來的另一個新的語法解構賦值。解構賦值是用來讓我們從數組或者對象中提取數據賦值給不同的變量。解構賦值操作不會拋錯，如果沒有找到，將會用賦值過去。

用過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: "蠟筆"});

結果如下：

> 使用紅色的粉筆畫畫!
> 使用藍色的蠟筆畫畫!

GPU云服務器云服務器解構賦值 es6-系列入門系列課程深度學習入門系列課程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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