0
JavaScript之数组常用API - CodeForBetter
source link: https://www.cnblogs.com/pglin/p/16641423.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
这篇文章主要帮助大家简单理解数组的一些常用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 遍历每个元素，做后续处理，处理完会返回undefinedconst forEachRes = myArray.forEach(item => console.log(++item)) // console.log输出：2，3，4console.log(`forEach方法的返回值：${forEachRes}，原数组:[${myArray}]`) //forEach方法的返回值：undefined，原数组:[1,2,3]const newArray = [1, 1, 2, 3, 4]// every 方法返回布尔值 会判断每个元素是否符合条件，全部符合才返回trueconsole.log(newArray.every(item => item > 1)) // false// some方法返回布尔值 会判断每个元素是否符合条件，全部不符合才返回falseconsole.log(newArray.some(item => item > 3)) // true// find 方法返回数组第一个符合条件的元素，否则返回undefinedconsole.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()。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK