数组方法大全

数组方法

1.Array.from()

from()用于将类数组结构转换为数组实例，返回新的数组

// 字符串会被拆分为单字符数组
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]

// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false

// from()也能转换带有必要属性的自定义对象
const arrayLikeObject = { 
 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

//Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16] 

2.Array.of()

of()用于将一组参数转换为数组实例，返回新的数组

//Array.of()可以把一组参数转换为数组。这个方法用于替代在 ES6之前常用的 Array.prototype.slice.call(arguments)，一种异常笨拙的将 arguments 对象转换为数组的写法：
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
console.log(Array.of(undefined)); // [undefined]

3、entries()

entries()返回索引/值对的迭代器

const a = ["foo", "bar", "baz", "qux"];

const aEntries = Array.from(a.entries());

console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

//ES6 的解构可以非常容易地在循环中拆分键/值对：
for (const [idx, element] of ["foo", "bar", "baz", "qux"].entries()) { 
 console.log(idx); 
 console.log(element); 
}
// 0 
// foo 
// 1 
// bar 
// 2 
// baz 
// 3 
// qux

4、fill(）

fill(）填充数组，支持三个参数

参数一：填充值；

参数二：开始索引（从数组的第几个索引开始，不写默认从第一个开始，支持负数）；

参数三：结束索引（从数组的第几个索引结束，不写默认到最后一个结束，支持负数）；

注意：这里的开始负数一定要小于结束负数，返回改变后的数组，会改变原数组。

const zeroes = [0, 0, 0, 0, 0]; 
// 用 5 填充整个数组
zeroes.fill(5); 
console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3); 
console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3); 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0];

5、copyWithin()

copyWithin()会按照指定范围浅复制数组中的部分内容， 也就是说将数组元素复制到数组中的另一个位置，覆盖现有值，数组长度不会发生变化，会修改原数组， 返回修改后的数组同样有三个参数。

参数一： 将元素复制到的索引位置；

参数二：开始索引（从数组的第几个索引开始，不写默认从第一个开始，支持负数）；

参数三：结束索引（从数组的第几个索引结束，不写默认到最后一个结束，支持负数）；

let ints, 
 reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 
// 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5); 
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
reset(); 
// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset(); 
// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3); 
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9] 
reset(); 
// JavaScript 引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6); 
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9] 
reset(); 
// 支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3); 
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

6、join(）

join(） 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

let colors = ["red", "green", "blue"]; 
alert(colors.join(",")); // red,green,blue 
alert(colors.join("||")); // red||green||blue

7、push()和pop()

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。pop()方法则

用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项。

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count); // 2 

count = colors.push("black"); // 再推入一项
console.log(count); // 3 

let item = colors.pop(); // 取得最后一项
console.log(item); // black 
console.log(colors.length); // 2

8、shift()和unshift()

shift()方法移除数组的第一项 ，会改变数组的长度，返回被删除的那一项，该方法会改变原数组，

unshift()方法向数组的开头添加一个或更多元素，并返回新的长度该方法会改变原数组

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count); // 2 
count = colors.push("black"); // 再推入一项
console.log(count); // 3 
let item = colors.shift(); // 取得第一项
console.log(item); // red 
console.log(colors.length); // 2

let colors1 = new Array(); // 创建一个数组
let count1 = colors1.unshift("red", "green"); // 从数组开头推入两项
console.log(count1); // 2 
count1 = colors1.unshift("black"); // 再推入一项
console.log(count1); // 3 
let item1 = colors1.pop(); // 取得最后一项
console.log(item1); // green 
console.log(colors1.length); // 2

10、reverse()和 sort()

reverse()方法就是将数组按降序排序(即倒序)：例如

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

sort()方法与reverse()方法相反，将数组按升序排序，最小的在前面，最大的在后面

var arr=[2,3,1,4,5];
arr.sort();
console.log(arr); // 1，2，3，4，5
let arr1= [0, 1, 5, 10, 15]; 
values.sort();
console.log(arr1); // 0,1,10,15,5

从上面例子可以看出sort()方法只能进行个位数排序，在有十位数或者更多时就不是理想型了，是因为sort()在排序时将数组的每一项都进行隐式转换为String值进行比较（即使是纯数字也会转换为String类型进行比较），为此，sort()方法可以传递一个参数，这个参数可以是一个函数，用来判断哪个排在前面

var arr2 = [0,1,5,15,10];
arr2.sort((a,b)=>a<b?-1:a>b?1:0);
console.log(arr2); //0，1，5，10，15

在这个传递进去的函数里边，如果第一个值应该排在第二个值前面则返回-1，如果第一个值应该排在第二个值后边则返回1；上边例子是升序排列，如果需要降序排列只需将判断条件和返回值依次对调即可。

11、concat()

concat()方法是将原有的数组与参数（这里的参数可以是单个的也可以是一个数组）进行拼接，将这些参数在原有的数组末尾进行拼接，最后以一个新数组返回，不会改变原数组。

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

在上边示例中，传入的数组被依次拆分，有时候是不想拆分的就需要给被传入的数组添加一个值：Symbol.isConcatSpreadable=false。这个值会阻止concat()方法将传入的数组拆分。

var arr = [1,2,3];
var arr1 = [4,5]; 
var arr2 = [6,7];
arr1[Symbol.isConcatSpreadable]= true;
arr2[Symbol.isConcatSpreadable]= false;
var arr3=arr.concat(arr1);
var arr4 = arr.concat(arr2);
console.log(arr3); //1,2,3,4,5
console.log(arr4); //1,2,3,[6,7]

12、slice()

