数组方法整理

本文主要按照ES标准的顺序进行罗列数组的方法，话不多说，直接上方法：

一、Before ES5

二、ES5

三、ES6

Before ES5

1.join

// 1.不改变原数组
// 2.返回字符串
let testArray = [1,2,3,4]
let result = testArray.join() //默认以，隔开
console.log(result)
result = testArray.join('-') //以-隔开
console.log(result)
// 3.可以用来拼重复字符串
let repeatStr = (str, n) => {
	return new Array(n+1).join(str)
}
result = repeatStr('123', 3)
复制代码

2.pop/push

testArray = [4,5,6,7,8]
// pop
// 1.删除数组的末位内容
// 2.返回删除掉的内容
// 3.原数组被修改，变为删除后的数组
result = testArray.pop()
// push
// 1.在数组的末位添加内容
// 2.返回数组的长度
// 3.原数组被修改，变为添加后的数组
result = testArray.push(9)
复制代码

3.shift/unshift

testArray = [4,5,6,7,8]
// shift
// 1.删除数组首位内容
// 2.返回数组删掉的内容
// 3.原数组被修改，变为删除后的数组
result = testArray.shift()
// 1.在数组首位添加内容
// 2.返回数组长度
// 3.原数组被修改，变为添加后的数组
result = testArray.unshift()
复制代码

4.sort

testArray = [9,7,5,4,10]
// 1.对数组进行排序（注： 将数组内容转为字符串后进行排序），因此结果是[10, 4, 5, 7, 9]
// 2.修改原数组，变为排序后的内容
testArray.sort()
// 将方法传入sort，返回正确的排序结果
testArray.sort((num1, num2) => {
	if(num1 < num2){
		return -1
	}
	if(num1 > num2){
		return 1
	}
	return 0
})
复制代码

5.reverse

testArray = [9,7,5,4,10]
// 1.数组内容反转
// 2.修改原数组，变为反转后的内容
testArray.reverse()
复制代码

6.concat

testArray = [1,2,4,6,7,4,6]
// 1.数组拼接
// 2.不修改原数组,返回拼接后的新数组
testArray.concat([34,65])
复制代码

7.slice

testArray = [1,2,3,4,5,6]
// 1.从已有数组选择选定的元素
// 2.不修改原数组，返回选择的元素数组
testArray.slice(2,4)
复制代码

8.splice

testArray = [1,2,3,4,5,6]
// 1.像数组中添加项目/从数组中删除项目
// 2.修改原数组为删除项目后的数组，返回被删除的项目
// 3.参数（index,howmany,item1,.....,itemX）
// index: 必须；添加/删除项目的位置
// howmany: 必须；删除的项目数量
// item: 必须；向数组添加的项目
testArray.splice(1,1,98,9)
复制代码

ES5

1.indexOf

let arrTest = [2,3,4,6,7]
// 1.某个指定的字符串值在字符串中的位置（从左向右匹配，或者从fromIndex【第二个参数】的位置开始匹配）
// 2.不改变原数组，返回位置索引值
arrTest.indexOf(2, 0)
复制代码

2.lastIndexOf

arrTest = [2,3,4,6,7]
// 1.某个址定字符串在字符串中的位置（从右向左匹配，或者从fromIndex【第二个参数】的位置从左向右匹配）
// 2.不改变原数组，返回位置索引值
arrTest.lastIndexOf(2)
复制代码

3.forEach

arrTest = [2,3,4,6,7]
// 调用数组的每个元素，并将元素传递给回调函数
// 1. 参数说明(item, index, arr)
// item: 数组元素
// index: 当前索引值
// arr: 数组
// 给arr[index]赋值，即可修改数组数据
// 2.返回undefined，不能进行链式调用
arrTest.forEach((item, index, arr) => {
	return item *= 2
})
复制代码

4.map

arrTest = [2,3,4,6,7]
// 通过指定函数处理数组的每个元素，并返回处理后的数组
// 1.不修改原数组，返回处理后的数组
// 2.参数说明（currentValue,index,arr）
// currentValue: 当前元素
// index: 当前所引值
// arr: 数组
arrTest.map(item => {
	return Math.pow(item, 2)
})
复制代码

