JavaScript Array(数组)方法总结

JavaScript Array(数组)方法总结

数组的作用:

使用单独的变量名来存储一系列的值,用于在单一变量中存储多个值

数组的创建:

1. 通过Array构造函数
var arr = new Array()  //创建一个空数组
var arr = new Array(9)  //创建一个长度为9的数组
var arr = new Array('a''b''c')  //创建一个包含三个字符串的数组
2. 通过字面量表达式
var arr = []  //创建一个空数组
var arr = ['a''b''c']  //创建一个包含三个字符串的数组

数组方法:

Array.isArray() 方法用于判断一个对象是否为数组

参数: Array.isArray(obj)

  • obj: 必需,要判断的对象

返回值: 如果对象是数组返回 true,否则返回 false

var arr = [123]
var b = Array.isArray(arr)
console.log(b)  //true

var str = '123'
var b = Array.isArray(str)
console.log(b)  //false

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型

参数: Array.of(item1, item2, …, itemX)

  • item1, item2, …, itemX: 必需,任意个参数,将按顺序成为返回数组中的元素

返回值: 返回一个新的数组

var arr = Array.of(123)
console.log(arr)  //[1, 2, 3]

concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

参数: array1.concat(array2, array3…, arrayX)

  • array2, array3…, arrayX: 必需,该参数可以是具体的值,也可以是数组对象,可以是任意多个

返回值: 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组

var arr1 = [12]
var arr2 = [34]
var arr3 = arr1.concat(arr2)
console.log(arr3)  //[1, 2, 3, 4]
console.log(arr1)  //[1, 2](原数组不变)
console.log(arr2)  //[3, 4](原数组不变)

join() 方法用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的

参数: array.join(separator)

  • separator: 可选,指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符

返回值: 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的

var arr = [123]
var str = arr.join('')
console.log(str)  //'123'
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var str = arr.join('-')
console.log(str)  //'1-2-3'
console.log(arr)  //[1, 2, 3](原数组不变)

pop() 方法用于删除数组的最后一个元素

返回值: 返回删除的元素

var arr = [123]
var a = arr.pop()
console.log(a)  //3
console.log(arr)  //[1, 2](原数组改变)

push() 方法可向数组的末尾添加一个或多个元素

参数: array.push(item1, item2, …, itemX)

  • item1, item2, …, itemX: 必需,要添加到数组的元素

返回值: 返回新数组的长度

var arr = [123]
var n = arr.push(4)
console.log(n)  //4
console.log(arr)  //[1, 2, 3, 4](原数组改变)

var arr = [123]
var n = arr.push(45)
console.log(n)  //5
console.log(arr)  //[1, 2, 3, 4, 5](原数组改变)

shift() 方法用于把数组的第一个元素从其中删除

返回值: 返回第一个元素的值

var arr = [123]
var a = arr.shift()
console.log(a)  //1
console.log(arr)  //[2, 3](原数组改变)

unshift() 方法可向数组的开头添加一个或更多元素

参数: array.unshift(item1, item2, …, itemX)

  • item1, item2, …, itemX: 必需,向数组起始位置添加一个或者多个元素

返回值: 返回新数组的长度

var arr = [123]
var n = arr.unshift(4)
console.log(n)  //4
console.log(arr)  //[4, 1, 2, 3](原数组改变)

var arr = [123]
var n = arr.unshift(45)
console.log(n)  //4
console.log(arr)  //[4, 5, 1, 2, 3](原数组改变)

reverse() 方法用于颠倒数组中元素的顺序

返回值: 返回颠倒顺序后的数组

var arr1 = [123]
var arr2 = arr1.reverse()
console.log(arr2)  //[3, 2, 1]
console.log(arr1)  //[3, 2, 1](原数组改变)

slice() 方法可从已有的数组中返回选定的元素

参数: array.slice(start, end)

  • start: 必需,规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推
  • end: 可选,规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素

返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素

var arr1 = [123]
var arr2 = arr1.slice(1)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 2, 3](原数组不变)

var arr1 = [123]
var arr2 = arr1.slice(12)
console.log(arr2)  //[2]
console.log(arr1)  //[1, 2, 3](原数组不变)

sort() 方法用于对数组的元素进行排序

参数: array.sort(sortby)

  • sortby: 可选,规定排序顺序。必须是函数

返回值: 对数组的引用。请注意,数组在原数组上进行排序,不生成副本

var arr1 = [132]
var arr2 = arr1.sort()
console.log(arr2)  //[1, 2, 3]
console.log(arr1)  //[1, 2, 3](原数组改变)

var arr1 = [132]
var arr2 = arr1.sort((a, b) => {return a-b})  //升序
console.log(arr2)  //[1, 2, 3]
console.log(arr1)  //[1, 2, 3](原数组改变)

