今天要來介紹的是字串怎麼變成陣列還有陣列怎麼變成字串，在陣列的方法中已經存在著與字串互相轉換的方法，只是分別是不同的語法，首先是字串轉陣列的方法

.split()

顧名思義，split 有分開的意思，在這裡就是把字串分開成陣列那要怎麼分開?可以在小括弧裡面指定需要分開的字符，有三種狀況範例如下:

狀況一:裡面不帶值，會把一串字串包在同一個陣列的 index 裡，也就是長度為 1 的陣列

let string = "12345";
let newArray = string.split();
console.log(newArray);

狀況二:裡面有帶參數但其值為空,會把一個字一個字的拆開來變成陣列，換句話說每個字就是一個 index

let string = "12345";
let newArray = string.split("");
console.log(newArray);

狀況三:裡面有帶參數其值為空白鍵字符

let string = "1 2 3 4 5"; //用空白鍵字符分開
let newArray = string.split(" ");
console.log(newArray);

.join()

使用方法其實與 split 極為相似只是整個倒過來了，小括弧裡決定要用什麼連接成字串，以陣列而言通常是”,”預設也是”,”

let array = [1, 2, 3, 4, 5];
let string = array.join(","); //決定要用什麼連接成字串，以陣列而言通常是","預設也是","
console.log(string);

以上是字串與陣列互換的方法~

引用資料

MDN Array.prototype.join

Day 7 搜尋陣列的方法-find,findIndex & filter

今天介紹的三個語法是針對陣列的搜尋功能，有 find(),findIndex(),filter()

.find()

引用 MDN 的描述”find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined”
簡而言之，就是在陣列裡尋找需要的值並進行回傳需要 return，但是只會回傳一次，也竟是滿足條件的第一個值。
用法是裡面帶一個 callback，有三個參數: 1.被處理的元素 2.被處理元素的 index 3.被處理的陣列本身

let array = [1, 2, 3, 4, 5];
let value = array.find((v, i, arr) => {
  return v > 3;
});
console.log(value);

.findIndex()

用法語 find 一模一樣，只是 find 是回傳值，findIndex 是回傳 index，如果沒有符合條件的值會回傳-1
裡面一樣帶一個 callback，有三個參數: 1.被處理的元素 2.被處理元素的 index 3.被處理的陣列本身

let array = [1, 2, 3, 4, 5];
let index = array.findIndex((v, i, arr) => {
  return v > 3;
});
console.log(index);

filter

這是昨日介紹 find 的加強功能版，它可以把在陣列符合指定條件的值儲存成一個==新陣列==意味著不會修改到遠本的陣列，其用法也是大同小異帶一個 callback 包含如下三個參數，然後寫出需要的判斷式 1.被處理的元素 2.被處理元素的 index 3.被處理的陣列本身

let array = [1, 2, 3, 4, 5];
let newArray = array.filter((v, i, arr) => {
  return v > 3;
});
console.log(newArray);

這三著其實都很常用到，並沒有誰好誰壞，端看用途而定。

引用資料

MDN Array.prototype.find

Day 6 其他的陣列方法 slice & splice

前兩天介紹的 4 個方法:shift,unshift,pop,push 都有一個共通點是，都會修改原本的陣列。
接下來要介紹的 slice 與上述的不同，==不會改變原本的陣列==，會傳回一個新陣列值

.slice()

引用 MDN 的敘述

方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。

講的白話一點就是，帶入兩個參數分別是開始的 index 和結束的 index，然後把這之間 ==(不包含結束的)== 的陣列複製到新的陣列上，舉例如下:

let array=[1,2,3,4,5]
let newArray=array.slice(0,2)
console.log(newArray)//輸出:[1,2]

有三點要注意

1.帶入的 index 參數為負值意思就是從尾部算，僅指定位置而已功能依舊不變還是把這之間(不包含結束的)的陣列複製到新的陣列上

let array=[1,2,3,4,5]
let newArray=array.slice(-0,-2)
console.log(newArray)//輸出:[1,2]

2.可以不帶參數，亦即完整的淺拷貝，也就是完全複製一個新陣列

let array=[1,2,3,4,5]
let newArray=array.slice()
console.log(newArray)//輸出:[1,2,3,4,5]

3.可以指輸入一個值，意思是從哪個 index 開始複製

let array=[1,2,3,4,5]
let newArray=array.slice(2)
console.log(newArray)//輸出:[3,4,5]

.splice()

雖然這個函式與 slice 只差一個字但功用卻不一樣，此函式最不一樣的功能是在陣列中插入新成員，但會==改變原有的陣列==。
其用法稍微複雜一點，裡面需要帶三個參數 1.開始的 index 2.往後刪除的個數(可以為 0) 3.要加入的東西
.splice(開始的 index,刪除個數,新東西)

let array=[1,2,3,4,5]
array.splice(1,1,"a")
console.log(array)//輸出:[1,"a",3,4,5]

引用資料

MDN Array.prototype.slice

接著昨天的陣列操作方法，今天會針對 shift,unshift 做介紹

.shift()

shift 有移除的意思，這這裡也確實是移除陣列的值，但只有移除首位，裡面不帶參數，但對空陣列使用會回傳 undefined。範例如下

let array = [1, 2, 3, 4, 5];
array.shift(); //第一次移除，會移除1
console.log(array);
array.shift(); //第二次移除，因為1被移除了，會移除2
console.log(array);