slice()方法是截取数组的方法，该方法有两个参数，第一个为开始索引，即从数组的对应索引，第二个为结束索引，即到数组对应的索引结束，如果传递一个参数则从数组的开始索引截取到末尾，支持负数传参，但是第一个参数要小于第二个参数，此方法不会改变原数组

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

13、splice()

splice()方法可以删除、插入、替换（自认为最强大的方法），有三个参数，会改变原数组

删除：接收两个参数，第一个为要删除数组的开始索引，第二个为要删除数组的结束索引

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,1);
var arr2 = arr.splice(2);
console.log(arr1); // 3
console.log(arr2);  //4,5
console.log(arr); // 1,2

插入：接收三个参数，第一个为要从数组的第几个索引插入，第二个参数默认为0，第三个参数为任意类型

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,0,'哈哈');
console.log(arr1); // []
console.log(arr); // 1, 2, '哈哈', 3, 4, 5

替换：接收三个参数，第一个为要从数组的第几个索引替换，第二个为要替换的数量，第三个参数为任意类型参数

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,2,"哈哈","呵呵");
console.log(arr1); // 3,4 -----返回要替换的数组
console.log(arr); // 1, 2, '哈哈', '呵呵', 5 -----替换后的原数组

14、indexOf()、lastIndexOf()和includes()

indexOf()、lastIndexOf()和includes()方法都是查找数组里是否包含对应项。

• indexOf() 从前往后找，默认接收两个参数，第一个参数为要查找的对应值，第二个参数为开始索引（就是从数组的哪个位置开始找起），找到返回对应的索引，找不到返回-1

  var arr = [1,2,3,4,5,4,3,2,1];
  // 当传递一个参数时，该方法默认从数组的第一项开始找起
  var index = arr.indexOf(2);
  var index1 = arr.indexOf(2,4);
  console.log(index); // 1
  console.log(index1); // 7
  
  

• lastIndexOf()从后往前找，默认接收两个参数，第一个参数为要查找的对应值，第二个参数为开始索引（就是从数组的哪个位置开始找起），找到返回对应的索引，找不到返回-1

  var arr = [0,1,2,3,4,5,6,7,8,9];
  var index = arr.lastIndexOf(2);
  var index1 = arr.lastIndexOf(6,8);
  console.log(index); // 2
  console.log(index1); // 6
  // 传递第二个参数开始位置较前，而要查找的对应项较后的话会找不到返回-1
  console.log(arr.lastIndexOf(6,4)); // -1
  
  

• includes()从前往后找，默认接收两个参数，第一个参数为要查找的对应值，第二个参数为开始索引（就是从数组的哪个位置开始找起），找到返回true，找不到返回false

  var arr = [1,2,3,4,5,6,7,8,9];
  var isShow = arr.includes(4);
  var isShow1 = arr.includes(6,2);
  var isShow2= arr.includes(10);
  console.log(isShow); // true
  console.log(isShow1); // true
  console.log(isShow2); // false
  
  

15、find()和findIndex()

find()查找符合条件的元素，符合条件返回对应的元素，没有符合的元素则返回undefined

/*
* item 数组的每一项
* index 数组的每一项的下标
* arr 当前被循环的数组
*/ 
var arr = [1,2,3,4,5];
var a = arr.find((item,index,arr)=>item===4);
var b = arr.find((item,index,arr)=>item===6);
console.log(a); // 4
console.log(b); // undefined

findIndex()查找符合条件的元素，符合条件返回符合条件的元素的下标，没有返回-1

/*
* item 数组的每一项
* index 数组的每一项的下标
* arr 当前被循环的数组
*/ 
var arr = [1,2,3,4,5];
var a = arr.findIndex((item,index,arr)=>item===4);
var b = arr.findIndex((item,index,arr)=>item===6);
console.log(a); // 3
console.log(b); // -1

16、数组循环方法

• every()循环比较数组中的每一项，每一项都符合条件才返回true，如果有一项不符合则返回false

  var arr = [true,true,true,false,true];
  var arr1 = [true,true,true,true];
  var a = arr.every((item,index,arr)=>item);
  var b = arr1.every((item,index,arr)=>item);
  console.log(a); // false
  console.log(b); // true
  
  

• some()循环比较数组中的每一项，如果数组的某一项符合条件则返回true，全部不符合条件返回false

  var arr = [true,true,true,false,true];
  var arr1 = [false,false,false,false];
  var a = arr.some((item,index,arr)=>item);
  var b = arr1.some((item,index,arr)=>item);
  console.log(a); // true
  console.log(b); // false
  
  

• filter()循环数组中的每一项，筛选符合条件的数组以一个新数组返回

  var arr = [1,2,3,4,5,1,2,3];
  var arr1 = arr.filter((item,index,arr)=>item>3);
  console.log(arr1); // [4,5]
  
  

• map()循环数组中的每一项，返回一个新的数组

  var arr = [1,2,3,4,5];
  var arr1 = arr.map((item,index,arr)=>item*2);
  console.log(arr1); // [2,4,6,8,10]
  
  

• forEach()循环数组的每一项，相当于for一样遍历数组，没有返回值

  var arr = [1,2,3,4,5];
  arr.forEach((item,index,arr)=>{
  	// 执行一些操作
  })
  
  

17、reduce()和reduceRight()

reduce()和reduceRight()方法相同，都是将数组的每一项叠加的，reduce()方法是从第一个到最后一个叠加，而reduceRight()是从最后一个到第一个叠加，结果相同

var arr = [1,2,3,4,5];
var a = arr.reduce((num,item,index,arr)=>num+item);
var b = arr.reduceRight((num,item,index,arr)=>num+item);
console.log(a); // 15
console.log(b); // 15

数组检测方法

val instanceof Array

Array.isArray(val)

总结有不足的地方还请各位大佬指教。