※ 物件導向程式設計-OPP(三)

閱讀時間約 3 分鐘

※ ES6 變數宣告介紹:

在ES6中,推薦使用let和const取代原有的var來宣告變數。

※ var的特點:

  • 勢力範圍(scope)只有兩種:function、global(全域部分)。

勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。

  • 可以在宣告變數之前就使用。

※ var的缺點:

  • 勢力範圍劃分不夠細緻。

當我們需要使用if、for和while迴圈、else這種區塊中,或是需要創造局部性變數時,將會發生衝突。

  • 宣告變數之前就使用,會造成潛在的風險。

※ let的特點:

  • 勢力範圍(scope)永遠僅作用在{}之間。

也就是if、else、for和while迴圈,都可以有自己的局部變數。

  • 不可以在宣告變數之前就是使用,屏除掉潛在風險。

※ const的特點:

  • 用來宣告不可變動的內容。也就是一經宣告後,內部的值就不能再被變更。

※ ES6 變數的解構賦值:

※ 什麼是解構賦值:

是一種從陣列或物件中提取值,並將這些值賦給新的變數。好處是在處理多個變數賦值時,能更簡潔和清晰。

// 從陣列中提取值並賦值給變數
const [a, b] = [1, 2]
console.log(a); // 1
console.log(b); // 2
// 從物件中提取值並賦值給變數
const person = { name: 'Alice', age: 25 }
const { name, age } = person
console.log(name); // Alice
console.log(age); // 25

※ 解構賦值中的「...」:

可以說是展開運算符或剩餘運算符。在陣列和物件解構賦值中,用來提取出剩餘的值或屬性。

// 陣列
const numbers = [1, 2, 3, 4, 5]
const [a, b, ...rest] = numbers

console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]
// 物件
const person = {
name: 'Bob',
age: 30,
city: 'New York',
profession: 'Developer'
};

const { name, ...details } = person

console.log(name) // Bob
console.log(details) // { age: 30, city: 'New York', profession: 'Developer' }
//將收集剩餘的屬性到一個新的物件中。
const person = { name: 'Alice', age: 25, city: 'Wonderland', occupation: 'Adventurer' }

const { name, age, ...rest } = person

console.log(name); // Alice
console.log(age); // 25
console.log(rest); // { city: 'Wonderland', occupation: 'Adventurer' }

※ ES6解構賦值總結:

  • 可以使用「...」做為陣列或物件剩餘資料的蒐集。
  • 可以使用「...」做為將陣列或物件展開給新的陣列或物件的簡易方法。
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 讓程式碼更簡潔的方法
    閱讀時間約 2 分鐘
    ※ 認識DOM(四)
    閱讀時間約 1 分鐘
    ※ 認識命令列指令與應用
    閱讀時間約 1 分鐘
    ※ Git基本觀念與命令操作
    閱讀時間約 1 分鐘
    ※ 物件導向程式設計-OPP(一)
    閱讀時間約 1 分鐘
    ※ 物件導向程式設計-OPP(二)
    閱讀時間約 7 分鐘