JavaScript陣列你都掰扯不明白,簡歷上你敢寫精通JavaScript?
一、如何判斷一個物件是不是陣列?
在只有一個全域性作用域的時候,使用instanceof運算子就足矣:
if(value instanceof Array){
//運算元組
}
1
2
3
使用instanceof的前提是隻有一個全域性執行上下文,如果網頁裡有多個框架,則可能涉及兩個不同的全域性上下文,因此就會有兩個不同版本的Array建構函式。如果要把陣列從一個框架傳到另一個框架,則這個陣列的建構函式將有別於第二個框架內本地建立的陣列。
為了解決這個問題,ECMAScript提供了 Array.isArray()方法。這個方法的目的就是確定一個值是否為陣列,而不用管它是在哪個全域性執行上下文中建立的。
if(Array.isArray(value)){
//運算元組
}
1
2
3
二、填充方法fill()
1、ES6新增了兩個方法
批次複製方法copyWithin(),以及填充陣列方法fill()。
這兩個方法的函式比較類似,都需要指定既有陣列例項上的一個範圍,包含開始索引,不包含結束索引,使用這個方法不會改變陣列的大小。
2、fill()
使用fill()方法可以向一個已有的陣列中插入全部或部分相同的值。開始索引用於指定開始填充的位置,它是可選的。如果不提供結束索引,則一直填充到陣列末尾。負值索引從陣列末尾開始計算。
例如:
(1)用1填充整個陣列
const arr = [0,0,0,0,0]
arr.fill(1);//[1,1,1,1,1]
arr.fill(0);//[0,0,0,0,0]//重置為0
(2)用2填充索引大於等於2的元素
arr.fill(2,2);//[0,0,2,2,2]
arr.fill(0);//[0,0,0,0,0]//重置為0
(3)使用3填充索引大於等於1且小於3的元素
arr.fill(2,1,3);//[0,3,3,0,0]
(4)用4填充索引大於等於1且小於4的元素
arr.fill(4,-4,-1);//[0,4,4,4,0]
注意:fill()會自動忽略超出陣列邊界、零長度及方向相反的索引範圍。
三、複製方法copyWithin()
copyWithin()會按照指定範圍淺複製陣列中的部分內容,然後將他們插入到指定索引開始的位置。
例如:
let arr,
reset = () => arr = [0,1,2,3,4,5,6,7,8,9];
reset();
1
2
3
(1)從arr中複製索引5開始的內容,插入到索引0開始的位置
arr.copyWithin(0,5);//[5,6,7,8,9,5,6,7,8,9]
reset();
//從arr中複製索引0開始到索引3結束的內容,插入到索引4開始的地方
arr.copyWithin(4,0,3);//[0,1,2,3,0,1,2,7,8,9]
四、棧方法
ECMAScript給陣列提供了相當於棧操作的方法。
棧是一種後進先出(LIFO,Last-In-First-Out)的結構,也就是最近新增的元素先被刪除。
插入push();
刪除pop();
五、佇列方法
佇列以先進先出(FIFO,First-In-First-Out)形式的結構。
插入push();
取出shift();
六、排序方法
陣列有兩個方法可以用來對元素進行重排序:
reverse()
sort()
七、操作方法
1、合併concat()
2、切割slice()
slice()用於建立一個包含原有陣列中一個或多個元素的新陣列。
八、搜尋和位置方法
ECMAScript提供兩類搜尋陣列的方法,按嚴格相等搜尋和按斷言函式搜尋。
1、嚴格相當搜尋
ECMAScript提供了3中嚴格相等的搜尋方法:
indexOf()
lastIndexOf()
includes()
2、斷言函式
find()
findIndex()
九、迭代方法
1、every()和some()
every()對陣列每一項都進行傳入的函式,如果對每一項函式都返回true,則這個方法返回true。
some()對陣列每一項都執行傳入的函式,如果有一項返函式返回true,則就返回true。
例如:
let nums = [1,2,3,4,5,4,3,2,1];
let ret = nums.every((item,index,array) => item > 2);//false
ret = nums.some((item,index,array) => item > 2);//true
1
2
3
2、filter()
filter()是基於給定的函式來決定某一項是否應該包含在它返回的陣列中。
比如,要返回一個所有元素都大於2的陣列:
let ret = nums.filter((item,index,array) => item>2);//[3,4,5,4,3]
3、map()
map()返回一個陣列,這個陣列的每一項都是原始陣列中同樣位置的元素進行傳入函式而返回的結果。
例如,對陣列中的所有元素都乘以2:
let ret = nums.map((item,index ,array) => item * 2);//[2,4,6,8,10,8,6,4,2]
4、foreach()
foreach()只會對每一項執行傳入的函式,沒有返回值。本質上foreach()就相當於for迴圈遍歷陣列。
nums.foreach((item,index,array) => {
//執行某些操作
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70014946/viewspace-2868911/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 你的JavaScript程式碼都經歷了什麼JavaScript
- JavaScript遍歷陣列詳解JavaScript陣列
- 看了此文,你還敢說你懂了Javascript運算子嗎JavaScript
- Javascript建立陣列的方式你瞭解了嗎JavaScript陣列
- JavaScript中你所不知道的陣列ArrayBufferJavaScript陣列
- JavaScript遍歷陣列每一個元素JavaScript陣列
- 掰扯掰扯需求分析:從工程到生活中的4個case
- 陣列的遍歷你都會用了,那Promise版本的呢陣列Promise
- 【譯】關於JavaScript 陣列你應該知道的事情JavaScript陣列
- JavaScript 陣列JavaScript陣列
- Laravel Octane請問有大佬出來掰扯掰扯嗎?有點蒙圈!Laravel
- JavaScript 陣列操作JavaScript陣列
- JavaScript 陣列排序JavaScript陣列排序
- JavaScript 陣列 toString()JavaScript陣列
- JavaScript—陣列(17)JavaScript陣列
- JavaScript 陣列 slice()JavaScript陣列
- JavaScript 陣列 fill()JavaScript陣列
- JavaScript 陣列 lastIndexOf()JavaScript陣列ASTIndex
- JavaScript 陣列 indexOf()JavaScript陣列Index
- JavaScript 陣列 concat()JavaScript陣列
- JavaScript 陣列concat()JavaScript陣列
- JavaScript 陣列slice()JavaScript陣列
- JavaScript 陣列indexOf()JavaScript陣列Index
- JavaScript 陣列values()JavaScript陣列
- JavaScript 陣列fill()JavaScript陣列
- javascript陣列操作JavaScript陣列
- JavaScript陣列(一)JavaScript陣列
- JavaScript 陣列 keys()JavaScript陣列
- JavaScript陣列(二)JavaScript陣列
- JavaScript Array 陣列JavaScript陣列
- Javascript 08 陣列JavaScript陣列
- JavaScript 陣列 entries()JavaScript陣列
- JavaScript 陣列includes()JavaScript陣列
- JavaScript 陣列entries()JavaScript陣列
- JavaScript陣列方法JavaScript陣列
- Javascript - 陣列和陣列的方法JavaScript陣列
- JavaScript,你從哪裡來?(上)JavaScript
- JavaScript 陣列去重JavaScript陣列