5.filter

arrTest = [2,3,4,6,7]
// 1.过滤数组，返回过滤成功的数组
// 2.不修改原数组
// 3.参数说明（currentValue,index,arr）
// currentValue: 当前元素
// index: 当前所引值
// arr: 数组
arrTest.filter(item => item>3)
复制代码

6.every

arrTest = [2,3,4,6,7]
// 1.判断数组是否满足某一条件
// 2.不改变原数组，全部满足则返回true，否则返回false
// 3.参数说明（currentValue,index,arr）
// currentValue: 当前元素
// index: 当前所引值
// arr: 数组
arrTest.every(item => item > 2)
复制代码

7.some

arrTest = [2,3,4,6,7]
// 1.判断数组是否满足某一条件
// 2.不改变原数组，只要有一个满足条件就返回true，否则返回false
// 3.参数说明（currentValue,index,arr）
// currentValue: 当前元素
// index: 当前所引值
// arr: 数组
arrTest.some(item => item > 2)
复制代码

8.reduce

arrTest = [2,3,4,6,7]
// 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
// 1.不改变原数组，返回累加值
// 参数说明(function(total, currentValue, currentIndex, arr), initialValue)
// total: 必需。初始值, 或者计算结束后的返回值。
// currentValue: 必需。当前元素
// currentIndex: 可选。当前元素的索引
// arr: 可选。当前元素所属的数组对象
// initialValue: 可选。传递给函数的初始值
arrTest.reduce(getSum)
function getSum(total, num) {
    return total + Math.round(num);
}
复制代码

9.reduceRight

arrTest = [2,3,4,6,7]
// 接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值
// 1.不改变原数组，返回累加值
// 参数说明(function(total, currentValue, currentIndex, arr), initialValue)
// total: 必需。初始值, 或者计算结束后的返回值。
// currentValue: 必需。当前元素
// currentIndex: 可选。当前元素的索引
// arr: 可选。当前元素所属的数组对象
// initialValue: 可选。传递给函数的初始值
arrTest.reduce(getSum)
function getSum(total, num) {
    return total + Math.round(num);
}
复制代码

ES6

1.from

let arrTest = [3,4,5,6,8,4,3,6]
// 通过拥有length的对象或者可以迭代的对象来返回一个数组
// 参数说明(object, mapFunction, thisValue)
// object: 必需，要转换为数组的对象
// mapFunction: 可选，数组中每个元素要调用的函数
// thisValue: 可选，映射函数(mapFunction)中的 this 对象
Array.from(arrTest)
Array.from(arrTest, x => x * 10);
复制代码

2.of

// 1.创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
Array.of(8,9)
复制代码

3.copyWithin

arrTest = [3,4,5,6,8,4,3,6]
// 浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小
// 参数描述(target[, start[, end]])
// target: 0为基底的索引，复制序列到该位置
// start: 0为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算
// end: 0为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数，end将从末尾开始计算
// 1. 改变原数组，返回改变后的数组
arrTest.copyWithin(1,3)
复制代码

4.find/findIndex

arrTest = [3,4,5,6,8,4,3,6]
// 返回通过测试的第一个元素
// 1.不修改原数组，返回符合条件的第一个元素
arrTest.find(item => item === 4)
// 1.不修改原数组，返回符合条件的第一个元素的索引位置
arrTest.findIndex(item => item === 4)
复制代码

5.fill

arrTest = [3,4,5,6,8,4,3,6]
// 用一个固定的值替换数组的某些位置的值
// 1. 不修改原数组
// 2. 返回修改后的数组
arrTest.fill(10)
arrTest.fill(10, 2, 4)
复制代码

6.entries() / keys() / values()

let testArr = ['apple', 'banana']
// 返回数组的迭代对象
// 对键值对的遍历
let entries = testArr.entries()
// 对键名的遍历
let keys = testArr.keys()
// 对键值的遍历
let values = testArr.values()
复制代码

7.includes()

testArr = ['apple', 'banana']
// 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
// 1. 不修改原数组
// 2. 返回true或者false
// 参数说明(searchElement, fromIndex)
// searchElement: 必须。需要查找的元素值
// fromIndex: 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0
testArr.includes('apple')
复制代码