5個 JS 解構有趣的用途

includecmath 發布于2019-08-26 10:57 / 3305人閱讀

摘要：注意解構左側的逗號它表示忽略第一個元素使用數組中索引為的元素進行賦值。幸運的是，解構可以以不可變的方式輕松實現某些操作。在解構時，將作為字符串獲取是非常棒的。遵循協議允許將對象分解為，具體方法是讀取第一個的。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

1. 交換變量

通常交換兩個變量的方法需要一個額外的臨時變量,來看看例子：

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp是一個臨時變量，它先保存a的值。然后把b的值賦值給a，接著將temp值賦給 b。

如果使用解構的方式會更簡單，不需要什么鬼的 temp 變量。

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a，b] = [b，a]是解構賦值，右邊，創建了一個數組[b, a]，即[2,1]。這個數組2被賦值了給a，1被賦值給了b。

雖然這種方式也創建了臨時數組，但這種方式給看起來至少更簡潔，使用解構咱們還可以交換2個以上的變量。

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

2. 訪問數組中元素

有種場景，咱們可能有一個為空的項數組。并且希望訪問數組的第一個、第二個或第n個項，但如果該項不存在，則使用指定默認值。

通常會使用數組的length屬性來判斷

const colors = [];

let firstColor = "white";
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => "white"

使用數組解構，可以更簡潔的實現同樣的效果：

const colors = [];

const [firstColor = "white"] = colors;

firstColor; // => "white"

const [firstColor = "white"] = colors 解構將colors數組的第一個元素賦給firstColor變量。如果數組在索引0處沒有任何元素，則分配“white”默認值。

當然還可以更靈活，如果只想訪問第二個元素，可以這么做。

const colors = [];

const [, secondColor = "black"] = colors;

secondColor; // => "black"

注意解構左側的逗號：它表示忽略第一個元素,secondColor使用colors數組中索引為1的元素進行賦值。

3.不可變操作

當我開始使用React和Redux時，被迫編寫了一些遵守不可變性的代碼。雖然一開始有些困難，但后來我看到了它的好處:更容易處理單向數據流。

不變性要求不能改變原始對象。幸運的是，解構可以以不可變的方式輕松實現某些操作。

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

解構 [, ... fooNumbers] = numbers創建一個新的數組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個元素。

numbers 數組沒有發生變化，保持操作不變性。

以同樣不可變的方式，可以從對象中刪除屬性，接著試著從對象big中刪除foo屬性：

const big = {
 foo: "value Foo",
 bar: "value Bar"
};

const { foo, ...small } = big;

small; // => { bar: "value Bar" }
big; // => { foo: "value Foo", bar: "value Bar" }

4.解構 iterables

在前面幾個例子中，對數組使用了解構，但是咱們可以對任何實現可迭代協議( iterable protocol)的對象進行解構。

許多原生基本類型和對象都是可迭代的: array, string, typed arrays, set 和 map。

如果不想局限于基本類型，通過實現可迭代協議，可以定制解構邏輯。

movies包含一個movie對象列表。在解構movies時，將title作為字符串獲取是非常棒的。讓咱們實現一個自定義迭代器。

const movies = {
  list: [
    { title: "Heat" }, 
    { title: "Interstellar" }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => "Heat"

movies對象通過定義Symbol.iterator方法來實現可迭代協議，迭代器迭代title。

遵循iterable協議允許將movies對象分解為title，具體方法是讀取第一個movies的title:const [firstMovieTitle] = movies。

5.解構動態屬性

根據經驗，通過屬性對對象進行解構比數組解構更常見。

對象的解構看起來很更簡單：

const movie = { title: "Heat" };

const { title } = movie;

title; // => "Heat"

const {title} = movie創建一個變量title，并將屬性movie.title的值賦給它。

到對象解構時，我有點驚訝于咱們不必靜態地知道屬性名，可以使用動態屬性名稱來解構對象。

為了了解動態解構如何工作的，編寫一個greet函數：

function greet(obj, nameProp) {
 const { [nameProp]: name = "Unknown" } = obj;
 return `Hello, ${name}!`;
}

greet({ name: "Batman" }, "name"); // => "Hello, Batman!"
greet({ }, "name"); // => "Hello, Unknown!"

使用2個參數調用greet() 函數：對象和屬性名稱。

在greet()內部，解構賦值const {[nameProp]：name ="Unknown"} = obj使用方括號的形式 [nameProp]讀取動態屬性名稱，name變量接收動態屬性值。

更好的做法是，如果屬性不存在，可以指定默認值“Unknown”。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

GPU云服務器云服務器有趣的事有趣的python 有趣的數據展示 js輸出8個不同的數

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

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

ECMAScript 6入門讀書筆記二

摘要：變量的解構賦值更加便利的從匿名對象或者數組中，對變量進行賦值數組的解構賦值基本樣式，右邊數據類型必須是可迭代的類型。變量的解構賦值更加便利的從匿名對象或者數組中，對變量進行賦值；數組的解構賦值基本樣式，右邊數據類型必須是可迭代的類型。 let a = 1, b = 2, c = 3; //等價于 //let [a, b, c] = [1, 2, 3]; 對...

wawor4827 2019-08-23 12:27 評論0 收藏0
前端技術日志 | 19年8月21日 | 新的 React DevTools 介紹

摘要：前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。你可以從谷歌的博客中了解更多相關信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄?？焖侔l布預覽零配置打包工具?？焖賳有碌墓ぞ摺? Web 前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。本期刊專注于 Web 前端前沿技術，收集的內容來自國外各大前端技術周刊，這里把值得...

pepperwang 2019-08-30 15:44 評論0 收藏0
前端技術日志 | 19年8月21日 | 新的 React DevTools 介紹

摘要：前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。你可以從谷歌的博客中了解更多相關信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄?？焖侔l布預覽零配置打包工具?？焖賳有碌墓ぞ?。 Web 前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。本期刊專注于 Web 前端前沿技術，收集的內容來自國外各大前端技術周刊，這里把值得...

zhiwei 2019-08-26 10:58 評論0 收藏0
20190610 ES6-解構賦值-數值、布爾值、函數參數、用途

摘要：數值和布爾值的解構賦值解構賦值的規則只要等于號右邊的值不是對象，則優先將其轉為對象函數參數的解構賦值函數的參數實際上不是一個數組，而是通過解構得到的變量和。如果解構失敗，則返回默認值。數值和布爾值的解構賦值解構賦值的規則：只要等于號右邊的值不是對象，則優先將其轉為對象 let {toString: s} = 123; s === Number.proptotype.toStrin...

Baoyuan 2019-08-23 18:02 評論0 收藏0
JS奇謀詭計——16 Hacks

摘要：前個來源于年的博客，后個來源于年底的博客。的計時設置斷點老式手段全局變量利用全局變量可以在控制臺中查詢變量信息，但要記得在正式上線發布時刪除這些全局變量。前言好久沒寫博客啦~這次寫一篇輕松的內容，JS里的16個有趣的技巧，簡單總結自Tal Bereznitskey 的兩篇博客，代碼摘自原文。 Javascript Hacks for Hipsters (2013) 7 Hacks...

impig33 2019-08-22 17:18 評論0 收藏0