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()。」

本文由 mdnice 多平台发布