資訊專欄INFORMATION COLUMN
摘要：注意解構(gòu)左側(cè)的逗號(hào)它表示忽略第一個(gè)元素使用數(shù)組中索引為的元素進(jìn)行賦值。幸運(yùn)的是，解構(gòu)可以以不可變的方式輕松實(shí)現(xiàn)某些操作。在解構(gòu)時(shí)，將作為字符串獲取是非常棒的。遵循協(xié)議允許將對(duì)象分解為，具體方法是讀取第一個(gè)的。
為了保證的可讀性，本文采用意譯而非直譯。
想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！
1. 交換變量通常交換兩個(gè)變量的方法需要一個(gè)額外的臨時(shí)變量,來看看例子：
let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; // => 1
temp是一個(gè)臨時(shí)變量，它先保存a的值。然后把b的值賦值給a，接著將temp值賦給 b。
如果使用解構(gòu)的方式會(huì)更簡單，不需要什么鬼的 temp 變量。
let a = 1; let b = 2; [a, b] = [b, a]; a; // => 2 b; // => 1
[a，b] = [b，a]是解構(gòu)賦值，右邊，創(chuàng)建了一個(gè)數(shù)組[b, a]，即[2,1]。這個(gè)數(shù)組2被賦值了給a，1被賦值給了b。
雖然這種方式也創(chuàng)建了臨時(shí)數(shù)組，但這種方式給看起來至少更簡潔，使用解構(gòu)咱們還可以交換2個(gè)以上的變量。
let zero = 2; let one = 1; let two = 0; [zero, one, two] = [two, one, zero]; zero; // => 0 one; // => 1 two; // => 22. 訪問數(shù)組中元素
有種場(chǎng)景，咱們可能有一個(gè)為空的項(xiàng)數(shù)組。并且希望訪問數(shù)組的第一個(gè)、第二個(gè)或第n個(gè)項(xiàng)，但如果該項(xiàng)不存在，則使用指定默認(rèn)值。
通常會(huì)使用數(shù)組的length屬性來判斷
const colors = [];
let firstColor = "white";
if (colors.length > 0) {
firstColor = colors[0];
}
firstColor; // => "white"
使用數(shù)組解構(gòu)，可以更簡潔的實(shí)現(xiàn)同樣的效果：
const colors = []; const [firstColor = "white"] = colors; firstColor; // => "white"
const [firstColor = "white"] = colors 解構(gòu)將colors數(shù)組的第一個(gè)元素賦給firstColor變量。如果數(shù)組在索引0處沒有任何元素，則分配“white”默認(rèn)值。
當(dāng)然還可以更靈活，如果只想訪問第二個(gè)元素，可以這么做。
const colors = []; const [, secondColor = "black"] = colors; secondColor; // => "black"
注意解構(gòu)左側(cè)的逗號(hào)：它表示忽略第一個(gè)元素,secondColor使用colors數(shù)組中索引為1的元素進(jìn)行賦值。
3.不可變操作當(dāng)我開始使用React和Redux時(shí)，被迫編寫了一些遵守不可變性的代碼。雖然一開始有些困難，但后來我看到了它的好處:更容易處理單向數(shù)據(jù)流。
不變性要求不能改變?cè)紝?duì)象。幸運(yùn)的是，解構(gòu)可以以不可變的方式輕松實(shí)現(xiàn)某些操作。
const numbers = [1, 2, 3]; const [, ...fooNumbers] = numbers; fooNumbers; // => [2, 3] numbers; // => [1, 2, 3]
解構(gòu) [, ... fooNumbers] = numbers創(chuàng)建一個(gè)新的數(shù)組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個(gè)元素。
numbers 數(shù)組沒有發(fā)生變化，保持操作不變性。
以同樣不可變的方式，可以從對(duì)象中刪除屬性，接著試著從對(duì)象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.解構(gòu) iterables
在前面幾個(gè)例子中，對(duì)數(shù)組使用了解構(gòu)，但是咱們可以對(duì)任何實(shí)現(xiàn)可迭代協(xié)議( iterable protocol)的對(duì)象進(jìn)行解構(gòu)。
許多原生基本類型和對(duì)象都是可迭代的: array, string, typed arrays, set 和 map。
如果不想局限于基本類型，通過實(shí)現(xiàn)可迭代協(xié)議，可以定制解構(gòu)邏輯。
movies包含一個(gè)movie對(duì)象列表。在解構(gòu)movies時(shí)，將title作為字符串獲取是非常棒的。讓咱們實(shí)現(xiàn)一個(gè)自定義迭代器。
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對(duì)象通過定義Symbol.iterator方法來實(shí)現(xiàn)可迭代協(xié)議，迭代器迭代title。
遵循iterable協(xié)議允許將movies對(duì)象分解為title，具體方法是讀取第一個(gè)movies的title:const [firstMovieTitle] = movies。
5.解構(gòu)動(dòng)態(tài)屬性根據(jù)經(jīng)驗(yàn)，通過屬性對(duì)對(duì)象進(jìn)行解構(gòu)比數(shù)組解構(gòu)更常見。
對(duì)象的解構(gòu)看起來很更簡單：
const movie = { title: "Heat" };
const { title } = movie;
title; // => "Heat"
const {title} = movie創(chuàng)建一個(gè)變量title，并將屬性movie.title的值賦給它。
到對(duì)象解構(gòu)時(shí)，我有點(diǎn)驚訝于咱們不必靜態(tài)地知道屬性名，可以使用動(dòng)態(tài)屬性名稱來解構(gòu)對(duì)象。
為了了解動(dòng)態(tài)解構(gòu)如何工作的，編寫一個(gè)greet函數(shù)：
function greet(obj, nameProp) {
const { [nameProp]: name = "Unknown" } = obj;
return `Hello, ${name}!`;
}
greet({ name: "Batman" }, "name"); // => "Hello, Batman!"
greet({ }, "name"); // => "Hello, Unknown!"
使用2個(gè)參數(shù)調(diào)用greet() 函數(shù)：對(duì)象和屬性名稱。
在greet()內(nèi)部，解構(gòu)賦值const {[nameProp]：name ="Unknown"} = obj使用方括號(hào)的形式 [nameProp]讀取動(dòng)態(tài)屬性名稱，name變量接收動(dòng)態(tài)屬性值。
更好的做法是，如果屬性不存在，可以指定默認(rèn)值“Unknown”。
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
交流干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！
關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106895.html
摘要：變量的解構(gòu)賦值更加便利的從匿名對(duì)象或者數(shù)組中，對(duì)變量進(jìn)行賦值數(shù)組的解構(gòu)賦值基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。 變量的解構(gòu)賦值 更加便利的從匿名對(duì)象或者數(shù)組中，對(duì)變量進(jìn)行賦值； 數(shù)組的解構(gòu)賦值 基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。 let a = 1, b = 2, c = 3; //等價(jià)于 //let [a, b, c] = [1, 2, 3]; 對(duì)...
摘要：前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。你可以從谷歌的博客中了解更多相關(guān)信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄。快速發(fā)布預(yù)覽零配置打包工具。快速啟動(dòng)新的工具。 Web 前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。 本期刊專注于 Web 前端前沿技術(shù)，收集的內(nèi)容來自國外各大前端技術(shù)周刊，這里把值得...
摘要：前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。你可以從谷歌的博客中了解更多相關(guān)信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄?？焖侔l(fā)布預(yù)覽零配置打包工具。快速啟動(dòng)新的工具。 Web 前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。 本期刊專注于 Web 前端前沿技術(shù)，收集的內(nèi)容來自國外各大前端技術(shù)周刊，這里把值得...
摘要：數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則只要等于號(hào)右邊的值不是對(duì)象，則優(yōu)先將其轉(zhuǎn)為對(duì)象函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)實(shí)際上不是一個(gè)數(shù)組，而是通過解構(gòu)得到的變量和。如果解構(gòu)失敗，則返回默認(rèn)值。 數(shù)值和布爾值的解構(gòu)賦值 解構(gòu)賦值的規(guī)則： 只要等于號(hào)右邊的值不是對(duì)象，則優(yōu)先將其轉(zhuǎn)為對(duì)象 let {toString: s} = 123; s === Number.proptotype.toStrin...
摘要：前個(gè)來源于年的博客，后個(gè)來源于年底的博客。的計(jì)時(shí)設(shè)置斷點(diǎn)老式手段全局變量利用全局變量可以在控制臺(tái)中查詢變量信息，但要記得在正式上線發(fā)布時(shí)刪除這些全局變量。 前言 好久沒寫博客啦~這次寫一篇輕松的內(nèi)容，JS里的16個(gè)有趣的技巧，簡單總結(jié)自Tal Bereznitskey 的兩篇博客，代碼摘自原文。 Javascript Hacks for Hipsters (2013) 7 Hacks...
閱讀 1356·2021-11-25 09:43
閱讀 777·2021-11-18 10:02
閱讀 2923·2021-09-07 09:59
閱讀 2787·2021-08-30 09:44
閱讀 2945·2019-08-30 13:17
閱讀 2341·2019-08-29 12:17
閱讀 1702·2019-08-28 17:57
閱讀 1317·2019-08-26 14:04
