记住这18个数组操作API,效率开发必备

810 阅读7分钟

这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战

改变原数组的有:push()、unshift()、pop()、shift()、reverse()、splice()、sort()

数组结尾追加元素 push(value)

将value添加到数组的最后,返回值是更新后数组的长度,会改变原数组

// Base
let a = [1, 2, 3, 4, 5]
let result = a.push(1)
console.log(result)    // 6
console.log(a)         // [1, 2, 3, 4, 5, 1]

// More
result = a.push('a', 'b')      // 可一次添加多个值
console.log(result)            // 8
console.log(a)                 // [1, 2, 3, 4, 5, 1, 'a', 'b']

数组开头添加 unshift(value)

将value添加到数组的开头,返回值是更新后数组的长度,会改变数组

// Base
let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result)        // 6
console.log(a)             // [1, 1, 2, 3, 4, 5]

// More
result = a.unshift('a', 'b')  // 可一次添加多个值
console.log(result)           // 8
console.log(a)                // ['a', 'b', 1, 1, 2, 3, 4, 5]

删除数组尾元素 pop()

删除数组中最后一个元素,返回值是删除的那个元素,会改变原数组

// Base
let a = [5]
let result = a.pop()
console.log(result)  // 5
console.log(a)       // []

// More
result = a.pop()     // 数组为空数组后,执行pop()方法,返回undefined
console.log(result)  // undefined
console.log(a)       // []

删除数组首元素 shift()

删除数组中的第一个元素,返回值是删除的那个元素, 会改变原数组

// Base
let a = [5]
let result = a.shift()
console.log(result)  // 5
console.log(a)       // []

// More
result = a.shift()     // 数组为空数组后,执行shift()方法,返回undefined
console.log(result)    // undefined
console.log(a)         // []

数组转字符串 join(value)

将数组用value连接成字符串,返回值是连接的字符串,不改变原数组

// Base
let a = [1, 2, 3, 4, 5]
let result = a.join()
console.log(result)   // 1,2,3,4,5
result = a.join('')
console.log(result)   // 12345
result = a.join(',')
console.log(result)   // 1,2,3,4,5
result = a.join('&')
console.log(result)   // 1&2&3&4&5

// More
let obj = {
    toString: function () {
        console.log('调用了toString()方法!')
        return 'a'
    },
    toValue: function () {
        console.log('调用了toValue()方法!')
        return 'b'
    }
}
result = a.join(obj)  // 使用对象时会调用对象自身的toString方法,我们这里重写了toString
// 调用了toString()方法
console.log(result)  // 1a2a3a4a5
console.log(a)       // [1, 2, 3, 4, 5]

// 数组中的join()方法相对的一个方法是字符串的split()方法
console.log(result.split('a'))  // ["1", "2", "3", "4", "5"]

反转数组 reverse()

反转数组,返回值是反转后的数组,会改变原数组

// Base
let a = [1, 2, ,3, ,4, 5]
let result = a.reverse()
console.log(result)   //  [5, 4 ,3 ,2 ,1]
console.log(a)        //  [5, 4 ,3 ,2 ,1]

// More
a = [1, [2, 3], [4, 5]]
result = a.reverse()
console.log(result)   // [[4, 5], [2, 3], 1]
console.log(a)        // [[4, 5], [2, 3], 1]
// 可以看到这里的反转只是基于数组的第一层,属于浅反转

// 一个简单的深反转需要使用递归实现
const deepReverse = (array) => {
  let temp = array.reverse()
  temp.forEach(v => {
    if (Object.prototype.toString.call(v) === '[object Array]') {
      deepReverse(v)
    }
  })
  return temp
}
a = [1, [2, 3], [4, 5]]
result = deepReverse(a)
console.log(result)  // [[5, 4], [3, 2], 1]

获取子数组 slice(star,end)

获取子数组,包含索引star到end的值,不含end,返回值是获取的子数组,不改变原数组

// Base
let a = [1, 2, 3, 4, 5]
let result = a.slice(2, 4)
console.log(result)  // [3, 4]
console.log(a)       // [1, 2, 3, 4, 5]

// More
console.log(a.slice(1))       // [2, 3, 4, 5]  只有一个参数且不小于0时,则从此索引开始截取到数组的末尾
console.log(a.slice(-1))      // [5]  只有一个参数且小于0时,则从倒数|start|位截取到数组的末尾
console.log(a.slice(-1, 1))   // []   反向截取,不合法,返回空数组
console.log(a.slice(1, -1))   // [2, 3, 4]  从第1位截取到倒数第1位
console.log(a.slice(-1, -2))  // []   反向截取,不合法,返回空数组
console.log(a.slice(-2, -1))  // [4]  倒数第2位截取到倒数第1位

截取一段/插入数组 splice

splice(index, count, value1,value2,....) 从索引为index的开始删除count个,在向数组里插入value1,value2等,返回值是删除的数组,会改变原数组的值

// Base
let a = [1, 2, 3, 4, 5]
let result = a.splice(1, 2, 0)
console.log(result)  // [2, 3]
console.log(a)  // [1, 0, 4, 5]

