Array数组常用方法汇总

1、不改变原数组的方法

方法	描述
concat()	合并两个或多个数组，返回一个新数组，原数组不变。
slice()	从已有的数组中返回选定的元素，返回一个新数组，原数组不变。
forEach()	为每个数组元素调用一次函数；不会改变原数组，但函数内部对元素的修改会影响原数组。
map()	创建一个新数组，其结果是原数组中的每个元素调用一次提供的函数后的返回值。
filter()	创建一个新数组，包含通过测试的所有元素的新数组。
find()	返回数组中满足提供的测试函数的第一个元素的值，如果没有找到符合条件的元素，则返回undefined。
findIndex()	返回数组中满足提供的测试函数的第一个元素的索引，如果没有找到符合条件的元素，则返回-1。
some()	测试数组中是不是至少有一个元素通过了被提供的函数测试，如果是返回true，否则返回false。
every()	测试数组的所有元素是否都通过了提供的函数的测试，如果是返回true，否则返回false。
includes()	判断数组是否包含特定的值，如果是则返回true，否则返回false，不会改变原数组。
indexOf()	返回数组中元素第一次出现的索引，如果没有找到则返回-1，不会改变原数组。
keys()	返回一个包含数组所有键（索引）的迭代器，不会改变原数组。
join()	将数组中的所有元素连接成一个字符串，并返回，不会改变原数组。
isArray()	判断一个值是否是一个数组，不会改变原数组。
valueOf()	返回数组的原始值，通常与toString()相同，不会改变原数组。
toString()	返回数组的字符串表示，不会改变原数组。
entries()	返回一个包含数组中每个索引的键/值对的迭代器，不会改变原数组。
reduce()	对数组中的每个元素执行一个由你提供的reducer函数（升序或降序），将其结果汇总为单个返回值。
reduceRight()

2、改变原数组的方法

方法	描述
push()	将一个或多个元素添加到数组的末尾，并返回新的长度。
pop()	移除数组的最后一个元素，并返回被移除的元素。
shift()	移除数组的第一个元素，并返回被移除的元素。
unshift()	将一个或多个元素添加到数组的开头，并返回新的长度。
splice()	可用于向数组添加新元素，删除数组中的元素，或替换数组中的元素。
slice()	虽然通常用于创建数组的浅拷贝，但如果使用它作为数组的 setter（例如，赋值给数组自身的一部分），它可以改变原数组。
sort()	对数组元素进行排序，并返回数组，原数组的顺序会被改变。
reverse()	将数组中的元素顺序颠倒，并返回该数组。
fill()	用一个固定值填充数组的所有元素，从开始到结束（或不包括结束）位置。
copyWithin()	将数组的一部分复制到数组的另一个位置。

slice()、flat() 和 flatMap() 通常不会直接改变原数组，但如果你使用它们的返回结果去重新赋值原数组的一部分，那么原数组会被改变。

目录

1、不改变原数组的方法

2、改变原数组的方法

一：不改变原数组的方法

1、concat() 合并数组（尾部插入）

2、slice() 提取数组

3、forEach() 遍历，无返回

4、map() 遍历，返回新数组

5、filter() 筛选

6、find()

7、findIndex()

8、some() 判断任意一个通过

9、every() 判断全通过

10、includes()

11、indexOf()

12、keys()

13、join() 数组转字符串

14、isArray() 数组校验

15、valueOf() 数组转字符串

16、toString() 数组转字符串

17、entries() 键值对

18、reduce() 与 reduceRight()

二：改变原数组的方法

1、push() 尾部插入

2、pop() 尾部移除

3、shift() 头部移除

4、unshift() 头部插入

5、splice() 删除，添加，替换

6、slice()

7、sort() 排序

8、reverse() 倒序

9、fill() 填充

10、copyWithin()

相关文档借鉴

---

一：不改变原数组的方法

1、concat() 合并数组（尾部插入）

• 合并两个或多个数组，返回一个新数组，原数组不变。

