国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]JavaScript ES6解構賦值指南

Jeff / 3210人閱讀

摘要：解構賦值允許我們將右邊的表達式看起來也像變量聲明一般，然后在左邊將值一一提取。數組的解構賦值現在假設我們有一個變量，其值為。通過，這會看上去更清晰簡潔最后的解構賦值給的語法帶來了更多的現代化。

前言

讓我們來仔細地看看ES6所帶來的更清晰的變量聲明與賦值語法。現今的變量聲明語法十分的直接：左邊是一個變量名，右邊可以是一個數組：[]的表達式或一個對象：{}的表達式，等等。解構賦值允許我們將右邊的表達式看起來也像變量聲明一般，然后在左邊將值一一提取。聽起來有點迷糊？讓我們一起看看下面的例子就好。

數組的解構賦值

現在假設我們有一個value變量，其值為[1, 2, 3, 4, 5]。然后我們想給數組的前三個元素分別聲明一個變量。傳統的做法是多帶帶聲明和賦值每一個變量：

jsvar value = [1, 2, 3, 4, 5];
var el1 = value[0];
var el2 = value[1];
var el3 = value[0];

有了這幾個新變量，我們原本的value現在可以被表示為[el1, el2, el3, 4, 5]，因為我們現在并不關心后兩個元素，所以也可以說被表示為[el1, el2, el3]。那么現在，ES6允許我們在左邊使用這個表達式來達到和上一個代碼塊一樣的效果：

jsvar value = [1, 2, 3, 4, 5];
var [el1, el2, el3] = value;

右邊不必一定是變量名：

jsvar [el1, el2, el3] = [1, 2, 3, 4, 5];

左邊也不必一定是聲明：

jsvar el1, el2, el3;
[el1, el2, el3] = [1, 2, 3, 4, 5];

這使我們通過僅僅使用兩個變量名，就可以交換兩個變量的值，這是從前的JavaScript不可能辦到的事情：

js[el1, el2] = [el2, el1];

解構賦值也是可嵌套的：

jsvar value = [1, 2, [3, 4, 5]];
var [el1, el2, [el3, el4]] = value;

ES6中，返回一個數組的函數更像一個頭等公民了：

jsfunction tuple() {
  return [1, 2];
}

var [first, second] = tuple();

同樣可以通過簡單地在指定位置省略變量來忽略數組中的某個元素：

jsvar value = [1, 2, 3, 4, 5];
var [el1, , el3, , el5] = value;

這使得從正則表達式里取出匹配的分組的過程十分得簡潔：

jsvar [, firstName, lastName] = "John Doe".match(/^(w+) (w+)$/);

更進一步，默認值同樣也可以被指定：

jsvar [firstName = "John", lastName = "Doe"] = [];

需要注意的是默認值只會在對undefined值起作用，下面的例子中firstName和lastName都將是null：

jsvar [firstName = "John", lastName = "Doe"] = [null, null];

rest參數（...變量名）讓事情變得更有趣，它使你可以得到數組中“剩余“的元素。下面這個例子中，tail變量將接收數組中”剩余“的元素，為[4, 5]：

jsvar value = [1, 2, 3, 4, 5];
var [el1, el2, el3, ...tail] = value;

不幸的是，ES6中rest參數的實現非常原始，rest參數之后不能再有其他參數（即只能是最后一個參數）。所以下面例子中的這些非常有用模式，在ES6中是不可能的（會報錯）：

jsvar value = [1, 2, 3, 4, 5];
var [...rest, lastElement] = value;
var [firstElement, ...rest, lastElement] = value;
對象的解構賦值

現在，你已經對數組的解構賦值有了清晰的認識，讓我們來看看對象的解構賦值。它們幾乎以同樣的方式工作，僅僅是從數組變成了對象：

jsvar person = {firstName: "John", lastName: "Doe"};
var {firstName, lastName} = person;

ES6允許變量名與對應的屬性名不一致。下面的例子中，name變量將會被聲明為person.firstName的值：

jsvar person = {firstName: "John", lastName: "Doe"};
var {firstName: name, lastName} = person;

深層嵌套的對象也不會有問題：

jsvar person = {name: {firstName: "John", lastName: "Doe"}};
var {name: {firstName, lastName}} = person;

你還可以嵌套些數組在里面：

jsvar person = {dateOfBirth: [1, 1, 1980]};
var {dateOfBirth: [day, month, year]} = person;

或者一些其他的：

jsvar person = [{dateOfBirth: [1, 1, 1980]}];
var [{dateOfBirth}] = person;

和數組解構賦值一樣，對象解構賦值也可以使用默認值：

jsvar {firstName = "John", lastName: userLastName = "Doe"} = {};

默認值同樣也只會在對undefined值起作用，下面的例子中firstName和lastName也都將是null：

jsvar {firstName = "John", lastName = "Doe"} = {firstName: null, lastName: null};
函數參數的解構賦值

ES6中，函數的參數也支持解構賦值。這對于有復雜配置參數的函數十分有用。你可以結合使用數組和對象的解構賦值。

jsfunction findUser(userId, options) {
  if (options.includeProfile) ...
  if (options.includeHistory) ...
}

通過ES6，這會看上去更清晰簡潔：

jsfunction findUser(userId, {includeProfile, includeHistory}) {
  if (includeProfile) ...
  if (includeHistory) ...
}
最后

ES6的解構賦值給JavaScript的語法帶來了更多的現代化。它在減少了代碼量的同時，增加了代碼的可讀性和表現力。

原文地址

https://strongloop.com/strongblog/getting-started-with-javascript-es6-...

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85757.html

相關文章

  • [譯]JavaScript ES6迭代器指南

    摘要：前言又稱提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當我們使用迭代器時，這個問題就迎刃而解了。是中的新語法，用來配合迭代器。這是因為數組的迭代器只返回其中預期的元素。 前言 EcmaScript 2015 （又稱ES6）提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個（有限或無限的）序列。 暫時先拋開它...

    daryl 評論0 收藏0

  • [譯] 最深刻而易懂的ES6解構教程

    摘要：被解構的數據項位于賦值運算符的右側，可以是任何數組和對象的組合，允許隨意嵌套。數組模式位于賦值運算符的左側，被結構的數組在其右側。 解構是ES6的新特性，用于從JavaScript對象和數組中提取數據，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發現越多塑造數據和函數的方式，這些實現方式在過去幾乎是不可能的。本文將深...

    AlphaGooo 評論0 收藏0

  • [譯] 在你學習 React 之前必備的 JavaScript 基礎

    摘要：前言在理想的狀態下，你可以在深入了解之前了解和開發的所有知識。繼承另一個類的類，通常稱為類或類，而正在擴展的類稱為類或類。這種類型的組件稱為無狀態功能組件。在你有足夠的信心構建用戶界面之后，最好學習。 原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 寫在前面 為了不浪費大家的寶貴時間，在開...

    Chaz 評論0 收藏0

  • [譯] ES6 中 Arguments 和 Parameters 用法解析

    摘要：默認參數有了我們不需要再去檢測哪些值為并且給它們設定默認值了。我們甚至可以使用函數去找回默認參數的值注意這個函數只有在第二個參數省略時才會被調用。瀏覽器對默認參數的支持情況桌面瀏覽器移動端瀏覽器解構賦值解構賦值是的新特性。 原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters...

    msup 評論0 收藏0

發表評論

0條評論

Jeff

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<