javascript 数组相关方法（函数）整理 记不全的可以看看

今天整理下javascript和数组相关的所有方法（函数）吧。感兴趣的可以收藏以后多看看

生成数组相关方法
1、Array构造函数
2、Array.of()
3、Array.from()

数组原型方法
添加删除类
1、push()和 pop()
2、unshift() 和 shift()

操作数组类
5、join()
6、slice()
7、splice()
8、fill()
9、concat()
10、sort()
11、reverse()
12、copyWithin()
13、flat() 和 flatMap()
14、reduce()和 reduceRight()

查找判断类
15、indexOf() 和 lastIndexOf()
16、every()
17、some()
18、includes()

遍历数组类
19、forEach()
20、map()
21、find()
22、findIndex()
23、filter()
24、entries()
25、keys()
25、values()

生成数组方法

1、Array 构造函数

用于实例化一个数组，传的参数将作为数组的成员

var arr = new Array(1,2)
console.log(arr)
// 输出
[1, 2]

如果只传一个参数，且参数的类型是number，那么将会实例化一个长度为参数的数组

var brr= new Array(10)
console.log(brr)
console.log(brr.length)
// 输出
[]
10

感觉是不是有点怪？传一个参数和多个参数，有时候居然会不一样。下个方法刚好解决了这一点

2、Array.of（）[es6新增的方法]

始终返回一个包含当前参数的数组

var arr = Array.of(1,'aaa',3)
console.log(arr)

var brr = Array.of(10)
console.log(brr)
console.log(brr.length)
// 输出
[ 1, 'aaa', 3 ]
[ 10 ]
1

2、Array.from（）[es6新增的方法]

可以将一个类数组对象（如伪数组或者可以迭代的对象）转化为一个真正的数组

function aaa () {
     
    console.log(arguments) // arguments参数集合是一个伪数组
    let arg = Array.from(arguments)
    console.log(arg)
}
aaa(1, 'aaa', 3)
// 输出
[Arguments] {
      '0': 1, '1': 'aaa', '2': 3 }
[ 1, 'aaa', 3 ]

当如果传递两个参数时，第二个参数可以传递一个映射函数，此时可以创建一个符合函数规则的数组，即可以将伪数组中的每一项按照函数定义的规则转换为新的数组

function aaa () {
     
    console.log(arguments)
    let arg = Array.from(arguments, val => val + '___')
    console.log(arg)
}
aaa(1, 'aaa', 3)
// 输出
[Arguments] {
      '0': 1, '1': 'aaa', '2': 3 }
[ '1___', 'aaa___', '3___' ]

数组原型方法

添加删除类

1、push（）和 pop（）

push() ：用于向数组的末尾添加元素，可同时添加多个，并返回数组新的长度

var arr = [1,2,3]
var len = arr.push(4,5,6)
console.log(len)
console.log(arr)
// 输出
6
[1,2,3,4,5,6]

pop() ：删除数组最后一个元素，并返回被删除的元素

arr = [1,2,3,4,5]
let num = arr.pop()
console.log(num)
console.log(arr)
// 输出
5
[ 1, 2, 3, 4 ]

2、unshift（）和 shift（）

unshift() : 从数组的头部插入元素，可同时插入多个，并返回数组新的长度

var arr = [1,2,3,4,5]
let len = arr.unshift('a', 'b')
console.log(len)
console.log(arr)
// 输出
7
['a', 'b', 1, 2, 3, 4, 5]

shift() : 将数组的第一个元素删除，并返回删除的元素

var arr = [1,2,3,4,5]
let num = arr.shift()
console.log(num)
console.log(arr)
// 输出
1
[2,3,4,5]

操作数组类

3、join（）

用于将数组中的元素，按指定的分隔符连接成一个字符串

var arr = [1,2,3,4]
console.log(arr.join('-'))
// 输出
'1-2-3-4'

4、slice（）

• silice 数组截取，截取原数组中指定开始下标到结束下标之间的项并组成一个新的数组
• 该方法不会改变原数组，而是返回一个新数组
• 该方法接收两个参数，第一个表示截取的起始位置，第二个表示截取的终点位置，但不包括终点位置的项
• 当只传一个参数时，表示截取从该参数指定位置开始到当前数组末尾的所有项。
• 当传的参数为负数时，表示从末尾开始往前数起始位置，也可以看成是用当前数组的长度加上该参数的值，得到起始或终点位置

