js數(shù)組array方法有哪些_js數(shù)組array方法全面解析

JS數(shù)組方法眾多，掌握它們能極大提高開發(fā)效率。本文全面解析了js數(shù)組常用方法，包括增、刪、改、查、排序、迭代等操作。1. 增：push、unshift用于在數(shù)組末尾或開頭添加元素；concat合并數(shù)組不改變?cè)瓟?shù)組。2. 刪：pop刪除末尾元素；shift刪除首個(gè)元素；splice可刪除或替換元素。3. 改：通過(guò)splice或索引直接修改元素。4. 查：indexof、lastindexof查找索引；includes判斷是否存在；find和findindex查找符合條件的元素。5. 排序：sort按指定規(guī)則排序；reverse顛倒順序。6. 迭代：foreach循環(huán)執(zhí)行函數(shù)；map生成新數(shù)組；Filter篩選元素；reduce匯總計(jì)算；every和some進(jìn)行條件判斷。7. 其他：join轉(zhuǎn)為字符串；slice截取數(shù)組副本；isArray判斷是否為數(shù)組。高效使用迭代方法需根據(jù)場(chǎng)景選擇合適的方法，如map轉(zhuǎn)換、filter篩選、reduce匯總。splice功能強(qiáng)大但易誤用，需注意參數(shù)及對(duì)原數(shù)組的影響。避免常見錯(cuò)誤包括：區(qū)分是否改變?cè)瓟?shù)組、正確使用索引、理解回調(diào)參數(shù)、不在循環(huán)中修改數(shù)組長(zhǎng)度、使用const保護(hù)不變數(shù)組。

JS數(shù)組方法眾多，掌握它們能極大提高開發(fā)效率。本文將帶你全面解析JS數(shù)組常用方法，助你玩轉(zhuǎn)數(shù)組操作。

解決方案

JS數(shù)組提供了豐富的方法，可以對(duì)數(shù)組進(jìn)行增、刪、改、查、排序等操作。下面是一些常用的方法：

1. 增：

   

   • push(element1, …, elementN)：向數(shù)組末尾添加一個(gè)或多個(gè)元素，并返回新的數(shù)組長(zhǎng)度。會(huì)改變?cè)瓟?shù)組。
   • unshift(element1, …, elementN)：向數(shù)組開頭添加一個(gè)或多個(gè)元素，并返回新的數(shù)組長(zhǎng)度。會(huì)改變?cè)瓟?shù)組。
   • concat(array1, …, arrayN)：將一個(gè)或多個(gè)數(shù)組合并成一個(gè)新數(shù)組，不會(huì)改變?cè)瓟?shù)組。

2. 刪：

   • pop()：刪除數(shù)組末尾的最后一個(gè)元素，并返回被刪除的元素。會(huì)改變?cè)瓟?shù)組。
   • shift()：刪除數(shù)組的第一個(gè)元素，并返回被刪除的元素。會(huì)改變?cè)瓟?shù)組。
   • splice(start, deleteCount, item1, …, itemN)：從數(shù)組中刪除或替換一些元素，并返回被刪除的元素組成的數(shù)組。會(huì)改變?cè)瓟?shù)組。start 指定起始位置，deleteCount 指定刪除的元素個(gè)數(shù)，item1, …, itemN 指定要添加的新元素。

3. 改：

   • splice(start, deleteCount, item1, …, itemN)：除了刪除，還可以替換元素。
   • 直接通過(guò)索引修改數(shù)組元素：arr[index] = newValue;

4. 查：

   • indexOf(searchElement, fromIndex)：返回?cái)?shù)組中第一個(gè)找到指定元素的索引，如果不存在則返回 -1。
   • lastIndexOf(searchElement, fromIndex)：返回?cái)?shù)組中最后一個(gè)找到指定元素的索引，如果不存在則返回 -1。
   • includes(searchElement, fromIndex)：判斷數(shù)組是否包含指定元素，返回 true 或 false。
   • find(callback(element, index, array), thisArg)：返回?cái)?shù)組中第一個(gè)滿足提供的測(cè)試函數(shù)的元素的值，否則返回 undefined。
   • findIndex(callback(element, index, array), thisArg)：返回?cái)?shù)組中第一個(gè)滿足提供的測(cè)試函數(shù)的元素的索引，否則返回 -1。

5. 排序：

   • sort(compareFunction)：對(duì)數(shù)組的元素進(jìn)行排序，并返回排序后的數(shù)組。會(huì)改變?cè)瓟?shù)組。可以傳入一個(gè)比較函數(shù) compareFunction 來(lái)指定排序規(guī)則。如果沒(méi)有提供 compareFunction，則按照字符串的 Unicode 碼點(diǎn)進(jìn)行排序。
   • reverse()：顛倒數(shù)組中元素的順序，并返回修改后的數(shù)組。會(huì)改變?cè)瓟?shù)組。

