前言

在 JavaScript 中，數組是一個非常常用的數據結構，JavaScript 提供了許多方法來操作和處理數組。以下是 JavaScript 中數組的常用方法，分為不同類型進行介紹：

1. 添加/刪除元素

• push()：向數組末尾添加一個或多個元素，返回數組的新長度。

  let arr = [1, 2, 3];
  arr.push(4); // arr = [1, 2, 3, 4]
  

• pop()：移除并返回數組最后一個元素。

  let arr = [1, 2, 3];
  let last = arr.pop(); // arr = [1, 2], last = 3
  

• unshift()：向數組開頭添加一個或多個元素，返回數組的新長度。

  let arr = [2, 3];
  arr.unshift(1); // arr = [1, 2, 3]
  

• shift()：移除并返回數組第一個元素。

  let arr = [1, 2, 3];
  let first = arr.shift(); // arr = [2, 3], first = 1
  

• splice(start, deleteCount, item1, item2, ...)：從數組中刪除、添加或替換元素。返回被刪除的元素數組。

  let arr = [1, 2, 3, 4, 5];
  arr.splice(1, 2); // 刪除從索引 1 開始的 2 個元素，arr = [1, 4, 5]
  arr.splice(2, 0, 6, 7); // 在索引 2 處插入 6 和 7，arr = [1, 4, 6, 7, 5]
  

• slice(start, end)：返回從 start 到 end（不包括 end）的淺拷貝新數組，不修改原數組。

  let arr = [1, 2, 3, 4, 5];
  let newArr = arr.slice(1, 3); // newArr = [2, 3]
  

2. 查找元素

• indexOf(item)：返回元素在數組中的第一個索引，找不到則返回 -1。

  let arr = [1, 2, 3, 4];
  arr.indexOf(3); // 2
  

• lastIndexOf(item)：返回元素在數組中的最后一個索引，找不到則返回 -1。

  let arr = [1, 2, 3, 2];
  arr.lastIndexOf(2); // 3
  

• includes(item)：判斷數組是否包含某個元素，返回布爾值。

  let arr = [1, 2, 3];
  arr.includes(2); // true
  

• find(callback)：返回滿足條件的第一個元素，找不到則返回 undefined。

  let arr = [1, 2, 3, 4];
  let found = arr.find(num => num > 2); // 3
  

• findIndex(callback)：返回滿足條件的第一個元素的索引，找不到則返回 -1。

  let arr = [1, 2, 3, 4];
  let foundIndex = arr.findIndex(num => num > 2); // 2
  

3. 迭代和遍歷

• forEach(callback)：對數組中的每個元素執(zhí)行一次提供的函數（不會返回新數組）。

  let arr = [1, 2, 3];
  arr.forEach(num => console.log(num)); // 輸出：1 2 3
  

• map(callback)：對數組中的每個元素執(zhí)行提供的函數，返回新的數組。

  let arr = [1, 2, 3];
  let newArr = arr.map(num => num * 2); // newArr = [2, 4, 6]
  

• filter(callback)：返回滿足條件的元素組成的新數組。

  let arr = [1, 2, 3, 4];
  let filteredArr = arr.filter(num => num > 2); // filteredArr = [3, 4]
  

• some(callback)：如果數組中至少有一個元素滿足條件，則返回 true，否則返回 false。

  let arr = [1, 2, 3];
  arr.some(num => num > 2); // true
  

• every(callback)：如果數組中每個元素都滿足條件，則返回 true，否則返回 false。

  let arr = [1, 2, 3];
  arr.every(num => num > 0); // true
  

• reduce(callback, initialValue)：將數組元素組合為一個值，callback 接收四個參數：累計值、當前值、當前索引和原數組。initialValue 是可選的初始累計值。

  let arr = [1, 2, 3, 4];
  let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
  

• reduceRight(callback, initialValue)：從數組的末尾開始執(zhí)行 reduce 操作。

  let arr = [1, 2, 3, 4];
  let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
  

4. 數組排序和變換

• sort(compareFunction)：對數組進行排序，會修改原數組。compareFunction 可選，用于自定義排序規(guī)則。

  字符串數組排序

  let fruits = ['banana', 'apple', 'mango'];
  fruits.sort();
  console.log(fruits); // 輸出 ['apple', 'banana', 'mango']
  

  數字數組排序對于數字數組，默認排序可能會給出錯誤的結果，因為默認是將所有值轉換成字符串再排序

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort(); // 默認轉換為字符串排序，結果可能不是期望的 [1, 2, 3, 5, 8, 10]
  console.log(numbers); // 輸出[ 1, 10, 2, 3, 5, 8 ]
  

  為了正確地對數字進行排序，應該提供一個比較函數

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort((a, b) => a - b); 
  console.log(numbers); // 輸出[1, 2, 3, 5, 8, 10]
  

  如果想要倒序

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort((a, b) => b - a); 
  console.log(numbers); // 輸出[10, 8, 5, 3, 2, 1]
  

  對象數組排序如果你有一個對象數組，并且想要根據某個屬性來排序這些對象，可以這樣做：

  let people = [
    { name: 'John', age: 23 },
    { name: 'Jane', age: 29 },
    { name: 'Jack', age: 27 }
  ];
  
  // 按年齡排序
  people.sort((a, b) => a.age - b.age);
  console.log(people);
  // 輸出：
  // [
  //   { name: 'John', age: 23 },
  //   { name: 'Jack', age: 27 },
  //   { name: 'Jane', age: 29 }
  // ]
  

• reverse()：反轉數組順序，會修改原數組。

  let arr = [1, 2, 3];
  arr.reverse(); // arr = [3, 2, 1]
  

• join(separator)：將數組元素連接成字符串，separator 是可選的分隔符。

  let arr = [1, 2, 3];
  let str = arr.join('-'); // str = "1-2-3"
  

• concat()：合并兩個或多個數組，返回新數組，不修改原數組。

  let arr1 = [1, 2];
  let arr2 = [3, 4];
  let newArr = arr1.concat(arr2); // newArr = [1, 2, 3, 4]
  

• flat(depth)：將多維數組“拉平”到指定的深度，默認深度為 1。

  let arr = [1, [2, [3, [4]]]];
  let flatArr = arr.flat(2); // flatArr = [1, 2, 3, [4]]
  

• flatMap(callback)：對每個元素調用映射函數，然后將結果“拉平”一層。

  let arr = [1, 2, 3];
  let flatMapped = arr.flatMap(num => [num, num * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]
  

5. 其他常用方法

• Array.isArray()：檢查一個值是否為數組。

  Array.isArray([1, 2, 3]); // true
  

• fill(value, start, end)：用指定值填充數組，start 和 end 是可選的起始和結束位置（不包括結束位置）。

  let arr = [1, 2, 3, 4];
  arr.fill(0, 1, 3); 
  console.log(arr) // 會改變原數組輸出：[1, 0, 0, 4]
  

• from()：從類數組或可迭代對象創(chuàng)建一個新數組。

  let arr = Array.from('hello'); 
  console.log(arr) // 輸出：['h', 'e', 'l', 'l', 'o']
  

• of()：根據給定的參數創(chuàng)建一個新數組。

   let arr = Array.of(1, 2, 3); 
   console.log(arr) // [ 1, 2, 3 ]

總結 

到此這篇關于javascript數組的一些常用方法的文章就介紹到這了,更多相關js數組常用方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論