V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作

今天來了解一下JS的陣列的概念
陣列Array, 物件Object在JS中，需要學會非常熟練的操作，
加上各種簡便的語法，這樣在程式的編寫上才會事半功倍

基本的array的操作，可以參考MDN上的說明，
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

探索的重點會落在一些在vue中，常見的用法

首先是陣列的元素操作

let arr = ["a", "b", "c"]; 

一般的for迴圈是

let arr = ["a", "b", "c"];
for(let i=0; i<arr.length; i++){
	console.log(arr[i]);
}

for(let x of arr){ // 用 of arr 回傳 x 是陣列的value值
	console.log(x);  
}

for(let i in arr){  // 用 in arr 回傳i 是陣列的index索引值
	console.log(arr[i]);
}

另外還可以寫成

arr.forEach((x, i)=>{
	console.log(i+","+x);
});

x 是陣列的value值, i 是陣列的index索引值

陣列元素的合併與分離, 使用了 ... 的語法

元素的合併

let arr1 = ["a", "b", "c"];
console.log(arr1);  //-- ['a', 'b', 'c']

let arr2 = ["d", "e", ...arr1];
console.log(arr2); //-- ['d', 'e', 'a', 'b', 'c']

let arr3 = [...arr1, "d", "e"];
console.log(arr3); //-- ['a', 'b', 'c', 'd', 'e']

元素的分離

let [x, y, z] = arr1;
console.log(x); //-- 'a'
console.log(y); //-- 'b'
console.log(z); //-- 'c'

let [r, s, ...t] = arr3;
console.log(r); //-- 'a'
console.log(s); //-- 'b'
console.log(t); //-- ['c', 'd', 'e']

另外是使用 array本身的push function

arr1 = ["a", "b", "c"];
arr1.push("r");
arr1.push("s");
arr1.push("t");
console.log(arr1);  //-- ['a', 'b', 'c', 'r', 's', 't']

arr1 = ["a", "b", "c"];
arr1.push(["i", "j", "k"]);
console.log(arr1);  //-- ['a', 'b', 'c', ["i", "j", "k"]]

arr1 = ["a", "b", "c"];
arr1.push("i", "j", "k");  
console.log(arr1);  //-- ['a', 'b', 'c', 'i', 'j', 'k']

push(["i", "j", "k"]); 是加入一個具有3個元素的陣列
push("i", "j", "k"); 是加入3個元素

arr1 = ["a", "b", "c"];
let arr4 = arr1;
arr4.push("u");
console.log(arr4); //-- ['a', 'b', 'c', 'u']
console.log(arr1); //-- ['a', 'b', 'c', 'u']
 

若使用以下寫法，等於是 將arr1與arr4連結起來
let arr4 = arr1;

所以當對 arr4操作時，arr1也會同步受影響

若是要執行的是複製一份arr1
那麼就要使用

arr1 = ["a", "b", "c"];
let arr5 = [...arr1];
arr5.push("v");
console.log(arr5); //-- ['a', 'b', 'c', 'v']
console.log(arr1); //-- ['a', 'b', 'c']

另外在陣列裡面加入物件也是可以的

arr1 = ["a", "b", "c"];
arr1.push({"d":1, "e":2, "f":3});
console.log(arr1);  //-- ["a", "b", "c", {"d":1, "e":2, "f":3}]

由以上的理解，陣列與物件可以互相加入，
陣列像是以數字index為屬性的物件
物件則是以文字為屬性的物件

let ar1 = ["a", "b", "c"];

-->
['a', 'b', 'c']
0: "a"
1: "b"
2: "c"

let ob1 = {"a":"cat", "b":"dog", "c":"fish"};
-->
{a: 'cat', b: 'dog', c: 'fish'}
a: "cat"
b: "dog"
c: "fish"

讀取元素的方式

console.log(ar1[0]);  //-- "a"
console.log(ob1["a"]); //-- "cat"
console.log(ob1.a);  //-- "cat"

接著是 陣列與物件及字串化之間的轉換

object <--> string

let ob1 = {"a":"cat", "b":"dog", "c":"fish"};

let jsn_str1 = JSON.stringify(ob1);
console.log(jsn_str1);  //-- 字串 {"a":"cat","b":"dog","c":"fish"}

let jsn_obj1 = JSON.parse(jsn_str1);
console.log(jsn_obj1); //-- JSON物件 {a: 'cat', b: 'dog', c: 'fish'}

//-------
array <--> string

let ar1 = ["a", "b", "c"];

let ar1_str = ar1.toString();
console.log(ar1_str);  //-- "a,b,c"

let ar1_obj = ar1_str.split(",");
console.log(ar1_obj);  //-- ['a', 'b', 'c']

object --> array

console.log(Object.keys(ob1));  //-- ['a', 'b', 'c']
console.log(Object.values(ob1)); //-- ['cat', 'dog', 'fish']
console.log(Object.entries(ob1));  //-- [['a', 'cat'], ['b', 'dog'], ['c', 'fish']]

array --> object

console.log({ ...ar1 });  //-- {0: 'a', 1: 'b', 2: 'c'}
console.log(Object.assign({}, ar1)); //-- {0: 'a', 1: 'b', 2: 'c'}

//-- 以下是多層物件複製的方式

let a = { b: { c: 4 }, d: { e: { f: 1 } } };
let g = Object.assign({}, a); 
let h = JSON.parse(JSON.stringify(a)); 
console.log(g);
console.log(h);

//-- 以下是多層陣列複製的方式

let ax = [[["a", "b"], ["c"]], ["d"]];
let gx = [...ax];
console.log(ax);  //-- [[["a", "b"], ["c"]], ["d"]]
console.log(ax.toString());  //-- a,b,c,d
console.log(gx);  //-- [[["a", "b"], ["c"]], ["d"]]