var arr1 = [132]
var arr2 = arr1.sort((a, b) => {return b-a})  //降序
console.log(arr2)  //[3, 2, 1]
console.log(arr1)  //[3, 2, 1](原数组改变)

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目

参数: array.splice(index, howmany, item1, …, itemX)

  • index: 必需,整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置
  • howmany: 必需,要删除的项目数量。如果设置为 0,则不会删除项目
  • item1, …, itemX: 可选,向数组添加的新项目

返回值: 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组

var arr1 = [123]
var arr2 = arr1.splice(12)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1](原数组改变)

var arr1 = [123]
var arr2 = arr1.splice(1245)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 4, 5](原数组改变)

toString() 方法可把数组转换为字符串

返回值: 返回字符串,数组的所有值用逗号隔开

var arr = [123]
var str = arr.toString()
console.log(str)  //1,2,3
console.log(arr)  //[1, 2, 3](原数组不变)

indexOf() 方法可返回一个指定的元素在数组中第一次出现的位置,从该数组的前面向后查找,如果在数组中没找到指定元素则返回 -1

参数: array.indexOf(item, start)

  • item: 必需,查找的元素
  • start: 可选,整数参数。规定在数组中开始查找的位置。它的合法取值是 0 到 array.length – 1。如省略该参数,则将从数组的首个值开始查找

返回值: 返回元素在数组中第一次出现的位置,如果没有查找到则返回 -1

var arr = [1223]
var n = arr.indexOf(2)
console.log(n)  //1
console.log(arr)  //[1, 2, 2, 3](原数组不变)

var arr = [1223]
var n = arr.indexOf(12)
console.log(n)  //-1
console.log(arr)  //[1, 2, 2, 3](原数组不变)

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该数组的后面向前查找,如果在数组中没找到指定元素则返回 -1

参数: array.lastIndexOff(item, start)

  • item: 必需,查找的元素
  • start: 可选,整数参数,规定在数组中开始查找的位置。它的合法取值是 0 到 array.length – 1。如省略该参数,则将从数组的最后一个值开始查找

返回值: 返回元素在数组中最后出现的位置,如果没有查找到则返回 -1

var arr = [1223]
var n = arr.lastIndexOf(2)
console.log(n)  //2
console.log(arr)  //[1, 2, 2, 3](原数组不变)

var arr = [1223]
var n = arr.lastIndexOf(32)
console.log(n)  //-1
console.log(arr)  //[1, 2, 2, 3](原数组不变)

includes() 方法用来判断一个数组是否包含一个指定的值

参数: array.includes(searchElement, fromIndex)

  • searchElement: 必需,需要查找的元素值
  • fromIndex: 可选,从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0

返回值: 如果找到指定值返回 true,否则返回 false

var arr = [123]
var b = arr.includes(2)
console.log(b)  //true
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var b = arr.includes(22)
console.log(b)  //false
console.log(arr)  //[1, 2, 3](原数组不变)

fill() 方法用于将一个固定值替换数组的元素

参数: array.fill(value, start, end)

  • value: 必需,填充的值
  • star: 可选,开始填充位置
  • end: 可选,停止填充位置 (默认为 array.length)

返回值: 返回替换后的数组

var arr1 = [123]
var arr2 = arr1.fill(4)
console.log(arr2)  //[4, 4, 4]
console.log(arr1)  //[4, 4, 4](原数组改变)

var arr1 = [123]
var arr2 = arr1.fill(402)
console.log(arr2)  //[4, 4, 3]
console.log(arr1)  //[4, 4, 3](原数组改变)

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中

参数: array.copyWithin(target, start, end)

  • target: 必需,停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数
  • star: 可选,元素复制的起始位置
  • end: 可选,停止填充位置 (默认为 array.length)

返回值: 返回拷贝后的数组

var arr1 = [12345]
var arr2 = arr1.copyWithin(2)
console.log(arr2)  //[1, 2, 1, 2, 3]
console.log(arr1)  //[1, 2, 1, 2, 3](原数组改变)

var arr1 = [12345]
var arr2 = arr1.copyWithin(21)
console.log(arr2)  //[1, 2, 2, 3, 4]
console.log(arr1)  //[1, 2, 2, 3, 4](原数组改变)

var arr1 = [12345]
var arr2 = arr1.copyWithin(213)
console.log(arr2)  //[1, 2, 2, 3, 5]
console.log(arr1)  //[1, 2, 2, 3, 5](原数组改变)

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

