一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

26个Javascript数组方法总结

6个Javascript数组方法总结"

如果世界是一台编程大舞台,那么JavaScript 数组就是一支舞蹈团队,而数组方法则是舞者们的舞步。无论是翩翩起舞的“push”,还是轻盈旋转的“slice”,他们凭借着独特韵律,一起编织出美妙的编程乐章。这里整理了26个常用的数组方法,让我们一起看看吧。

数组遍历

for循环

for循环可以用于处理任何遍历或迭代的需要。并且可以在指定条件下中断循环。缺点是它需要显式地管理循环的索引和条件,比较繁琐。

const fruits = ["Apple""Banana""strawberry""tangerine""durian"]

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i], i)
} 

forEach

forEach专门用于遍历数组,直接访问当前元素和索引。缺点是不可以中断,当不需要进行中断时,forEach是很好的选择。

const fruits = ["Apple""Banana""strawberry""tangerine""durian"]

arr.forEach((item, index) => {
  console.log(item, index);
})

for…of

for...of 是ES6新增的方法,可以用于直接访问数组中每个元素的值,并且可以配合breakcontinuethrow等语句提前结束循环。

缺点是无法获取索引,如果你想获取索引,使用for循环或者forEach更合适。

const fruits = ["apple""banana""strawberry""tangerine""durian"]

for (let fruit of fruits) {
  console.log(fruit); // apple banana
  if (fruit === 'banana') {
    break
  }
}

此外,for...of 还可以用于遍历字符串、Map、Set等。

const str = 'apple'

for (let key of str) {
  console.log(key) // a p p l e
}

filter

该方法会过滤数组中的项,返回一个新数组,该新数组由所有执行函数后返回true的元素组成。

const arr = [12345];
const newArr = arr.filter(num => num > 3)

console.log(newArr) // [ 4, 5 ]

map

map方法主要用于运行指定的函数获取一个新数组,该方法不会改变原数组,如果你不想改变原数组,又想对元素进行处理后拿到一个新数组,可以选择用map

const arr = [12345]

const newArr = arr.map((value, index) => {
  return value * 2
}) 

console.log(newArr) // [ 2, 4, 6, 8, 10 ]

reduce

reduce方法主要用于将数组中每个元素执行完指定的函数后,输出一个最终的结果。reduce的使用场景有很多,比如求和、求积、找最大值和最小值,或者将数组元素转成一个对象等。并且reduce方法不会改变原来的数组。

reduce的接受两个参数,第一个参数为执行的函数,第二个参数为累加器的初始值。具体实现如下:

求和

let numbers = [12345];
let sum = numbers.reduce((accumulator, num) => {
    return accumulator + num
}, 10)

console.log(sum); // 15

求最大值

let numbers = [539842];
let max = numbers.reduce((accumulator, value) => Math.max(accumulator, value)); 

console.log(max); // 9

上面的accumulator标识上一次累加的结果。

查找数组中的指定内容

find

find的方法返回第一个符合条件的元素(即执行函数返回的true的项),如果数组中没有一项符合条件,则返回undefined

let numbers = [{ number1 }, { number2 }, { number3 }, ]

const isLargeItem = numbers.find((obj) => {
  return obj.number > 1;
})

console.log(isLargeItem) // { number: 2 }

findIndex

findIndex方法返回第一个符合条件的元素的索引(即执行函数返回的true的项的索引),与find方法类似,但是注意这里返回的是索引而不是值。如果数组中没有一项符合条件,则返回-1

let numbers = [123]

const isLargeNumber = numbers.findIndex((value) => {
  return value > 1;
})

console.log(isLargeNumber) // 1

lastIndexOf

lastIndexOf返回数组中符合条件的最后一个元素的索引,如果不存在,则返回-1

lastIndexOf接受两个参数:

  • 第一个参数:表示要查找的元素
  • 第二个参数:指定开始搜索的位置
let numbers = [5398632]

