JavaScript数组操作方法大全（包含es6）

Array方法大全

方法名称	使用简介	备注
new Array(length)	构造函数，定义数组，传入length	构造出来的数组只有length，其中对象为empty
Array.of()	将一组值转化为数组
Array.isArray()	判断是否为数组对象
Array.from()	将伪数组转为数组	传入str会将其一个个分割成字符串传入的对象必须有length属性
toString()	将数组转为字符串，用,分割
arr.join(separate)	将数组转为字符串，可以指定分割符
arr.push(values)	向数组最后一位添加	返回推入元素后数组length
arr.pop()	推出数组最后一位元素	返回被推出元素
arr.shift()	删除数组最前面的元素	只能删一个，返回值是被删除元素
arr.unshift(values)	从前面添加元素，可以添加多个	返回值是添加后数组length
arr.reverse()	反转数组	改变原数组
arr.sort(compare)	数组排序	需要传入compare函数，改变原数组
arr.concat(newArr)	拼接数组	不改变原数组，返回副本
arr.sclie(start,end)	剪切数组，局部复制	不改变原数组，返回副本
arr.splice(start,end,element)	操作数组	改变原数组
arr.includes(value)	判断元素是否存在数组中	返回布尔值
arr.copyWithin(index)	将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组
arr.flat(pily)	拉平数组,pily表示要拉平的层数
arr.flatMap	子项拉平
arr.indexOf(value)	查找元素在数组中第一次出现的位置	返回索引值，找不到返回-1
arr.lastIndexOf(value)	从后向前找	返回索引值，找不到返回-1
arr.forEach(callback)	迭代数组	没有返回值
arr.some(callback)	迭代判断数组中每个元素是否符合callback中return的条件(callback返回值为布尔值)，有一项符合就返回true	返回布尔值
arr.every(callback)	迭代判断数组中每个元素是否符合callback中return的条件，全部符合返回true
arr.find(callback)	迭代判断数组中每个元素是否符合callback中return的条件(callback返回值为布尔值)，返回第一个符合条件的元素	不同于every，some，返回的是符合条件的第一个元素
arr.findIndex(callback)	迭代判断数组中每个元素是否符合callback中return的条件(callback返回值为布尔值)，返回符合条件的第一个元素索引
arr.filter(callback)	迭代判断数组中每个元素是否符合callback中return的条件(callback返回值为布尔值)，返回符合条件的所有元素索引	不同于find，返回的是所有元素
arr.map(callback)	callback所有返回值作为一个新数组返回	不改变原数组
reduce(callback(prev,cur))	callback可以获取前一个元素和后一个元素
fill()	填充数组
arr.keys()	遍历数组键名
arr.values()	遍历数组键值
arr.entries()	遍历数组键值以及键名

定义数组

两种方式:字面量，以及new Array

new Array

new Array(length),这种方式定义的数组是只有空对象的，想要快速填入值要使用fill方法

Array.of

将一组值转换成数组，类似于声明数组

  let str = '11'
  console.log(Array.of(str));//['11']

  console.log(new Array(2));//[](length = 2)
  console.log(Array.of(2));//[2]

数组与字符串

toString()

将数组转为字符串，并且用,分割

   let str = [1,2,3,4]
	console.log(str.toString());//1,2,3,4

Array.from()将伪数组转为数组

es6
将伪数组转为数组，注意需要转化的对象必须要有length属性

  /**
   * Array.from
   * 将伪数组转为数组，注意需要转化的对象必须要有length属性
   * @type {string}
   */
  //转化字符串
  let str = '12345'
  console.log(Array.from(str));//['1', '2', '3', '4', '5']

  //转化对象，必须要有length属性
  let obj = {
    0:'a',
    1:'b',
    length:2
  }
  console.log(Array.from(obj));//['a', 'b']

join将数组转化为字符串，可以指定分割符

let arr = [1,2,3,4,5]
console.log(arr.join()) // 1,2,3,4,5
console.log(arr.join("-"))  // 1-2-3-4-5

length

length的特点：不是只读的，可以通过length来实现增减项,下面这个例子就是colors的第四项被去除了

var colors = ['red','blue','green','black'];
colors.length = 3;
console.log(colors);//[ 'red', 'blue', 'green' ]

检测数组

value instanceof Array

Array.isArray(value)

判断一个值是否为数组

数组的栈方法

