屬性

length 返回 或 設置 數組長度

創建數組

new Array | Array | []

//?方式1?三種情況
Array()?????????????//?[]
Array(2)????????????//?[empty?*2]
Array(1,?2)?????????//?[1,?2]

//?方式2?三種情況
new?Array()?????????//?[]
new?Array(2)????????//?[empty?*2]
new?Array(1,?2)?????//?[1,?2]

Array.of

解決 Array() 一個參數的缺陷

Array.of(2)?????????//?[2]
Array.of(1,?2,?3)???//?[1,?2,?3]

改變原數組

Array.push

尾部新增一個或多個元素, 返回數組的長度

let?array?=?[1,?2]
let?length?=?array.push(3,?4)

//?返回長度?改變原數組
console.log(length)?//?4
console.log(array)??//?[1,?2,?3,?4]

Array.pop

尾部取出 一個元素, 并返回這個元素

let?array?=?[1,?2,?3,?4]
let?item?=?array.pop()

//?從原數組中取出最后元素,?并返回
console.log(item)???//?4
console.log(array)??//?[1,?2,?3]

Array.unshift

頭部添加一個或多個元素, 返回數組的長度

let?array?=?[2,?3,?4]
let?length?=?array.unshift(0,?1)

//?返回長度?改變原數組
console.log(length)
console.log(array)

Array.shift

頭部取出一個元素, 并返回這個元素

let?array?=?[1,2,3,4]
let?item?=?array.shift()

Array.reverse

翻轉一個數組，改變原數組并返回

let?array?=?[1,?2,?3,?4]
let?newArray?=?array.reverse()
//?改變原數組，并返回
console.log(array)??????//?[4,?3,?2,?1]
console.log(newArray)???//?[4,?3,?2,?1]

Array.sort

排序 原地算法 默認將元素轉換字符串，按照utf16比較，返回原數組

let?array?=?[1,?2,?3,?4]
????array.sort((a,?b)?=>?a?-?b)????//?從小到大?a?-?b?
????array.sort((a,?b)?=>?b?-?a)????//?從大到小?b?-?a?>?0
????array.sort((a,?b)?=>?0)????????//?保持不變?0

Array.splice

數組的添加 修改 刪除

/**
?*?splice(start,?deleteCount,?...addItems)
?*?start?=>?起始位置?(正數?負數?0)
?*
?*?return?[刪除或被替換的元素]
?*/?

let?array?=?[1,2,3,4]
????array.splice(4,?0,?5,?6,?7)?????//?添加???????[1,2,3,4,5,6,7]??返回值[]
????array.splice(4,?3)??????????????//?刪除???????[1,2,3,4]????????返回值[5,6,7]
????array.splice(3,?1,?0)???????????//?替換???????[1,2,3,0]????????返回值[4]
????array.splice(3,?1,?4,?5)????????//?刪除+添加???[1,2,3,4,5]??????返回值[0]

Array.copyWithin

淺復制 同數組的 一部分數據 覆蓋 另一部分相同長度的數據，并返回它，不會改變原數組的長度

/**
?*?copyWithin(pasteIndex,?copyStart,?copyEnd)
?*?pasteIndex???粘貼位置索引?(正數?負數?0)
?*?copyStart????拷貝開始位置?default?=>?0
?*?copyEnd??????拷貝結束位置?default?=>?length
?*/

let?array?=?[1,2,3,4]
????array.copyWithin(1)?????//?[1,?1,?2,?3]?等同?array.copyWithin(1,?0,?4)
????array.copyWithin(0,?1)??

Array.fill

填充數組, 開始索引到終止索引

Array(5).fill()?????????//?[undefined,?undefined,?undefined,?undefined,?undefined]
Array(5).fill(1,?1,?2)??//?[empty,?1,?empty?×?3]

循環方法

Array.from

淺拷貝 把類數組或可迭代對象轉為數組

/**
?*?from(arrayLike[,?mapFn[,?thisArg]])
?*?arrayLike?=>?類數組,?可迭代對象
?*?mapFn?=>?????回調函數
?*?thisArg?=>???回調函數綁定的this
?*/

Array.from({0:?'1',?1:?'2',?length:?2},?a?=>?a)?//?['1',?'2']
Array.from({0:?'1',?1:?'2',?length:?3},?a?=>?a)?//?['1',?'2',?undefined]
Array.from({0:?'0',?1:?'1',?length:?2},?function?(a)?{return?this.name?+?a?+?'歲'},?{name:?'小強今年'})??//?["小強今年0歲",?"小強今年1歲"]

Array.some

是否有一個滿足函數條件 ? ? 返回Boolean

