JavaScript数组方法速查手册

32个数组的常用方法和属性

一、数组属性

length - 长度属性

var arr = [ 'a', 'b', 'c' ];  
console.log(arr.length);  // 输出 3
// 将数组保留2个长度
arr.length = 2;
console.log(arr );  // 输出 [ "a", "b" ]

二、数组方法

1、Array.isArray - 类型判定

// Array.isArray() 数组类型判定；
console.log(Array.isArray([1, 2, 3]));   // 输出 true
console.log(Array.isArray({age: 24}));   // 输出 false

2、Array.of - 创建数组

// Array.of() 从可变数量的参数创建数组，不管参数的数量或类型如何；
console.log(Array.of(3));    // 输出 [3]
console.log(Array.of(1,2,3));   // 输出 [1,2,3]
console.log(Array.of("a",2,3));   // 输出 ["a",2,3]

3、Array.from - 创建数组

// Array.from() 用类数组或可迭代对象创建新数组；
console.log(Array.from('abcd'));  // 输出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1));  // 输出 [ 2, 3, 4 ]

三、数组原型方法

1、查找元素

①、find - 按函数查找

// Array.prototype.find() 找到第一个满足检测函数条件的元素，并返回该元素，没找到则返回 undefined；
var arr = [1, 2, 3, 4, 5];
console.log(arr.find(x => x > 3));    // 输出  4

②、findIndex - 按函数查找

// Array.prototype.findIndex() 找到第一个满足检测函数条件的元素，并返回该元素索引。找不到返回-1；
var arr = [6, 7, 8, 9, 10];
console.log(arr.findIndex(x => x > 8));    // 输出  3

③、indexOf - 按元素值查找

// Array.prototype.indexOf() 查找元素并返回元素索引值，找不到返回-1；
var arr= [1, 2, 3, 4];
console.log(arr.indexOf(3));    // 输出 2
console.log(arr.indexOf(6));    // 输出 -1
// 第二个参数表示查找的起始位置；
console.log(arr.indexOf(2, 2));    // 输出 -1

④、lastIndexOf - 按元素值查找

// Array.prototype.lastIndexOf() 从后向前查找元素并返回元素索引值，找不到返回 -1；
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b'));    // 输出 1
console.log(arr.lastIndexOf('e'));    // 输出 -1

2、添加元素

①、push - 尾部添加

// Array.prototype.push() 在尾部添加一个或多个元素，返回数组的新长度；
var arr = ['a', 'b', 'c'];
console.log(arr.push('d')); // 输出 4
console.log(arr); // 输出 [ "a", "b", "c", "d" ]

②、unshift - 头部添加

// Array.prototype.unshift() 在头部添加一个或多个元素，并返回数组的新长度；
var arr = [ 4, 5, 6 ];
console.log(arr.unshift(3)); // 输出 4
console.log(arr); // 输出 [ 3, 4, 5, 6 ]
console.log(arr.unshift(1, 2)); // 输出 6
console.log(arr); // 输出 [ 1, 2, 3, 4, 5, 6 ]

3、删除元素

①、pop - 尾部删除

// Array.prototype.pop() 从尾部删除一个元素，并返回该元素；
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.pop());    // 输出 d
console.log(arr);    // 输出 [ "a", "b", "c" ]

②、shift - 头部删除

// Array.prototype.shift() 从头部删除一个元素，并返回该元素；
var arr = [1, 2, 3];
console.log(arr.shift()); // 输出 1
console.log(arr); // 输出 [ 2, 3 ]

4、替换元素

①、splice - 添加替换删除

// Array.prototype.splice() 添加、替换、删除元素。会改变原数组；
var arr = [ 'a', 'c', 'd' ];
// 从位置1删除0个，添加'b'
arr.splice( 1, 0, 'b');
console.log(arr);    // 输出 [ "a", "b", "c", "d" ]
// 从位置1删除1个
arr.splice(1,1);
console.log(arr);    // 输出 [ "a", "c", "d" ]
// 从位置1删除1个，添加'bb','cc'
arr.splice(1,1,'bb','cc');
console.log(arr);    // 输出 [ "a", "bb", "cc", "d" ]

 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

- 参数 start：表示替换的位置

- 参数 deleteCount ：表示删除元素的数量

- 参数 item1... ： 表示添加的元素

5、顺序相关

①、sort - 排序

// Array.prototype.sort() 数组排序，改变原数组；
var array1 = [ 4, 3, 10, 2 ];
// 降序
console.log(array1.sort());    // 输出 [ 10, 2, 3, 4 ]
// 升序
console.log(array1.sort((x1, x2) => x1 > x2));    // 输出 [ 2, 3, 4, 10 ]

②、reverse - 反序

// Array.prototype.reverse() 倒置数组，并返回新数组。会改变原数组；
var sourceArray= [ 'a', 'b', 'c' ];
var reverseArray = sourceArray.reverse();
console.log(reverseArray);    // 输出 [ "c", "b", "a" ]
console.log(sourceArray == reverseArray);    // 输出 true

6、遍历迭代

①、keys - 键迭代器

// Array.prototype.keys() 数组的键迭代器；
var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
  console.log(key);     // 输出 0, 1, 2
}

②、values - 值迭代器

