常用的Array总结（包含ES5/6/7/8/9/10）

第一部分介绍数组的定义和访问

 1.  数组定义

• 使用new操作符来定义 new Array

let arr = new Array();

•  使用 [ ] 定义 数组字面量法

let arr = [];

 2.  数组赋值

• 使用数组字面量法赋值 （常用）

let arr = ['a', 'b', 'c'];

 3.  值的访问

• 通过数组下标的索引访问

let arr = ['a', 'b', 'c'];
let item = arr[0]; // a

• 数组解构 [ES6新增] 

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors; // 按照逗号计算索引 第一个逗号出现前面的元素的索引是0
console.log(firstColor); // "red"
console.log(secondColor); // "green"

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

 

第二部分介绍在原有的Array对象上进行操作的方法，调用了这些方法之后会改变原始数组

   1. [ES6新增]  arr.copyWithin(target[, start[, end]]) 指定位置的成员复制到其他位置（会覆盖原有成员，返回修改后的数组

• target 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
• start（非必传） 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制

• end （非必传）0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）

  let arr = ['a', 'b', 'c', 'd', 'e'];
  //三种参数都存在 分别为 0 1 3 实现的效果是将数组中索引为1-3的元素这里为b c复制到从索引为0开始的位置进行复制 即a b将被b c替代
  arr.copyWithin(0, 1, 3);
  console.log(arr); // [ 'b', 'c', 'c', 'd', 'e' ]
  
  let arr1 = ['a', 'b', 'c', 'd', 'e'];
  //俩种参数都存在 分别为 0 1 实现的效果是将数组中索引为1-末尾的元素这里为b c d e复制到从索引为0开始的位置进行复制 即a b c d将被b c d e替代
  arr1.copyWithin(0, 1);
  console.log(arr1); // [ 'c', 'c', 'd', 'e', 'e' ]
  
  let arr2 = ['a', 'b', 'c', 'd', 'e'];
  //只有一种参数存在为 2 实现的效果是将数组中索引为0-末尾的元素这里为a b c d e复制到从索引为2开始的位置进行复制 即b c d将被a b c替代（需要注意的是不能改变数组的长度 如果超出则省略）
  arr2.copyWithin(2);
  console.log(arr2); // [ 'c', 'c', 'd', 'e', 'e' ]
  
  注意：每次重复定义arr的原因是因为此方法属于操作会改变原数组

   2. arr.fill(value[, start[, end]]) 返回修改后的数组

• value 用来填充数组元素的值。
• start（非必传）可选 起始索引，默认值为0。
• end（非必传） 可选 终止索引，默认值为 this.length。

let arr = ['a', 'b', 'c', 'd', 'e'];
//三种参数都存在 分别为 0 1 3 实现的效果是将数组中索引为1-3的元素替换为0
arr.fill(0, 1, 3);
console.log(arr); // [ 'a', 0, 0, 'd', 'e' ]

let arr1 = ['a', 'b', 'c', 'd', 'e'];
//俩种参数都存在 分别为 0 1 实现的效果是将数组中索引为1-末尾的元素这里为b c d e替换为0
arr1.fill(0, 1);
console.log(arr1); // [ 'a', 0, 0, 0, 0 ]

let arr2 = ['a', 'b', 'c', 'd', 'e'];
//只有一种参数存在为 2 实现的效果是将数组中索引为0-末尾的元素替换为2
arr2.fill(2);
console.log(arr2); // [ 2, 2, 2, 2, 2 ]

  3.  arr.pop() 从一个数组中删除并返回最后一个元素 返回删除的这个数组

let arr = ['a', 'b'];
let item_pop = arr.pop();
console.log(arr); // [ 'a' ]
console.log(item_pop); // b

  4. arr.push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度 

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr_length = arr.push('f');
console.log(arr); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(arr_length); // 6

  5. arr.reverse() 方法将数组中元素的位置颠倒，并返回该数组

• 注：可链式调用

let arr = ['a', 'b', 'c'];
arr.reverse();
console.log(arr); // [ 'c', 'b', 'a' ]

  6. arr.shift() 删除数组的第一个元素，并返回这个元素

