❤️小姐姐熬夜整理的 《js数组中常用方法》,确定不来看看?❤️

Posted Dream丶Killer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了❤️小姐姐熬夜整理的 《js数组中常用方法》,确定不来看看?❤️相关的知识,希望对你有一定的参考价值。

js数组中常用方法归纳

今天我们来整理一下js数组中常用的方法,可以收藏起来以备不时之需哟~~


1、arr.push()

  • 作用:接收任意数量的值,并从数组的末尾按顺序添加
  • 返回:数组的长度
  • 修改原数组
let arr = [1, 2, 3]
let result = arr.push(4, 5)
console.log(arr) //[1, 2, 3, 4, 5],会修改原数组
console.log(result) //5,返回数组长度

2、arr.pop()

  • 作用:删除数组末尾的值
  • 返回:被删除的值
  • 修改原数组
let arr = [1, 2, 3]
let result = arr.pop()
console.log(arr) //[1, 2],会修改原数组
console.log(result) //3,返回被删除的值

3、arr.unshift()

  • 作用:接收任意数量的值,并将他们看作整体,从数组的头部添加
  • 返回:新数组的长度
  • 修改原数组
let arr = [1, 2, 3]
let result = arr.unshift(4, 5)
console.log(arr) //[4, 5, 1, 2, 3],修改原数组
console.log(result) //5,返回数组的长度

4、arr.shift()

  • 作用:删除数组头部的值
  • 返回:被删除的值
  • 修改原数组
let arr = [1, 2, 3]
let result = arr.pop()
console.log(arr) //[2, 3],会修改原数组
console.log(result) //1,返回被删除的值

5、arr.join()

  • 作用:将数组以分隔符(参数)的形式转化为字符串,如果不传参,默认分隔符是逗号
  • 返回:分隔符拼接成的字符串
  • 不修改原数组
var arr = [1, 2, 3]
var result1 = arr.join()
var result2 = arr.join("-")
console.log(arr) //[1, 2, 3],不修改原数组
console.log(result1, typeof(result1)) //1,2,3 string 默认分隔符为逗号
console.log(result2, typeof(result2)) //1-2-3 string 以“-”为分隔符

6、arr.find(callback)

  • 作用:查找数组中满足条件的第一个元素
  • 返回:第一个元素的值,没找到则为 undefined
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //5,第一个满足条件的值
console.log(arr) //[1, 2, 3, 4, 5, 6]

7、arr.findIndex(callback)

  • 作用:查找数组中满足条件的第一个元素
  • 返回:第一个元素的索引,没找到则返回 -1 ,find() 是返回值
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //4,第一个满足条件的索引值
console.log(arr) //[1, 2, 3, 4, 5, 6]

8、arr.includes(value[, fromIndex])

  • 作用:判断数组是否包含 valuefromIndex 可指定开始查找的位置
  • 返回:包含返回 true ,否则为 false
  • 如果 fromIndex 大于数组长度,不会被搜索,直接返回false
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //4,第一个满足条件的索引值
console.log(arr) //[1, 2, 3, 4, 5, 6]

9、arr.reverse()

  • 作用:将数组元素反转
  • 返回:反转后的数组
  • 修改原数组
var arr = [1, 2, 3, 4, 5]
var resultArr = arr.reverse()
console.log(resultArr) //[5, 4, 3, 2, 1],反转
console.log(arr) //[5, 4, 3, 2, 1],修改原数组

10、arr.concat()

  • 作用:合并两个或者多个数组
  • 返回:合并后的新数组
  • 不修改原数组
var arr1 = [1, 2, 3]
var arr2 = [4, 5]
var arr3 = [6, 7]
var resultArr = arr1.concat(arr2, arr3)
console.log(resultArr) // [1, 2, 3, 4, 5, 6, 7],返回合并后的数组
console.log(arr1) //[1, 2, 3],不修改原数组

11、arr.sort([compareFunction])

  • 作用:将数组元素排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后挨个比较字符编码
  • 返回:排序后的数组
  • 修改原数组

不指明 compareFunction 的情况

var arr = [1, 22, 130, 188, 26]
console.log(arr.sort()) //[1, 130, 188, 22, 26],转换成字符串,比较字符编码
console.log(arr) //[1, 130, 188, 22, 26],修改原数组

指明 compareFunction(a, b)

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

1)升序