array.concat(array1, array2, ..., arrayZ)

let arr = [1, 2, 3];
// 尾部插入 4
arr.concat(4); // 返回：[1,2,3,4]
 
// 尾部插入 5，6
arr.concat(5, 6); // 返回：[1,2,3,5,6]
 
// 尾部插入 7，8
arr.concat([7, 8]); // 返回：[1,2,3,7,8]

//数组合并
var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5, 10, 12, 98, 3];
var arr = fruits.concat(numbers); //返回 ["Apple", "Mango", "Banana",5, 10, 12, 98, 3]

2、slice() 提取数组

• 从已有的数组中返回选定的元素，返回一个新数组，原数组不变。
• slice()方法提取数组的一部分元素，并返回一个新的数组。
• slice()方法提取的元素开始在给定的start参数，并在给定的端部end参数（end不包括）。原始数组不被会更改。

slice(start?, end?)，start：开始下标，end：结束下标。
结束下标大于开始下标，裁切值不包括结束下标的值。

总结： silce() 
1、下标从1开始，负数为倒数，-1代表最后一个
2、无参数  返回所有
3、有开始无结束，下标从1开始，到最后
4、有开始有结束，从开始下标到结束下标（不包括结束下标） [1，10) 


let arr = [1, 2, 3, 4, 5, 6];
 
// 全部裁切
arr.slice(); // 返回：[1,2,3,4,5,6]
 
// 从下标 1 开始，裁切到尾部
arr.slice(1); // 返回 [2,3,4,5,6]
 
// 从下标 1 开始，裁切到下标 2
arr.slice(1, 2); // 返回 [2]
 
// 从数组倒数第 1 开始，裁切到尾部
arr.slice(-1); // 返回 [6]
 
// 从数组倒数第 2 开始，裁切到数组倒数第 1 位
arr.slice(-2, -1); // 返回 [5]

3、forEach() 遍历，无返回

• 为每个数组元素调用一次函数；不会改变原数组，但函数内部对元素的修改会影响原数组。

forEach(callback(curValue, curIndex?, arr?))curValue 当前值，curIndex 当前下标，arr 原数组。

let arr = [1, 2, 3];
arr.forEach(item => {
  // TODO
})

4、map() 遍历，返回新数组

• 创建一个新数组，其结果是原数组中的每个元素调用一次提供的函数后的返回值。

map(callback(curValue, curIndex?, arr?))，curValue 当前值，curIndex 当前下标，arr 原数组
let arr = [1, 2, 3];
arr.map((item) => item + 1); // 返回：[2,3,4]

5、filter() 筛选

• 创建一个新数组，包含通过测试的所有元素的新数组。

filter(callback(curValue, curIndex?, arr?))，curValue 当前值，curIndex 当前下标，arr 原数组。
满足筛选条件，callback 内返回 true，filter 返回满足条件元素组成的数组。

let arr = [1, 2, 3];
arr.filter((item) => item > 1); // 返回：[2,3]

6、find()

• 返回数组中满足提供的测试函数的第一个元素的值，如果没有找到符合条件的元素，则返回undefined。

array.find(callback, thisArg)

var num = [1, 30, 39, 29, 10, 13];
var val = num.find(item=> item>=18 ); //返回 30 （只返回满足的第一项）

7、findIndex()

• 返回数组中满足提供的测试函数的第一个元素的索引，如果没有找到符合条件的元素，则返回-1。
• findIndex() 对于空数组，函数是不会执行的。

array.findIndex(callback, thisArg)
array.findIndex(function(element, index, arr), thisArg)

var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(item=> item>=18 ); //返回 1 （只返回满足的第一项）

8、some() 判断任意一个通过

• 测试数组中是不是至少有一个元素通过了被提供的函数测试，如果是返回true，否则返回false。

some(callback(curValue, curIndex?, arr?))，curValue 当前值，curIndex 当前下标，arr 原数组。
判断数组元素是否有一个满足规定条件，都不满足返回 false，有满足返回 true

let arr = [1, 2, 3];
arr.some((item) => item > 1); // 返回：true

9、every() 判断全通过

• 测试数组的所有元素是否都通过了提供的函数的测试，如果是返回true，否则返回false。

every(callback(curValue, curIndex?, arr?))，curValue 当前值，curIndex 当前下标，arr 原数组。
判断所用数组元素满足规定条件，满足返回 true，有一个不满足返回 false

let arr = [1, 2, 3];
arr.every((item) => item > 1); // 返回：false

10、includes()

• 判断数组是否包含特定的值，如果是则返回true，否则返回false，不会改变原数组。

array.includes(element, start) 
  --element（必需）要搜索的元素 
  --start	（可选）此数组中开始搜索元素的位置。 默认值为0

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.includes('Apple'); //返回true


var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.includes('Banana', 1);  //返回false

11、indexOf()

• 返回数组中元素第一次出现的索引，如果没有找到则返回-1，不会改变原数组。
• indexOf()方法返回可以在数组中找到给定元素的第一个索引。
• 如果该元素存在多次，它将返回第一次出现的位置。
• 如果找不到该元素，它将返回 -1。
• 如果要从尾向前开始搜索，请使用lastIndexOf()方法。
• indexOf(item, start?)，item：查找项，start：从哪个下标开始，如果找到返回元素所在下标
• 下标从 1 开始

----------- indexOf 查找 -------------
indexOf(item, start?)，item：查找项，start：从哪个下标开始，如果找到返回元素所在下标

let arr = [1, 2, 3, 1];
 
// 从头开始查找元素 1 所在下标
arr.indexOf(1); // 返回：0
 
// 从下标为 1 开始查找元素 1 所在下标
arr.indexOf(1, 1); // 返回：3
 
// 从最后一项开始查找元素为 1 所在下标
arr.indexOf(1, -1); // 返回：3

----------- lastIndexOf 查找 ( 从数组尾部往头部查找 ) -------------

lastIndexOf(item, start?)，item：查找项，start：从哪个下标开始，如果找到返回元素所在下标


let arr = [1, 2, 3, 1];
 
// 从尾开始查找元素 1 所在下标
arr.lastIndexOf(1); // 返回：3
 
// 从尾部开始第 2 项开始查找元素 1 所在下标
arr.lastIndexOf(1, 1); // 返回：0
 
// 从下标为 1 开始查找元素 1 所在下标
arr.lastIndexOf(1, -1); // 返回：3

12、keys()

• 返回一个包含数组所有键（索引）的迭代器，不会改变原数组。

array.keys() //无参数值

13、join() 数组转字符串

• 将数组中的所有元素连接成一个字符串，并返回，不会改变原数组。
• 指定的分隔符分隔。默认的分隔符是逗号（，）。

let arr = [1, 2, 3];
// 默认拼接
arr.join(""); // 默认 ',' 拼接，返回：'1,2,3'
// 使用 - 拼接
arr.join("-"); // 返回：'1-2-3'

14、isArray() 数组校验

• 判断一个值是否是一个数组，不会改变原数组。

如果值是数组，则此方法返回true，否则返回false。

let fruits = ["Apple", "Mango", "Banana", "Orange"];

Array.isArray(fruits); // 返回true

Array.isArray(110085); //返回false

15、valueOf() 数组转字符串

• 返回数组的原始值，通常与toString()相同，不会改变原数组。

array.valueOf()

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
months.valueOf(); //返回 Jan, Feb, Mar, Apr, May

16、toString() 数组转字符串

• 返回数组的字符串表示，不会改变原数组。

array.toString()

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
months.toString(); //返回 Jan, Feb, Mar, Apr, May

17、entries() 键值对

• 返回一个包含数组中每个索引的键/值对的迭代器，不会改变原数组。
• 相关文档：JavaScript Array entries() 方法

• 

• 

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();


var a = ['a', 'b', 'c'];
var iterator = a.entries();

console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']

18、reduce() 与 reduceRight()

• 对数组中的每个元素执行一个由你提供的reducer函数（升序或降序），将其结果汇总为单个返回值。

------------reduce 高阶函数-------------------

reduce(callback(total, curValue, curIndex?, arr?), initValue?)
callback：叠加器，
参数：
  total 叠加值，
  curValue 当前值
  curIndex 当前下标
  arr 原数组
  initValue：初始值。 当没有 initValue 是，total 的初始值为 arr[0]


 1、数组求和 -------------------------------
let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue); // 返回：6



 2、初始值 10，数组求和 -------------------------
let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue, 10); // 返回：16


 3、数组去重 -------------------------
let arr = [
  { id: 1, name: "小明" },
  { id: 2, name: "小红" },
  { id: 1, name: "小明" },
  { id: 2, name: "小红" },
];

arr.reduce((total, curValue) => {
  const has = total.filter((item) => item.id == curValue.id);
  if (!has.length) {
    total.push(curValue);
  }
  return total;
}, []); // 返回：[{ id: 1, name: "小明" },{ id: 2, name: "小红" }]


 4、二维转一维 -------------------------
let arr = [1, [2, 3], [4, 5, 6]];
arr.reduce((total, curValue) => total.concat(curValue), []);
// 返回： [1, 2, 3, 4, 5, 6]


 5、多维转一维 -------------------------
let arr = [1, [2, 3], [4, [5, 6]]];
const flatArr = (arr) => {
  return arr.reduce((total, curValue) => {
    return total.concat(Array.isArray(curValue) ? flatArr(curValue) : curValue);
  }, []);
};
flatArr(arr); // 返回：[1, 2, 3, 4, 5, 6]

二：改变原数组的方法

1、push() 尾部插入

• 将一个或多个元素添加到数组的末尾，并返回新的长度。

let arr = [1, 2, 3];
 
// 尾部插入 4
arr.push(4); // arr：[1,2,3,4] 返回：数组长度 4
 
// 尾部依次插入 5，6
arr.push(5, 6); // arr：[1,2,3,4,5,6] 返回：数组长度 6

2、pop() 尾部移除

• 移除数组的最后一个元素，并返回被移除的元素。

let arr = [1, 2, 3];
arr.pop(); // arr：[1,2] 返回：移除项 3

3、shift() 头部移除

• 移除数组的第一个元素，并返回被移除的元素。

let arr = [1, 2, 3];
arr.shift(); // arr：[2,3] 返回：移除项 1

4、unshift() 头部插入

• 将一个或多个元素添加到数组的开头，并返回新的长度。

let arr = [1, 2, 3];
 
// 从头部插入 0
arr.unshift(0); // arr：[0,1,2,3] 返回：数组长度 4
 
// 从头部插入 -1，-2
arr.unshift(-2, -1); // arr：[-2,-1,0,1,2,3] 返回：数组长度 6

5、splice() 删除，添加，替换

• 可用于向数组添加新元素，删除数组中的元素，或替换数组中的元素。

5.1 删除 -------------------------------------------
splice(start?, num?)，start：开始下标，num：删除长度

// 从下标 0 开始，删除 1 位
let arr = [1, 2, 3];
arr.splice(0, 1); // arr：[2,3] 返回：[1]
 
// 从下标 0 开始，删除到数组尾部
let arr = [1, 2, 3];
arr.splice(0); // arr：[] 返回：[1,2,3]
 
// 从数组最后一位，删除到数组尾部
let arr = [1, 2, 3];
arr.splice(-1); // arr: [1,2] 返回：[3]


5.2 添加 -------------------------------------------
splice(start, 0, arg\*?)，start：开始下标，0：删除 0 长度，arg：插入项

// 从下标 0 开始，插入 4
let arr = [1, 2, 3];
splice(0, 0, 4); // arr：[4,1,2,3] 返回：[]
 