// Array.prototype.values() 数组的值迭代器
const arr = ['a', 'b', 'c'];
const iterator = arr.values();
for (const value of iterator) {
  console.log(value);     // 输出 a b c
}

③、entries - 键/值对迭代器

// Array.prototype.entries() 数组的键/值对迭代器；
var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value);    // 输出 Array [0, "a"]
console.log(iterator1.next().value);    // 输出 Array [ 1, "b" ]
console.log(iterator1.next().value);    // 输出 Array [ 2, "c" ]

④、forEach - 遍历

// Array.prototype.forEach() 遍历数组中的元素，并执行回调函数；
var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
    console.log(x + 1);    // 输出 2  3  4  5
});    

7、检测

①、includes - 值包含检测

// Array.prototype.includes() 值包含检测，如包含返回 true，不包含返回false；
var arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出 true
console.log(arr.includes(4)); // 输出 false

②、some - 函数包含检测

// Array.prototype.some() 检测数组中是否有元素可以通过检测函数验证；
var array1 = [ 1, 2, 3, 4 ];
console.log(array1.some(x => x >3));    // 输出  true
console.log(array1.some(x => x > 5));    // 输出  false

③、every - 函数完全检测

Array.prototype.every() 检测数组中是否所有元素都可以通过检测函数验证；
var arr = [ 1, 2, 3, 4, 5 ];
console.log(arr.every(x => x < 8));    //输出 true
console.log(arr.every(x => x < 4));    //输出 false

8、合并

①、 join - 合并成字符串

// Array.prototype.join() 数组转为字符串；
var arr = [ 'a', 'b', 'c' ];
console.log(arr.join());    // 输出 a,b,c
console.log(arr.join("-"));   // 输出 a-b-c

// 字符串转为数组；
var str = "abc,abcd,aaa";
console.log(str.split(",")); // 在每个逗号(,)处进行分解  ["abc", "abcd", "aaa"]
var str1 = "helloworld";
cosole.log(str1.split(''));  // ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

②、concat - 合并成数组

// Array.prototype.concat() 合并两个或多个数组，返回一个全新数组，原数组不变；
var arr1 = [ 'a', 'b' ];
var arr2 = [ 'c', 'd' ];
console.log(arr1.concat(arr2)); // 输出 [ "a", "b", "c", "d" ]

9、累计

①、reduce - 左侧累计

// Array.prototype.reduce() 从左至右按 reducer 函数组合元素值，并返回累计器终值；
const arr1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer)); // 输出 10
// 5 + 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer, 5)); // 输出 15，其中5是累计器初始值。

②、reduceRight - 右侧累计

// Array.prototype.reduceRight() 从右至左按 reducer 函数组合元素值，并返回累计器终值；
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator.concat(currentValue);
console.log(array1.reduceRight(reducer)); // 输出 [ 4, 3, 2, 1 ]
console.log(array1.reduceRight(reducer, 5)); // 输出 [ 5, 4, 3, 2, 1 ]

10、copyWithin - 内部复制

// Array.prototype.reduceRight() 从右至左按 reducer 函数组合元素值，并返回累计器终值；
var arr1 = ['a', 'b', 'c', 'd', 'e','f'];
console.log(arr1.copyWithin(0, 3, 5));    // 输出 [ "d", "e", "c", "d", "e", "f" ]
console.log(arr1.copyWithin(1, 3));    // 输出 [ "d", "d", "e", "f", "e", "f" ]

arr.copyWithin(target[, start[, end]])

• 参数target : 表示要复制到的索引位置，如为负值则从后向前计数。
• 参数start : 表示要复制序列的起始索引位置，如为负值则从后向前计数。如省略该值，则从索引0开始。
• 参数end : 表示要复制序列的结束位置，如为负值则从后向前计数。如省略该值，则复制到结尾位置。
   

11、fill - 填充函数

// Array.prototype.fill() 用固定值填充起始索引到终止索引区间内的全部元素值，不包括终止索引；
var array1 = [1, 2, 3, 4];
console.log(array1.fill(9, 2, 4));    // 输出 [ 1, 2, 9, 9 ]
console.log(array1.fill(8, 1));      // 输出 [ 1, 8, 8, 8 ]
console.log(array1.fill(7));          // 输出 [ 7, 7, 7, 7 ]

12、filter - 过滤函数

// Array.prototype.filter() 生成由通过检测函数验证元素组成的新数组并返回；
var arr = [ 9 , 8 , 7 , 6];
console.log(arr.filter(x => x >7));    //输出 [ 9, 8 ]

13、flat - 数组扁平化

// Array.prototype.flat() 按指定深度递归遍历数组，并返回包含所有遍历到的元素组成的新数组。不改变原数组；
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 ]

14、map - 映射

// Array.prototype.map() 创建一个新数组，该数组中的元素由原数组元素调用map函数产生；
var arr1 = [1, 2, 3, 4];
console.log(arr1.map(x => x * 2));    // 输出 [ 2, 4, 6, 8 ]

 15、slice - 截取数组

// Array.prototype.slice() 按参数begin 和 end 截取数组，不改变原数组；
var array1 = [ 1, 2, 3, 4, 5];
console.log(array1.slice( 2, 4 ));    //输出 [ 3, 4 ]
console.log(array1);    //输出 [ 1, 2, 3, 4, 5 ]