ES6 - 基礎學習(4): 變數的解構賦值 補充

来源:https://www.cnblogs.com/donghuang/archive/2020/04/09/12667822.html
-Advertisement-
Play Games

上接 ES6 - 基礎學習(3): 變數的解構賦值 函數參數的解構賦值 1、基本用法 function add([x, y]) { return x + y; } console.log(add([1, 2])); // 3 // 如上面代碼所示，函數add的形參錶面是一個數組，但在實參參數傳入時， ...


上接 ES6 - 基礎學習(3): 變數的解構賦值

函數參數的解構賦值

1、基本用法

function add([x, y]) {
    return x + y;
}

console.log(add([1, 2]));                                   // 3
// 如上面代碼所示，函數add的形參錶面是一個數組，但在實參參數傳入時，實參數組就被解構並賦值給變數x、y了。當然這些對於函數內部的代碼來說，跟參數一個個傳入是一樣的，反正都只認參數x、y

[[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log([[1, 2], [3, 4]].map(([a, b]) => a + b));       // [3, 7]   1+2=3,3+4=7     map函數以二維數組內每個成員數組作為參數，進行參數解構，然後計算每個成員數組內參數值之和

2、函數參數的解構也可以使用預設值

// 下麵代碼中，函數defaultParameter的形參是一個對象(空對象)。通過對這個對象進行解構，得到變數x、y的值，如果解構失敗，x、y就等於預設值。
function defaultParameter({x = 0, y = 0} = {}) {
    console.log([x, y]);
    return [x, y];
}

defaultParameter({x: 1, y: 2});                             // [1, 2]
defaultParameter({x: 3});                                   // [3, 0]
defaultParameter({});                                       // [0, 0]
defaultParameter();                                         // [0, 0]

// 註意，下麵這種寫法會得到不一樣的結果。區別在於此處是給參數指定預設值，而不是給變數x、y指定預設值。
// 這兩種寫法的執行區別是：上一種寫法 實參傳入函數後，實參對象內沒有對應屬性的值，則函數參數採用變數已有的預設值進行相關處理，代碼依然能正常執行，不會報錯。
// 而下一種寫法 實參傳入函數後，實參對象內沒有對應屬性的值，則就真沒有了，函數參數因為解構賦值操作，無對應屬性值的變數就只能等於undefined。這時如果再執行代碼，尤其是計算類相關操作，執行就會報錯，代碼就會中斷執行。
function defaultParameter({x, y} = {x: 0, y: 0}) {
    console.log([x, y]);
    return [x, y];
}

defaultParameter({x: 1, y: 2});                             // [1, 2]
defaultParameter({x: 3});                                   // [3, undefined]
defaultParameter({});                                       // [undefined, undefined]
defaultParameter();                                         // [0, 0]   沒有傳入參數，函數以預設對象進行解構賦值
// undefined會觸發函數參數的預設值。
[1, undefined, 3].map((x = 'yes') => x);
console.log([1, undefined, 3].map((x = 'yes') => x));       // [1, "yes", 3]

圓括弧問題

解構賦值雖然使用很方便，但是解析起來卻不容易。對於編譯器來講，一個式子到底是模式，還是表達式，一開始並不知道，只有等到解析到(或解析不到)等號時才能知道。而由此帶來的問題，如果模式中出現圓括弧怎麼處理。
ES6的規則是，只要一個式子中有可能出現解構操作 或 可能讓解構操作產生歧義的，就不得使用圓括弧。
但是，這條規則實際操作起來卻不那麼容易辨別，處理起來也相當麻煩。因此，建議在實際開發中，除非很有必要，否則就不要在模式中放置圓括弧。

// 以下三種解構賦值不得使用圓括弧。
// 變數聲明語句，模式不能使用圓括弧
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };

// 函數參數也屬於變數聲明，因此不能帶有圓括弧
function f([(z)]) { return z; }
function f([z,(x)]) { return x; }

// 賦值語句的模式
({ p: a }) = { p: 42 };                                 // 將整個模式放在圓括弧之中，導致報錯
([a]) = [5];

[({ p: a }), { x: c }] = [{}, {}];                      // 將一部分模式放在圓括弧之中，導致報錯
// 可以使用圓括弧的情況只有一種：賦值語句的非模式部分，可以使用圓括弧。
// 下麵三行語句圓括弧使用正常，代碼執行也正確。因為它們都是賦值語句，而不是聲明語句；其次它們的圓括弧都不屬於模式的一部分。
// 第一行語句中，模式是取數組的第一個成員，跟圓括弧無關；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質相同。
[(b)] = [3];
({p: (d)} = {});
[(parseInt.prop)] = [3];

解構賦值的用途

變數的解構賦值用途很多

1、變數值交換

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x);                                         // 2
console.log(y);                                         // 1

