几种最常见的js array操作方法及示例

1. 序言

操作array可谓前端最基础的工作，无论是从接口中取的数据，还是筛选数据，或者是添加按钮权限等等操作，array都是绕不开的东西。array的操作很多，初学者十分容易搞混，不是很熟练的情况下容易用错，所以我搜集各处的资料，准备整理一篇，也当作给自己梳理一下知识。

2. 准备

首先准备简单的一个html页面，附带array一条，为了演示方便就这样玩吧。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="container">
        <button @click=init>Click</button>
    </div>
</body>
<script>
    new Vue({
        el: '#container',
        methods: {
            init () {
                const array = [
                {   name: 'aa', age: 12   },
                {   name: 'bb', age: 14   },
                {   name: 'cc', age: 16   },
                {   name: 'cc', age: 16   },
            ]
        }
    })
</script>
</html>

3. Get start

2.1 filter

filter 过滤，可以返回一个符合条件的新数组

filter 有3个参数 (item, index, self) 分别代表 item: 遍历的那一个数组元素，index: 索引值，self: 自己。

filter最简单的应用，只用item可以筛选出符合条件的

执行下面的代码

const filter = array.filter( item => item.age > 13)

console.log(filter)，可以返回如下结果

(3) [{…}, {…}, {…}]
    0: {name: "bb", age: 14}
    1: {name: "cc", age: 16}
    2: {name: "cc", age: 16}
length: 3

filter总会返回一个数组，如果不符合筛选的条件，则会返回空数组。

将item，index，self同时用上，我们可以巧妙地实现数组去重的功能。

const simpleArray = ['a','a','b','c','b','a']

const simpleFilter = simpleArray.filter((item, index, self) => self.indexOf(item) === index)

console.log(simpleFilter)   

//结果

(3) ["a", "b", "c"]

indexOf() 这个有两个参数 (item, offset) 第一个参数是元素，第二个是从头开始的起点位置的索引, 返回值是该处的索引，lastIndexOf()正好与之相反，从最后一个开始向前。在这里去重时，过滤返回了第二次索引相同时的元素，所以顺序如此。

2.2 sort

sort() 方法很简单，可以对数组元素进行排序

使用最初的那个数组作为例子，给两个参数item1, item2

const sortArray = array.sort((item1,item2) => item1.age - item2.age)

结果可以看到，元素按照age的升序排列

(5) [{…}, {…}, {…}, {…}, {…}]
    0: {name: "dd", age: 10}
    1: {name: "aa", age: 12}
    2: {name: "bb", age: 14}
    3: {name: "cc", age: 16}
    4: {name: "cc", age: 16}
length: 5

2.3 map

map() 是ES6的新方法，可在不改变原数组的基础上返回一个经过处理的新数组，比方说我想让所有的年龄都+5

const mapArray = array.map( item => {
                return {
                    name: item.name,
                    age: item.age + 5
                }
            })

结果：

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "aa", age: 17}
1: {name: "bb", age: 19}
2: {name: "cc", age: 21}
3: {name: "cc", age: 21}
4: {name: "dd", age: 15}
length: 5

map 有3个参数，和filter一样，但主要使用的是item, index。

2.4 forEach

数组遍历建议使用forEach，虽然理论上而言使用暂存array.length的for，倒序for效率更高，但是这么优雅的写法还要啥自行车。

array.forEach((item,index,self) => {})

2.5 find

find() 和filter() 差不多，只不过它是用于找出数组中特定的值。比如我想找出name为cc的值。

const findArr = array.find( item => item.name === 'cc')

结果为：

{name: "cc", age: 16}

需要注意的是，find()会从索引开头开始寻找，当找到符合条件的元素后返回true，所以如果有多条name为cc的值，比如现在这样，它只会返回第一条，如果需要找到精确的那一条，则需要添加更多条件。

2.6 some & every & includes

这两个我在工作中用的不多，但是他们很特别，返回值为true，false。
some() 只要数组种有一个符合条件，就会返回true，而every() 则必须所有都符合条件才返回true，否则返回false。
includes()可以判断数组中是否包含这一元素，有则true。

2.7 reduce

reduce()非常特殊，它的结构由一个方法和一个参数组成 (func,initv)，方法有4个参数 (total,item,index,self),
initv是给函数的初始值，total是上一次计算的结果，item是元素本身。

在这里，我们试着把所有年龄相加再+5

const findArr = array.reduce((total,item) => total + item.age, 5)

// 结果为75

可以看到，初始值为5，每次循环total都等于上一次的total加上这次的age，最后返回total，得到结果。

2.8 splice

splice()很简单，有两个参数 (index, num, ....)，第一个参数规定开始的位置，第二个是删去的个数，后面则是添加的元素。用这个方法可以很方便的对原数组进行增删操作。同时它的返回值是被删掉的元素。

const simpleArray = ['a','a','b','c','b','a']
const spliceArr = simpleArray.splice(1, 2,'b','v')

console.log(simpleArray)  //经过更改的原数组 ["a", "b", "v", "c", "b", "a"]
console.log(spliceArr)  //移除的部分元素 ["a", "b"]