JS常用数组方法整理

ECMAscript数组的独特之处

 1. 数组中的每一项可以保存任何类型的数据
 2. 数组的大小可以动态调整,随数据的添加减少自动变更长度,length不是只读的
- 数组的创建

1.Array构造函数

var arr = new Array()
/**
  * 可向Array构造函数传递传递一个值,该值为数值时,表示所创建数组的项数;若是其他,表示包含那个值
  * 的数组
  **/
var arr = new Array(4)
var arr = new Array('big', 'pig')

2.数组字面量表示法

var arr = ['1', 2, 'hello']

在一般情况下,除了Date()构造函数以外,推荐使用字面量表示法

- 数组的方法

1.添加元素

  • arr.push()
var arr = [1]
arr.push('new')
console.log(arr) // 栈方法尾部添加元素 [1, "new"]
  • arr.unshift()
var arr = [1]
arr.unshift('new', 'old')
console.log(arr) // 队列方法头部推入元素 ["new", 'old', 1]

2.删除元素

  • arr.pop()
var arr = ['new', 'old', 'more']
console.log(arr.pop()) // 返回删除元素 'more'
console.log(arr) // 栈方法尾部删除元素 ["new", "old"]
  • arr.shift()
var arr = ['new', 'old', 'more']
console.log(arr.shift()) // 返回删除元素 'new'
console.log(arr) // 队列方法头部删除元素 ["old", "more"]
  • arr.splice()
    始终返回一个数组,数组包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)

删除-两个参数:要删除的第一项的位置和要删除的项数
插入-三个参数:起始位置、0(替换-要删除的项数)、要插入的项

以上方法均会改变原始数组

3.操作方法(不改变原始数组)

  • arr.concat(arr1)

该方法没有传递参数的情况下,只是复制当前数组并返回副本
如果传递一或多个数组作为参数,会将数组中的每一项添加到副本末尾,返回新构建的数组

  • arr.slice()
    基于当前数组中的一个或多个项创建一个新数组

一个参数:返回从该参数指定位置开始到数组末尾的所有项
两个参数:返回起始位置和结束位置之间的项——但不包括结束位置的项
如果参数中存在负数,则用数组长度加上该数来确定相应的位置

4.位置方法

  • arr.indexOf() —— 从数组的开头(位置0)开始向后查找
  • arr.lastIndexOf() —— 从数组末尾开始向前查找

两个参数:要查找的项和(可选的)表示查找起点位置的索引

5.迭代方法(不会修改数组中包含的值)

ECMAScript 5 为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函和(可选的)运行该函数的作用域对象——影响this的值。

  • 传入这些方法中的函数接受三个参数:数组项的值,该项在数组中的位置和数组对象本身
  • every() —— 对数组的每一项运行指定的函数,如果该函数对每一项都返回true,则返回true
  • filter() —— 对数组的每一项运行指定的函数,返回该函数会返回true的项所组成的数组
  • map() —— 对数组的每一项运行指定的函数,返回每次函数调用的结果所组成的数组
  • forEach() —— 对数组的每一项运行指定的函数。这个方法没有返回值
  • some() —— 对数组的每一项运行指定的函数,如果该函数中的任一项返回true,则返回true

6.重排序方法

  • reverse() —— 反转数组项
  • sort() —— 接收一个比较函数作为参数。比较函数接收两个参数,如果第一个参数在第二个参数之前则返回一个负数;两个参数相等返回0;如果第一个参数在第二个参数之后则返回一个正数。
var arr = [2, 4, 55, 0, 33]
arr.sort()
console.log(arr) // [0, 2, 33, 4, 55] - 字符串比较
var arr = [2, 4, 55, 0, 33]
arr.sort((a, b) => a - b) // 升序
console.log(arr) // [0, 2, 4, 33, 55]
var arr = [2, 4, 55, 0, 33]
arr.sort((a, b) => b - a) // 降序
console.log(arr) // [55, 33, 4, 2, 0]

7.归并方法

这两个方法都接收两个参数:
callback:一个在每一项上调用的函数
index:(可选的)作为归并基础的初始值

  • 传入的函数接收4个参数:前一个值、当前值、项的索引和数组对象
  • reduce() —— 从数组第一项开始,逐个遍历到最后
  • reduceRight() —— 从数组最后一项开始,向前遍历到第一项

8.其他方法

  • arr.isArray()
  • arr.copyWithin() —— 在当前数组内部,将制定位置的数组复制到其他位置,会覆盖原数组项,返回当前数组

参数:
target --必选 索引从该位置开始替换数组项。
start --可选 索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。
end --可选 索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数。

  • arr.find(callback) 找到第一个符合条件的数组成员
  • arr.findIndex(callback) 找到第一个符合条件的数组成员的索引值
  • arr.fill(target, start, end) —— 使用给定的值,填充一个数组,填充完后会改变原数组
  • arr.includes() —— 判断数中是否包含给定的值

与indexOf()的区别:

  1. indexOf()返回的是数值(位置索引),而includes()返回的是布尔值
  2. indexOf() 不能判断NaN,返回为-1 ,includes()则可以判断
  • Array.from() —— 将伪数组变成数组,只要有length的就可以转成数组。 ---es6
let str = '123'
console.log(Array.from(str))    // ["1", "2", "3"]
  • Array.of() —— 将一组值转换成数组,类似于声明数组。 ---es6
let str = '2333'
console.log(Array.of(str))   // ['2333']
  • arr.keys() —— 遍历数组的键名
  • arr.values() —— 遍历数组键值
  • arr.entries() —— 遍历数组的键名和键值

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.fengpt.cn/archives/js常用数组方法整理