一、返回新數(shù)組的方法（不修改原數(shù)組）

1. map()

• 功能 ：對數(shù)組中每個(gè)元素執(zhí)行函數(shù)，返回結(jié)果組成的新數(shù)組

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.map(x => x * 
   2); // [2, 4, 6]
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

2. filter()

• 功能 ：根據(jù)條件篩選元素，返回符合條件的元素組成的新數(shù)組

• 示例 ：

  const arr = [1, 2, 3, 4];
   const newArr = arr.filter(x => x 
   > 2); // [3, 4]
   console.log(arr); // [1, 2, 3, 
   4] (原數(shù)組不變)

3. concat()

• 功能 ：連接兩個(gè)或多個(gè)數(shù)組，返回新數(shù)組

• 示例 ：

  const arr1 = [1, 2];
   const arr2 = [3, 4];
   const newArr = arr1.concat
   (arr2); // [1, 2, 3, 4]
   console.log(arr1); // [1, 2] (原
   數(shù)組不變)

4. slice()

• 功能 ：截取數(shù)組的一部分，返回新數(shù)組

• 示例 ：

  const arr = [1, 2, 3, 4];
   const newArr = arr.slice(1, 
   3); // [2, 3]
   console.log(arr); // [1, 2, 3, 
   4] (原數(shù)組不變)

5. reduce()（可返回新數(shù)組）

• 功能 ：對數(shù)組元素執(zhí)行累積操作，可返回任意類型值（包括新數(shù)組）

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.reduce((acc, 
   curr) => [...acc, curr * 2], 
   []); // [2, 4, 6]
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

6. flat([depth])

• 功能 ：將嵌套數(shù)組扁平化，返回新數(shù)組

• depth（可選）:指定扁平化深度，默認(rèn)值為1，值為Infinity時(shí)完全扁平化

• 示例 ：

  const arr = [1, [2, 3], [4, 
   [5]]];
   const newArr = arr.flat(2); // 
   [1, 2, 3, 4, 5]
   console.log(arr); // [1, [2, 3], 
   [4, [5]]] (原數(shù)組不變)

7. flatMap()

• 功能 ：先執(zhí)行 map，再執(zhí)行 flat(1)，返回新數(shù)組

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.flatMap(x => 
   [x, x * 2]); // [1, 2, 2, 4, 3, 
   6]
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

8. toLocaleString() / toString()

• 功能 ：將數(shù)組轉(zhuǎn)換為字符串，返回字符串（不是數(shù)組，但不修改原數(shù)組）

• 示例 ：

  const arr = [1, 2, 3];
   const str = arr.toString(); // 
   "1,2,3"
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

二、在原數(shù)組上操作的方法（修改原數(shù)組）

1. push()

• 功能 ：在數(shù)組末尾添加元素，返回新長度

• 示例 ：

  const arr = [1, 2, 3];
   const length = arr.push(4); // 4
   console.log(arr); // [1, 2, 3, 
   4] (原數(shù)組已修改)

2. pop()

• 功能 ：移除數(shù)組末尾元素，返回被移除的元素

• 示例 ：

  const arr = [1, 2, 3];
   const last = arr.pop(); // 3
   console.log(arr); // [1, 2] (原數(shù)
   組已修改)

3. shift()

• 功能 ：移除數(shù)組首個(gè)元素，返回被移除的元素

• 示例 ：

  const arr = [1, 2, 3];
   const first = arr.shift(); // 1
   console.log(arr); // [2, 3] (原數(shù)
   組已修改)

4. unshift()

• 功能 ：在數(shù)組開頭添加元素，返回新長度

• 示例 ：

  const arr = [1, 2, 3];
   const length = arr.unshift
   (0); // 4
   console.log(arr); // [0, 1, 2, 
   3] (原數(shù)組已修改)

5. sort()

• 功能 ：對數(shù)組元素排序，返回排序后的數(shù)組（原數(shù)組已修改）

• 示例 ：

  const arr = [3, 1, 2];
   arr.sort(); // [1, 2, 3]
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組已修改)

6. reverse()

• 功能 ：反轉(zhuǎn)數(shù)組元素順序，返回反轉(zhuǎn)后的數(shù)組（原數(shù)組已修改）

• 示例 ：

  const arr = [1, 2, 3];
   arr.reverse(); // [3, 2, 1]
   console.log(arr); // [3, 2, 1] 
   (原數(shù)組已修改)

7. splice()

• 功能 ：添加/刪除/替換數(shù)組元素，返回被刪除的元素組成的數(shù)組

