JS数组方法
join()
1 | arr.join([separator]) |
描述
所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。
参数
separator
可选
指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,
)分隔。如果separator
是空字符串(""
),则所有元素之间都没有任何字符。
返回值
一个所有数组元素连接的字符串。如果 arr.length
为0,则返回空字符串。
示例
1 | const elements = ['Fire', 'Air', 'Water']; |
push()
1 | arr.push(element1, ..., elementN) |
描述
push方法将值追加到数组中。
push
方法具有通用性。该方法和 call()
或 apply()
一起使用时,可应用在类似数组的对象上。push
方法根据 length
属性来决定从哪里开始插入给定的值。
如果 length
不能被转成一个数值,则插入的元素索引为 0,包括 length
不存在时。当 length
不存在时,将会创建它。
参数
element
被添加到数组末尾的元素。
返回值
当调用该方法时,新的 length
属性值将被返回。
示例
添加元素到数组
1 | var sports = ["soccer", "baseball"]; |
合并数组
1 | var vegetables = ['parsnip', 'potato']; |
像数组一样使用对象
使用在 Array.prototype.push 上使用的 call
来调用该方法
1 | var obj = { |
注意,尽管 obj 不是数组,但是 push 方法成功地使 obj 的 length 属性增长了,就像我们处理一个实际的数组一样。
pop()
1 | arr.pop() |
描述
pop
方法从一个数组中删除并返回最后一个元素。
返回值
从数组中删除的元素(当数组为空时返回undefined
)。
示例
删除掉数组的最后一个元素
1 | let myFish = ["angel", "clown", "mandarin", "surgeon"]; |
shift()
1 | arr.shift() |
描述
shift
方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。
返回值
从数组中删除的元素;如果数组为空则返回undefined
。
示例
移除数组中的一个元素
1 | let myFish = ['angel', 'clown', 'mandarin', 'surgeon']; |
在while
循环中使用shift()
下例中每个循环将要从一个数组中移除下一项元素,直至它成为空数组。
1 | var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; |
unshift()
1 | arr.unshift(element1, ..., elementN) |
描述
unshift
方法会在调用它的类数组对象的开始位置插入给定的参数。
参数
element
要添加到数组开头的元素或多个元素。
返回值
当一个对象调用该方法时,返回其 length
属性值。
示例
1 | let arr = [1, 2]; |
注意, 如果传入多个参数,它们会被以块的形式插入到对象的开始位置,它们的顺序和被作为参数传入时的顺序一致。 于是,传入多个参数调用一次 unshift
,和传入一个参数调用多次 unshift
(例如,循环调用),它们将得到不同的结果。
1 | let arr = [4,5,6]; |
sort()
1 | arr.sort([compareFunction]) |
描述
sort()
方法用原地算法对数组的元素进行排序,并返回数组。
默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。
ES10(EcmaScript 2019)以前没有要求稳定性。
参数
compareFunction
可选
用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。
如果指明了 compareFunction
,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
如果
compareFunction(a, b)
小于 0 ,那么 a 会被排列到 b 之前;如果
compareFunction(a, b)
等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);如果
compareFunction(a, b)
大于 0 , b 会被排列到 a 之前。compareFunction(a, b)
必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
比较函数格式如下:
1 | function compare(a, b) { |
sort
方法可以使用 函数表达式 方便地书写:
1 | var numbers = [4, 2, 5, 1, 3]; |
对象可以按照某个属性排序:
1 | var items = [ |
返回值
排序后的数组。数组原地排序,并且不进行复制。
示例
创建、显示及排序数组
1 | var stringArray = ["Blue", "Humpback", "Beluga"]; |
对非 ASCII 字符排序
1 | var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; |
使用映射改善排序
1 | // 需要被排序的数组 |
reverse()
1 | arr.reverse() |
描述
reverse
方法颠倒数组中元素的位置,改变了数组,并返回该数组的引用。
返回值
颠倒后的数组。
示例
颠倒数组中的元素
1 | const a = [1, 2, 3]; |
颠倒类数组中的元素
1 | const a = {0: 1, 1: 2, 2: 3, length: 3}; |
concat()
1 | var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) |
描述
concat
方法创建一个新的数组,它由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素(如果参数是数组)或参数本身(如果参数不是数组)。
它不会递归到嵌套数组参数中。
concat
方法不会改变this
或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。
参数
value
可选
数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN
参数,则 concat
会返回调用此方法的现存数组的一个浅拷贝。详情请参阅下文描述。
返回值
新的 Array
实例。
示例
连接多个数组
1 | var num1 = [1, 2, 3], |
将值连接到数组
1 | var alpha = ['a', 'b', 'c']; |
合并嵌套数组
1 | var num1 = [[1]]; |
slice()
1 | arr.slice([begin[, end]]) |
描述
slice
不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。
原数组的元素会按照下述规则拷贝:
如果该元素是个对象引用 (不是实际的对象),
slice
会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。对于字符串、数字及布尔值来说(不是
String
、Number
或者Boolean
对象),slice
会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。
参数
begin
可选
提取起始处的索引(从 0
开始),从该索引开始提取原数组元素。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)
表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin
,则 slice
从索引 0
开始。如果 begin
超出原数组的索引范围,则会返回空数组。
end
可选
提取终止处的索引(从 0
开始),在该索引处结束提取原数组元素。slice
会提取原数组中索引从 begin
到 end
的所有元素(包含 begin
,但不包含 end
)。slice(1,4)
会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)
表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。如果 end
被省略,则 slice
会一直提取到原数组末尾。如果 end
大于数组的长度,slice
也会一直提取到原数组末尾。
返回值
一个含有被提取元素的新数组。
示例
返回现有数组的一部分
1 | var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; |
类数组(Array-like)对象
1 | function list() { |
除了使用 Array.prototype.slice.call(``arguments``)
,你也可以简单的使用 [].slice.call(arguments)
来代替。另外,你可以使用 bind
来简化该过程。
1 | var unboundSlice = Array.prototype.slice; |
splice()
1 | array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) |
描述
splice()
方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
参数
start
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n
);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。
deleteCount
可选
整数,表示要移除的数组元素的个数。如果 deleteCount
大于 start
之后的元素的总数,则从 start
后面的元素都将被删除(含第 start
位)。如果 deleteCount
被省略了,或者它的值大于等于array.length - start
(也就是说,如果它大于或者等于start
之后的所有元素的数量),那么start
之后数组的所有元素都会被删除。如果 deleteCount
是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
item1, item2, *...*
可选
要添加进数组的元素,从start
位置开始。如果不指定,则 splice()
将只删除数组元素。
返回值
由被删除的元素组成的一个数组。
如果只删除了一个元素,则返回只包含一个元素的数组;如果没有删除元素,则返回空数组。
示例
从索引 2 的位置开始删除 0 个元素,插入“drum” 和 “guitar”
1 | var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; |
indexOf()
1 | arr.indexOf(searchElement[, fromIndex]) |
描述
indexOf
使用严格相等(无论是 ===, 还是 triple-equals操作符都基于同样的方法)进行判断 searchElement与
数组中包含的元素之间的关系。
参数
searchElement
要查找的元素。
fromIndex
可选
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0。
参数
searchElement
要查找的元素
fromIndex
可选
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0。
参数
searchElement
要查找的元素
fromIndex
可选
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
返回值
首个被找到的元素在数组中的索引位置;若没有找到则返回 -1
示例
使用indexOf
1 | var array = [2, 5, 9]; |
找出指定元素出现的所有位置
1 | var indices = []; |
判断一个元素是否在数组里,不在则更新数组
1 | function updateVegetablesCollection (veggies, veggie) { |
forEach()
1 | arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) |
描述
forEach()
方法按升序为数组中含有效值的每一项执行一次 callback
函数,那些已删除或者未初始化的项将被跳过。
参数
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:
currentValue
数组中正在处理的当前元素。
index
可选数组中正在处理的当前元素的索引。
array
可选forEach()
方法正在操作的数组。
thisArg
可选
可选参数。当执行回调函数 callback
时,用作 this
的值。
示例
不对未初始化的值进行任何操作(稀疏数组)
1 | const arraySparse = [1,3,,7]; |
将for
循环转换为forEach
1 | const items = ['item1', 'item2', 'item3']; |
map()
1 | var new_array = arr.map(function callback(currentValue[, index[, array]]) { |
描述
map
方法会给原数组中的每个元素都按顺序调用一次 callback
函数。callback
每次执行后的返回值(包括 undefined
)组合起来形成一个新数组。
callback
函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete
删除的索引则不会被调用。
你不该使用map
: A)你不打算使用返回的新数组 B) 你没有从回调函数中返回值
参数
callback
生成新数组元素的函数,使用三个参数:
currentValue
callback
数组中正在处理的当前元素。index
可选callback
数组中正在处理的当前元素的索引。array
可选map
方法调用的数组。
thisArg
可选
执行 callback
函数时值被用作this
。
返回值
一个由原数组每个元素执行回调函数的结果组成的新数组。
示例
求数组中每个元素的平方根
1 | var numbers = [1, 4, 9]; |
使用map
重新格式化数组中的对象
1 | var kvArray = [{key: 1, value: 10}, |
使用一个包含一个参数的函数来mapping(构建)一个数字数组
1 | var numbers = [1, 4, 9]; |
filter()
1 | var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) |
描述
filter
为数组中的每个元素调用一次 callback
函数,并利用所有使得 callback
返回 true 或等价于True的元素(即除 false
、0
、-0
、0n
、""
、null
、undefined
和 NaN
以外皆为真值)创建一个新数组。
参数
callback
用来测试数组的每个元素的函数。返回 true
表示该元素通过测试,保留该元素,false
则不保留。它接受以下三个参数:
element
数组中当前正在处理的元素。
index
可选正在处理的元素在数组中的索引。
array
可选调用了
filter
的数组本身。
thisArg
可选
执行 callback
时,用于 this
的值。
返回值
一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
示例
筛选排除所有较小的值
1 | function isBigEnough(element) { |
过滤 JSON 中的无效条目
1 | var arr = [ |
在数组中搜索
1 | const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; |
every()
1 | arr.every(callback(element[, index[, array]])[, thisArg]) |
描述
every
方法为数组中的每个元素执行一次 callback
函数,直到它找到一个会使 callback
返回 falsy 的元素。
参数
callback
用来测试每个元素的函数,它可以接收三个参数:
element
用于测试的当前值。
index
可选用于测试的当前值的索引。
array
可选调用
every
的当前数组。
thisArg
执行 callback
时使用的 this
值。
返回值
如果回调函数的每一次返回都为 truthy 值,返回 true
,否则返回 false
。
示例
检测所有数组元素的大小
1 | function isBigEnough(element, index, array) { |
使用箭头函数
1 | [12, 5, 8, 130, 44].every(x => x >= 10); // false |
some()
1 | arr.some(callback(element[, index[, array]])[, thisArg]) |
描述
some()
为数组中的每一个元素执行一次 callback
函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。
如果找到了这样一个值,some()
将会立即返回 true
。否则,some()
返回 false
。
参数
callback
用来测试每个元素的函数,接受三个参数:
element
数组中正在处理的元素。
index
可选数组中正在处理的元素的索引值。
array
可选some()
被调用的数组。
thisArg
可选
执行 callback
时使用的 this
值。
返回值
数组中有至少一个元素通过回调函数的测试就会返回**true
**;所有元素都没有通过回调函数的测试返回值才会为false。
示例
测试数组元素的值
1 | function isBiggerThan10(element, index, array) { |
使用箭头函数测试数组元素的值
1 | [2, 5, 8, 1, 4].some(x => x > 10); // false |
判断数组元素中是否存在某个值
1 | var fruits = ['apple', 'banana', 'mango', 'guava']; |
使用箭头函数判断数组元素中是否存在某个值
1 | var fruits = ['apple', 'banana', 'mango', 'guava']; |
将任意值转换为布尔类型
1 | var TRUTHY_VALUES = [true, 'true', 1]; |
flat()
1 | var newArray = arr.flat([depth]) |
描述
flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数
depth
可选
指定要提取嵌套数组的结构深度,默认值为 1
返回值
一个包含将数组与子数组中所有元素的新数组
示例
扁平化嵌套数组
1 | var arr1 = [1, 2, [3, 4]]; |
扁平化与数组空项
flat()
方法会移除数组中的空项:
1 | var arr4 = [1, 2, , 4, 5]; |
includes()
1 | arr.includes(valueToFind[, fromIndex]) |
描述
includes()
方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true
,否则返回 false
。
参数
valueToFind
需要查找的元素值,比较字符串和字符时区分大小写。
fromIndex
可选
从fromIndex
索引处开始查找 valueToFind
。如果为负值,则按升序从 array.length + fromIndex
的索引开始搜 (即使从末尾开始往前跳 fromIndex
的绝对值个索引,然后往后搜寻)。默认为 0。
返回值
返回一个布尔值 Boolean
。
如果在数组中(或 fromIndex
指定的范围中)找到了 valueToFind
,则返回 true
,否则返回 false
。
示例
1 | [1, 2, 3].includes(2); // true |
计算出的索引小于 0
如果 fromIndex
为负值,计算出的索引将作为开始搜索searchElement
的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
1 | // array length is 3 |
join()
1 | arr.join([separator]) |
描述
所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。
如果一个元素为 undefined
或 null
,它会被转换为空字符串。
参数
separator
可选
指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,
)分隔。如果separator
是空字符串(""
),则所有元素之间都没有任何字符。
返回值
一个所有数组元素连接的字符串。如果 arr.length
为0,则返回空字符串。
示例
1 | var a = ['Wind', 'Rain', 'Fire']; |
连接类数组对象
1 | function f(a, b, c) { |