这篇文章主要帮助大家简单理解数组的一些常用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
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()。