// 从下标 2 开始，依次插入 4，5，6
let arr = [1, 2, 3];
splice(2, 0, 4, 5, 6); // arr：[1,2,3,4,5,6] 返回：[]

5.3 替换  -------------------------------------------
splice(start, num, arg\*？)，start：开始下标，num：替换长度，arg：替换项
注意：num 替换长度和替换项数目最好一致。

// 将 2，3 替换成 4，5
let arr = [1, 2, 3];
arr.splice(1, 2, 4, 5); // arr：[1,4,5] 返回：[2,3]

6、slice()

• 虽然通常用于创建数组的浅拷贝，但如果使用它作为数组的 setter（例如，赋值给数组自身的一部分），它可以改变原数组。
• slice()方法提取数组的一部分元素，并返回一个新的数组。
• slice()方法提取的元素开始在给定的start参数，并在给定的端部end参数（end不包括）。原始数组不被会更改。

slice(start?, end?)，start：开始下标，end：结束下标。
结束下标大于开始下标，裁切值不包括结束下标的值。

总结： silce() 
1、下标从1开始，负数为倒数，-1代表最后一个
2、无参数  返回所有
3、有开始无结束，下标从1开始，到最后
4、有开始有结束，从开始下标到结束下标（不包括结束下标） [1，10) 


let arr = [1, 2, 3, 4, 5, 6];
 
// 全部裁切
arr.slice(); // 返回：[1,2,3,4,5,6]
 
// 从下标 1 开始，裁切到尾部
arr.slice(1); // 返回 [2,3,4,5,6]
 
// 从下标 1 开始，裁切到下标 2
arr.slice(1, 2); // 返回 [2]
 
// 从数组倒数第 1 开始，裁切到尾部
arr.slice(-1); // 返回 [6]
 
// 从数组倒数第 2 开始，裁切到数组倒数第 1 位
arr.slice(-2, -1); // 返回 [5]

7、sort() 排序

• 对数组元素进行排序，并返回数组，原数组的顺序会被改变。

sort(fn?)，fn：可选参数，规定排序顺序，必须是函数。
--可用于对数字，字母进行排序，数字优先级高于字母。
--如果需要按照其他规则排序，需要提供函数，函数一般有两个参数：a，b。
--数组中 a 的下标小于 b。比较两个参数，如果需要换位置则返回大于 0 的值。


总结： a-b 小到大  b-a 大到小


7.1 默认排序，不会区分各十百位 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort(); // arr：[1,11,2,21,3,32,4] 返回：[1,11,2,21,3,32,4]


7.2 从小到大排序 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => a - b); // arr：[1,2,3,4,11,21,31] 返回：[1,2,3,4,11,21,31]


7.3 从大到小排序 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => b - a); // arr：[31,21,11,4,3,2,1] 返回：[31,21,11,4,3,2,1]

7.4 按 sort 从小到大排序 --------------------------
let arr = [
  { name: "小明", sort: 10 },
  { name: "小红", sort: 1 },
  { name: "小李", sort: 21 },
];
arr.sort((a, b) => a.sort - b.sort); 
// arr：[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}] 返回：[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}]

8、reverse() 倒序

• 将数组中的元素顺序颠倒，并返回该数组。

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

9、fill() 填充

• 用一个固定值填充数组的所有元素，从开始到结束（或不包括结束）位置。

array.fill(value, start, end)

var nums = [1, 2, 3, 4];
nums.fill(17); // 返回 [17,17,17,17]

//从位置2到位置4填充0：
var nums = [1, 2, 3, 4];
nums.fill(0, 2, 4); // 返回 [1,2,0,0]

// 从位置1填充7：
var nums = [1, 2, 3, 4];
nums.fill(7, 1);  // 返回 [1,7,7,7]

10、copyWithin()

• 将数组的一部分复制到数组的另一个位置。

相关文档借鉴

• 前端 js 经典：数组常用方法总结-阿里云开发者社区
• JavaScript Array 对象 - 菜鸟教程