2、函數返回多個值

// JS中，一個函數一次只能返回一個值，如果想要返回多個值，則只能將 需要返回的值封裝在數組或對象里一起返回，而且返回後取值還是一個麻煩問題。但有瞭解構賦值，取出這些值就方便很多了。
function returnsArray() {
    return [1, 2, 3];                                   // 返回一個數組
}
let [a, b, c] = returnsArray();
console.log(a);                                         // 1
console.log(c);                                         // 3

function returnsObject() {
    return {                                            // 返回一個對象
        name: 'ES6',
        description: 'ES6解構賦值 補充'
    };
}
let {name, description} = returnsObject();
console.log(name);                                      // ES6
console.log(description);                               // ES6解構賦值 補充

3、函數參數的定義

// 解構賦值可以很方便地將一組參數與變數名對應起來。
// 參數是一組有次序的值：數組
function testFunc([x, y, z]) {
    console.log(x, y, z);                               // 1 2 3
}
testFunc([1, 2, 3]);

// 參數是一組無次序的值：對象
function test_func({x, y, z}) {
    console.log(x, y, z);                               // 1 2 3
}
test_func({z: 3, x: 1, y: 2,});

4、函數參數的預設值

// 參數是一組有次序的值：數組
function testFunc([x = 0, y = 0, z = 0]) {
    console.log(x + y + z);
}
testFunc([1, 2]);                                       // 3        實參 少於 形參個數，形參取預設值
testFunc([123, 234, 345]);                              // 702      實參 等於 形參個數，形參按位置對應取值
testFunc([12, 23, 34, 45]);                             // 69       實參 多餘 形參個數，形參按位置對應取值，多餘剩下的不管。

// 參數是一組無次序的值：對象
function test_func({x = 0, y = 0, z = 0}) {
    console.log(x + y + z);
}
test_func({x: 1, y: 2});                                // 3        實參對象內屬性名 與 形參變數名不能一一對應(屬性名個數和變數個數不等)，未能正確匹配的形參變數 取預設值
test_func({x: 1, y: 2, z: 3});                          // 6        實參對象內屬性名 與 形參變數名一一對應，形參變數 按名一一對應 取值
test_func({x: 1, y: 2, aa: 4});                         // 3        實參對象內屬性名 與 形參變數名不能一一對應(屬性名個數和變數個數相等)，未能正確匹配的形參變數 取預設值

5、提取 JSON 數據

// 解構賦值對快速提取 JSON 對象中的數據，尤其有用。
let jsonData = {
    name: 'ES6',
    description: 'ES6解構賦值 補充',
    time: [2015, 6]
};
let {name, description, time: number} = jsonData, [year, month] = number;
console.log(name);                                      // ES6
console.log(description);                               // ES6解構賦值 補充
console.log(year);                                      // 2015
console.log(month);                                     // 6

6、獲取 Set 數據結構內數據、 遍歷 Map 數據結構

