前言

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

1. 添加/刪除元素

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

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

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

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

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

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

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

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

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

  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）的淺拷貝新數(shù)組，不修改原數(shù)組。

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

2. 查找元素

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

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

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

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

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

  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)：對數(shù)組中的每個元素執(zhí)行一次提供的函數(shù)（不會返回新數(shù)組）。

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 數(shù)組排序和變換

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

  字符串?dāng)?shù)組排序

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

  數(shù)字?jǐn)?shù)組排序對于數(shù)字?jǐn)?shù)組，默認(rèn)排序可能會給出錯誤的結(jié)果，因為默認(rèn)是將所有值轉(zhuǎn)換成字符串再排序

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

  為了正確地對數(shù)字進行排序，應(yīng)該提供一個比較函數(shù)

  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]
  

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

  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()：反轉(zhuǎn)數(shù)組順序，會修改原數(shù)組。

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

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

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

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

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

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

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

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

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

5. 其他常用方法

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

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

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

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

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

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

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

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

總結(jié) 

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

最新評論