目錄

1.會改變原數組的方法（7種）

1.push()

2.pop()

3.unshift()

4.shift()

5.reverse()

6.sort()

7.splice()

2.不改變原數組的方法（13種，返回的新數組是從原數組淺拷貝來的）

1.concat()

2.join()

3.slice()

4.indexOf()

5.forEach()

6.map()

7.filter()

8.every()

9.some()

10.find()

11.findIndex()

12.includes()

13.reduce()

---

• 理解一個API最重要的是看它的作用，參數，返回值。
• 每一個API這三個方面我都會先說明，并在后面的例子中體現出來。
• 看完這篇文章，在寫代碼或者面試的時候你還只會那幾種屈指可數的方法嗎？
• 趕快學起來吧！

1.會改變原數組的方法（7種）

1.push()

• 作用：尾部添加元素
• 參數：添加的元素
• 返回值：操作完成后數組的長度

      let arr = [10, 20, 30, 40];let response = arr.push(20, 50);console.log(arr);console.log(response);

2.pop()

• 作用：尾部刪除一個元素
• 參數：無
• 返回值：刪除的那個元素

      let arr = [10, 20, 30, 40];let response = arr.pop();console.log(arr);console.log(response);

3.unshift()

• 作用：頭部添加元素
• 參數：添加的元素
• 返回值：操作完成后數組的長度

      let arr = [1, 2, 3, 4];let response = arr.unshift(0, 1, "123", true, { a: 100 });console.log(arr);console.log(response);

4.shift()

• 作用：頭部刪除一個元素
• 參數：無
• 返回值：刪除的那個元素

      let arr = [1, 2, 3, 4];let response = arr.shift();console.log(arr);console.log(response);

5.reverse()

• 作用：反轉數組
• 參數：無
• 返回值：操作完成后的數組

      let arr = [1, 2, 3, 4];let response = arr.reverse();console.log(arr);console.log(response);

6.sort()

• 作用：排序
• 參數：無（默認從小到大排序）或函數
• 返回值：操作完成后的數組

      let arr = [-1, 1, 5, 3, 4, 6, 2, 7];//默認let response = arr.sort();console.log(arr);console.log(response);//從小到大排序arr.sort((a, b) => {return a - b;});console.log(arr);//從大到小排序arr.sort((a, b) => {return b - a;});console.log(arr);

7.splice()

• 作用：在指定索引處刪除，添加元素
• 參數：（索引，刪除元素的個數，添加的元素）。第三個參數可選
• 返回值：刪除的元素（數組）

      let arr = [-1, 1, 5, 3, 4, 6, 2, 7];let response = arr.splice(2, 2);console.log(arr);console.log(response);let arr2 = [-1, 1, 5, 3, 4, 6, 2, 7];let response2 = arr2.splice(2, 0, 8);console.log(arr2);console.log(response2);

2.不改變原數組的方法（13種，返回的新數組是從原數組淺拷貝來的）

1.concat()

• 作用：合并多個數組
• 參數：（數組）
• 返回值：返回一個新數組

      let arr = [1, 2, 3, 4, 5];let arr2 = ["zs", "ls", "ww", 1, 2];let res = arr.concat(arr2);console.log(arr);console.log(res);

2.join()

• 作用：把數組轉化成以指定分隔符連接的字符串
• 參數：（分隔符，或無參數（默認的分隔符是' , '））
• 返回值：字符串

      let arr = [1, 2, 3, 4, 5];let res = arr.join("--");let res2 = arr.join();console.log(arr);console.log(res);console.log(res2);

3.slice()

• 作用：截取數組
• 參數：（開始索引，結束索引）。截取的元素包括開始索引，不包括結束索引
• 返回值：新數組

      let arr = [1, 2, 3, 4, 5];let res = arr.slice(1, 3);console.log(arr);console.log(res);

4.indexOf()

• 作用：查找元素在數組中的索引
• 參數：（查找的元素）
• 返回值：索引值。數組中沒有此元素則返回-1

      let arr = [1, 2, 3, 4, 5];let res = arr.indexOf(4);let res2 = arr.indexOf(6);console.log(arr);console.log(res);console.log(res2);

