JavaScript 程式札記 : ES6 解構賦值

閱讀時間約 2 分鐘

什麼是解構賦值?

解構賦值是 JavaScript ES6 的特性,它讓我們能更簡單地從陣列或物件中提取值,並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔,還提升了可讀性。

解構賦值的應用

1. 基礎用法

解構賦值允許我們直接從陣列中取出元素,並賦值到新的變數中。例如:

const test = ['A', 'B', 'C'];
const [test1, test2] = test;
console.log(test1, test2); // 結果: A B

我們也可以選擇忽略陣列中的某些元素,只取我們需要的:

const array = ['A', 'B', 'C'];
const [test1, , test3] = array;
console.log(test1, test3); // 結果: A C

2. 從物件中提取資料

物件解構賦值則是讓我們能從物件中提取屬性,並賦值給變數,例如:

const user = {
name: 'Alice',
age: 30
};
const {name, age} = user;
console.log(name, age); // 結果: Alice 30

我們也可以給解構的屬性設定新的變數名稱,例如 :

const {name:x, age:y} = user; // x = Alice, y = 30

3. 預設變數的值

解構賦值還允許我們為變數設定預設值,這在解構的元素不存在時會非常好用:

const [city1, city2, city3= 'Taipei'] = ['Kaohsiung', 'Taichung'];
console.log(city3); // 結果: Taipei

4. 函式參數中的解構賦值

解構賦值也可以用在函式參數中,這讓我們可以更簡單的處理傳入的物件參數:

function test({data1, data2 = '2'}) {
console.log(`${data2}, ${data1}!`);
}
test({data1: '1', data2: 'two'}); // 結果: two, 1!
test({data1: '1'}); // 結果: 2, 1!

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 [email protected]
留言0
查看全部
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