好家伙，本篇為《JS高級程式設計》第六章“集合引用類型”學習筆記

1.數組的複製和填充

批量複製方法 copyWithin（），以及填充數組方法fill（）。

這兩個方法的函數簽名類似，都需要指定既有數組實例上的一個範圍，包含開始索引，不包含結束索引。

使用這個方法不會改變數組的大小。

1.1.fill()方法

使用fill（）方法可以向一個已有的數組中插入全部或部分相同的值。

開始索引用於指定開始填充的位置，它是可選的。

如果不提供結束索引，則一直填充到數組末尾。

負值索引從數組末尾開始計算。

const array =[0,0,0,0,0];

//填充5
array.fill(5);
console.log(array);

//從索引為3的數開始填充3
array.fill(3,3);
console.log(array);

//在索引為1到3的數中填充8
array.fill(8,1,3);
console.log(array);

1.2.copyWithin（）

copyWithin()會按照指定範圍淺複製數組中的部分內容,然後將它們插入到指定索引開始的位置

const array =[0,1,0,2,0,3,0,4,0,5];

//複製索引0開始的內容,插入到索引8開始時的位置
array.copyWithin(8);
console.log(array);

//複製索引5開始的內容,插入到索引0開始的位置
array.copyWithin(0,5);
console.log(array);

//複製索引0到索引2的內容,插入到索引6開始的位置
array.copyWithin(6,0,2);
console.log(array);

2.轉換方法

前面提到過.所有對象都有toLocaleString（）、toString（）和valueof（）方法。

其中，valueof（）返回的還是數組本身。

tostring（）返回由數組中每個值的等效字元串拼接而成的一個逗號分隔的三字元串。

let colors = ["red", "blue", "green"];
console.log(colors.toString());
console.log(colors.valueOf());

//使用join()方法可以使用不同的分隔符
console.log(colors.join("||"));

3.數組常用方法

方法splice（）用於創建一個包含原有數組中一個或多個元素的新數組。

splice（）方法可以接收一個或兩個參數：返回元素的開始索引和結束索引。

如果只有一個參數，則splice（）會返回該索引到數組末尾的所有元素。

如果有兩個參數，則splice（）返回從開始索引到結束索引對應的所有元素，其中不包含結束索引對應的元素。

記住，這個操作不影響原始數組。

或許最強大的數組方法就屬splice（）了，使用它的方式可以有很多種。

splice（）的主要目的是在數組中間插入元素，但有3種不同的方式使用這個方法。

(確實強大)

(1)  刪除。需要給splice（）傳2個參數：要刪除的第一個元素的位置和要刪除的元素數量。

可以從數組中刪除任意多個元素，比如splice（0,2）會刪除前兩個元素。

(2) 插入。需要給splice（）傳3個參數：開始位置、0（要刪除的元素數量）和要插入的元素，可以在數組中指定的位置插入元素。

第三個參數之後還可以傳第四個、第五個參數，乃至任意多個要插入的元素。

比如，splice（2,0，＂red＂，＂green＂）會從數組位置2開始插入字元串＂red＂和＂green"。

(3) 替換。splice（）在刪除元素的同時可以在指定位置插入新元素，同樣要傳入3個參數：開始位置、要刪除元素的數量和要插人的任意多個元素。

要插入的元素數量不一定跟刪除的元素數量一致。比如，s（2,1，＂red＂，＂green＂）會在位置2刪除一個元素，然後從該位置開始向數組中插入＂＂和＂green＂。

splice（）方法始終返回這樣一個數組，它包含從數組中被刪除的元素（如果沒有刪除元素，則返回空數組）

(一個方法,滿足三個願望)

試一試:

let colors = ["red", "blue", "green"];

colors.splice(0,1);
console.log(colors);

colors.splice(1,0,"black","orange");
console.log(colors);

colors.splice(1,1,"pink");
console.log(colors);

4.搜索和"判斷"方法

 4.1.搜索方法

ECMAScript提供了3個嚴格相等的搜索方法：indexof（）、lastIndexof（）和includes（）。

其中，前兩個方法在所有版本中都可用，而第三個方法是ECMAScript7新增的。

這些方法都接收兩個參數：要查找的元素和一個可選的起始搜索位置。

indexof（）和includes（）方法從數組前頭（第一項）開始向後搜索，而lastIndexof（）從數組末尾（最後一項）開始向前搜索。
indexof（）和 lastIndexof（）都返回要查找的元素在數組中的位置，如果沒找到則返回-1。