5.forEach()

• 作用：遍歷數組
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：無

      let arr = [1, 2, 3, 4, 5];let res = arr.forEach((item, index) => {console.log(item, "-", index);});console.log(arr);console.log(res);

6.map()

• 作用：映射數組（必須通過return關鍵字來映射）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：新數組

      let arr = [1, 5, 3, 4, 6];let res = arr.map((item, index) => {let a = item + index;return a;});console.log(arr);console.log(res);

7.filter()

• 作用：過濾篩選數組（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：新數組

      let arr = [1, 5, 3, 4, 6];let res = arr.filter((item, index) => {//第一種方式：// if (item >= 4) {//   return true;// }//第二種方式：return item >= 4;//兩種方式效果都一樣});console.log(arr);console.log(res);

8.every()

• 作用：判斷數組中每個元素是否都滿足指定的條件（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：布爾值

      let arr = [1, 2, 3, 4, 5];let res = arr.every((item, index) => {return item > 0;});console.log(arr);console.log(res);let res2 = arr.every((item, index) => {return item > 3;});console.log(arr);console.log(res2);

9.some()

• 作用：判斷數組中是否有元素滿足指定的條件（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：布爾值

      let arr = [1, 2, 3, 4, 5];let res = arr.some((item, index) => {return item > 2;});console.log(arr);console.log(res);let res2 = arr.some((item, index) => {return item > 5;});console.log(arr);console.log(res2);

10.find()

• 作用：獲取數組中滿足指定條件的第一個元素（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：滿足指定條件的第一個元素。沒有滿足條件的返回undefined

      let arr = [1, 2, 3, 4, 5];let res = arr.find((item, index) => {return item > 3;});console.log(arr);console.log(res);let res2 = arr.find((item, index) => {return item > 5;});console.log(arr);console.log(res2);

11.findIndex()

• 作用：獲取數組中滿足指定條件的第一個元素的索引（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：數組中的每一項，每一項對應的索引）
• 返回值：索引值。沒有滿足條件的元素則返回-1

      let arr = [1, 2, 3, 4, 5];let res = arr.findIndex((item, index) => {return item > 2;});console.log(arr);console.log(res);let res2 = arr.findIndex((item, index) => {return item > 5;});console.log(arr);console.log(res2);

12.includes()

• 作用：判斷數組中是否包含指定的元素
• 參數：指定的元素
• 返回值：布爾值

      let arr = [1, 2, 3, 4, "ab", "bd"];console.log(arr.includes(2));console.log(arr.includes(5));console.log(arr.includes("ab"));console.log(arr.includes("c"));

13.reduce()

• 作用：對數組的元素進行疊加操作（必須要用return關鍵字）
• 參數：函數（函數中依次傳入的參數：前一次操作返回的值，當前項，當前項的索引），第二個參數（作為pre的初始值，可選）
• 返回值：最后一次遍歷return的值

      let arr = [1, 2, 3, 4, 5];//不傳第二個參數：pre的初始值是數組第一個元素，cur是第二個元素，index從1開始let res = arr.reduce((pre, cur, index) => {console.log(pre, cur, index);return pre + cur;});console.log(res);//傳第二個參數：pre的初始值是傳入的第二個參數，cur是第一個元素，index從0開始let res2 = arr.reduce((pre, cur, index) => {console.log(pre, cur, index);return pre + cur;}, -1);console.log(res2);//應用1//計算數組中每個元素出現的次數let arr2 = [1, "b", 1, "a", "b", 1, 2];let num = arr2.reduce((pre, cur, index) => {if (cur in pre) {pre[cur]++;} else {pre[cur] = 1;}return pre;}, {});console.log(num);//應用2//對數組中對象里的屬性進行累加let arr3 = [{subject: "math",score: 10,},{subject: "chinese",score: 20,},{subject: "english",score: 30,},];let sum = arr3.reduce((pre, cur, index) => {return pre + cur.score;}, 0);console.log(sum);

文章到這里就結束了，覺得有收獲的可以點贊和收藏哦！也歡迎大家評論區留言。