對空陣列使用

let array = [];
array.shift(); //會回傳undefined
console.log(array);

結果如下:

.unshift()

在英文裡有 un 就有相反的意思，所以與上面的語法相反就是增加，它可以在陣列首位增加一個會多個值也可以是陣列，用法是在小括弧裡面塞進要添加的東西，範例如下:

可以加入單一值

let array = [1, 2, 3, 4, 5];
array.unshift("a");
console.log(array);

也可以加入多個值

let array = [1, 2, 3, 4, 5];
console.log(array.unshift("a", "b"));
console.log(array);

還可以加入一個陣列，不過裡面會真的變成一個陣列

let array = [1, 2, 3, 4, 5];
console.log(array.unshift(["a", "b", "c"]));
console.log(array);

其實這組用法和 pop,push 用法幾乎一樣只是分別用在頭尾而已，接著還有其他的陣列用法，明天繼續~

另外補充-會回傳新陣列的語法 .concat()

介紹了很多陣列語法，他們都有共同的特點就是不會回傳新陣列，那會回傳新陣列的語法又是怎麼回事呢?
這裡以.concat()為例，這個語法的的作用在於合併兩個陣列，並回傳一個新陣列，用法如下:

let a = [1, 2, 3]; //要合併的陣列a
let b = [4, 5, 6]; //要合併的陣列b
let c = a.concat(b); //合併完後的結果陣列c
console.log(a); //跟原本一樣
console.log(b); //跟原本一樣
console.log(c); //合併完後的結果

藉由上述的例子，我們可以看到，即使 a,b 陣列使用了 concat 的這個語法，但由 console.log(a)、console.log( c )得知原本的狀態都沒有改變，這就是 shift、和 shift 差別。下面請了 chatGPT 幫忙整理了會改變原始陣列的方法與不會改變原始陣列的方法，就當作是一個速查表吧~

相信大家都有看過類似下面這種圖，今天會針對 push,pop 做介紹

.push()

push 顧名思義就是推東西的意思，在這裡就把它當成是推某個東西都陣列的尾巴，此方法會將一個值或多個值也可以說是陣列加進陣列的尾端，回傳值為新陣列的長度。用法是在小括弧內塞進要加入的東西
範例如下:

可以加入單一值

let array = [1, 2, 3, 4, 5];
array.push("a");
console.log(array);

也可以加入多個值

let array = [1, 2, 3, 4, 5];
console.log(array.push("a", "b"));
console.log(array);

還可以加入一個陣列，不過裡面會真的變成一個陣列

let array = [1, 2, 3, 4, 5];
console.log(array.push(["a", "b", "c"]));
console.log(array);

如果需要完整合併需要用展開運算子

let array = [1, 2, 3, 4, 5];
console.log(array.push(...["a", "b", "c"]));
console.log(array);

.pop()

pop 當作動詞在劍橋字典裡翻成-使什麼彈出的意思，在這裡它的作用是使陣列的末端彈出一個值，說直白一點就是刪除陣列末端的值。裡面不需要帶任何參數，但是如果對空陣列使用會回傳 undefined。

let array = [1, 2, 3, 4, 5];
console.log(array.pop());
console.log(array);

附帶一提，pop 可以回傳被刪除的值，範例如下:

let array = [1, 2, 3, 4, 5];
let popTest = array.pop();
console.log(popTest); //回傳刪除的值
console.log(array); //刪除後的原陣列

以上兩個語法為對陣列末端進增加以及刪除的方法，當然同時也有針對陣列開頭的增加刪除方法，留作明天介紹

在學習 React 之前，會需要瞭解一些 javascript 的基礎概念，常言道”javascript 學得好，react 沒煩惱”，其中陣列的方法倒是蠻常用到的，尤其.map()在資料的呈現處理上是蠻常用到的技巧，因為 map 的用法與 forEach 實在太相似了，所以從 forEach 來了解 map 我認為是一個不錯的方法，那就接著往下看~

.forEach()

是一個遍歷陣列的方法，說的直接一點就是查詢陣列裡面的內容並對其做一些操作。裡面需要帶一個 callback function，裡面包含三個參數如下: 1.陣列裡面的值 2.陣列的 index 3.陣列本身

其方法是不能被==中斷的==，換句話說就是不能 return，也就是說不會回傳值。
範例如下:

var array = [1, 2, 3, 4, 5];

array.forEach((value, index, array2) => {
  console.log("value:" + value);
  console.log("index:" + index);
  console.log(array2); //陣列本身
});

輸出結果:

.map()

同樣是可以遍歷陣列的一個方法，用法也跟 forEach 相似，也是需要帶一個 callback 裡面也是帶三個參數: 1.陣列裡面的值 2.陣列的 index 3.陣列本身

var array = [1, 2, 3, 4, 5];

array.map((value, index, array2) => {
  console.log("value:" + value);
  console.log("index:" + index);
  console.log(array2); //陣列本身
});

但此方法==會回傳==一個新陣列，範例如下:

var array = [1, 2, 3, 4, 5];

var newArray = array.map((value, index, array2) => {
  return value * 2;
});
console.log(newArray); //輸出結果:[2,4,6,8,10]

輸出結果:

總之，forEach 主要用於執行操作而不生成新陣列，而 map 用於生成一個新陣列，其中包含經過處理後的值。