JavaScript數(shù)組方法總結(jié)

Forest10 發(fā)布于2019-08-23 10:36 / 1373人閱讀

摘要：如重排序方法它的原理是先調(diào)用數(shù)組的方法，之后再進(jìn)行字符串的比較。長(zhǎng)度為的數(shù)組。返回的是被刪除的項(xiàng)，如果沒(méi)刪除則返回空數(shù)組，而且之前的數(shù)組也被改變位置方法可以檢測(cè)變量，它的兩個(gè)參數(shù)是第一個(gè)是要查找的值或變量，第二個(gè)是從哪開(kāi)始找。

length屬性方法

數(shù)組的length屬性不單單是只讀的，還可以寫(xiě)入
var color = [‘red’,’blue’,’black’];
Color.length = 1; // red
Color.length = 4
Console.log(color[2]) //undefined

檢測(cè)數(shù)組方法

當(dāng)有不同模塊時(shí)，數(shù)組在不同模塊的表現(xiàn)是不同的構(gòu)造函數(shù)，這時(shí)候instanceof也會(huì)判斷失誤，這時(shí)候要用更精確的方法
Array.isArray(value)

轉(zhuǎn)換方法

toString() -> 可以將一個(gè)數(shù)組轉(zhuǎn)化成“,”分割的形式，如[1,2,3,4].toString() -> “1,2,3,4”

join()方法和toString()一樣，只是join()里面可以添加參數(shù)，默認(rèn)是逗號(hào)，如[1,2,3,4].join(‘-") -> “1-2-3-4”

上面這個(gè)數(shù)組對(duì)于數(shù)組中嵌套這數(shù)組的情況，也能默認(rèn)拆到底。如[1,2,3,[4,[5,6,[7,8]]]].toString() -> “1,2,3,4,5,6,7,8"

重排序方法

reverse()

sort() : 它的原理是先調(diào)用數(shù)組的toString()方法，之后再進(jìn)行字符串的比較。所以應(yīng)該這么寫(xiě)

arr.sort((val1,val2) => val1-val2)

操作方法

Concat（）：concat()方法不會(huì)影響之前數(shù)組的值

Slice() : 如果是負(fù)值，則用數(shù)組的長(zhǎng)度去和數(shù)值相加。e.g: 長(zhǎng)度為5的數(shù)組 arr.slice(-2,-1) === arr.slice(3,4)。slice有個(gè)技巧，其實(shí)后面兩個(gè)參數(shù)差的值就是數(shù)組里留的數(shù)量，比如[1,2,3,4,5].slice(1,4),截取出來(lái)的數(shù)組長(zhǎng)度就是3。

Splice() : 返回的是被刪除的項(xiàng)，如果沒(méi)刪除則返回空數(shù)組，而且之前的數(shù)組也被改變

位置方法

indexOf:可以檢測(cè)變量，它的兩個(gè)參數(shù)是第一個(gè)是要查找的值或變量，第二個(gè)是從哪開(kāi)始找。
var person = {name:"andy",age:25};
var a = [{name:"andy",age:25}];
var b = [person];
console.log(a.indexOf(person)) // -1
console.log(b.indexOf(person)) //0

find()和findIndex()：他們的參數(shù)必須為函數(shù)，可直接返回滿足條件的值和序號(hào)，還可以結(jié)合Object.is()，辨別NAN的位置
[1,2,3,4].find((n) => n>2)

迭代方法

有5個(gè)迭代方法，每個(gè)方法都接收兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)函數(shù)第二個(gè)參數(shù)是函數(shù)的作用域?qū)ο?可選)-影響this值，其中第一個(gè)參數(shù)的函數(shù)又有三個(gè)參數(shù)(item,index,arrSelf)。這5個(gè)方法都不會(huì)改變數(shù)組本身。

方法	一個(gè)普通標(biāo)題	一個(gè)普通標(biāo)題
every()	Boolean	循環(huán)次數(shù)：碰到是flase的直接終止循環(huán)
some()	Boolean	循環(huán)次數(shù)：碰到是true的直接終止循環(huán)
forEach()	無(wú)返回值	和for循環(huán)迭代數(shù)組一樣，沒(méi)有返回值
map()	返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組	適用于包含項(xiàng)與另一個(gè)數(shù)組一一對(duì)應(yīng)的數(shù)組
filter()	返回true所組成的數(shù)組	查詢符合條件的所有數(shù)組很有用

歸并方法

reduce()和reduceRight ()，這兩個(gè)沒(méi)區(qū)別就是一從頭到尾，一個(gè)從尾到頭。
他們的參數(shù)意義：
第一個(gè)參數(shù)：function (pre,cur,index,arrSelf)
第二個(gè)參數(shù)：pre的初始值，如果這個(gè)參數(shù)沒(méi)有，那么pre的初始值就是數(shù)組的第0個(gè)元素，例子：

let arr2 = [1,2,3];
let arr2All = arr2.reduce((pre,cur,index,arr) => {
console.log("pre: "+ pre)
console.log("cur: "+ cur)
console.log("index: "+ index)
console.log("arr: "+ arr)
return cur + pre;
},5)

let arr2 = [1,2,3];
var arr2All = arr2.reduce((pre,cur,index,arr) => {
console.log("pre: "+ pre)
console.log("cur: "+ cur)
console.log("index: "+ index)
console.log("arr: "+ arr)
return cur + pre;
})

Es6中數(shù)組的方法 Array.from()和擴(kuò)展運(yùn)算符(...)

它可以將類(lèi)數(shù)組(本質(zhì)特點(diǎn)必須有一點(diǎn)，有l(wèi)ength屬性)和可遍歷對(duì)象(連字符串都可以)都轉(zhuǎn)化為數(shù)組e.g：
在實(shí)際應(yīng)用中一般類(lèi)數(shù)組對(duì)象都是獲取的DOM的NodeList集合，如getElementByTagName()...

let arrLike = {
"0":"a",
"1":"b",
"2":"c",
length:3
}
str = [].slice.call("abc")
var arr = [].slice.call(arrLike) // [‘a(chǎn)’,’b’,’c’] -> es5的寫(xiě)法
var arr1 = Array.from(arrLike) // [‘a(chǎn)’,’b’,’c’]
var arr2 = […arrLike] //擴(kuò)展運(yùn)算符不能有這種效果
var arr3 = Array.from("arrLike’) // [‘a(chǎn)’,’r’,’r’,’L’,’i’,’k’,’e"]

Includes()

和indexOf不同點(diǎn)：

他直接返回了true和false

語(yǔ)義化比較好

對(duì)于NAN的判斷 indexOf內(nèi)部使用嚴(yán)格相等，會(huì)導(dǎo)致NAN判斷錯(cuò)誤，而include使用的是不一樣的判斷方法，沒(méi)有問(wèn)題，[NaN].include(NaN) -> 0