摘要:如果沒有提供初始值,則將使用數(shù)組中的第一個(gè)元素。如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正,如果喜歡,歡迎點(diǎn)贊
除了Object類型之外,Array類型恐怕是js中最常用的類型了,并且隨著js的發(fā)展進(jìn)步,數(shù)組中提供的方法也越來(lái)越來(lái),對(duì)數(shù)組的處理也出現(xiàn)了各種騷操作,此篇文章將會(huì)帶你重新學(xué)習(xí)數(shù)組中的實(shí)例方法
數(shù)組轉(zhuǎn)換
1、join()方法接收一個(gè)字符串作為分隔符,并返回用分隔符連接的數(shù)組項(xiàng)字符串
參數(shù):分隔符字符串
const arr = [1, 2, 3] console.log(arr.join("|")) // "1|2|3"
2、toString()方法返回?cái)?shù)組中每個(gè)值的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串
參數(shù):無(wú)
const arr = [1, 2, 3] console.log(arr.toString()) // "1,2,3"棧方法
1、push()方法接收任意數(shù)量的參數(shù),把它們逐個(gè)添加到數(shù)組末尾,并返回修改后的數(shù)組長(zhǎng)度
參數(shù): item...(多個(gè)數(shù)組項(xiàng))
let arr = ["a", "b", "c"] const count = arr.push("d") console.log(count) // 4 console.log(arr) // [ "a", "b", "c", "d" ]
2、pop()方法從數(shù)組末尾移除最后一項(xiàng),減少數(shù)組的length,返回移除的項(xiàng)
參數(shù):無(wú)
let arr = ["a", "b", "c"] const item = arr.pop() console.log(item) // "c" console.log(arr) // [ "a", "b" ]隊(duì)列方法
1、shift()方法移除數(shù)組中的第一項(xiàng),并返回該項(xiàng),同時(shí)數(shù)組長(zhǎng)度減1
參數(shù):無(wú)
let arr = ["a", "b", "c"] const item = arr.shift() console.log(item) // "a" console.log(arr) // [ "b", "c" ]
2、unshit()方法在數(shù)組前端添加任意個(gè)項(xiàng),并返回新數(shù)組的長(zhǎng)度
參數(shù):item...(多個(gè)數(shù)組項(xiàng))
let arr = ["a", "b", "c"] const count = arr.unshift("d", "e") console.log(count) // 5 console.log(arr) // [ "d", "e", "a", "b", "c" ]排序方法
1、reverse()方法用于反轉(zhuǎn)數(shù)組中每一項(xiàng),并返回反轉(zhuǎn)后的數(shù)組
參數(shù):無(wú)
let arr = ["a", "b", "c"] console.log(arr.reverse()) // [ "c", "b", "a" ]
2、sort()方法用將數(shù)組排序,并返回排序后的數(shù)組
參數(shù):compareFunction(可選)
- 若不傳compareFunction,sort()方法回調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法,然后比較得到的字符串 ```js let arr = [2, 3, 10] arr.sort() console.log(arr) // [ 10, 2, 3 ] ``` "10"位于"2"之前 - 若傳compareFunction(a,b),如果返回值小于0,則a位于b之前,如果返回值等于0則位置不變,如果返回值大于,則b位于a之前 ```js let arr = [2, 5, 3, 1] arr.sort((a, b) => { if (a < b) { return -1 } else if (a > b) { return 1 } else { return 0 } }) console.log(arr) // [ 1, 2, 3, 5 ] ```操作方法
1、concat()方法創(chuàng)建當(dāng)前數(shù)組一個(gè)副本,然后將接收到的參數(shù)添加到這個(gè)副本末尾,最后返回新構(gòu)建的數(shù)組
參數(shù):item...(可以是數(shù)組項(xiàng),也可以是數(shù)組)
let arr = [1, 2, 3] let newArr = arr.concat(4, 5, [6, 7]) console.log(newArr) // [ 1, 2, 3, 4, 5, 6, 7 ]
2.slice()方法基于當(dāng)前數(shù)組中的一或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組
參數(shù): start(起始位置),end(結(jié)束位置,可選)
let arr = [1, 2, 3, 4] let newArr = arr.slice(1, 3) console.log(newArr) // [ 2, 3 ]
tip: 如果slice方法的參數(shù)中有一個(gè)負(fù)數(shù),則用數(shù)組長(zhǎng)度加上該數(shù)來(lái)確定相應(yīng)的位置
3、splice()方法用法有多種,根據(jù)不同的用法需要傳遞的參數(shù)也不一樣
刪除:可以刪除任意數(shù)量的項(xiàng),指定兩個(gè)參數(shù):刪除的第一項(xiàng)位置和刪除的數(shù)量
插入:可以向指定位置插入任意數(shù)量的項(xiàng),第一個(gè)參數(shù):插入的位置,第二個(gè)參數(shù)0(刪除0),第三個(gè)參數(shù)以后要插入的項(xiàng)
替換:可以將指定位置的項(xiàng)替換,第一個(gè)參數(shù)要替換項(xiàng)的位置,第二個(gè)替換項(xiàng)個(gè)數(shù),第三個(gè)參數(shù)以后新的項(xiàng)
let arr = [1, 2, 3, 4, 5] arr.splice(0, 1) console.log(arr) // [ 2, 3, 4, 5 ] arr.splice(1, 0, "hello", "world") console.log(arr) // [ 2, "hello", "world", 3, 4, 5 ] arr.splice(3, 1, "js") console.log(arr) // [ 2, "hello", "world", "js", 4, 5 ]位置方法
1、indexOf()方法從頭開始查找指定項(xiàng),找到返回對(duì)應(yīng)數(shù)組下標(biāo),沒找到返回-1
參數(shù):item(要查找的數(shù)組項(xiàng)),index(指定開始查找的位置,可選)
let arr = [1, 2, 3, 4, 5] console.log(arr.indexOf(3)) // 2 console.log(arr.indexOf(3, 3)) // -1
2、lastIndexOf()方法用法和indexOf基本一致,只是從數(shù)組尾部開始查找
迭代方法1、every()方法對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)每一項(xiàng)都返回true,則返回true
參數(shù):callback(item, index, arr)
let arr = [3, 4, 5, 6] let result = arr.every((item) => item > 2) console.log(result) // true
2、some()方法對(duì)數(shù)組中任意一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)任意一項(xiàng)返回true,則返回true
參數(shù):callback(item, index, arr)
let arr = [1, 2, 3, 4] let result = arr.some((item) => item > 3) console.log(result) // true
3、map()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
參數(shù):callback(item, index, arr)
let arr = [1, 2, 3] let result = arr.map(item => item * 2) console.log(result) // [ 2, 4, 6 ]
4、filter()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回該函數(shù)調(diào)用會(huì)返回true的項(xiàng)組成的數(shù)組
參數(shù):callback(item, index, arr)
let arr = [1, 2, 3, 4, 5] let result = arr.filter(item => item > 2) console.log(result) // [3, 4, 5]
5、forEach()方法對(duì)數(shù)組中的每一項(xiàng)都運(yùn)行給定函數(shù),沒有返回值
參數(shù):callback(item, index, arr)
let arr = [1, 2, 3, 4, 5] arr.forEach(item => { console.log(item) // 1 2 3 4 5 })
tip: 修改item的不會(huì)影響遍歷的數(shù)組項(xiàng)
縮小方法
1、reduce()方法對(duì)數(shù)組中的每一項(xiàng)執(zhí)行一個(gè)reducer函數(shù)(升序執(zhí)行),并將結(jié)果匯總為單個(gè)返回值
參數(shù):callback(accumulator(累計(jì)器累計(jì)回調(diào)的返回值),currentValue(數(shù)組中正在處理的元素),currentIndex(數(shù)組中正在處理的元素的索引,如果提供了initialValue,則起始索引號(hào)為0,否則為1,可選),array(調(diào)用reducer的數(shù)組)), initialValue(作為第一次調(diào)用callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。 如果沒有提供初始值,則將使用數(shù)組中的第一個(gè)元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò),可選)
let arr = [1, 2, 3, 4, 5] let result = arr.reduce((accumulator, current, index, array) => { return accumulator + current }) console.log(result) // 15 1+2+3+4+5
let arr = [1, 2, 3, 4, 5] let result = arr.reduce((accumulator, current, index, array) => { return accumulator + current }, 10) console.log(result) // 25 10+1+2+3+4+5
2、reduceRight()方法用法與reduce()方法一致,只是redeceRight()方法調(diào)用從數(shù)組尾部開始,向前遍歷
ES6新增方法
1、from()方法將類似數(shù)組的對(duì)象和可遍歷的對(duì)象轉(zhuǎn)化為數(shù)組
參數(shù):arrayLike(想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象),mapFn(如果指定了該參數(shù),新組數(shù)中的每個(gè)元素會(huì)執(zhí)行此回調(diào)函數(shù),可選),thisArg(執(zhí)行回調(diào)函數(shù)時(shí)this對(duì)象,可選)
let arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 } console.log(Array.from(arrayLike)) // [1, 2, 3]
let arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 } console.log(Array.from(arrayLike, (item) => item * 2)) // [2, 4, 6]
在實(shí)際應(yīng)用中更多應(yīng)用于Dom操作返回的集合以及函數(shù)內(nèi)部的arguments對(duì)象
2、of()方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例,而不考慮參數(shù)的數(shù)量或類型
參數(shù):item...(任意個(gè)參數(shù),將按順序返回?cái)?shù)組中的元素)
let result = Array.of(2, 3, 4) console.log(result) // [ 2, 3, 4 ]
3、copyWithin()方法,在當(dāng)前數(shù)組內(nèi)部,將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有位置成員),返回當(dāng)前數(shù)組
參數(shù):target(從該位置開始替換數(shù)據(jù)),start(從該位置開始讀取數(shù)據(jù),默認(rèn)為0,如果為負(fù)值表示倒數(shù),可選),end(到該位置前,停止讀取數(shù)據(jù),默認(rèn)為數(shù)組長(zhǎng)度,如果為負(fù)值,表示倒數(shù))
let arr = [1, 2, 3, 4, 5] arr.copyWithin(0, 3, 5) console.log(arr) // [ 4, 5, 3, 4, 5 ]
4、find()方法用于找出第一個(gè)符合條件的數(shù)組成員,若沒有符合條件的,返回undefined
參數(shù):callback(item, index, arr)
let arr = [1, 2, 3, 4, 5] let result = arr.find(item => item > 3) console.log(result) // 4
5、findIndex()方法用法與find()方法相似,返回第一個(gè)符合條件的成員的位置,若沒有符合條件的,返回-1
6、fill()方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素,不包括終止索引
參數(shù):value(填充數(shù)組元素的值),start(起始索引,可選),end(終止索引,可選)
let arr = [1, 2, 3, 4, 5] arr.fill(6, 2, 5) console.log(arr) // [ 1, 2, 6, 6, 6 ]
7、entries()、keys()、values() , 三個(gè)數(shù)組遍歷方法,返回一個(gè)遍歷器對(duì)象,entries()鍵值對(duì)的遍歷,keys()鍵名的遍歷,values()鍵值的遍歷
參數(shù):無(wú)
let arr = ["a", "b", "c"] for (let idx of arr.keys()) { console.log(idx) // 0 1 2 } for (let item of arr.values()) { console.log(item) // "a" "b" "c" } for (let [idx, item] of arr.entries()) { console.log(idx + "---" + item) // "0---a" "1---b" "2---c" }
8、includes()方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,如果包含返回true,否則返回false
參數(shù):value(要查找的元素),start(開始查找的位置,可選)
let arr = ["a", "b", "c"] console.log(arr.includes("a")) // true console.log(arr.includes("d")) // false
9、flat()方法會(huì)按照一個(gè)指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素和并到一個(gè)新數(shù)組中返回
參數(shù):depth(要提取數(shù)組的嵌套結(jié)構(gòu)深度,默認(rèn)為1,可選)
let arr = ["a", "b", ["c", "d"]] let result = arr.flat() // ["a", "b", "c", "d"] let arr1 = ["a", ["b", ["c"]]] //使用 Infinity 作為深度,展開任意深度的嵌套數(shù)組 let result1 = arr1.flat(Infinity) // ["a", "b", "c"]總結(jié)
此篇文章記錄了JS中數(shù)組常用的方法,畢竟數(shù)組的實(shí)例方法有那么多,好記性不如爛筆頭,寫下此篇文章加深記憶,同時(shí)希望對(duì)大家也能有所幫助。
如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正,如果喜歡,歡迎點(diǎn)贊
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/106082.html
摘要:數(shù)據(jù)類型七種內(nèi)置類型空值未定義布爾值數(shù)字字符串對(duì)象符號(hào)除對(duì)象之外,其他統(tǒng)稱為基本類型類型檢測(cè)運(yùn)算符后面跟操作數(shù),或者,返回一個(gè)類型的字符串值。運(yùn)算符用于測(cè)試構(gòu)造函數(shù)的屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置。 數(shù)據(jù)類型 JavaScript七種內(nèi)置類型: 空值(null) 未定義(undefined) 布爾值(boolean) 數(shù)字(number) 字符串(string) 對(duì)象(obj...
ToString ToString負(fù)責(zé)處理非字符串到字符串的強(qiáng)制類型轉(zhuǎn)換,常用的字符串化方法String()、toString()。基本類型值的字符串化規(guī)則: null轉(zhuǎn)換為null undefined轉(zhuǎn)換為undefined true轉(zhuǎn)化為true 數(shù)字的字符串化遵循通用規(guī)則,極大值或者極小值采用科學(xué)計(jì)數(shù)法表示 普通對(duì)象在字符串化時(shí),實(shí)際執(zhí)行Object.prototype.toString...
摘要:固有對(duì)象由標(biāo)準(zhǔn)規(guī)定,隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱:ka...
摘要:固有對(duì)象由標(biāo)準(zhǔn)規(guī)定,隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱:ka...
閱讀 1830·2023-04-26 02:32
閱讀 578·2021-11-18 13:12
閱讀 2460·2021-10-20 13:48
閱讀 2531·2021-10-14 09:43
閱讀 3841·2021-10-11 10:58
閱讀 3520·2021-09-30 10:00
閱讀 2944·2019-08-30 15:53
閱讀 3498·2019-08-30 15:53