/**
?*?some(mapFn[,?thisArg])
?*?mapFn?=>?????回調函數
?*?thisArg?=>???回調函數綁定的this
?*/

[false,?true].some(Boolean)?????????????????????//?true
[false,?true].some(function?(a)?{return?a})?????//?true

Array.every

是否全部滿足函數條件 ? ? 返回Boolean

/**
?*?every(mapFn[,?thisArg])
?*?mapFn?=>?????回調函數
?*?thisArg?=>???回調函數綁定的this
?*/

[false,?true].every(Boolean)????????//?false
[true,?true].every(Boolean)?????????//?true

Array.forEach

每個元素執行給定函數, 沒有返回值

[1,?2,?3].forEach((item)=>?console.log(item))?//?console?1?2?3

Array.find

返回滿足函數條件的第一個元素的值, 否則返回undefined

/**
?*?find(mapFn[,?thisArg])
?*?mapFn?=>?????回調函數
?*?thisArg?=>???回調函數綁定的this
?*/

[5,?12,?8,?130,?44].find(item?=>?item?>?10)??????//?12
[5,?12,?8,?130,?44].find(item?=>?item?1)???????//?undefined

Array.findIndex

返回滿足函數條件的第一個元素的索引, 否則返回 -1

/**
?*?findIndex(mapFn[,?thisArg])
?*?mapFn?=>?????回調函數
?*?thisArg?=>???回調函數綁定的this
?*/

[5,?12,?8,?130,?44].findIndex(item?=>?item?>?10)?//?1
[5,?12,?8,?130,?44].findIndex(item?=>?item?1)??//?-1

Array.map

執行回調函數，返回新生成數組

let?array?=?[1,?2,?3,?4];
let?newArray?=?[1,?2,?3,?4].map(a?=>?a?+?2)

console.log(array)??????//?[1,?2,?3,?4]
console.log(newArray)???//?[3,?4,?5,?6]

Array.filter

過濾 返回滿足函數條件的所有元素

[1,?2,?3,?4].filter(a?=>?a?>?1)?????//?[2,?3,?4]

Array.flatMap

拉平一層

[[1],?[2],?[3]].flatMap(a?=>?a)?????//?[1,?2,?3]

Array.flat

拉平一層或多層

[1,?[2,?[3,?[4]]]].flat(3)??????????//?[1,?2,?3,?4]

查找

Array.indexOf

返回給定元素的第一個索引, 否則返回 -1

/*
?*?indexOf(searchVal,?fromIndex)
?*?searchVal?要找的元素
?*?fromIndex?從那個位置開始找?fromIndex?為負數?負數倒著數?length?+??fromIndex
?*/

[1,?2,?3,?4].indexOf(2)?????????//?1
[1,?2,?3,?4].indexOf(5)?????????//?-1

Array.includes

返回查詢結果, 查到 true 查不到 false

[1,?2,?3,?4].includes(2)????????//?true

Array Iterator 對象

Array.keys

返回一個包含數組中每個索引鍵的Array Iterator對象

var?array?=?["a",?,?"c"];
var?sparseKeys?=?Object.keys(array);
var?denseKeys?=?[...array.keys()];

//?即使item是empty也會獲取到key
console.log(sparseKeys);?//?['0',?'2']
console.log(denseKeys);??//?[0,?1,?2]

Array.values

返回一個包含數組中每個值的Array Iterator對象

var?array?=?['a',?'b',?'c'];
var?denseKeys?=?[...array.values()];????//?["a",?"b",?"c"]

Array.entries

返回一個新的Array Iterator對象，格式為 鍵/值

let?array?=?['a',?'b',?'c'];
for?(let?key?of?array.entries())?{
???console.log(key)?//?[0,?a]?[1,?b]?[2,?c]
}

其他

Array.toString

用 , 格式拼成字符串

[undefined,?null,?false,?1,?'a',?()?=>?{}].toString()???????//?,,false,1,a,()?=>?{}

Array.isArray()

是否為數組, 解決typeof [] === 'object'的問題

Array.isArray([1,?2,?3]);???????//?true
Array.isArray({foo:?123});??????//?false
Array.isArray("foobar");????????//?false
Array.isArray(undefined);???????//?false

Array.join

以 separator 合并成 string 如果一個元素為 undefined 或 null，它會被轉換為空字符串

['Fire',?'Air',?'Water'].join('--')?????//?"Fire--Air--Water"
[undefined,?null,?'Water'].join('--')???????//?"----Water"

Array.concat

可以合并數組，對象，元素

[].concat(1,?[2,3,4])????????//?[1,2,3,4]

總結

以上是生活随笔為你收集整理的给array添加元素_前囧（06篇）Array 方法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。