好家伙，本篇為《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

標籤：其他

上一篇：Javascript | 分別用async await異步方法和Promise來實作一個簡易的求職程式

下一篇：高級前端進階（七）