push()和pop()

var colors = ['red','blue','green','black'];
// 返回推入元素之后的数组大小,5
var count = colors.push('brown');
console.log(count);
// 返回被推出的元素,brown
var item = colors.pop();
console.log(item);

数组的队列方法

push()和shift()

shift(),从前面删除元素，只能是一个，返回值是删除的元素

var colors = ['red','blue','green','black'];

var count = colors.push('brown','pink');
console.log(count);//6

var item = colors.shift();
console.log(item);//red
console.log(colors.length);//5

unshift

和shift相反，作用是在数组前端任意添加几个元素，并且返回新数组的长度

var colors = ['red','blue','green','black'];

var count = colors.unshift('pink','brown');
console.log(count);//6

重排序方法

reverse()翻转数组改变原数组

var colors = ['red','blue','green','black'];

colors.reverse();
console.log(colors);//[ 'black', 'green', 'blue', 'red' ]

sort()数组排序改变原数组

传入一个比较函数compare，这个比较函数返回两个值，反正记着使用sort的时候要传入比较函数就好了

// var colors = ['red','blue','green','black'];
var values = [1,2,5,4,3];

//比较函数，使用sort就得传入这玩意
function compare(value1,value2){
    if(value1<value2){
        return -1;
    }else if(value1>value2){
        return 1
    }else{
        return 0
    }
}

values.sort(compare);
console.log(values);

操作方法

concat()返回数组，拼接数组

拼接数组，返回副本，不影响原数组

var colors = ['red','blue','green'];
//concat追加连接，返回副本，不影响原数组
var colors2 = colors.concat('yellow',['black','brown']);
console.log(colors2);//[ 'red', 'blue', 'green', 'yellow', 'black', 'brown' ]
console.log(colors);//[ 'red', 'blue', 'green' ]

sclie()返回副本，局部复制

局部复制，返回副本，不影响原数组
如果sclie中的参数有负数，则用数组长度加上该数来确定位置

var colors = ['red','blue','green','black','brown'];
// slice 局部复制，返回副本，不影响原数组
colors2 = colors.slice(1);
colors3 = colors.slice(1,4);

console.log(colors2);//[ 'blue', 'green', 'black', 'brown' ]
console.log(colors3);//[ 'blue', 'green', 'black' ]

splice()操作原数组，指定位置操作

不同于上面俩玩意，这个影响原数组，返回的是删除项组成的数组

删除，指定两个参数，第一项的位置和要删除的个数
插入：指定三个参数，起始位置，0，要插入的项
替换：指定三个参数，起始位置，要删除的个数，要插入的项

var colors = ['red','blue','green'];
// 删除第一项
var removed = colors.splice(0,1);
console.log(colors);
console.log(removed);

// 从位置1插入两项
removed = colors.splice(1,0,'yellow','orange');
console.log(colors);
console.log(removed);

// 插入两项删除一项
removed = colors.splice(1,1,'red','purple');
console.log(colors);
console.log(removed);

includes()返回布尔值，判断数组中是否包含特定的值

es6

  let arr = [1,2,3,4,5]

  let arr2 = arr.includes(2)
  console.log(arr2)    // ture

  let arr3 = arr.includes(9)
  console.log(arr3)    // false

  let arr4 = [1,2,3,NaN].includes(NaN)
  console.log(arr5)    // true

arr.copyWithin() [ES6]在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组

 let arr = [1, 2, 3, 4, 5, 6, 7]
  let arr2 = arr.copyWithin(1)
  console.log(arr);   // [1, 1, 2, 3, 4, 5, 6]
  console.log(arr2)   // [1, 1, 2, 3, 4, 5, 6]
  let arr3 = arr.copyWithin(1, 2)
  console.log(arr3)   // [1, 3, 4, 5, 6, 7, 7]
  let arr4 = arr.copyWithin(1, 2, 4)
  console.log(arr4)   // [1, 3, 4, 4, 5, 6, 7]

flat(pliy) 将嵌套数组进行拉平

es6
就是把数组中的数组的元素挨个拿出来，放数组元素所在位置，返回一个新的数组，不会影响到原来的数组

pliy表示拉平的层数，默认是1层，想无限拉平可以传入Infinity关键字

 let arr = [1, 2, [3, [4, 5]]]
 console.log(arr.flat(2))  // [1, 2, 3, 4, 5]
 
 let arr2 = [1,[2,[3,[4,5]]]]
 console.log(arr2.flat(Infinity))  // [1,2,3,4,5]