function compareFunction(a, b){
  return a - b
}
var arr = [1, 22, 130, 188, 26]
var resultArr = arr.sort(compareFunction)
console.log(resultArr) //[1, 22, 26, 130, 188],返回排序后的数组
console.log(arr) //[1, 22, 26, 130, 188],改变原数组

2)降序

function compareFunction(a, b){
  return b - a
}
var arr = [1, 22, 130, 188, 26]
var resultArr = arr.sort(compareFunction)
console.log(resultArr) //[188, 130, 26, 22, 1]
console.log(arr) //[188, 130, 26, 22, 1]

12、arr.slice(start, end)

  • 作用:获取指定区域内的元素,左闭右开
  • 返回:获取的元素
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var resultArr = arr.slice(0, 3)
console.log(resultArr) //[1, 2, 3],左开右闭
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组

13、arr.splice(index, howmany, item1, …, itemX)

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

  • 作用:可增加元素、删除元素、修改元素
  • 返回:返回被删除的元素,如果是增加或修改,会返回空数组
  • 修改原数组

1)增加,从索引1的位置增加"apple"进去

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(1, 0, 'apple')
console.log(deleteItem) //[],返回被删除的元素
console.log(arr) //[1, apple, 2, 3, 4, 5, 6],修改原数组

2)修改,可以说是替换,替换元素 3 为字符串 "replace"

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(2, 1, 'replace') //从第2个位置,删除1个,添加replace元素
console.log(deleteItem) //3
console.log(arr) //[1, 2, "replace", 4, 5, 6]

3)删除,删除元素3,4

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(2, 2)//从索引为2的位置,删除2个
console.log(deleteItem) //[3, 4]
console.log(arr) //[1, 2, 5, 6]

14、arr.entries()

  • 返回一个数组的迭代对象,这个对象包含数组的键值对
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var arrIterator = arr.entries()
console.log(arrIterator) //Array Iterator {}
console.log(arr) //[1, 2, 3, 4, 5, 6]

15、arr.map(callback)

  • 每个元素调用 callback 函数,返回并组合形成一个新数组
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(item => item + 2) //每个元素+2
console.log(newArr) //[3, 4, 5, 6, 7, 8]
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组

16、arr.forEach(callback)

  • 作用:对数组的每个元素执行一次给定的函数
  • 返回undefined
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var result = arr.forEach(item => console.log(item)) //1 2 3 4 5 6
console.log(result) //undefined
console.log(arr) //[1, 2, 3, 4, 5, 6]

17、arr.every(callback)

注意:若收到一个空数组,此方法在一切情况下都会返回 true

  • 作用:测试一个数组内的所有元素是否都能通过某个指定函数
  • 返回:一个布尔值
  • 如果发现有一个为 false,会立即返回
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var result = arr.every(item => item > 0) //每个元素都大于0?
console.log(result) //true
console.log(arr) //[1, 2, 3, 4, 5, 6]

18、arr.fill(value[, start[, end]])

  • 作用:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
  • 返回:填充后的数组
  • [start,end) ,左闭右开
  • 修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var resultArr1 = arr.fill('apple', 2, 4) //填充值"apple",从第2位开始,到第4位结束,不包含第四位
console.log(resultArr1) // [1, 2, "apple", "apple", 5, 6]
console.log(arr) // [1, 2, "apple", "apple", 5, 6],修改原数组

19、arr.filter(callback)

  • 作用:对数组进行过滤
  • 返回:返回过滤后的新数组
  • 不修改原数组
var arr = [1, 2, 3, 4, 5, 6]
var resultArr = arr.filter(item => item % 2 == 0) //过滤数组中的偶数
console.log(resultArr) //[2, 4, 6]
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组

暂时整理到这里吧,如果感觉还不错的话,❤ 记得点个赞哟!!!❤

以上是关于❤️小姐姐熬夜整理的 《js数组中常用方法》,确定不来看看?❤️的主要内容,如果未能解决你的问题,请参考以下文章

HTML两万字王者笔记大总结❤️熬夜整理&建议收藏❤️(上篇)

想蹭❤️小姐姐的热点❤️被拒后,我用❤️Python来暴力破解了WiFi的密码❤️

学习爬虫你敢说你一丁点前端都不会?两万字图文教会你HTML❤️熬夜整理&建议收藏❤️

这天,小姐姐问我❤️MySQL命令行操作❤️

这天,小姐姐问我❤️MySQL命令行操作❤️

两万字博文教你python爬虫requests库,看完还不会我把我女朋友都给你❤️熬夜整理&建议收藏❤️