var arr = [1,3,4,6,8,9]
var brr = arr.slice(2)
var crr = arr.slice(1,4)
var drr = arr.slice(-4, -1)  // 相当于 arr.slice(2, 5)
console.log(arr)
console.log(brr)
console.log(crr)
console.log(drr)
// 输出
[ 1, 3, 4, 6, 8, 9 ]
[ 4, 6, 8, 9 ]
[ 3, 4, 6 ]
[ 4, 6, 8 ]

5、splice（）

• 可实现删除，新增和替换数组内的元素，该方法会直接改变数组本身
• 可传两个或者两个以上的参数
• 其实第一个参数表示需要删除或新增或者替换的起始位置，第二个参数表示需要删除的个数，第三个以后面的表示需要替换的新值

实现删除

var arr = [1,2,3,4,5]
arr.splice(1,2) // 表示从下标1开始,删除2个数
console.log(arr)
// 输出
[ 1, 4, 5 ]

实现新增

var arr = [1,4,6,8]
arr.splice(1, 0, 2, 3) // 第二个参数为0代表删除个数为0, 即不删除
console.log(arr)
// 输出
[ 1, 2, 3, 4, 6, 8 ]

实现替换

var arr = [1,4,6,8]
arr.splice(1, 1, 2, 3) // 第二个参数为1代表删除1个数, 然后插入后面的2和3
console.log(arr)
// 输出
[ 1, 2, 3, 6, 8 ]

6、fill（）[es6新增]

• 该方法可使用特定的值填充数组中的一个或多个位置
• 该方法会改变原数组
• 第一个参数表示用于填充的值，第二个参数表示填充的起始位置，第三个参数表示填充的结束位置，但不包括结束位置的那个元素
• 当只传一个参数时，会用这个参数填充整个数组

var arr = [1,2,3,4,5]
arr.fill('a')
var brr = [1,5,8,2,7]
brr.fill('b', 2)
var crr = [2,5,7,2,9]
crr.fill('c', 2, 4)
console.log(arr)
console.log(brr)
console.log(crr)
// 输出
[ 'a', 'a', 'a', 'a', 'a' ]
[ 1, 5, 'b', 'b', 'b' ]
[ 2, 5, 'c', 'c', 9 ]

7、concat（）

用于连接一个或者多个数组，该方法不会改变原数组，而是返回一个新的数组

var arr = [1,3,5,7]
var brr = [2,4,6,8]
var crr = [11,22,33]
var drr = arr.concat(brr, crr)
console.log(drr)
console.log(arr)
console.log(brr)
console.log(crr)
// 输出
[ 1, 3, 5, 7, 2, 4, 6, 8, 11, 22, 33]
[ 1, 3, 5, 7 ]
[ 2, 4, 6, 8 ]
[ 11, 22, 33 ]

当连接的不是数组时（比如数字或者字符串），会直接加入到数组当中

var arr = [1,3,5,7]
console.log(arr.concat('aaa', 'bbb', [11,22]))
// 输出
[1, 3, 5, 7, 'aaa', 'bbb', 11, 22]

8、sort（）

对数组进行排序，可按照字母顺序或者数字大小进行升序或者降序排序(非数字或者字母排序不会生效)，会改变原数组

var arr = ['b', 'd', 'a', 'g']
arr.sort()
console.log(arr)
var brr = [2,5,1,13,4,8]
brr.sort()
console.log(brr)
var crr = ['张三','李四','王五','陈六']
crr.sort()
console.log(crr)
// 输出
[ 'a', 'b', 'd', 'g' ]
[ 1, 2, 23, 34, 5, 8 ]
[ '张三', '李四', '王五', '陈六' ]

通过上面可以看出，默认排序是升序，但是当为数字时，我们发现好像只以每个数字的第一位数字进行了比较，而并不是以整个数字的大小去做比较。
为了解决这个问题，我们可以给sort()方法传递一个比较函数，这个比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数

function compare(val1, val2) {
     
	if (val1 < val2) {
     
     return -1;
    } else if (val1 > val2) {
     
     return 1;
    } else {
     
     return 0;
    }
}
var arr = [2,5,1,13,4,8]
arr.sort(compare)
console.log(arr)
// 输出
[ 1, 2, 4, 5, 8, 13 ]

如果想实现降序，那么只需要将函数内 1和-1调换一下位置就好

function compare(val1, val2) {
     
	if (val1 < val2) {
     
     return 1;
    } else if (val1 > val2) {
     
     return -1;
    } else {
     
     return 0;
    }
}
var arr = [2,5,1,13,4,8]
arr.sort(compare)
console.log(arr)
// 输出
[ 13, 8, 5, 4, 2, 1 ]

9、reverse（）

用于将数组顺序颠倒，会改变原数组