6. 迭代：

   • forEach(callback(element, index, array), thisArg)：對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)。
   • map(callback(element, index, array), thisArg)：創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
   • filter(callback(element, index, array), thisArg)：創(chuàng)建一個(gè)新數(shù)組，包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。
   • reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)：對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。
   • reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue)：與 reduce() 類似，但它是從數(shù)組的末尾開始執(zhí)行。
   • every(callback(element, index, array), thisArg)：測(cè)試數(shù)組中的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試。
   • some(callback(element, index, array), thisArg)：測(cè)試數(shù)組中是不是至少有1個(gè)元素通過(guò)了指定函數(shù)的測(cè)試。

7. 其他：

   • join(separator)：將數(shù)組中的所有元素連接成一個(gè)字符串。
   • slice(beginSlice, endSlice)：返回一個(gè)新的數(shù)組對(duì)象，這一對(duì)象是一個(gè)由 beginSlice 和 endSlice 決定的原數(shù)組的淺拷貝（包括 beginSlice，不包括 endSlice）。原始數(shù)組不會(huì)被改變。
   • isArray(obj)：判斷一個(gè)對(duì)象是否為數(shù)組。

如何高效使用JS數(shù)組的迭代方法？

高效使用迭代方法關(guān)鍵在于選擇最適合場(chǎng)景的方法。map 用于轉(zhuǎn)換數(shù)組元素，filter 用于篩選元素，reduce 用于匯總計(jì)算，forEach 用于簡(jiǎn)單循環(huán)，every 和 some 用于條件判斷。例如，需要將數(shù)組中的數(shù)字都乘以2，用 map 最合適；需要找出數(shù)組中所有大于10的數(shù)字，用 filter 最合適。理解每個(gè)方法的用途能避免不必要的性能損耗。

const numbers = [1, 2, 3, 4, 5];  // 使用 map 將每個(gè)數(shù)字乘以 2 const doubledNumbers = numbers.map(number => number * 2); console.log(doubledNumbers); // [2, 4, 6, 8, 10]  // 使用 filter 篩選出大于 2 的數(shù)字 const largeNumbers = numbers.filter(number => number > 2); console.log(largeNumbers); // [3, 4, 5]  // 使用 reduce 計(jì)算數(shù)組元素的總和 const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 15

splice 方法的強(qiáng)大之處與常見誤用

splice 方法非常強(qiáng)大，可以用于刪除、插入和替換數(shù)組元素。它的第一個(gè)參數(shù)是起始索引，第二個(gè)參數(shù)是要?jiǎng)h除的元素個(gè)數(shù)，后面的參數(shù)是要插入的新元素。常見的誤用是忘記 splice 會(huì)改變?cè)瓟?shù)組，以及對(duì)起始索引和刪除個(gè)數(shù)的理解錯(cuò)誤。

const fruits = ['apple', 'banana', 'orange', 'grape'];  // 刪除從索引 1 開始的 2 個(gè)元素 const removedFruits = fruits.splice(1, 2); console.log(fruits); // ['apple', 'grape'] console.log(removedFruits); // ['banana', 'orange']  // 在索引 1 處插入 'kiwi' 和 'mango' fruits.splice(1, 0, 'kiwi', 'mango'); console.log(fruits); // ['apple', 'kiwi', 'mango', 'grape']  // 將索引 2 處的元素替換為 'pear' fruits.splice(2, 1, 'pear'); console.log(fruits); // ['apple', 'kiwi', 'pear', 'grape']

如何避免JS數(shù)組操作中的常見錯(cuò)誤？

避免JS數(shù)組操作中的常見錯(cuò)誤，需要注意以下幾點(diǎn)：

1. 區(qū)分改變?cè)瓟?shù)組和不改變?cè)瓟?shù)組的方法。 例如，push、pop、shift、unshift、splice、sort 和 reverse 會(huì)改變?cè)瓟?shù)組，而 concat、slice、map、filter 和 reduce 不會(huì)改變?cè)瓟?shù)組。
2. 注意索引的起始位置。 JS數(shù)組的索引從 0 開始。
3. 理解迭代方法的參數(shù)。 迭代方法的回調(diào)函數(shù)通常接受三個(gè)參數(shù)：當(dāng)前元素、當(dāng)前索引和數(shù)組本身。
4. 避免在循環(huán)中修改數(shù)組的長(zhǎng)度。 這可能會(huì)導(dǎo)致意想不到的結(jié)果。如果需要在循環(huán)中修改數(shù)組的長(zhǎng)度，可以考慮使用 filter 或創(chuàng)建一個(gè)新的數(shù)組。
5. 使用 const 聲明不會(huì)被修改的數(shù)組。 這可以防止意外修改數(shù)組。

// 錯(cuò)誤示例：在循環(huán)中刪除數(shù)組元素 const numbers = [1, 2, 3, 4, 5]; for (let i = 0; i < numbers.length; i++) {   if (numbers[i] % 2 === 0) {     numbers.splice(i, 1); // 刪除偶數(shù)   } } console.log(numbers); // [1, 3, 5] (可能不是你期望的結(jié)果，因?yàn)閿?shù)組長(zhǎng)度改變導(dǎo)致循環(huán)跳過(guò)了一些元素)  // 正確示例：使用 filter 創(chuàng)建一個(gè)新數(shù)組，只包含奇數(shù) const numbers = [1, 2, 3, 4, 5]; const oddNumbers = numbers.filter(number => number % 2 !== 0); console.log(oddNumbers); // [1, 3, 5]