console.log(numbers.lastIndexOf(3)) // 5
console.log(numbers.lastIndexOf(33)) // 3

some

some 用于检查数组中是否有符合条件的项,只要数组中有一个项是满足条件的,就返回true,如果一项都没有,则返回false

let numbers = [5398632]

const flag = numbers.some(value => value >= 9)
console.log(flag) // true

every

every 用于检查数组中所有的项是否都满足指定的条件,如果是,则返回true,但是只要有一项都不满足条件的,都会返回false

let numbers = [5398632]
const flag = numbers.every(value => value > 3)

const flag2 = numbers.every(value => value >= 2)

console.log(flag) // false
console.log(flag2) // true

includes()

includes()方法判断数组中是否包含指定的元素,包含则返回true, 否则返回false

const arr = [12345]

console.log(arr.includes(3)) // true
console.log(arr.includes(6)) // false

*值得注意的是,当数组中含有NaN时,使用includes()方法也会返回true。这是includes()方法方法与indexOf()方法的重要区别,当元素值为NaN时,使用indexOf()方法则会返回-1,相当于false

let arr = [12NaN45];

console.log(arr.includes(NaN)) // true
console.log(arr.indexOf(NaN)) // -1

此外includes()方法还可用于查找字符串中是否含有指定的内容:

const str = 'hello world'

console.log(str.includes('hello')) // true

indexOf()

indexOf()方法返回数组中指定元素的下标,如果不存在则返回-1

const arr = [12345]

console.log(arr.indexOf(3)) // 2

includes(), indexOf()方法也可用于查找字符串:

const str = 'hello'

console.log(str.indexOf('o')) // 4

at()

at()方法接收一个整数值作为参数并返回该索引对应的元素,允许使用正整数和负整数作为索引。如果索引位置超过数组长度,将返回undefined

let arr = ['a''b''c''d''e'];

console.log(arr.at(1)) // 'b'
console.log(arr.at(-1)) // 'e'

at()方法的优点是它允许使用负索引来访问数组的尾部元素,这是传统数组索引做不到的

*值得注意的是,at()方法对于低版本的浏览器有兼容性问题,使用时需要注意。

数组操作

reverse()

reverse()方法用于反转数组中元素的顺序。该方法会改变原始数组,并返回新的数组。

const arr = [12345]
const newArr = arr.reverse()

console.log(arr) // [ 5, 4, 3, 2, 1 ]
console.log(newArr) // [ 5, 4, 3, 2, 1 ]

sort()

sort()方法用于数组的排序,该方法会改变原始数组,并返回新的数组。值得注意的是,排序是基于字符串的Unicode编码进行的,而不是基于数组的大小。

let arr = [112221];
arr.sort()

console.log(arr) // [ 1, 11, 2, 22 ]

可以看出,上面的排序211的后面,并不是根据数组大小进行排序的,如果想要根据数字大小排序,可以提供一个比较函数作为参数。

let arr = [112221]

const newArr = arr.sort((a, b) => a - b)
console.log(newArr) // [ 1, 2, 11, 22 ]
console.log(arr) // [ 1, 2, 11, 22 ]

push()

push()方法用于在数组末尾添加一个或者多个元素,该方法会改变原数组,并返回一个新数组的长度。

const fruits = ['apple''banana']

const newLen = fruits.push('durian')

console.log(newLen) // 3
console.log(fruits) // [ 'apple', 'banana', 'durian' ]

pop()

pop()方法用于删除数组末尾的元素,该方法会改变原数组,并返回被删除的元素。

const fruits = [ 'apple''banana''durian''tangerine''strawberry' ]

const element = fruits.pop()

console.log(fruits) // [ 'apple', 'banana', 'durian', 'tangerine' ]
console.log(element) // strawberry

unshift()

unshift()方法用于在数组的开头添加一个(或多个)元素,该方法会改变原数组,并返回新数组的长度。

const fruits = ['apple''banana']

