JavaScript中的数组方法汇总

2022-11-07 12:58:08

JavaScript中的数组

数组方法

indexOf() 查询元素

说明：可返回某个指定的字符串值在字符串中首次出现的位置，如果没找到则返回-1。

用法：indexOf(字符串，开始位置optional)

var arr = ['hello', 'word']
arr.indexOf('word') // 1

pop() 删除最后一项

说明：删除数组的最后一个元素并返回删除的元素。

用法：arr.pop()

var arr = [1,2,3,4,5]
arr.pop() // [1,2,3,4]

push() 添加到末尾

说明：向数组的末尾添加一个或更多元素，并返回新的长度。

用法：arr.push(item)

var arr = [1,2,3]
arr.push(4) // [1,2,3,4]
arr.push(4,5,6) // [1,2,3,4,5,6]

unshift() 添加到开头

说明：向数组的开头添加一个或更多元素，并返回新的长度。

用法： arr.unshift(item)

var arr = [1,2,3]
arr.unshift(4) // [4,1,2,3]
arr.unshift(4,5,6) // [4,5,6,1,2,3]

shift() 删除第一项

说明：删除并返回数组的第一个元素。

用法：arr.shift()

var arr = [1,2,3]
arr.shift() // 1

slice() 截取数组

说明：选取数组的的一部分，并返回一个新数组。(不改变原数组)

用法：arr.slice(开始位置optional, 结束为止optional)

var arr = ['red', 'blue', 'orange', 'green', 'black']
arr.slice(1) // [ 'blue', 'orange', 'green', 'black' ]
arr.slice(1,3) // [ 'blue', 'orange' ]
arr.slice() // ['red', 'blue', 'orange', 'green', 'black']

splice() 删除或添加

说明：从数组中添加或删除元素。

用法： arr.splice(位置，删除个数optional，添加元素)

var arr = [1,2,3]
arr.splice(1,1,4,5,6) // [ 1, 4, 5, 6, 3 ] 从1的位置删除了一个元素2，并从1的位置添加了4、5、6
arr.splice(1,1) // [ 1, 3 ]
arr.splice(1, 0, 6) // [ 1, 6, 2, 3 ]
arr.splice(1) // [ 1 ] 从1的位置开始删除后面所有元素

join() 分隔数组

说明：把数组的所有元素放入一个字符串。

用法： arr.join(要使用的分隔符optional)

var arr = [1,2,3]
arr.join() // 1,2,4 如果为空则默认用逗号分隔
arr.join('-') // 1-2-3

concat() 连接数组

说明：连接两个或更多的数组，并返回结果。(不改变原数组)

用法： arr.concat(arr1,arr2...)

var arr = [1,2]
var arr1 = [3,4]
var arr2 = [5,6]
var arr3 = arr.contact(arr1,arr2)  // [ 1, 2, 3, 4, 5, 6 ]

reverse() 反转数组

说明：反转数组的元素顺序。

用法： arr.reverse()

var arr = [1,2,3]
arr.reverse() // [3,2,1]

sort() 数组排序

说明：对数组的元素进行排序。

用法：arr.sort(规定排序的函数optional)

var arr = [1,2,4,1,6,12,42]
arr.sort(function(a, b){
    return a - b
}) // 升序 [1,  1,  2, 4,6, 12, 42]

arr.sort(function(a, b){
    return b - a
}) // 降序 [42, 12, 6, 4, 2,  1, 1]

toString() 转字符串

说明：把数组转换为字符串，并返回结果。

用法： arr.toString()

var arr = [1,2,3]
arr.toString() // 1,2,3

toLocaleString() 转字符串

说明：返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

用法：arr.toLocaleString()

valueOf() 默认方法

说明：返回数组对象的原始值。数组的默认方法，通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

用法：arr.valutOf()

filter() 过滤

说明：检测数值元素，并返回符合条件所有元素的数组。

用法： arr.filter(执行函数)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']

let arr2 = arr.filter(function(item) {
    return item === 'blue'
}) // [ 'blue', 'blue' ]

---------------------------------------------------
var arr = [
    {name: 'jack', age: 20},
    {name: 'joyce', age: 20},
    {name: 'alice', age: 20},
    {name: 'tom', age: 20},
    {name: 'joyce', age: 20},
]

let arr2 = arr.filter(function(item) {
    return item.name === 'joyce'
}) // [ { name: 'joyce', age: 20 }, { name: 'joyce', age: 20 } ]