let arr = ['a', 'b', 'c'];
let item_shift = arr.shift();
console.log(arr); // [ 'b', 'c' ]
console.log(item_shift); // a

  7. arr.unshift()  在数组的开头增加一个或多个元素，并返回数组的新长度(和shift相反的功能略微差别）

let arr = ['a', 'b', 'c'];
let arr_length = arr.unshift('d');
console.log(arr); // ['d', 'a', 'b', 'c']
console.log(arr_length); // 4

  8.  arr.sort([compareFunction]) 按照compareFunction的标准调整arr的顺序

• compareFunction （非必传） 用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序
• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前；

let arr = [5, 4, 3, 2, 1];
// 什么参数都不传 则默认为升序排序
arr.sort();
console.log(arr); // [ 1, 2, 3, 4, 5 ]

let arr1 = [ 2, 3, 4, 5 ] ;
// 传参数function 按照降序排序
arr1.sort((a, b) => {
    return b-a;
});
console.log(arr1); //[ 5, 4, 3, 2 ]

  9.  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])  删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

• start​ 修改的开始位置（从0计数）
• deleteCount（非必传）整数，表示要移除的数组元素的个数
• item1, item2, ...（非必传）要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素

let arr = ['a', 'b', 'c', 'd'];
// 三个参数都传 分别为1 2 ('e', 'g') 表示修改arr中索引1为开始的俩个元素 即为 b c，将 b c 修改为 e g (如果第三个参数为e则返回 ['a', 'e', 'd'])
let item_split = arr.splice(1, 2, 'e', 'g');
console.log(arr); // [ 'a', 'e', 'g', 'd' ]
console.log(item_split); // [ 'b', 'c' ]

let arr1 = ['a', 'b', 'c', 'd'];
// 俩个参数都传 分别为1 2 表示修改arr中索引1为开始的俩个元素 即为 b c，将 b c 修改为空
let item_split1 = arr1.splice(1, 2);
console.log(arr1); // [ 'a', 'd' ]
console.log(item_split1); // [ 'b', 'c' ]

let arr2 = ['a', 'b', 'c', 'd'];
// 只传一个参数为1 表示修改arr中索引1为开始一直到末尾的元素 即为 b c d，将 b c d修改为空
let item_split2 = arr2.splice(1);
console.log(arr2); // [ 'a']
console.log(item_split2); // [ 'b', 'c', 'd' ]

 

 第三部分介绍不改变原有Array对象的方法，数组调用了这些方法之后原始数组不会改变

  1. arr.concat(value1[, value2[, ...[, valueN]]]) 用于合并俩个或者多个数组，返回值为一个新的数组

// 包含俩个参数，参数均为数组
let arr1 = ['a'];
let arr2 = ['b'];
let arr3 = ['c'];
let new_Arr = arr1.concat(arr2, arr3);
console.log(new_Arr); // [ 'a', 'b', 'c' ]

// 包含俩个参数一个为值 一个为数组
let arr4 = ['a'];
let new_Arr1 = arr4.concat('b', ['d']);
console.log(new_Arr1); // [ 'a', 'b', 'd' ]

 2. arr.join([separator]) 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

• [separator] （非必传）参数常为符号值

let arr = ['a', 'b', 'c'];
// 参数为. 返回的是a.b.c
let arr_join = arr.join('.');
console.log(arr_join); // a.b.c

// 不传参数 默认为, 返回的是a,b,c
let arr_join1 = arr.join();
console.log(arr_join1); // a,b,c

 3. arr.slice([begin[, end]]) 返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变

• begin (非必传) 表示从原数组中的第几个元素开始提取

• end (非必传) 表示提取终止处的索引

let arr = ['a', 'b', 'c', 'd'];
// 传俩个参数 分别为 1 3 返回的是arr[1] arr[2]
let arr_slice1 = arr.slice(1, 3);
console.log(arr_slice1); // [ 'b', 'c' ]

// 传1个参数为 1  返回的是arr[1] arr[2] arr[3] 不传参的时候就会返回原数组
let arr_slice2 = arr.slice(1);
console.log(arr_slice2); //[ 'b', 'c', 'd' ]

 4. arr.indexOf(searchElement[, fromIndex = 0]) 该方法可以在一个数组从索引formIndex开始查找searchElement是否存在 如果存在则返回索引值 不存在则返回-1

• searchElement （必传）表示要查询的值