// More
a = [1, 2, 3, 4, 5]
console.log(a.splice(-2))  // [4, 5]  当参数为单个且小于0时,将截取从倒数|index|位到数组的末尾
console.log(a)             // [1, 2, 3]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1))  // [5]  当参数为单个且小于0时,将截取从倒数|index|位到数组的末尾
console.log(a)             // [1, 2, 3, 4]

a = [1, 2, 3, 4, 5]
console.log(a.splice(0))  // [1, 2, 3, 4, 5] 当参数为单个且不小于0时,将截取从index位到数组的末尾
console.log(a)            // []

a = [1, 2, 3, 4, 5]
console.log(a.splice(1))  // [2, 3, 4, 5]  当参数为单个且不小于0时,将截取从index位到数组的末尾
console.log(a)            // [1]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2))   // [5]  从倒数第1位开始截取两个元素
console.log(a)                 // [1, 2, 3, 4]

a = [1, 2, 3, 4, 5]
console.log(a.splice(0, 2, 'a', 'b', 'c'))  // [1, 2]
console.log(a)  // ['a', 'b', 'c', 3, 4, 5]  截取后将value值依次填充到截取位置处,旧值被向后顺移

按ASCII排序 sort()

对数组进行排序,排序是比较ASCII码大小不是数值大小,返回排序过后的新数组,会改变原数组

// Base
let a = [31, 22, 27, 1, 9]
let result = a.sort()
console.log(result)  // [1, 22, 27, 31, 9]
console.log(a)  // [1, 22, 27, 31, 9]

// More
a = ['c', 'ac', 'ab', 'A1', '1c', 13, 12, '13', '12', '3', '2', '1b', '1a', 1, 'aa', 'a', 3, 'b', 2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "A1", "a", "aa", "ab", "ac", "b", "c"]
// 可以看出sort排序是根据每个字符对应的ASCII码值进行排序的,而非值的大小。
// 先比较第一位的ASCII码值,如果第一位的ASCII码值相同,则开始比较第二位的ASCII码值,以此类推
// ASCII码表(http://tool.oschina.net/commons?type=4 + K)
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
  return a - b
})
console.log(a)  // [1, 9, 22, 27, 31]  按数值大小正序排列

a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
  return b - a
})
console.log(a)  // [31, 27, 22, 9, 1]  按数值大小倒序排列

数组转字符串 toString()

将数组中改成用逗号拼接的字符串,返回拼接后的字符串,不改变原数组

```js
// Base
let a = [1, 2, 3, 4, 5]
let result = a.toString()
console.log(result)  // 1,2,3,4,5
console.log(a)  // [1, 2, 3, 4, 5]

// 除了toString()方法之外,String()方法也可以将数组转换成字符串
result = String(a)
console.log(result)  // 1,2,3,4,5
```

倒序查找索引 lastIndexOf(value)

倒序查找数组中包含value的索引,查找到就返回匹配的第一索引,如果没有查找到就返回-1,不改变原数组

```js
// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result)  // 3
console.log(a)  // [1, 2, 3, 4, 5]

result = a.lastIndexOf(6)
console.log(result)  // -1
console.log(a)  // [1, 2, 3, 4, 5]
``` 

连接成新数组 concat(value)

将数组或值连接成新数组,返回新数组,不改变原数组

```js
// Base
let a = [1, 2], b = [3, 4], c = 5
let result = a.concat(b, c)
console.log(result)  // [1, 2, 3, 4, 5]
console.log(a)  // [1, 2]

// More
b = [3, [4]]
result = a.concat(b, c) 
console.log(result)  // [1, 2, 3, [4], 5]  concat对于嵌套数组无法拉平
console.log(a)  // [1, 2]
```

遍历数组 forEach()

对数组进行遍历,对数组中的每一项运行给定函数,参数是function,默认传参有:遍历数组内容,索引,数组本身,没有返回值

```js
var arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, a) {
  console.log(item + '|' + index + '|' + (a === true))
})
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
```

数组映射 map()

指映射,对数组中的每一项运行给定函数,返回值是运行函数之后结果组成的数组,不改变原数组

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
  return item * item
})
console.log(arr1)  // [1, 4, 9, 16, 25]
```

数组过滤 filter()

指过滤,对数组中的每一项运行给定函数,返回值是满足条件的值组成的数组,不改变原数组

```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
  return index % 3 === 0 || item >= 8
})
console.log(arr1)  // [1, 4, 7, 8, 9, 10]
```

元素是否全部满足条件 every()

判断数组中的每一项是否都满足条件,只有全都满足条件,才返回true

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
  return item < 10
})
console.log(arr1)  // true
var arr2 = arr.every(function (item, index, a) {
  return item < 3
})
console.log(arr2)  // false
```

某一项满足条件 some()

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
  return item < 3
})
console.log(arr1)  // true
var arr2 = arr.some(function (item, index, a) {
  return item < 1
})
console.log(arr2)  // false
```

是否包含 includes(value)

在数组中查找value,如果找到就返回true,否之就返回false

```js
const array1 = [1, 2, 3];

console.log(array1.includes(2));   // true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  //  true

console.log(pets.includes('at'));   // false

```