每天一點點，學習ES6(一) Enhanced Object Literals

前言

沒事多複習，多複習沒事

為什麼學習ES6

ES6的語法相信大家都爛熟於心，已經在開發中日常使用

我知道螢幕前的你肯定都會了。

ES6是ECMAScript 6的縮寫簡稱，這個好理解

顧名思義，它是ECMAScript的第6個版本，也就是說它有更早的版本，以後還會有更多版本。

ES6也可以說是一個泛指，指5.1版本以後的JavaScript的下一代標準，涵蓋了ES2015,ES2016,ES2017等；亦指下一代JavaScript語言

什麼是物件實字 (Object Literals)

平常我們用大括號 ({}) 來建立物件的語法，就稱為物件實字 (Object Literals)。

以下例子是典型的物件實字語法：

var obj = {};

var player = {
    name: "John", 
    age: 23,
    sayHi: function(){
    return "Hello";
 },
    language1: "JavaScript",
    language2: "Java",
    language3: "C"
};

物件實字的語法重點

用大括號表示。
裡面的屬性 (Properties) 用名值對 (name-value pairs) 表示。
多個屬性以逗號 (comma) 分隔。
宣告完後，還是可以再增加 Properties 進去。

到這裡都很輕鬆

1. 物件屬性初始化的語法簡寫

ES5

function setNameAge(name, age){
    return {
     name: name,
  age: age
 };
}

console.log( setNameAge("John", 23) );   // {name: "John", age: 23}

ES6

function setNameAge(name, age){
    return {
     name,
  age
 };
}

console.log( setNameAge("John", 23) );   // {name: "John", age: 23}

在 ES5 以前，必須把屬性名稱和進行賦值的變數名稱都標明清楚。
ES6 提供更簡單的寫法。

2.物件函式的語法簡寫

ES5

function setNameAge(name, age){
    return {
        sayHi: function(){
     return `Hi, I am ${name}`;
     }
 };
}

console.log( setNameAge("John", 23).sayHi() ); // "Hi, I am John"

ES6

function setNameAge(name, age){
    return {
        sayHi(){
     return `Hi, I am ${name}`;
     }
 };
}

console.log( setNameAge("John", 23).sayHi() ); // "Hi, I am John"

ES6 省略了function 和 :

3. 具運算性的屬性名稱

 var name = "yz"
 var obj = {
  [name + 123]: 'hehehehe'
 }

console.log(obj) // {yz123: 'hehehehe'}

計算屬性名定義對象key的時候加上[]，可以動態定義對象名[]

解構 Destructuring

概述

ES6中新增了一個從數組或對像中方便獲取數據的方法，稱之為解構Destructuring。
我們可以劃分為:數組的解構和對象的解構。

數組結構

數組的解構:
- 基本解構過程
- 順序解構
- 解構出數組
- 默認值

var names = ["abc", "cba", "nba"]
// var item1 = names[0]
// var item2 = names[1]
// var item3 = names[2]

// 對數組的解構: []
var [item1, item2, item3] = names
console.log(item1, item2, item3)
//  abc cba nba

// 解構後面的元素
var [, , itemz] = names
console.log(itemz)
//  nba

// 解構出一個元數，後面的元素放到一個新樹組中
var [itemX, ...newNames] = names
console.log(itemX, newNames)
// abc ['cba', 'nba']

// 解构的默认值
var [itemA, itemB, itemC, itemD = "aaa"] = names
console.log(itemD)
// aaa

對象結構

對象的解構:
- 基本解構過程
- 任意順序
- 重命名
- 默認值

var obj = {
  name: "yz",
  age: 25,
  height: 180
}

// 對象的解構: {}
var { name, age, height } = obj
console.log(name, age, height)
// yz 25 180

var { age } = obj
console.log(age)
// 25

var { name: newName } = obj
console.log(newName)
// yz

var { address: newAddress = "台北市" } = obj
console.log(newAddress)
// 台北市


function foo(info) {
  console.log(info.name, info.age)
}

foo(obj)
// yz 25

function bar({name, age}) {
  console.log(name, age)
}

bar(obj)
// yz 25

應用場景

解構目前在開發中使用是非常多的:
- 比如在開發中拿到一個變量時，自動對其進行解構使用;
- 比如對函數的參數進行解構;

let obj1 = {
    name:'yz',
    age:24
}
function test(obj){
    // es5
    console.log(obj.name,obj.age)
    // es6
    const {name,age} = obj
    console.log(name,age)
}
test(obj1)

總結

ES6 提升了物件實字語法的簡潔性和靈活性，總共有 3 個部分的加強：

物件屬性初始化的語法簡寫 (Shorthand for Initializing Properties)
物件函式的語法簡寫 (Shorthand for Writing Methods)
具運算性的屬性名稱 (Computed Properties and Object Literals)

Enhanced Object Literal 是 ES6 中算滿簡單的新特性，唯一值得特別注意的是：透過 ES6 簡寫的物件函式，函數行為是傳統函數而非箭頭函數。

字面量的增強方便我們寫對象屬性和方法時，少寫代碼
解構方便我們更容易的處理對像數組的屬性，少寫代碼

Cody Di Da Di