• fromIndex（非必传） 表示从索引formIndex开始查找searchElement

let arr = ['a', 'b', 'c', 'd'];
// 传俩个参数 分别为 b 1 返回的是b在arr中的索引 需要注意的是如果这里传入的是a 那么是找不到的
let arr_indexOf = arr.indexOf('b', 1);
console.log(arr_indexOf); // 1

// 传一个参数为a
let arr_indexOf1 = arr.indexOf('b');
console.log(arr_indexOf); // 1

 5.  arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1]) 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始

• searchElement (必须) 要查找的元素

• formIndex (非必须) 表示要从arr[0, formIndex]中查找

let arr = ['a', 'b', 'c', 'd', 'e'];
// 传俩个参数a 3 表示从a b c d中找到a的索引
let arr_lastIndexOf = arr.lastIndexOf('a', 3);
console.log(arr_lastIndexOf); // 0

// 传1个参数a 表示从原数组中找到a的索引
let arr_lastIndexOf1 = arr.lastIndexOf('a');
console.log(arr_lastIndexOf1); // 0

 6.  arr.includes(valueToFind[, fromIndex]) [ES7新增] 判断数组是否包含指定的值，如果包含则返回 true，否则返回false;

• valueToFind （必传）在数组中查找的元素
• fromIndex （非必传）表示要从arr[formIndex，arr.length - 1]中查找

let arr = ['a', 'b', 'c'];
// 传俩个参数分别为 a 1 在数组[1, 2]中判断a是否存在
let arr_includes = arr.includes('a', 1);
console.log(arr_includes); // false