const newLen = fruits.unshift('durian')

console.log(newLen) // 3
console.log(fruits) // [ 'durian', 'apple', 'banana' ]

shift()

shift()方法用于删除数组的第一个元素,该方法会改变原数组,并返回被删除的元素。

const fruits = [ 'apple''banana''durian''tangerine''strawberry' ]

const element = fruits.shift()

console.log(fruits) // [ 'banana', 'durian', 'tangerine', 'strawberry' ]
console.log(element) // apple

splice()

splice()方法主要在数组中添加/删除项,然后返回被删除的项。该方法会改变原始数组。它接收的参数是:(1)开始的位置,(2)删除元素的数量,(3)要添加进数组的元素(可选)。

添加元素

const fruits = [ 'apple''banana''durian']

fruits.splice(10'tangerine')

console.log(fruits) // [ 'apple', 'tangerine', 'banana', 'durian' ]

删除元素

const fruits = [ 'apple''banana''durian']

fruits.splice(11)

console.log(fruits) // [ 'apple', 'durian' ]

slice

slice()从已有的数组中返回选定的元素,该方法会返回一个新数组,不改变原始数组。它接收的参数是:(1)开始选取的位置(包含当前位置),(2)结束选取的位置(不包含当前位置,可选)。

const fruits = [ 'apple''banana''durian''tangerine''strawberry' ]

const selectedFruits = fruits.slice(12)

console.log(selectedFruits) // [ 'banana' ]

此外,slice()还可以用于截取字符串:

const str = 'Hello World!'

const newStr = str.slice(05)

console.log(newStr) // Hello

如果参数是负数,slice() 会从字符串的末尾开始计数:

const str = 'Hello World!'

const newStr = str.slice(-1)

console.log(newStr) // !

concat()

concat()方法用于合并两个或更多数组并返回新的数组,而不会修改原始数组。

const arr1 = [13]
const arr2 = [345]
const arr3 = [6]

const concatArr = arr1.concat(arr2, arr3)

console.log(concatArr) // [ 1, 3, 3, 4, 5, 6 ]

该方法还可以添加单个元素到数组中:

const fruits = ['apple''banana']

const newFruits = fruits.concat('durian')
console.log(newFruits) // [ 'apple', 'banana', 'durian' ]

join()

join()方法主要用于把数组用分隔符转成字符串,分隔符不传默认为,

const fruits = [ '1''2''3' ]

console.log(fruits.join()) // 1,2,3
console.log(fruits.join('')) // 123
console.log(fruits.join('-')) // 1-2-3

创建数组

Array.of()

Array.of()是JavaScript的内置函数,它创建一个新的Array实例,从传入参数中获取元素。

Array.of(1// [1]
Array.of(123// [1, 2, 3]

Array.of()初始化数组

const arr = Array.of(...Array(5).keys())
console.log(arr) // [ 0, 1, 2, 3, 4 ]

Array.from()

Array.from()是 JavaScript 的一个内置函数,它可以将类数组或可迭代的对象转成数组。

将字符串转换成字母组成的数组

const str = 'Hello'

const arr = Array.from(str)

console.log(arr) // [ 'H', 'e', 'l', 'l', 'o' ]

set转成Array

let set = new Set(['a''b''c'])
const arr = Array.from(set)

console.log(arr) // [ 'a', 'b', 'c' ]

Array.from()还可以接收一个映射函数作为第二个参数,用来修改新数组的每一个元素。

const arr = Array.from([123], x => x + x)

console.log(arr) // [ 2, 4, 6 ]

Array.from()初始化一个数组

const arr = Array.from({ length5 }, (v, i) => i)
console.log(arr) // [ 0, 1, 2, 3, 4 ]

原文链接:https://juejin.cn/post/7325739662034976818 作者:前端一叶子

(0)
上一篇 2024年1月21日 上午11:07
下一篇 2024年1月21日 下午4:00

相关推荐

发表评论

登录后才能评论