var arr = [1,21,8,43,5]
console.log(arr.reverse())
// 输出
[ 5, 43, 8, 21, 1 ]

10、copyWithin（）[es6 新增]

• 该方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。会替换原来的数据，而不会改变数组的长度
• 会改变原有数组，但不会改变数组长度
• 可传3个参数，第一个参数表示粘贴的起始位置，第二个参数表示复制的起始位置，第三个参数表示复制的结束位置。当没有第三个参数时默认会从起始位置一直复制到末尾

var arr = [1,2,3,4,5,6,7,8]
arr.copyWithin(2, 0) // 从索引0开始复制，此时其实复制了全部，从索引2开始粘贴，但因为整个数组长度只有8，故只能粘贴下6个数字。但实际复制了8个数字
console.log(arr)
var brr = [1,2,3,4,5,6,7,8]
brr.copyWithin(2, 0, 3) // 从索引0开始复制，复制到索引3结束，代表复制了1，2，3。从索引2开始粘贴
console.log(brr)
// 输出
[1, 2, 1, 2, 3, 4, 5, 6]
[1, 2, 1, 2, 3, 6, 7, 8]

11、flat（）和 flatMap（）

flat() ：该方法可以按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。但不传参时，默认表示遍历深度为1。
该方法不会改变原数组，会返回一个新的数组

var arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat())
console.log(arr.flat(2))
console.log(arr)
// 输出
[ 1, 2, 3, 4, [ 5, 6 ] ]
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, [ 3, 4, [ 5, 6 ] ] ]

flatMap() : 该方法对原数组的每个成员执行一个函数，,然后对返回值组成的数组执行flat()方法。

// 相当于 [[1, 2], [2, 4], [3, 6], [4, 8]].flat()
var arr = [1, 2, 3, 4].flatMap((x) => [x, x * 2])
console.log(arr)
// 输出
[1, 2, 2, 4, 3, 6, 4, 8]

12、reduce（）和 reduceRight（）

• 该方法可以实现对数组内的每一项按照一定的规则进行迭代，俗称‘累加器’。
• 有一个指定函数，指定函数存在4个参数，分别是：上一个值，当前值，每项的索引，数组本身
• reduce（）从数组的第一项开始向后遍历
• reduceRight（）从数组的最后一项开始向前遍历

var arr = [1,2,3,4,5,6]
var total = arr.reduce((pre, cur, index, self) => {
     
	console.log(cur)
	return pre + cur
})
var total2 = arr.reduceRight((pre, cur, index, self) => {
     
	console.log(cur)
	return pre + cur
})
console.log(total)
console.log(total2)

// 输出
2
3
4
5
6

5
4
3
2
1

21
21

查找判断类

13、indexOf（）和 lastIndexOf（）

• 这两个方法用于判断元素在数组中的位置。方法接收两个参数，第一个是需要查找的项，第二个是查找的起始位置。内部比较使用全等 ===
• indexOf() 表示从数组的开头向后依次查找，如果找到，会返回该项在数组中的索引
• lastIndexOf() 表示从数组的末尾往前依次查找，如果找到，会返回该项在数组中的索引
• 如果没有找到，两个方法都会返回-1

var arr = [1,3,5,8,12,5,2,6]
console.log(arr.indexOf(5))
console.log(arr.lastIndexOf(5)) // 从后面开始找，优先找到12和2中间的那个5，返回它的索引
console.log(arr.indexOf(8, 1)) // 从索引1开始找
console.log(arr.lastIndexOf(12, 1)) // 从索引1开始找，即从3开始往前找，故没有找到12，返回-1
console.log(arr.lastIndexOf(12, 6)) // 从索引6开始找，即从2开始往前找，找到了12，返回它的索引
// 输出
2
5
3
-1
4

14、every（）

• 会循环整个数组，判断数组中的每一项是否满足条件，只有每一项都满足条件，才会返回true（其实这个方法也可以放到循环数组类里面去）

var arr = [1,2,3,4,5,6,7]
var arr1 = arr.every(item => item < 10)
var arr2 = arr.every(item => item < 5)
console.log(arr1)
console.log(arr2)
// 输出
true
false

15、some（）

• 会循环整个数组，判断数组中的每一项是否满足条件，只要有一项满足条件，就会返回true（其实这个方法也可以放到循环数组类里面去）

var arr = [5, 10, 15, 20, 25, 30]
var arr1 = arr.some(item => item > 40)
var arr2 = arr.some(item => item < 9)
console.log(arr1)
console.log(arr2)
// 输出
false
true

