JavaScript數(shù)組去重和扁平化函數(shù)介紹
1、數(shù)組扁平化(又稱(chēng)數(shù)組降維)
flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回
const test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] // flat不傳參數(shù)時(shí),默認(rèn)扁平化一層 test.flat() // ["a", "b", "c", "d", ["e", ["f"]], "g"] // flat傳入一個(gè)整數(shù)參數(shù),整數(shù)即扁平化的層數(shù) test.flat(2) // ["a", "b", "c", "d", "e", ["f"], "g"] // Infinity 關(guān)鍵字作為參數(shù)時(shí),無(wú)論多少層嵌套,都會(huì)轉(zhuǎn)為一維數(shù)組 test.flat(Infinity) // ["a", "b", "c", "d", "e", "f", "g"] // 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化 test.flat(0) test.flat(-1) // ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] // 如果原數(shù)組有空位,flat()方法會(huì)跳過(guò)空位。 ["a", "b", "c", "d",,].flat() // ["a", "b", "c", "d"]
方法一:使用 reduce 方法
一次性扁平化所有
function flattenDeep(arr) {
return Array.isArray(arr)
? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , [])
: [arr]
}
// 測(cè)試
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(test)
// ["a", "b", "c", "d", "e", "f", "g"]
實(shí)現(xiàn) flat 函數(shù):
function flat(arr, depth = 1) {
return depth > 0
? arr.reduce((acc, cur) => {
if(Array.isArray(cur)) {
return [...acc, ...flat(cur, depth-1)]
}
return [...acc, cur]
} , [])
: arr
}
// 測(cè)試
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
// 不傳參數(shù)時(shí),默認(rèn)扁平化一層
flat(test)
// ["a", "b", "c", "d", ["e", ["f"]], "g"]
// 傳入一個(gè)整數(shù)參數(shù),整數(shù)即扁平化的層數(shù)
flat(test, 2)
// ["a", "b", "c", "d", "e", ["f"], "g"]
// Infinity 關(guān)鍵字作為參數(shù)時(shí),無(wú)論多少層嵌套,都會(huì)轉(zhuǎn)為一維數(shù)組
flat(test, Infinity)
// ["a", "b", "c", "d", "e", "f", "g"]
// 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化
flat(test, 0)
flat(test, -10)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]];
// 如果原數(shù)組有空位,flat()方法會(huì)跳過(guò)空位。
var arr = ["a", "b", "c", "d",,]
flat(arr)
// ["a", "b", "c", "d"]
方法二:棧
一次性降維所有
function flattenDeep(arr) {
const result = []
// 將數(shù)組元素拷貝至棧,直接賦值會(huì)改變?cè)瓟?shù)組
const stack = [...arr]
// 如果棧不為空,則循環(huán)遍歷
while (stack.length !== 0) {
const val = stack.pop()
if (Array.isArray(val)) {
// 如果是數(shù)組再次入棧,并且展開(kāi)了一層
stack.push(...val)
} else {
// 如果不是數(shù)組,就用頭插法插入到結(jié)果數(shù)組中
result.unshift(val)
}
}
return result
}
// 測(cè)試
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(animals)
// ["a", "b", "c", "d", "e", "f", "g"]
2、數(shù)組去重
方式一:Set(ES6)
function unique(arr) {
return Array.from(new Set(arr))
}
// 或者
var unique = arr => [...new Set(arr)]
// 測(cè)試
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]
方式二:reduce
function unique (arr) {
return arr.sort().reduce((acc, cur) => {
if (acc.length === 0 || acc[acc.length - 1] !== cur) {
acc.push(cur);
}
return acc
}, [])}
;
// 測(cè)試
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]
方法三:filter
function unique(arr) {
return arr.filter( (element, index, array) => {
return array.indexOf(element) === index
})
}
// 測(cè)試
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]
到此這篇關(guān)于JavaScript數(shù)組去重和扁平化函數(shù)介紹的文章就介紹到這了,更多相關(guān)js數(shù)組去重、扁平化函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端彈出對(duì)話框 js實(shí)現(xiàn)ajax交互
這篇文章主要為大家詳細(xì)介紹了前端彈出對(duì)話框,js實(shí)現(xiàn)ajax交互,感興趣的小伙伴們可以參考一下2016-09-09
JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法
reduce作為ES5新增的常規(guī)數(shù)組方法之一,對(duì)比f(wàn)orEach 、filter和map,在實(shí)際使用上好像有些被忽略,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法,需要的朋友可以參考下2021-06-06
JavaScript實(shí)現(xiàn)二叉樹(shù)層序遍歷
這篇文章主要為大家簡(jiǎn)單介紹一下JS中如何實(shí)現(xiàn)二叉樹(shù)層序遍歷,感興趣的小伙伴可以詳細(xì)參考閱讀2023-03-03
JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08
Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
JavaScript文件的同步和異步加載的實(shí)現(xiàn)代碼