// 传一个参数a 在原数组中查找a
let arr_includes1 = arr.includes('a');
console.log(arr_includes1); // true

 7.  [...newArr] = arr [ES6新增] 该方法实现的是克隆数组 (实现的是数组的深拷贝）

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

 8. arr.find(

 第四部分介绍数组的迭代方法（含部分ES5以上版本新增的方法）

 1.  arr.forEach(callback(currentValue, index, array), thisArg); 用于遍历数组 每个元素都执行一遍 返回undefined

• callback(currentValue, index, array) 为每个元素执行的函数
• currentValue （必须）数组中正在处理的当前元素
• index （非必须） 数组中正在处理的当前元素的索引
• array （非必须） forEach() 方法正在操作的数组
• thisArg （非必须） 当执行回调函数时用作 this 的值(参考对象)
• 注：遍历的元素都是浅拷贝，这意味着当遍历到引用类型的数据时，在引用数据上进行操作时会改变原数组
• 注：不可使用return 不可使用break
• 注：不可链式调用
• 注：下一篇博客会通过几个leetcode中使用到的forEach举例介绍一下forEach

let arr = ['a', 'b', 'c'];
arr.forEach((item, index, arr) => {
    console.log(item); // a b c
    console.log(index); // 1 2 3
    console.log(arr); // ['a', 'b', 'c'], ['a', 'b', 'c'], ['a', 'b', 'c']
})

 2. arr.every(callback(element, index,  array), thisArg); 用于测试数组是否都满足callback定义的函数 返回布尔值；

• callback(element, index,  array) 用来测试每个元素的函数
• element （必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• thisArg（非必须） 执行 callback 时使用的 this 值

function isBigEnough(element, index, array) {
    return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

 3. arr.some(callback(element[, index[, array]])[, thisArg])  用于测试数组是否都满足callback定义的函数 返回布尔值；

• callback(element, index,  array) 用来测试每个元素的函数
• element （必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• thisArg（非必须） 执行 callback 时使用的 this 值

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

 4.  arr.filter(callback(element[, index[, array]])[, thisArg]) 用于将数组中通过测试的元素集中起来，返回一个新的数组；

• callback(element, index,  array) 用来测试每个元素的函数
• element （必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• thisArg（非必须） 执行 callback 时使用的 this 值

function isBigEnough(element) {
  return element >= 10;
}
let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 

 5. arr.map(callback(currentValue, index, array), thisArg) 用于遍历数组执行回调函数 返回一个新的数组

• callback(element, index,  array) 用来测试每个元素的函数
• currentValue（必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• thisArg（非必须） 执行 callback 时使用的 this 值

// 下面的语句返回什么呢:（参考上面的forEach大家可以知道如何使用 那么这里展示一个有趣的东西）
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

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

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数，结果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同，下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

 6.  arr.reduce(callback(accumulator, currentValue, index, array), initialValue) 用于对数组的所有元素做一种运算，比如加和，用于将最终结果返回；

• callback(accumulator, element, index,  array) 用来测试每个元素的函数
• accumulator（必须）它是上一次调用回调时返回的累积值
• currentValue（必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• initialValue（非必须） 作为第一次调用 callback函数时的第一个参数的值

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

7. arr.reduceRight(callback(previousValue, element, index,  array), initialValue) 用于对数组的所有元素进行某种运算，和上面的reduce函数不同的是，此方法将从数组末尾开始做运算，逆向运算；

• callback(previousValue, element, index,  array) 用来测试每个元素的函数
• accumulator（必须）它是上一次调用回调时返回的累积值
• currentValue（必须） 用于测试的当前值
• index （非必须） 用于测试的当前值的索引
• array （非必须） 调用 every 的当前数组
• initialValue（非必须） 作为第一次调用 callback函数时的第一个参数的值

[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
}, 10); // 20

 8. [ES6新增] 扩展运算符spread 即三个点(...) 它的作用是将一个数组转化为用逗号分隔的参数序列

// 作用一 序列化数组 如下面的add add1
let arr = [1, 2];
function add(x, y) {
    return x + y;
}
console.log(add(...arr));

let arr1 = [1, 2, 3, 4];
function add1(...arguments) { 
    let arg = arguments;
    return arg;
}  
console.log(add1(...arr1)); // [1, 2, 3, 4]
//扩展运算符后面还可以放置表达式
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

// 作用二 可以替换apply方法
// 我们知道Math.max函数传参的时候如果是数组需要这样写
Math.max.apply(null, [14, 3, 77])
// 现在我们可以这样写
Math.max(...[14, 3, 77])

 9.  [ES6新增] arr.from(arg) 用于将对象转为数组，返回一个数

// arr.from 该方法将一个类对象（注意length必须存在） 将对象转化为一个数组
// 传入一个对象
let object = {
    "0": 1,
    "1": 2,
    length: 2
}
let arr = Array.from(object);
console.log(arr); // [2, 3]

// 传入一个字符串
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

 10. [ES6新增] Array.of() 用于将参数转换为数组 参数为一组值 不能是数组或者对象 相对于from参数不同

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

// 通过下面的例子注意观察与from方法的区别
let str = "hello";
console.log(Array.of(str)); // [ 'hello' ]

 11.  [ES6新增] arr.find(callback(currentValue, index, array), thisArg); 在数组中找到第一个满足callback定义的条件的元素。并返回这个元素 findIndex方法与之类似

• callback(currentValue, index, array) 为每个元素执行的函数
• currentValue （必须）数组中正在处理的当前元素
• index （非必须） 数组中正在处理的当前元素的索引
• array （非必须） forEach() 方法正在操作的数组

// find用于在数组中找到第一个满足callback条件的元素
let arr = [12, 44];
let arr_find = arr.find((value, index, arr) => {
    return value > 10;
})
console.log(arr_find); // 12

 12.[ES6新增]  arr.fill(value, start, end) 用于将value填充到数组的起始位置和结束位置 返回一个新的数组

• currentValue （必须）填充的元素
• start（非必须） 填充的起始位置
• end（非必须） 填充的结束位置

let new_arr = ['a', 'b', 'c'].fill(7, 1, 3)
console.log(new_arr);// ['a', 7, 'c']

 13. [ES6新增] arr.entries() 用于遍历数组的键值对

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

14.  [ES6新增] arr.keys() 用于遍历数组的键值

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

 15. [ES6新增] arr.values() 用于遍历数组的值

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

 16. [ES10新增] arr.flat() 用于将一个深度大于1的数组合并为一个深度为1的数组

// 作用一 降低数组的深度
var arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
console.log(arr3.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

// 作用二 可以去除数组的空字符元素
var arr = ['a', , 'b'];
console.log(arr.flat()); // ['a', 'b']

 17. [ES10新增] arr.flatMap() 用于遍历数组执行某种规则，然后将这些结果返回为一个新的数组

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]