基本說明

當把資料接收回來，就應該要開始處理他們了， JS 世界中較常遇到的資料有

• Json
• Object
• Array

Json

在JS中是以字串格式呈現，花括號( { } )內用雙引號( " )包覆每個字，再用單引號( ' )包覆
把 單引號( ' ) 移除，你會發現 Json 和物件非常相似，只差別在於雙引號( " )，故兩者是可以轉換的！
Json 用於資料交換，再後續介紹到 HttpClient ，就會再跟大家見面了

Object(物件)

Key/Value 呈現

Json & Object

JSON.parse(Json)：Json 轉為 Object
JSON.stringify(Object)：Object 轉為 Json

src\app\app.component.ts
-----
jsonData = '{"name":"poychuang","age":"24"}' ; //Json
objectData = {name:'poychuang',age:24}; //Object

Array

一個串接一個，使用 , 分隔

src\app\app.component.ts
-----
stringArray = ['hello', 'holla', 'ha', 'hi', 'hu'];
jsonData = '{"name":"poychuang","age":"24"}';

既然傳送資料是使用 Json ，為何要先介紹 Array ，因為大部分的資料都是一組定義好的相同資料，像是上面的 jsonData ，而系統會有很多人 Key in ，最簡單的紀錄方式就是用陣列去串，既然資料在陣列中，自然就先要了解 陣列如何使用！

在了解 Array 前，說個在面試被考到的題目：說明深拷貝和淺拷貝的不同
深拷貝：複製出來的物件是全新的物件
淺拷貝：複製出來的物件是參照的物件

就像是郵局的戶頭有10,000元(代號：A)
深拷貝：複製出來的物件像是郵局戶頭(代號：B)，刷1,000元
A剩 10,000元；B剩9,000元
淺拷貝：複製出來的物件像是提款卡(代號：C)，刷1,000元
A剩9,000元；C剩9,000元

簡短 Array 用法說明

Array.prototype.concat()

• 用途
  合併陣列
• 語法
  var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
• 回傳
  新的陣列(深拷貝)

Array.isArray()

• 用途
  判別是否為陣列
• 語法
  Array.isArray(obj)
• 回傳
  boolean (true/false)

Array.prototype.filter()

• 用途
  判別每個值是否符合檢驗式
• 語法
  var newArray = arr.filter(callback[, thisArg])
• 回傳
  新的陣列，符合上述檢驗式(深拷貝)

Array.prototype.find()

• 用途
  判別每個值是否符合檢驗式，直到找到第一個符合的值
• 語法
  arr.find(callback[, thisArg])
• 回傳
  檢驗式?通過的值 : undefined

Array.prototype.findIndex()

• 用途
  判別每個值是否符合檢驗式，直到找到第一個符合的值，回傳其陣列的索引值
• 語法
  arr.findIndex(callback[, thisArg])
• 回傳
  檢驗式?回傳的索引值 : -1

Array.prototype.forEach()

• 用途
  將陣列每個值都帶進 函式
• 語法
  arr.forEach(function callback(currentValue[, index[, array]]) {//你的程式碼}[, thisArg]);
• 回傳
  undefined

Array.prototype.map()

• 用途
  將陣列的每個值都帶進 函式，並回傳出新的值，再組成新的陣列
• 語法
  var new_array = arr.map(function callback(currentValue[, index[, array]]) {// Return element for new_array}[, thisArg])
• 回傳
  新的陣列，通過函式(深拷貝)

Array.prototype.push()

• 用途
  添加新的值到陣列末端
• 語法
  arr.push(element1[, ...[, elementN]])
• 回傳
  陣列的length

Array.prototype.splice()

• 用途
  添加新的值到陣列末端
• 語法
  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  start：起始位置
  deleteCount：刪除幾個陣列值
  item1...：添加新的陣列值
• 回傳
  被刪除的值組成新陣列

參考來源

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array