這篇文章主要幫助大家簡單理解陣列的一些常用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()，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503294.html
標籤：JavaScript