• 示例 ：

  const arr = [1, 2, 3, 4];
   const removed = arr.splice(1, 2, 
   5); // [2, 3]
   console.log(arr); // [1, 5, 4] 
   (原數(shù)組已修改)

8. fill()

• 功能 ：用指定值填充數(shù)組，返回填充后的數(shù)組（原數(shù)組已修改）

• 示例 ：

  const arr = [1, 2, 3];
   arr.fill(0); // [0, 0, 0]
   console.log(arr); // [0, 0, 0] 
   (原數(shù)組已修改)

三、其他方法（不修改原數(shù)組）

1. forEach()

• 功能 ：對數(shù)組中每個(gè)元素執(zhí)行函數(shù)，無返回值

• 示例 ：

  const arr = [1, 2, 3];
   arr.forEach(x => console.log
   (x)); // 輸出 1, 2, 3
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

2. some()

• 功能 ：檢查是否至少有一個(gè)元素符合條件，返回布爾值

• 示例 ：

  const arr = [1, 2, 3];
   const hasEven = arr.some(x => x 
   % 2 === 0); // true
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

3. every()

• 功能 ：檢查是否所有元素都符合條件，返回布爾值

• 示例 ：

  const arr = [1, 2, 3];
   const allPositive = arr.every(x 
   => x > 0); // true
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

4. find()

• 功能 ：查找第一個(gè)符合條件的元素，返回該元素

• 示例 ：

  const arr = [1, 2, 3];
   const found = arr.find(x => x > 
   1); // 2
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

5. findIndex()

• 功能 ：查找第一個(gè)符合條件的元素索引，返回索引值

• 示例 ：

  const arr = [1, 2, 3];
   const index = arr.findIndex(x => 
   x > 1); // 1
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

6. includes()

• 功能 ：檢查數(shù)組是否包含指定元素，返回布爾值

• 示例 ：

  const arr = [1, 2, 3];
   const hasTwo = arr.includes
   (2); // true
   console.log(arr); // [1, 2, 3] 
   (原數(shù)組不變)

7. indexOf() / lastIndexOf()

• 功能 ：查找元素在數(shù)組中的索引，返回索引值

• 示例 ：

  const arr = [1, 2, 3, 2];
   const index = arr.indexOf(2); // 
   1
   console.log(arr); // [1, 2, 3, 
   2] (原數(shù)組不變)

四、方法分類表

分類 方法 功能 返回新數(shù)組 map() 映射每個(gè)元素 filter() 篩選元素 concat() 連接數(shù)組 slice() 截取數(shù)組 flat() 扁平化數(shù)組 flatMap() 映射后扁平化 修改原數(shù)組 push() 末尾添加元素 pop() 末尾移除元素 shift() 開頭移除元素 unshift() 開頭添加元素 sort() 排序數(shù)組 reverse() 反轉(zhuǎn)數(shù)組 splice() 添加/刪除/替換元素 fill() 填充數(shù)組 其他（無返回?cái)?shù)組） forEach() 遍歷元素 some() 檢查是否有元素符合條件 every() 檢查是否所有元素都符合條件 find() 查找元素 findIndex() 查找元素索引 includes() 檢查元素是否存在 indexOf() 查找元素索引 lastIndexOf() 從末尾查找元素索引

五、使用建議

• 不可變操作 ：當(dāng)需要保持原數(shù)組不變時(shí)，使用返回新數(shù)組的方法（如 map 、 filter 、 slice ）

• 性能考慮 ：對于大型數(shù)組，頻繁創(chuàng)建新數(shù)組可能影響性能，可考慮使用修改原數(shù)組的方法

• 鏈?zhǔn)秸{(diào)用 ：返回新數(shù)組的方法支持鏈?zhǔn)秸{(diào)用，提高代碼可讀性

  const result = arr
     .filter(x => x > 0)
     .map(x => x * 2)
     .sort((a, b) => a - b);

• 函數(shù)式編程 ：推薦使用不可變方法，符合函數(shù)式編程原則，減少副作用

六、注意事項(xiàng)

• sort() 方法 ：默認(rèn)按字符串 Unicode 碼點(diǎn)排序，對于數(shù)字需要提供比較函數(shù)

• splice() 方法 ：參數(shù)復(fù)雜，使用時(shí)需注意索引和刪除數(shù)量的正確性

• reduce() 方法 ：功能強(qiáng)大但相對復(fù)雜，需理解累加器的工作原理

• 箭頭函數(shù) ：在 forEach 、 map 等方法中使用箭頭函數(shù)時(shí)，需注意 this 指向 通過理解這些方法的特性，可以更有效地使用數(shù)組操作，提高代碼質(zhì)量和性能。

總結(jié)

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

最新評論