数组常用方法

toString()

将数组转换为以逗号分隔的字符串

const arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3

join()

返回按照指定字符分隔的字符串

const arr = [1, 2, 3];
console.log(arr.join('-')); //1-2-3

concat()

用于连接两个或多个数组，==该方法不会改变原数组==

const arr = [1, 2, 3];
const arr1 = [4, 5, 6];
console.log(arr.concat(arr1)); // [1,2,3,4,5,6]

slice(start, end)

截取数组中的元素，==该方法不会改变原数组，而是返回一个子数组==

1. start 和 end均为空时，截取数组所有元素

   const arr = [1, 2, 3];
   console.log(arr.slice()); // [1,2,3]
   

2. end 为空时，从 start 开始截取到数组结尾

   const arr = [1, 2, 3];
   console.log(arr.slice(1)); // [2,3]
   

3. end 不为空时，从 start 开始截取到 end 的前一位

   const arr = [1, 2, 3];
   console.log(arr.slice(1, 2)); // [2]
   

4. start 和 end 为负数时，从数组末尾开始计算

   const arr = [1, 2, 3];
   console.log(arr.slice(-3, -1)); // [1,2]
   

reverse()

反转数组

const arr = [1, 2, 3];
console.log(arr.reverse()); // [3,2,1]

sort()

自定义排序

const arr = [1, 2, 3];
console.log(arr.sort(function (a, b) {
    //return a - b; 从小到大排序
    return b - a; // 从大到小排序
}));

splice()

向数组中添加、删除或替换元素，==该方法会改变原数组==

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

1. 添加元素

   const arr = [1, 2, 3];
   arr.splice(3,0,4,5);
   console.log(arr); // [1,2,3,4,5]
   

2. 删除元素

   const arr = [1, 2, 3];
   arr.splice(2,1);
   console.log(arr); // [1,2]
   

3. 替换元素

   const arr = [1, 2, 3];
   arr.splice(2,1,4);
   console.log(arr); // [1,2,4]
   

push()

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

const arr = [1, 2, 3];
console.log(arr.push(4)); // 4
console.log(arr); // [1,2,3,4]

unshift()

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

const arr = [1, 2, 3];
console.log(arr.unshift(0)); // 4
console.log(arr); // [0,1,2,3]

pop()

删除并返回数组末尾的元素

const arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1,2]

shift()

删除并返回数组开头的元素

const arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2,3]

entries()

返回数组的可迭代对象

const arr = ['张三', '赵四', '王五'];
let iterator = arr.entries();
for(let v of iterator){
    console.log(v);
}
/*
	[0, "张三"]
	[1, "赵四"]
	[2, "王五"]
*/

every()

检测数组的每个元素是否都符合条件，==不会对空数组进行检测，不会改变原数组==

const arr = [1, 2, 3];
const result = arr.every(item => item > 0);
console.log(result); // true

fill()

用一个固定值来填充数组

const arr = [1, 2, 3];
arr.fill(6);
console.log(arr); // [6,6,6]

filter()

检测数组元素，并返回符合条件的所有元素的数组，==不会对空数组进行检测，不会改变原数组==

const arr = [1, 2, 3];
console.log(arr.filter(item => item>1)); // [2,3]

find()

返回数组中符合条件的第一个元素，==空数组不会执行，不会改变原数组==

const arr = [1, 2, 3];
console.log(arr.find(item => item>1)); // 2

findIndex()

返回数组中符合条件的第一个元素的索引，==空数组不会执行，不会改变原数组==，如果不存在，则返回 -1

const arr = [1, 2, 3];
console.log(arr.findIndex(item => item > 1)); // 1
console.log(arr.findIndex(item => item > 4)); // -1

forEach()

遍历数组

const arr = [1, 2, 3];
arr.forEach(item => {
    console.log(item);
})

from()

从一个类数组或可迭代对象创建一个新的浅拷贝的数组

console.log(Array.from('foo'));
// ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// [2,4,6]

flat()

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

1. 扁平化嵌套数组

   const arr1 = [1, 2, [3, 4]];
   arr1.flat(); 
   // [1, 2, 3, 4]
   
   const arr2 = [1, 2, [3, 4, [5, 6]]];
   arr2.flat();
   // [1, 2, 3, 4, [5, 6]]
   
   const arr3 = [1, 2, [3, 4, [5, 6]]];
   arr3.flat(2);
   // [1, 2, 3, 4, 5, 6]
   
   //使用 Infinity，可展开任意深度的嵌套数组
   const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
   arr4.flat(Infinity);
   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   

2. 扁平化并移除数组空项

   const arr4 = [1, 2, , 4, 5];
   arr4.flat();
   // [1, 2, 4, 5]
   

includes()

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

const arr = [1,2,3];
console.log(arr.includes(1)); // true

indexOf()

返回数组中给定元素的第一个索引，如果不存在，则返回-1，第二个参数为开始检索的位置

const arr = [1,2,3,1];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(1,2)); // 3
console.log(arr.indexOf(4)); // -1

reduce()

对数组中的每个元素执行一个提供的函数（升序执行），并将结果汇总为单个返回值

const arr = [1,2,3,4,5,6,7,8,9,10];
// 累加必须提供初始值
console.log(arr.reduce((acc, cur) => acc + cur, 0)); // 55

map()

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

const arr = [1,2,3];
console.log(arr.map(item => item*2)); 
// [2,4,6]

考点：

通常情况下，map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。例如：

const arr = ['1','2','3'];
console.log(arr.map(parseInt));

期望输出 [1,2,3]，然而实际结果是 [1,NaN,NaN]

parseInt 经常被带着一个参数使用，但是这里接受两个。第一个参数是一个表达式，第二个是callback function的基，Array.prototype.map 传递3个参数:

• the currentValue
• the index
• the array

第三个参数被parseInt忽视了, 但第二个参数会被使用

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

上述的迭代步骤为：

// parseInt(string, radix) -> map(parseInt(value, index))
/* 1 */ parseInt('1',0); // 1
/* 2 */ parseInt('2',1); // NaN 
/* 3 */ parseInt('3',2); // NaN 二进制只有0和1

解决方案：

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 指定基数即进制为10

// 只给parseInt传入当前元素值
['1', '2', '3'].map(item => parseInt(item));

['1', '2', '3'].map(Number); // [1, 2, 3]

总结

改变原数组

• pop()
• push()
• shift()
• unshift()
• sort()
• splice()

不改变原数组

• concat()
• join()
• slice()
• filter()
• find()
• findIndex()
• map()

参考 MDN Array