# Javascript ES6 類陣列、解構賦值

[Notion-page](https://www.notion.so/yinchen/Javascript-ES6-d4e11202efca4d91b432298ec411f8ea)

# `Array` 串接

早先的作法

用 `concat()`

let groupA = ["apple", "grape"];
let groupB = ["vegetables", "carrot"];
let groupAll = groupA.concat(groupB);
console.log(groupAll);

新的做法

`...` 就是把東西一個一個抓出來放進去

let groupA = ["apple", "grape"];
let groupB = ["vegetables", "carrot"];
let groupAll2 = [...groupA, ...groupB];
console.log(groupAll2);

---

# 參數 : 類陣列 Array-like

> 類陣列是指以數值索引的值所成的群集，它可能是串列但並非真正的陣列，例如：DOM 物件操作後所得到的串列、函式引數所形成的串列（ES6 已棄用）。 — [Reference](https://cythilya.github.io/2018/10/12/values-array-string-number/)

需要轉成真正的陣列使用，可以用上述 `...` 的做法進行

# 解構賦值

## 矩陣取值

鏡射概念 : 將原一陣列的值賦予到新陣列的對應元素

let groupA = ["apple", "grape"];
let [ fruit1, fruit2 ] = groupA;
console.log(fruit1, fruit2);


如果對應元素數量不足，只會讀到有對應的數量，中間也可以進行跳過

let people = ["Jack", "Sam", "Frisk", "Chara", "Undye"];
let [person1, person2] = people;
console.log(person1, person2);

let [person4, , person5, person6] = people;
console.log(person4, person5, person6);

## 字串拆解

字串可以直接被拆開

let str = "庭院深深深幾許";
let [a, b, c, d, e, f, g] = str;
console.log(a, b,c,d,e,f,g);

## 物件取值

先將物件裡的屬性連值取出 (`chara`的部分)，在給予新的變數該屬性的值(`frisk`)

let undertale = {
  dogs: "hot dogs",
  cats: "hot cats",
  chara: "Frisk",
  frisk: "Chara"
};
let { chara: frish } = undertale;
console.log(frish);
console.log(undertale); // 物件裡面的東西不會被改變

# 元素交換

利用上面 `[]` 將元素對應改變

let chara = "Frisk";
let frisk = "Chara";
console.log(chara, frisk); // pink color
[chara, frisk] = [frisk, chara];
console.log(chara, frisk); // red color

let knight = "brightness";
let hallowKnight = "shadow";
console.log(knight, hallowKnight);
[hallowKnight, knight] = [knight, hallowKnight];
console.log(knight, hallowKnight);


這與記憶體給予變數的位址配置有關，在這裡 `chara, frish` 為指標指向 `Chara, Frish` 兩個值，而透過 `[] = []` 將他改變指向 (也就是從粉色箭頭變為紅色箭頭)

# 預設值

先在左邊的 `[]` 配置內容，這邊定義了預設值，再由後面的`[]`加入新的值做出改變

// Array 作法
let [ chara = "Chara", frisk = "Frisk"] = [, "Sam"];
console.log(chara, frisk);

# 物件縮寫

當屬性與物件名稱一樣時，可以不用寫 `{ 屬性: 值 }`

這個寫法常見於 `vue` 使用到 `module` 會出現

原先做法

const tools = {
  weapon: "stick",
  cloths: "T-shirt"
};

const npc = {
  shopKeeper: "none",
  npc1: "Sam"
};

const undertale = {
  tools: tools,
  npc: npc
};

console.log(undertale);

新作法

const tools = {
  weapon: "stick",
  cloths: "T-shirt"
};

const npc = {
  shopKeeper: "none",
  npc1: "Sam"
};

**const undertale = {
  tools,
  npc
};**

console.log(undertale);

---

## 搭配解構

運用之前的 `...` 去解開物件得到裡面的值並賦予到新的物件上

原先做法

const myPets = {
  Dogs: {
    name: "hot dog",
  },
  Cats: {
    name: "hot cat",
  },
  Fishes: {
    name: "Undye"
  }
};

const newPets = myPets;
newPets.Ghosts = {
  name: "nobody"
};
console.log(newPets);

新作法

const myPets = {
  Dogs: {
    name: "hot dog",
  },
  Cats: {
    name: "hot cat",
  },
  Fishes: {
    name: "Undye"
  }
};

const newPets = {
  ...myPets,
  Ghosts: {
    name: "nobody"
  }
};
console.log(newPets);