// Set數據結構是ES6新增的一種數據結構，是一種類數組 數據結構，只是Set結構實例內各個成員是唯一的，不允許重覆。
// Map則是ES6新增的另一種數據結構，是一種類對象 數據結構，同樣Map實例內的屬性也不允許重覆，而且Map結構內 屬性欄位不限數據類型。
// 任何部署了 Iterator介面的對象，都可以用 for...of 迴圈遍歷。Map結構原生支持 Iterator介面，配合變數的解構賦值，可以更方便的獲取鍵名和鍵值。
let tempSet = new Set([1, 2, 'name', 'description']);
console.log(tempSet);                                   // Set(4) {1, 2, "name", "description"}
let [a, b, c, e] = tempSet;
console.log(a);                                         // 1
console.log(b);                                         // 2
console.log(c);                                         // name
console.log(e);                                         // description

let tempMap = new Map();
tempMap.set('name', 'ES6').set('description', 'ES6解構賦值 補充');
for (let [key, value] of tempMap) {
    console.log(key + " is " + value);
}

// 若只想獲取鍵名，或只想獲取鍵值，都可以。
for (let [key] of tempMap) {
    console.log(`鍵名: ${key}`);                        // 遍歷鍵名
}

for (let [, value] of tempMap) {
    console.log(`鍵值: ${value}`);                      // 遍歷鍵值
}

　　

7、輸入模塊的指定方法

載入其他模塊時，如果不想載入整個模塊，則可以通過解構賦值的方式指定輸入要載入的方法，從而既可以減少依賴載入，又可以使得輸入語句清晰明瞭。

const {SourceMapConsumer, SourceNode} = require("source-map");

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Flutter 完美的驗證碼輸入框
    老孟導讀：剛開始看到這個功能的時候一定覺得so easy，開始的時候我也是這麼覺得的，這還不簡單，然而真正寫的時候才發現並沒有想象的那麼簡單。 先上圖，不上圖你們都不想看，我難啊，到Github： "https://github.com/781238222/flutter do" 上給個小星星可還行 ...
  • JavaScript：JS對象_Array
    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* 1.創建 1.var arr = new Array(元素列表); 2.var arr = new Array(預設長度); 3.var a ...
  • JavaScript：Function:函數（方法）對象
    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* Function:函數（方法）對象 1.創建 1.var fun = new Function（形式參數列表，方法體） 2.function ...
  • JavaScript實現簡單的圖片切換功能
    ` ` 最終的效果 ...
  • 關於使用jquery的load方法時被載入頁面內部script失效問題的一次探索
    事先聲明：本文由初學者撰寫，為一次探索的過程，可能有不嚴謹和準確的地方，望讀者多多諒解並積極指正！ 場景描述： 在一次前端開發過程中，我使用了一個網頁模板，該模板包含一個主頁和四個子頁面，如下圖： 具體的效果是，點擊主頁中的一個按鈕會在彈框內顯示子頁面的內容，如下圖： 具體的實現是在主頁面中留出面板 ...
  • 力軟敏捷框架 jfGrid 使用例子之一
    百度了下關於力軟敏捷框架 jfGrid的教程，基本沒有，出來的全是jqGrid。好吧看來只能自己上手了 今天來講講列設置屬性里數據格式化事件（formatter）的使用 常規的使用方式如上圖所示。 先來說說各個參數的意思： cellvalue 當前單元格的數據值，也就是你賦的值是什麼就是什麼。 ro ...
  • async和await是如何實現非同步編程?
    目錄 非同步編程樣例 樣例解析 淺談Promise如何實現非同步執行 參考 1.非同步編程樣例 樣例： 執行結果： 2.樣例解析 在樣例代碼中， 非同步函數使用了 和`await Generator Promise async await Generator Promise`實現。 第一步：先將 和`awa ...
  • 4.CSS中float導致的高度坍塌問題及解決方法
    高度坍塌：浮動元素佈局導致的問題 高度坍塌的根源：浮動盒子脫離了常規流，因此常規流盒子進行高度計算時，不會考慮浮動盒子的高度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類