参数: array.map(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

var arr1 = [123]
var arr2 = arr1.map(num => {
    return num+1
})
console.log(arr2)  //[2, 3, 4]
console.log(arr1)  //[1, 2, 3](原数组不变)

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

参数: array.forEach(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentVaue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: undefined

var arr1 = [123]
var total = 0
var arr2 = arr1.forEach(num => {
    total += num
})
console.log(total)  //6
console.log(arr2)  //undefined
console.log(arr1)  //[1, 2, 3](原数组不变)

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

参数: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • function(total, currentValue, index, arr): 必需,用于执行每个数组元素的函数函数参数:
    • total:必需,初始值, 或者计算结束后的返回值
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • initialValue: 可选,传递给函数的初始值

返回值: 返回计算结果(reduce() 对于空数组是不会执行回调函数的)

var arr = [123]
var n = arr.reduce(function(total, num{
    return total + num
})
console.log(n)  //6
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var n = arr.reduce(function(total, num{
    return total + num
}, 2)
console.log(n)  //8
console.log(arr)  //[1, 2, 3](原数组不变)

常见用法:

//求数组中最大值(最小值同理)
var arr = [123]
var max = arr.reduce(function(max, item{
    return max > item ? max : item
})
console.log(max)  //3

//数组去重
var arr1 = [1223]
var arr2 = arr1.reduce(function(arr, item{
    if(arr.indexOf(item) === -1) {
        arr.push(item)
    }
    return arr
}, [])
console.log(arr2)  //[1, 2, 3]

//统计数组中每一项重复数量
var arr = ['a''b''b''c''c''c']
var res = arr.reduce(function(obj, item{
    obj[item] ? obj[item]++ : obj[item] = 1
    return obj
}, {})
console.log(res)  //{'a': 1, 'b': 2, 'c': 3}

//数组维度转换
var arr1 = [[12], [34], [56]]
var arr2 = arr1.reduce(function(arr, item{
    return arr.concat(item)
}, [])
console.log(arr2)  //[1, 2, 3, 4, 5, 6]

reduceRight() 方法接收一个函数作为累加器,数组中的每个值(从右到左)开始缩减,最终计算为一个值

参数: array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

  • function(total, currentValue, index, arr): 必需,用于执行每个数组元素的函数函数参数:
    • total:必需,初始值, 或者计算结束后的返回值
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • initialValue: 可选,传递给函数的初始值

返回值: 返回计算结果(reduceRight() 对于空数组是不会执行回调函数的)

var arr = [123]
var n = arr.reduceRight(function(total, num{
    return total + num
}, 0)
console.log(n)  //6
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var n = arr.reduceRight(function(total, num{
    return total + num
}, 3)
console.log(n)  //9
console.log(arr)  //[1, 2, 3](原数组不变)

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值

参数: array.find(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined

var arr = [123]
var n = arr.find(num => {
    return num>1
})
console.log(n)  //2
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var n = arr.find((num, index) => {
    return num>1 && index>1
})
console.log(n)  //3
console.log(arr)  //[1, 2, 3](原数组不变)

findIndex() 方法返回通过测试(函数内判断)的数组的第一个元素的位置

参数: array.findIndex(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1

var arr = [123]
var n = arr.findIndex(num => {
    return num>1
})
console.log(n)  //1
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var n = arr.findIndex((num, index) => {
    return num>1 && index>1
})
console.log(n)  //2
console.log(arr)  //[1, 2, 3](原数组不变)

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)

参数: array.every(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 如果所有元素都满足条件返回 true,有一个元素不满足返回 false(剩余的元素不会再进行检测)

var arr = [123]
var b = arr.every(num => {
    return num>0
})
console.log(b)  //true
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var b = arr.every(num => {
    return num>1
})
console.log(b)  //false
console.log(arr)  //[1, 2, 3](原数组不变)

some() 方法用于检测数组中是否有元素满足指定条件(通过函数提供)

参数: array.some(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 如果数组中有元素满足条件返回 true(剩余的元素不会再执行检测),否则返回 false

var arr = [123]
var b = arr.some(num => {
    return num>2
})
console.log(b)  //true
console.log(arr)  //[1, 2, 3](原数组不变)

var arr = [123]
var b = arr.some(num => {
    return num>4
})
console.log(b)  //false
console.log(arr)  //[1, 2, 3](原数组不变)

filter() 方法返回一个新数组,新数组中的元素是通过检查指定数组中符合条件(通过函数提供)的所有元素

参数: array.filter(function(currentValue, currentIndex, arr), thisValue)

  • function(currentValue, currentIndex, arr): 必需,数组每个元素需要执行的函数函数参数:
    • currentValue:必需,当前元素
    • currentIndex:可选,当前元素的索引
    • arr:可选,当前元素所属的数组对象
  • thisValue: 可选,传递给函数的值一般用 “this” 值,如果这个参数为空, “undefined” 会传递给 “this” 值

返回值: 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

var arr1 = [123]
var arr2 = arr1.filter(num => {
    return num>1
})
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 2, 3](原数组不变)

var arr1 = [123]
var arr2 = arr1.filter((num, index) => {
    return num>1 && index>1
})
console.log(arr2)  //[3]
console.log(arr1)  //[1, 2, 3](原数组不变)


原文始发于微信公众号(前端24):JavaScript Array(数组)方法总结

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/217219.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!