copyWithin() 拷贝元素

说明：从数组的指定位置拷贝元素到数组的另一个指定位置中。

用法：arr.copyWithin(从开始位置复制到指定目标索引位置，元素复制的起始位置optional，停止复制的索引位置optional)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
let arr2 = arr.copyWithin(1, 0, 1) // [ 'green', 'green', 'blue', 'yellow', 'blue' ]

entries() 数组迭代对象

说明：返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

用法：arr.entries()

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
let arr2 = arr.entries() //

every() 检测所有元素是否相符

说明：检测数值元素的每个元素是否都符合条件。返回一个布尔值，不改变原数组。

用法：arr.every(执行函数)

var arr = [23,44,5455,5522,333,55]
arr.every(function(item){
  return item > 10
}) // true

fill() 填充内容

说明：使用一个固定值来填充数组。

用法： arr.fill(要添加的内容，开始位置optional，结束位置optional)

var arr = [, , , ,]
arr.fill('hello') // [ 'hello', 'hello', 'hello', 'hello' ]

find() 返回相符元素第一项

说明：返回符合传入测试（函数）条件的数组元素。

用法：arr.find(执行函数)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
let arr2 = arr.find(function(item){
    return item === 'blue'
}) // blue

findIndex() 返回相符元素位置

说明：返回符合传入测试（函数）条件的数组元素索引。

用法： arr.findIndex(执行函数)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
let arr2 = arr.findIndex(function(item){
    return item === 'blue'
}) // 2

forEach() 遍历数组

说明：数组每个元素都执行一次回调函数。

用法： arr.forEach(执行函数)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
arr.forEach((item, index) => {
  console.log(item, index)
})

from() 创建特定数组

说明：通过给定的对象中创建一个数组。

用法：Array.from(对象，函数， this对象)

var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj); // [ 'a', 'b', 'c' ]

var arr1 = Array.from('hello') // [ 'h', 'e', 'l', 'l', 'o' ]

var arr = Array.from([1, 2, 3], x => x * 10); // [ 10, 20, 30 ]

includes() 检测是否有指定元素

说明：判断一个数组是否包含一个指定的值。

用法：arr.includes(要查找的元素，开始查找位置optional)

var arr = ['a', 'b', 'c']
arr.includes('b') // true

isArray() 判断数组

说明：判断对象是否为数组。

用法： Array.isArray(arr)

var text = '21232213'
var arr  [1,2,3]

Array.isArray(text) // false
Array.isArray(arr) // true

keys() 数组的键（key）

说明：返回数组的可迭代对象，包含原始数组的键(key)。

用法： arr.keys()

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
var arr2 = arr.keys()
console.log([...arr.keys()])

lastIndexOf() 搜索并返回最后元素

说明：搜索数组中的元素，并返回它最后出现的位置。

用法：arr.lastIndexOf(要查找元素)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
var arr2 = arr.lastIndexOf('blue') // 4

map() 遍历并返回处理后数组

说明：通过指定函数处理数组的每个元素，并返回处理后的数组。

用法：arr.map(函数)

var arr = ['green', 'red', 'blue', 'yellow', 'blue']
arr.map((item, index) =>{
  item = item + index
}) 
// [ 'green0', 'red1', 'blue2', 'yellow3', 'blue4' ]

reduce() 累加器

说明：将数组元素计算为一个值（从左到右）。

用法：arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)

var arr = [1,33,222,52,12,4,442]

var arr2 = arr.reduce((total, item, index, arr) => total + item)
// 766

reduceRight() 累加器从右开始

说明：将数组元素计算为一个值（从右到左）。

用法：array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

var arr = [1,33,222,52,12,4,442]
var arr2 = arr.reduceRight((total, item, index, arr) => total + item, 0)
// 766

some() 检测元素

说明：检测数组元素中是否有元素符合指定条件。返回布尔值，不会改变原数组

用法：arr.some(函数)

var arr = [1,33,222,52,12,4,442]
var arr2 = arr.some(function (item, index){
    return item > 10
})
// true

Array.of() 创建数组

说明：该方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素7的数组，而 Array(7) 创建一个包含7个undefined元素的数组。

此函数是ECMAScript 2015标准的一部分。

用法： Array.of(元素, 元素...)

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.length 数组个数（长度）

说明：length是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标。

用法： arr.length

var arr = [1,2,3,4,5]
var len = arr.length // 5

码农公寓