Day16——JavaScript 解構賦值 Destructuring Assignment

2024 iThome 鐵人賽

DAY 9

佛心分享-IT 人自學之術

JavaScript自學分享系列第 16 篇

16th鐵人賽

姐姐恩

2024-09-28 00:18:43

88 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

Day16——JavaScript 解構賦值 Destructuring Assignment

解構:把陣列或物件中的資料拆開。
賦值:將拆開的資料分別放入個別的變數中。

目的:傳統將陣列中資料分配給變數的作法為，將變數一一指定資料，而解構賦值可以直接將陣列中的資料，按照順序賦值給對應的變數。

程式碼練習&註解筆記:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>解構賦值</title>
    </head>
    <body>
        <script>
            //陣列的解構賦值
             let arr = [3, 4, 5];
             let d1 = arr[0];
             let d2 = arr[1];
             let d3 = arr[2];
            //等於(下方)
             let [d1, d2, d3] = arr;

            //宣告跟解構賦值分開
             let d1, d2, d3, d4;
            //預設值概念
             [d1, d2, d3, d4=10]= arr; //如果d4沒有資料，將顯示undefined。
             console.log(d1,  d2, d3, d4); 

            //變數資料交換
             let n1 = 3;
             let n2 = 4;
             [n2, n1]=[n1,n2];
             console.log(n1,n2); //印出4 3。

            //物件的解構賦值
             let obj = {x:3, y:4};
             let x=obj.x;
             let y=obj.y;
             let x, y, z; 
            //預設值概念
            ({x,y,z=10} = obj); 
            //物件是利用物件名稱作對應。小括號:讓JS意識到我們要做解構賦值。
            
            let newX, newY, newZ; 
            ({x:newX, y:newY, z:newZ}=obj); //冒號後為新的變數名稱
            console.log(newX, newY, newZ);
            
            //統整函式的物件參數。
            function add({n1, n2}){
                console.log(n1+n2);
            }
            add({n1:3,n2: 4});
        </script>
    </body>
</html>

學習資源:
JavaScript 解構賦值 Destructuring Assignment - Front End 網頁前端工程教學