ECMAScript 数组的每一项可以保存任何类型的数据;而且大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。
创建数组
构造函数
1 | var colors = new Array() // [] |
数组字面量表示法
1 | var colors = [] // 创建一个空数组 |
读取和设置数组的值
1 | var colors = ['red', 'blue', 'green'] // 创建一个包含3个字符串的数组 |
length 属性
1 | var colors = ['red', 'blue', 'green'] // 创建一个包含3个字符串的数组 |
检测数组
1 | var array = [] |
Array.isArray Polyfill
如果是实际项目可以配置 @babel/polyfill
或者 transform-runtime
,这不在本文的讨论范围
1 | if (!Array.isArray) { |
ES1 方法
Array.prototype.join
:join()
方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。原始数组不会被改变。
1 | // join |
Array.prototype.reverse()
:reverse()
方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。Array.prototype.sort()
:sort()
方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的; sort 方法接收一个比较函数作为参数,如果第一参数应该位于第二个参数之前则返回负数,如果第一个参数应该位于第二个之后则返回一个正数。该方法会改变原数组。
1 | // reverse |
ES3 方法
Array.prototype.push
:push()
方法可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。该方法会改变原数组。Array.prototype.pop
:pop()
方法从数组末尾移除最后一项,减少数组的length
值,并返回该项。该方法会改变原数组。Array.prototype.shift
:shift()
方法能够移除数组中的第一项并返回该项, 同时将数组长度减 1。该方法会改变原数组。Array.prototype.unshift
:unshift()
方法能够在数组前端添加任意个项,并返回新数组的长度。该方法会改变原数组。
1 | // push、pop |
Array.prototype.concat()
:concat()
方法用于合并两个或多个数组。原始数组不会被改变,而是返回一个新数组。Array.prototype.slice()
:slice()
方法返回一个新的数组对象,这一对象是一个由begin
和end
决定的原数组的浅拷贝(包括begin
,不包括end
)。原始数组不会被改变。Array.prototype.splice()
:splice()
方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。- 删除: 可以删除任意数量的项,只需指定 2 个参数: 要删除的第一项的位置和要删除的项数。例如,
splice(0, 2)
会删除数组中的前两项。 - 插入: 可以向指定位置插入任意数量的项,只需要提供 3 个参数:起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入任意多个项。例如,
splice(2, 0, "red", "green")
会从当前数组的位置 2 开始插入字符串"red"
和green
。 - 替换: 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项不必与删除的项数相等。例如,
splice(2, 1, "red", "green")
会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串"red"
和green
。
- 删除: 可以删除任意数量的项,只需指定 2 个参数: 要删除的第一项的位置和要删除的项数。例如,
1 | // concat |
ES5 方法
Array.prototype.indexOf()
:indexOf()
方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。从数组的前面向后查找,从fromIndex
处开始。Array。prototype.lastIndexOf)()
:lastIndexOf()
方法返回指定元素在数组中的最后一个索引,如果不存在则返回-1。从数组的后面向前查找,从fromIndex
处开始。
1 | var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1] |
Array.prototype.every()
: 对数组中的每一项运行给定函数,如果该函数对每一项都返回true
,则返回true
。Array.prototype.some()
: 对数组中的每一项运行给定函数,如果该函数对任一项返回true
,则返回true
。Array.prototype.filter()
: 对数组中的每一项运行给定函数,返回该函数会返回true
的项组成的数组。Array.prototype.map()
: 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。Array.prototype.forEach()
: 对数组中的每一项运行给定函数,这个方法没有返回值。
1 | // every |
Array.prototype.reduce()
Array.prototype.reduceRight()
reduce()
和 reduceRight()
方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()
方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()
则从数组的最后一项开始,向前遍历到第一项。
这两个参数都接受两个参数: 一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给 reduce
和 reduceRight
的函数接受 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
1 | // 数组求和 |
reduce 高级用法:
搬砖工小王拿到了这样的格式:
var arr = [ {n ame: 'brick1'}, {name: 'brick2'}, {name: 'brick3'} ]
希望得到这样的数据格式:brick1, brick2 & brick3
当然数组异常流:[{name:'brick1'}]
和空数组传入得到"brick1"
和空
1 | var array = [{ name: 'brick11' }, { name: 'brick12' }, { name: 'brick13' }] |
ES2015/ES6
Array.from
:用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)Array.of
:用于将一组值,转换为数组arr.fill(value[, start[, end]])
:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引find()
:用于找出第一个符合条件的数组成员findIndex()
:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
entries()
,keys()
和 values():keys()
是对键名的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历
ES2016/ES7
copyWithin()
: 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。includes()
:返回一个布尔值,表示某个数组是否包含给定的值
ES2019/ES10
flat()
:会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。flatMap()
: 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但flatMap
通常在合并成一种方法的效率稍微高一些
lodash
数组并集
_.union([arrays])
: 创建一个按顺序排列的唯一值的数组。所有给定数组的元素值使用 SameValueZero 做等值比较。(arrays
(数组)的并集,按顺序返回,返回数组的元素是唯一的)_.unionBy([arrays], [iteratee=_.identity])
: 这个方法类似_.union
,除了它接受一个iteratee
(迭代函数),调用每一个数组(array
)的每个元素以产生唯一性计算的标准。iteratee
会传入一个参数:(value
)。_.unionWith([arrays], [comparator])
: 这个方法类似_.union
, 除了它接受一个comparator
调用比较arrays
数组的每一个元素。comparator
调用时会传入 2 个参数: (arrVal
,othVal
)。
1 | import _ from 'lodash' |
数组交集
_.intersection([arrays])
: 创建唯一值的数组,这个数组包含所有给定数组都包含的元素,使用 SameValueZero 进行相等性比较。(可以理解为给定数组的交集)_.intersectionBy([arrays], [iteratee=_.identity])
: 这个方法类似_.intersection
,区别是它接受一个iteratee
调用每一个 arrays 的每个值以产生一个值,通过产生的值进行了比较。结果值是从第一数组中选择。iteratee 会传入一个参数:(value)
。_.intersectionWith([arrays], [comparator])
: 这个方法类似_.intersection
,区别是它接受一个comparator
调用比较 arrays 中的元素。结果值是从第一数组中选择。comparator
会传入两个参数:(arrVal, othVal)
。
1 | import _ from 'lodash' |
数组差集
_.difference(array, [values])
: 创建一个具有唯一 array 值的数组,每个值不包含在其他给定的数组中。(即创建一个新数组,这个数组中的值,为第一个数字(array 参数)排除了给定数组中的值。)该方法使用 SameValueZero 做相等比较。结果值的顺序是由第一个数组中的顺序确定。_.differenceBy(array, [values], [iteratee=_.identity])
: 这个方法类似 _.difference ,除了它接受一个 iteratee (迭代器), 调用 array 和 values 中的每个元素以产生比较的标准。 结果值是从第一数组中选择。iteratee 会调用一个参数:(value)。(首先使用迭代器分别迭代 array 和 values 中的每个元素,返回的值作为比较值)。_.differenceWith(array, [values], [comparator])
: 这个方法类似_.difference
,除了它接受一个comparator
(比较器),它调用比较array
,values
中的元素。 结果值是从第一数组中选择。comparator
调用参数有两个:(arrVal, othVal)
。
1 | import _ from 'lodash' |
数组分组
_.groupBy(collection, [iteratee=_.identity])
: 创建一个对象,key
是iteratee
遍历collection
(集合) 中的每个元素返回的结果。 分组值的顺序是由他们出现在collection
(集合) 中的顺序确定的。每个键对应的值负责生成key
的元素组成的数组。iteratee
调用 1 个参数: (value
)。
1 | import _ from 'lodash' |
删除数组项
根据断言删除数组项
remove
: 移除数组中 predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入 3 个参数: (value
,index
,array
)。
1 | import _ from 'lodash' |
根据给定值删除数组项
_.pull(array, [values])
: 移除数组 array 中所有和给定值相等的元素,使用 SameValueZero 进行全等比较。_.pullAll(array, values)
: 这个方法类似 _.pull,区别是这个方法接收一个要移除值的数组。_.pullAllBy(array, values, [iteratee=_.identity])
: 这个方法类似于_.pullAll
,区别是这个方法接受一个iteratee
(迭代函数) 调用array
和values
的每个值以产生一个值,通过产生的值进行了比较。iteratee
会传入一个参数: (value
)。_.pullAllWith(array, values, [comparator])
: 这个方法类似于_.pullAll
,区别是这个方法接受comparator
调用array
中的元素和values
比较。comparator
会传入两个参数:(arrVal
,othVal
)。
pull 系列和 difference 系列不同之处在于 pull 系列方法会改变数组 array
1 | import _ from 'lodash' |
_.pullAt(array, [indexes])
: 根据索引indexes
,移除array
中对应的元素,并返回被移除元素的数组。
1 | import _ from 'lodash' |
_.without(array, [values])
: 创建一个剔除所有给定值的新数组,剔除值的时候,使用 SameValueZero 做相等比较。不像_.pull
, 这个方法会返回一个新数组。
1 | import _ from 'lodash' |
数组去重
_.uniq(array)
: 创建一个去重后的 array 数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。_.uniqBy(array, [iteratee=_.identity])
: 这个方法类似_.uniq
,除了它接受一个iteratee
(迭代函数),调用每一个数组(array
)的每个元素以产生唯一性计算的标准。iteratee
调用时会传入一个参数:(value
)。_.uniqWith(array, [comparator])
: 这个方法类似_.uniq
, 除了它接受一个comparator
调用比较array
数组的每一个元素。comparator
调用时会传入 2 个参数:(arrVal
,othVal
)。
1 | import _ from 'lodash' |
数组排序
_.sortBy(collection, [iteratees=[_.identity]])
: 创建一个元素数组。 以iteratee
处理的结果升序排序。 这个方法执行稳定排序,也就是说相同元素会保持原始排序。iteratees
调用1个参数:(value
)。可以使用Array.prototype.reverse
方法倒序
1 | import _ from 'lodash' |
数组降维
_.flatten(array)
: 减少一级array
嵌套深度。_.flattenDeep(array)
: 将array
递归为一维数组。_.flattenDepth(array, [depth=1])
: 根据depth
递归减少array
的嵌套层级
1 | import _ from 'lodash' |
获取部分元素
_.initial(array)
: 获取数组array
中除了最后一个元素之外的所有元素(去除数组array中的最后一个元素)。_.tail(array)
: 获取除了array
数组第一个元素以外的全部元素。