flatMap

[ES6]对原数组的每个成员执行一个函数，相当于执行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]

位置方法

indexOf()和lastIndexOf()

var numbers = [1,2,3,4,5,4,3,2,1];

// indexOf从前向后找，lasrIndexOf从后向前找
console.log(numbers.indexOf(4));//3
console.log(numbers.lastIndexOf(4));//5

迭代方法

forEach没有返回值

没有返回值

   var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.forEach(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self));
    })
    // 打印结果为：
    // Tom--0--true
    // Jack--1--true
    // Lucy--2--true
    // Lily--3--true
    // May--4--true
    console.log(a);     //undefined---forEach没有返回值
    //该方法为遍历方法，不会修改原数组

some和every 返回值为布尔值

和map，filter不同的是，他们整体的返回值为布尔值，而filter和map返回值都为新数组
用于查询数组中的项是否满足条件，所以他们的返回值是Boolean类型

var numbers = [1,2,3,4,5,4,3,2,1];
// every传入的每一项都得是>2才能返回true
var everyResult = numbers.every(function(item,index,array){
    return(item>2);
})
console.log(everyResult);//false

// some传入的只要有一项>2就返回true
var someResult = numbers.some(function(item,index,array){
    return(item>2);
})
console.log(someResult);//true

简化的写法，使用箭头函数

var numbers = [1,2,3,4,5,4,3,2,1];
// every传入的每一项都得是>2才能返回true
var everyResult = numbers.every(item => {return (item>2)})
console.log(everyResult);//false

// some传入的只要有一项>2就返回true
var someResult = numbers.some(item => {return (item>2)})
console.log(someResult);//true

find()返回数组成员，找到第一个符合条件的数组成员

es6

  let arr = [1, 2, 3, 4, 5, 2, 4]
  let arr2 = arr.find((value, index, array) => value > 2)
  console.log(arr2)   // 3

findIndex() 返回索引值，找到第一个符合条件的数组成员的索引值

  let arr = [1,2,3,4,5]
  let arr1 = arr.findIndex((value, index, array) => value > 2)
  console.log(arr1)  // 2

filter()返回新数组，过滤元素，回调函数返回值为布尔值，为真时添加到新数组

返回的是符合条件的项
filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(item => {return (item > 2)})
console.log(filterResult);//[ 3, 4, 5, 4, 3 ]

map()返回新数组，迭代操作数组，回调函数返回值作为新数组

返回的是原始数组操作的结果
map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。

var numbers = [1,2,3,4,5,4,3,2,1];

var mapResult = numbers.map(item => {
    return item * 2
})

console.log(mapResult);// [2, 4, 6, 8, 10,8, 6, 4, 2]

归并方法

reduce

var numbers = [1,2,3,4,5,4,3,2,1];

var sum = numbers.reduce((prev,cur)=>{
    return prev+cur
})
console.log(sum);//25

填充方法

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

参数： target – 待填充的元素
start – 开始填充的位置 - 索引
end – 终止填充的位置 - 索引（不包括该位置)

  let arr = [1,2,3,4,5]

  let arr0 = new Array(5).fill(5)//[5, 5, 5, 5, 5]

  let arr2 = arr.fill(5)
  console.log(arr2)  // [5, 5, 5, 5, 5]
  console.log(arr)   // [5, 5, 5, 5, 5]

  let arr3 = arr.fill(5,2)
  console.log(arr3)  // [1,2,5,5,5]

  let arr4 = arr.fill(5,1,3)
  console.log(arr4)  // [1,5,5,4,5]

遍历方法

arr.keys() [ES6]遍历数组的键名

  let arr = [1, 2, 3, 4, 5]
  let arr2 = arr.keys()
  console.log(arr2);
  for (let key of arr2) {
    console.log(key)   // 0,1,2,3,4
  }

arr.values() [ES6]遍历数组键值

let arr = [1,2,3,4,5]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4,5
}

arr.entries() [ES6]遍历数组的键名和键值

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.entries()
3 for (let e of arr2) {
4     console.log(e);   // [0,1] [1,2] [2,3] [3,4] [4,5]
5 }

本文参考
https://juejin.cn/post/7072202650179092487
https://www.jianshu.com/p/7e160067a06c