四川盐亭网站制作公司

JavaScript之数组常用API

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

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

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

成都创新互联公司是专业的进贤网站建设公司，进贤接单;提供成都做网站、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行进贤网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

// 创建数组的三种方式
// 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
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之数组常用API
本文路径：http://scyanting.com/article/dsojgpe.html

其他资讯