js数组常用方法 ES5/ES6+

ES5及以下

join()： 将数组转化为字符串

注：不改变原数组，返回一个新的字符串

let array = ['I', 'am', 'shan', 'er'];
array.join(); //"I,am,shan,er" 默认以逗号分隔；
array.join(' '); //"I am shan er"
array.join('-'); //"I-am-shan-er"

push() 和 pop(): 向数组中插入或删除元素（从尾部）

注：改变原数组

let array = ['I', 'am', 'shan', 'er'];
array.push('so?'); // array: ["I", "am", "shan", "er", "so?"]
array.pop(); // array: ['I', 'am', 'shan', 'er']

unshift() 和 shift()：向数组中插入或删除元素（从头部）

注：改变原数组

let array = ['I', 'am', 'shan', 'er'];
array.unshift('Hi'); // array: ["Hi", "I", "am", "shan", "er"]
array.shift(); // array: ['I', 'am', 'shan', 'er']

reverse(): 将数组中的元素顺序颠倒

注：改变原数组

let array = ['I', 'am', 'shan', 'er'];
array.reverse(); // array: ["er", "shan", "am", "I"]

sort(): 排序

注：改变原数组

let array = ['I', 'am', 'shan', 'er'];
array.sort(); // array: ["I", "am", "er", "shan"] 默认按照字母顺序（Ascall编码）排序
array.sort((a, b) => { return b.length - a.length; }); //["shan", "am", "er", "I"]

concat(): 合并数组

注：不改变原数组，返回一个新数组

let array = ['I', 'am', 'shan', 'er'];
let array2 = ['How', 'are', 'you'];
array.concat(array2); // array: ["I", "am", "shan", "er", "How", "are", "you"]

slice(): 截取，返回子数组

注：不改变原数组，返回一个新数组

let array = ['I', 'am', 'shan', 'er'];
array.slice(0, 3); // ["I", "am", "shan"]

splice(): 向数组插入或删除

注：改变原数组

let array = ['I', 'am', 'shan', 'er']; 
array.splice(0, 1); // ["am", "shan", "er"] 第一个参数索引，第二个参数删除个数
array.splice(0, 0, 'I'); //["I", "am", "shan", "er"] 第三个参数插入

toString() 和 toLocaleString()：将数组转化为以逗号分隔的字符串

注：不改变原数组，返回一个字符串

let array = ['I', 'am', 'shan', 'er'];
array.toString(); // "I,am,shan,er"
array.toLocaleString(); // "I,am,shan,er"

indexOf() 和 lastIndexOf(): 获取数组中具有给定值的索引(indexOf: 从前往后找；lastIndexOf: 从后往前找)

注：不改变原数组，返回索引

let array = ['I', 'am', 'shan', 'er'];
array.indexOf('am'); // 1(-1时表示查找不到)
array.lastIndexOf('am'); // 1

forEach(): 遍历循环，类似for循环

let array = ['I', 'am', 'shan', 'er'];
array.forEach(item => console.log(item));

map(): 遍历循环，返回一个数组

注：不改变原数组，返回一个新数组

let array = ['I', 'am', 'shan', 'er'];
array.map(item => { return 'new';}); // ["new", "new", "new", "new"]

filter(): 循环过滤，返回一个数组

注：不改变原数组，返回一个新数组

let array = ['I', 'am', 'shan', 'er'];
array.filter(item => { return item != 'shan';}); // ["I", "am", "er"]

some()：循环给定函数，如果该函数对任何一项返回 true，则返回true

注：不改变原数组，返回布尔值/font>

let array = ['I', 'am', 'shan', 'er'];
array.some(item => { return ~item.indexOf('shan');}); // true
array.some(item => { return ~item.indexOf('shaner');}); // false

every()：循环给定函数，如果该函数对每一项返回 true，则返回true

注：不改变原数组，返回布尔值/font>

let array = ['I', 'am', 'shan', 'er'];
array.every(item => { return item <= 'shan';}); // true
array.every(item => { return item < 'shan';}); // false

reduce()和reduceRight(): 使用指定的函数将数组元素进行组合，生成单个值(reduce：从前往后；reduceRight：从后往前)

注：不改变原数组/font>

let array = ['I', 'am', 'shan', 'er'];
array.reduce((prev, cur, index, array) => {return `${prev},${cur}`}); //"I,am,shan,er"
array.reduceRight((prev, cur, index, array) => {return `${cur},${prev}`});//"I,am,shan,er"

ES6及以上

Array.from(): 将类对象转为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of(): 将一组值，转换为数组

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

copyWithin(): 在数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
注：改变原数组/font>

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3,4);  // [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1);  // [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3);  // {0: 1, 3: 1, length: 5}

find() 和 findIndex(): 在数组内部, 找到第一个符合条件的数组成员

[1, 4, -5, 10, -4].find((n) => n < 0); // -5
[1, 5, 10, 15].findIndex((value, index, arr) => {
  return value > 9;
}); // 2

fill(): 使用给定值，填充一个数组

注：改变原数组/font>

let array = ['I', 'am', 'shan', 'er'];
array.fill('new'); //  ["new", "new", "new", "new"]

entries()，keys() 和 values(): 遍历数组

for (let index of array.keys()) {
  console.log(index);
}

for (let index of array.entries()) {
  console.log(index);
}
// 输出
 [0, "I"]
 [1, "am"]
 [2, "shan"]
 [3, "er"]

for (let index of array.values()) {
  console.log(index);
}

includes(): 返回一个布尔值，表示某个数组是否包含给定的值

let array = ['I', 'am', 'shan', 'er'];
array.includes('am'); // true

flat()：用于将嵌套的数组“拉平”，变成一维的数组，默认为1

注：不改变原数组

let array=[1, 2, [3, [4, 5]]];
array.flat(2); // [1, 2, 3, 4, 5]

flatMap(): 对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法

注：不改变原数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]);  // [2, 4, 3, 6, 4, 8]
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]