16、includes（）[es7新增方法]

• 用于查找某项是否在数组中，如果在，则返回true，如果不存在，则返回false，比indexOf要更好用。内部比较使用全等 ===
• 方法接收两个参数，第一个是需要判断的项，第二个是开始查找的起始位置。第二个参数不传时默认从索引0开始查找
• includes 和 indexOf 不同在于，判断NaN时，includes会返回true, indexOf返回false

var arr = [1,3,5,7,9, NaN]
console.log(arr.includes(5))
console.log(arr.includes(5, 3)) // 从索引3开始往后查找，即从7开始往后找，故没有找到，返回false
console.log(arr.includes(NaN))
console.log(arr.indexOf(NaN))
// 输出
true
false
true
-1

遍历数组类

17、forEach（）

• 遍历数组，运行指定函数，可在函数内操作数组的每一项。
• 没有返回值
• 指定函数有3个参数，第一个是数组的每一项，第二个是每一项的索引值，第三个是数组本身

var arr = ['张三','李四','王五']
arr.forEach((item, index, self) => {
     
	console.log(`我是${
       item},我的索引值是${
       index}`)
	console.log(self)
})
// 输出
我是张三,我的索引值是0
[ '张三', '李四', '王五' ]
我是李四,我的索引值是1
[ '张三', '李四', '王五' ]
我是王五,我的索引值是2
[ '张三', '李四', '王五' ]

18、map（）

• map和forEach大致相同，不同点在于，forEach不会返回任何值，而map每一次循环都会存在一个返回值。如果没有return，默认返回undefind
• map循环完成后，会返回一个新的数组，该数组的每一项就是每一轮循环时的返回值
• 其他和forEach一样，也存在3个参数。

var arr = [1,3,5,7,9]
var brr = arr.map((item, index, self) => {
     
	if (item > 3) {
     
		return item + 1
	} // 当不符合条件时，没有return,会默认返回undefined
})
console.log(brr)
// 输出
[ undefined, undefined, 6, 8, 10 ]

19、find（）

• 会循环遍历数组，查找符合条件的项，当查找到第一个符合条件的项时，会返回true，同时停止继续查找。
• 该方法执行完成会返回符合条件的项
• 该方法有两个参数，第一个是运行时的指定函数，第二个是设置指定函数的内部this指向
• 指向函数存在3个参数，和forEach一样

var arr = [1, 2, 5, 7, 9]
var obj = {
     name: '张三'}
var num = arr.find(function (item) {
     
    console.log(this)
	return item % 3 === 0
}, obj)
console.log(num)
// 输出
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
9

20、findIndex（）

• 和find（）基本一样，唯一的区别在于，find() 返回的是符合条件的项，而findIndex() 返回的是符合条件的项的索引值

var arr = [1, 2, 5, 7, 9]
var obj = {
     name: '张三'}
var num = arr.findIndex(function (item) {
     
    console.log(this)
	return item % 3 === 0
}, obj)
console.log(num)
// 输出
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
{
     name: "张三"}
4

21、filter（）

• 过滤函数，会遍历整个数组，返回符合条件的选项所组成的数组
• 运行指定函数，指定函数内设置过滤条件
• 指定函数有3个参数，和forEach一样

var arr = [1, 3, 5, 7, 9]
var brr = arr.filter(function (item, index, self) {
     
	return item % 3 === 0
})
console.log(brr)
// 输出
[ 3, 9 ]

22、entries（）[es6新增]

• 遍历数组，返回一个遍历器对象（能够被for of循环的对象就是遍历器对象）
• 会对数组的键值对都进行遍历

var arr = ['张三','李四','王五']
var brr = arr.entries()
console.log(brr)
for (let [index, item] of brr) {
     
	console.log(index, item)
}
// 输出
Array Iterator {
     }
0 张三
1 李四
2 王五

23、keys（）

• 遍历数组，返回一个遍历器对象（能够被for of循环的对象就是遍历器对象）
• 只对数组的键（key）进行遍历

var arr = ['张三','李四','王五']
var brr = arr.keys()
console.log(brr)
for (let index of brr) {
     
	console.log(index)
}
// 输出
Array Iterator {
     }
0
1
2

24、values（）

• 遍历数组，返回一个遍历器对象（能够被for of循环的对象就是遍历器对象）
• 只对数组的值（value）进行遍历

var arr = ['张三','李四','王五']
var brr = arr.values()
console.log(brr)
for (let value of brr) {
     
	console.log(value)
}
// 输出
Array Iterator {
     }
张三
李四
王五

整理完了，有需要的拿去用吧