l

linrenjie

V1

2022/11/07阅读:14主题:全栈蓝

JavaScript数组常用API详解

这篇文章主要帮助大家简单理解JS 数组的一些常用 API 用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了 😘。该文章适合新手小白看,大佬可以多多指点❤️!

1.数组的创建以及 Array.of()

下面介绍几种创建数组的方法:

// 创建数组的几种方式;
// 1.通过array.of()
const myArray = Array.of('😍', '😊', '❤️')
// 2.通过[]
const myArray2 = [1, 1, 4, 5, 6]
// 3.当参数是一个number时,创建一个指定长度数组
const myArray3 = new Array(3)
console.log(myArray,myArray2, myArray3)
//[ '😍', '😊', '❤️' ] [ 1, 1, 4, 5, 6 ] [ , , ]
// Array.of() 创建数组时,当只有一个参数时前者会创建一个仅包含该值的数组.
//new Array() 创建数组时,如果该参数为Number类型则创建一个值得长度的空数组,其他类型则与前者一样. (不建议用)
console.log(Array.of(2),new Array(2))
//[ 2 ] [ , ]

2.数组 API 之 Array.push() & Array.unshift()

数组的 push 方法常用于将一个或多个元素依次插入到数组后面,并且返回数组的新长度。看下面的例子你就会明白 Push()的用法了。

 // 定义一个数组 并且添加4个元素
let array = [1, 2, 3, 4]
let lenth = array.push(5, 'hello')
// 打印返回新的数组长度
console.log(`output->长度:${lenth}`) //output->长度:6
// 使用模板字符串 会调用array.tostring()
console.log(`output->打印数组:${array}`) //output->打印数组:1,2,3,4,5,hello

同理:要想在数组前面插入新数据的话该怎么办呢,你可以使用 unshift()。unshift() 向数组的开头添加一个或多个元素,并返回新的长度。我们也给个例子:

let newArray = [1, 2, 3, 4]
newArray.unshift(0)
let newLenth = newArray.unshift('hello','world')
// 打印返回新的数组长度
console.log(`output->长度:${newLenth}`)
console.log(`output->打印数组:${newArray}`)

这里需要注意使用 unshift()插入一个值的时候是依次在头部插入,但是一次插入多个值的时候可以看作是将一个整体插入在头部

3.数组 API 之 Array.pop() & Array.shift()

pop()用于删除最后一个元素并且返回,shift()用于删除第一个元素并返回,例子如下:

let newArray = [0, 1, 2, 3, 4]
// 打印pop()返回值,以及原数组
console.log(`删除的值:${newArray.pop()},结果:${newArray}`)
//删除的值:5,结果:0,1,2,3,4

// 打印shift()返回值,以及原数组
console.log(`删除的值:${newArray.shift()},结果:${newArray}`)
//删除的值:0,结果:1,2,3,4

4.数组常用高级 API 用法:foreach(),map(),find(),filter()...等

const myArray = Array.of(1, 2, 3);
// foreach 遍历每个元素,做后续处理,处理完会返回undefined;
const forEachRes = myArray.forEach(item => console.log(++item)) // console.log输出:2,3,4
console.log(`forEach方法的返回值:${forEachRes},原数组:[${myArray}]`)
//forEach方法的返回值:undefined,原数组:[1,2,3]
const newArray = [1, 1, 2, 3, 4]
// every 方法返回布尔值 会判断每个元素是否符合条件,全部符合才返回true
console.log(newArray.every(item => item > 1)) // false
// some方法返回布尔值 会判断每个元素是否符合条件,全部不符合才返回false
console.log(newArray.some(item => item > 3)) // true
// find 方法返回数组第一个符合条件的元素,否则返回undefined
// 顺便说下findindex是返回符合条件元素的索引值
console.log(newArray.find(item => item > 1))
// 2 (从数组可以看到第一个大于1的是2)
// map 遍历所有元素,并且会由map返回(1.作相等性判断会返回布尔值数组2.赋值操作,返回新数组) 原数组不变
console.log(newArray.map(item => ++item), `原数组:[${newArray}]`) //map执行完返回的数组:[ 2, 3, 4, 5 ] 原数组:[1,2,3,4]
// filter 遍历所有元素 常用于返回符合条件的元素数组,不符合返回空数组
console.log(newArray.filter(item => item > 1)) //[ 2, 3, 4 ]
console.log(newArray.filter(item => item < 1)) // []
// 拼接数组
console.log(myArray.concat(newArray))
//[ 1, 2, 3, 1, 1, 2, 3, 4]

可以看到 map(),filter(),find(),every()等与 foreach 有类似的效果,遍历每个元素,只是各自的返回结果不同,所以使用时应当注意。再说下 map()与 filter()简单区别,map()一般可用于返回一个元素个数不变的数组(对元素操作,最终元素个数不变),而 filter()则可用于获得自己需要的元素数组(就理解为过滤)。

总结

以上只是一些简单用法,目的让大家知道各种 API 的意思与用法,其他高级用法大家可以在实践中自行探索。方法之多,我们需要根据自己的需求去选择适合的方法,以提高开发效率。后面还会介绍一些数组的高级用法以及高阶 API-reduce()。

分类:

前端

标签:

JavaScript

作者介绍

l
linrenjie
V1