includes（）返回布爾值，表示是否至少找到一個與指定元素匹配的項。

 書裡面居然沒寫includes()方法的參數,補充一下:

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

console.log(array.indexOf(1));
console.log(array.lastIndexOf(1));
console.log(array.includes(1));

console.log(array.indexOf(1,5));
console.log(array.lastIndexOf(1,5));
//從索引5開始找"1",找到就返回true
console.log(array.includes(1,5));

4.2.斷言函數

ECMAScript 也允許按照定義的斷言函數搜索數組，每個索引都會調用這個函數。

斷言函數的返回值決定了相應索引的元素是否被認為匹配。
斷言函數接收3個參數：元素、索引和數組本身。

其中元素是數組中當前搜索的元素，索引是當前元素的索引，而數組就是正在搜索的數組。

斷言函數返回真值，表示是否匹配。
find（）和findIndex（）方法使用了斷言函數。

這兩個方法都從數組的最小索引開始。

find（）返回第一個匹配的元素，findIndex（）返回第一個匹配元素的索引。

這兩個方法也都接收第二個可選的參數，用於指定斷言函數內部this的值。

let people = [{
        name: "panghu",
        age: "80"
    },
    {
        name: "dream",
        age: "50"
    },
    {
        name: "xiaofu",
        age: "30"
    },
];

console.log(people.find((element, index, array) => element.age > 49));

console.log(people.findIndex((element, index, array) => element.age > 49));

(感覺這個歸類進迭代方法也沒什麼問題)

5.迭代方法

ECMAScript為數組定義了5個迭代方法。

每個方法接收兩個參數：以每一項為參數運行的函數．個參數：數組元素、元素索引和數組本身。

因具體方法而異，這個函數的執行結果可能會也可能不會影響方法的返回值。

數組的5個迭代方法如下。

(1) every（）：對數組每一項都運行傳入的函數，如果對每一項函數都返回true，則這個方法返回true。

(2) some（）：對數組每一項都運行傳入的函數，如果有一項函數返回true，則這個方法返回true。這些方法都不改變調用它們的數組。

(3) map（）：對數組每一項都運行傳入的函數，返回由每次函數調用的結果構成的數組。

(4) filter（）：對數組每一項都運行傳入的函數，函數返回true的項會組成數組之後返回。
(5) forEach（）：對數組每一項都運行傳入的函數，沒有返回值。

可以說,every(),some(),和map()組成一類,他們像斷言函數

filter()和forEach()為一類他們則更像"迭代"操作

重要的例子：

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

//every()全部符合要求,才返回true
console.log(array.every((element, index, array) => element > 2));

//some()只要有一個符合要求,就返回true
console.log(array.some((element, index, array) => element > 2));

//map()對所有項調用方法,將每一次調用的結果構成數組返回
console.log(array.map((element, index, array) => element > 2));

//filter()0把符合要求的篩選出來
console.log(array.filter((element, index, array) => element > 2));

//forEach()把符合要求的項進行某些操作
console.log(array.forEach((element, index, array) => element > 2));

6.歸併方法

這個沒啥好說的,本質上也是迭代方法的一種,多了幾個參數而已

ECMAScript為數組提供了兩個歸併方法：reduce（）和 reduceRight（）。

這兩個方法都會迭代數組的所有項，併在此基礎上構建一個最終返回值。

reduce（）方法從數組第一項開始遍歷到最後一項。

而 reduceRight（）從最後一項開始遍歷至第一項。

(一個從左往右,一個從右往左)
這兩個方法都接收兩個參數：對每一項都會運行的歸併函數，以及可選的以之為歸併起點的初始值：傳給reduce（）和reduceRight（）的函數接收4個參數：上一個歸併值、當前項、當前項的索引和數組本身。

這個函數返回的任何值都會作為下一次調用同一個函數的第一個參數。

如果沒有給這兩個方法傳入可選的第二個參數（作為歸併起點值），則第一次迭代將從數組的第二項開始，因此傳給歸併函數的第一個參數是數組的第一項，第二個參數是數組的第二項。
可以使用reduce（）函數執行累加數組中所有數值的操作.

const array_1 = [9, 90, 900, 9000, 1];

let sum = array_1.reduce((prev, cur, index, array) => 
    prev + cur,
);
console.log(sum);

That's all