您好,登錄后才能下訂單哦!
這篇文章主要介紹“es6新增的數(shù)組方法有哪些”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“es6新增的數(shù)組方法有哪些”文章能幫助大家解決問(wèn)題。
新增數(shù)組方法:1、from(),可將類數(shù)組或可迭代對(duì)象轉(zhuǎn)為真正的數(shù)組;2、of(),可將一組值轉(zhuǎn)換為數(shù)組,它彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足;3、find()和findIndex(),返回第一個(gè)符合條件的數(shù)組元素;4、fill()等等。
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
1、Array.from()
Array.from 方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組:
類似數(shù)組的對(duì)象(array-like object)
可遍歷(iterable)的對(duì)象(包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map)
意味著,只要部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu),Array.from都能將其轉(zhuǎn)換為數(shù)組
實(shí)際開(kāi)發(fā)中,一般可以用來(lái)轉(zhuǎn)換DOM操作返回的NodeList集合,以及函數(shù)內(nèi)部的arguments對(duì)象
傳一個(gè)參數(shù)時(shí),用于將類數(shù)組轉(zhuǎn)為真正的數(shù)組
數(shù)組去重
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...也可實(shí)現(xiàn)相同的效果 console.log([...new Set(arr)]) //[1,2,3,5]
對(duì)于沒(méi)有部署該方法的瀏覽器,可使用Array.prototype.slice方法代替
cosnt toArray = (() => { Array.from ? Array.from : obj => [].slice.call(obj) })()
還可以接收第二個(gè)參數(shù),第二個(gè)參數(shù)傳入一個(gè)函數(shù),實(shí)現(xiàn)類似map方法的效果,對(duì)每個(gè)元素進(jìn)行處理并返回處理好的數(shù)組
Array.from([1,2,3] , item => item *2) //[2,4,6]
返回字符串的長(zhǎng)度
可以用于將字符串轉(zhuǎn)為數(shù)組,然后返回字符串的長(zhǎng)度,因?yàn)樗軌蛘_處理各種Unicode字符,從而避免JS將大于/uFFFF的Unicode字符算作2個(gè)字符的自身bug
function countLength(string) { return Array.from(string).length }
2、Array.of()
Array.of 方法用于將一組值,轉(zhuǎn)換為數(shù)組。彌補(bǔ)數(shù)組構(gòu)造函數(shù) Array()的不足。因?yàn)閰?shù)個(gè)數(shù)的不同,會(huì)導(dǎo)致 Array()的行為有差異
//如下代碼看出差異 Array.of(3); // [3] Array.of(3, 11, 8); // [3,11,8] new Array(3); // [, , ,] new Array(3, 11, 8); // [3, 11, 8] // Array.of方法可以用下面的代碼模擬實(shí)現(xiàn)。 function ArrayOf() { return [].slice.call(arguments); }
3、數(shù)組實(shí)例的 find() 和 findIndex()
find()
返回第一個(gè)符合條件的數(shù)組成員,它的參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該函數(shù),直到找出第一個(gè)滿足條件的成員,然后返回該成員,如果沒(méi)有符合條件的成員,則返回undefined
該方法的回調(diào)函數(shù)接收三個(gè)參數(shù): 當(dāng)前的值 , 當(dāng)前位置, 原數(shù)組
示例1
[1,12,4,0,5].find((item,index , arr) => return item < 1) // 0
示例2
// find() var item = [1, 4, -5, 10].find(n => n < 0); console.log(item); // -5 // find 也支持這種復(fù)雜的查找 var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.find(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // { x: 30, y: 40 }
findIndex()
寫法用法基本與find()方法相同,只是返回第一個(gè)符合條件的數(shù)組成員的位置,如果沒(méi)有則返回-1
示例1
[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10) //3
示例2
var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.findIndex(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // 2 points.findIndex(function matcher(point) { return point.x % 6 == 0 && point.y % 7 == 0; }); //1
4、數(shù)組實(shí)例的 fill()
fill()方法使用給定值, 填充一個(gè)數(shù)組
fill 方法還可以接受第二個(gè)和第三個(gè)參數(shù),用于指定填充的起始位置和結(jié)束位置
// fill方法使用給定值, 填充一個(gè)數(shù)組。 var fillArray = new Array(6).fill(1); console.log(fillArray); //[1, 1, 1, 1, 1, 1] //fill方法還可以接受第二個(gè)和第三個(gè)參數(shù),用于指定填充的起始位置和結(jié)束位置。 ["a", "b", "c"].fill(7, 1, 2); // ['a', 7, 'c'] // 注意,如果填充的類型為對(duì)象,那么被賦值的是同一個(gè)內(nèi)存地址的對(duì)象,而不是深拷貝對(duì)象。 let arr = new Array(3).fill({ name: "Mike" }); arr[0].name = "Ben"; console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
這兩個(gè)方法都可以發(fā)現(xiàn)數(shù)組中的NaN,而ES5中的indexOf()是發(fā)現(xiàn)不了NaN的
5、數(shù)組實(shí)例的 entries(),keys() 和 values()
三個(gè)方法都用來(lái)遍歷數(shù)組,都返回一個(gè)遍歷器對(duì)象,可用for…of循環(huán)遍歷
不同的是:
keys()是對(duì)鍵名的遍歷
values()是對(duì)鍵值的遍歷
entries()是對(duì)鍵值對(duì)的遍歷
for (let index of ["a", "b"].keys()) { console.log(index); } // 0 1 for (let elem of ["a", "b"].values()) { console.log(elem); } // a b for (let [index, elem] of ["a", "b"].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" var a = [1, 2, 3]; [...a.values()]; // [1,2,3] [...a.keys()]; // [0,1,2] [...a.entries()]; // [ [0,1], [1,2], [2,3] ]
6、includes()方法返回一個(gè)布爾值
該方法返回一個(gè)布爾值,表示某個(gè)數(shù)組中是否包含給定的值
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
還可接收第二個(gè)參數(shù),表示搜索的起始位置,默認(rèn)是0。如果第二個(gè)參數(shù)是負(fù)數(shù),則表示到數(shù)的位置。如果第二個(gè)參數(shù)大于數(shù)組的長(zhǎng)度,則從下標(biāo)0處開(kāi)始
includes 方法彌補(bǔ)了 indexOf 方法不夠語(yǔ)義化和誤判 NaN 的缺點(diǎn)
[1,23,NaN].includes(NaN) //true
兼容方法:
function contains = ( () => { Array.prototype.includes ?(arr , val) => arr.includes(val) :(arr , val) => arr.some(item => return item === val) })()
7、數(shù)組實(shí)例的 flat(),flatMap()
flat()用于將嵌套的數(shù)組“拉平”,變成一維的數(shù)組。該方法返回一個(gè)新數(shù)組,對(duì)原數(shù)據(jù)沒(méi)有影響。傳參數(shù)代表拉平幾層默認(rèn)是一層
flatMap()只能展開(kāi)一層數(shù)組。方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)(相當(dāng)于執(zhí)行 Array.prototype.map()),然后對(duì)返回值組成的數(shù)組執(zhí)行 flat()方法。該方法返回一個(gè)新數(shù)組,不改變?cè)瓟?shù)組
// flat() [1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5] //flatMap() [2, 3, 4].flatMap((x) => [x, x * 2]) //map執(zhí)行完后是[[2, 4], [3, 6], [4, 8]] //然后在執(zhí)行flat()方法得到下邊的結(jié)果 // [2, 4, 3, 6, 4, 8] // flatMap()只能展開(kāi)一層數(shù)組。 // 相當(dāng)于 .flat() [1, 2, 3, 4].flatMap(x => [ [x * 2] ]) //map執(zhí)行完后是[[[2]], [[4]], [[6]], [[8]]] //然后在執(zhí)行flat()方法得到如下結(jié)果 // [[2], [4], [6], [8]]復(fù)制代碼
8、數(shù)組實(shí)例的copywithin()
在當(dāng)前數(shù)組內(nèi)部將指定位置的成員復(fù)制到其他位置,然后返回當(dāng)前數(shù)組,會(huì)改變?cè)瓟?shù)組
接收三個(gè)參數(shù):
1、target(必需) 從該位置開(kāi)始替換數(shù)據(jù)
2、start(可選) 從該位置開(kāi)始讀取數(shù)據(jù),默認(rèn)為0,如果為負(fù)數(shù),則表示到數(shù)
3、end(可選) 到該位置前停止讀取數(shù)據(jù),默認(rèn)等于數(shù)組長(zhǎng)度。如果是負(fù)數(shù),表示到數(shù)
三個(gè)參數(shù)都應(yīng)該是數(shù)字,如果不是,會(huì)自動(dòng)轉(zhuǎn)為數(shù)值
[1,2,3,4,5].copywithin(0,3); //[4,5,3,4,5] 表示從下標(biāo)3位置直到結(jié)束的成員(4,5),復(fù)制到從下標(biāo)0開(kāi)始的位置,結(jié)果替換掉了原來(lái)的1和2
關(guān)于“es6新增的數(shù)組方法有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。