欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 數(shù)組常見操作技巧 (二)

 更新時間：2022年02月07日 12:04:22   作者：編程三昧  
這篇文章主要介紹了JavaScript 數(shù)組常見操作技巧，上一篇文章已經(jīng)給大家分享了（一），下面緊接上一篇文章分享下面技巧，需要的小伙伴可以參考一下

前言：

數(shù)組是 JavaScript 中常見數(shù)據(jù)類型之一，關(guān)于它的一些操作方法，我在這里做一下簡單記錄和總結(jié)。

今天主要介紹：

  • 如何找出數(shù)組中的重復(fù)/非重復(fù)元素
  • 數(shù)組扁平化方法

一、出數(shù)組中的重復(fù)元素或非重復(fù)元素

雙重循環(huán) + slice，找出重復(fù)的元素。雖然只要求找出重復(fù)元素，但應(yīng)該注意要順便去重，否則外循環(huán)還是會對重復(fù)元素進行一遍檢查；用 flag 記錄重復(fù)次數(shù)，只在第一次重復(fù)的時候?qū)⒃胤湃胄聰?shù)組

function search(arr){
? ? let res = []
? ? let flag = 0
? ? for(let i = 0;i < arr.length;i++){
? ? ? ? for(let j = i+1;j<arr.length;j++){
? ? ? ? ?? ?if(arr[i] === arr[j]){
? ? ? ? ? ? ? ? flag++
? ? ? ? ? ? ? ? if(flag == 1) res.push(arr[i])
? ? ? ? ? ? ? ? arr.splice(j,1)
? ? ? ? ? ? } ? ?
? ? ? ? }
? ? ? ? flag = 0
? ? }
? ? return res
}

map + filter，記錄每個元素出現(xiàn)的次數(shù)。有了重復(fù)次數(shù)，就可以篩選出重復(fù)元素、重復(fù)次數(shù)最多元素或者非重復(fù)元素：

function search(arr){
? ? const map = new Map()
? ? for(item of arr){
? ? ? ? if(!map.has(item)){
? ? ? ? ? ? map.set(item,1)
? ? ? ? } else {
? ? ? ? ? ? map.set(item,map.get(item)+1)
? ? ? ? }
? ? }
? ? // 找出重復(fù)元素，即出現(xiàn)次數(shù)大于1
? ? return [...map.entries()].filter(item => item[1] > 1).map(item => item[0])
? ? // 找出非重復(fù)元素，即出現(xiàn)次數(shù)等于1
? ? return [...map.entries()].filter(item => item[1] == 1).map(item => item[0])
? ? // 找出重復(fù)次數(shù)最多的元素
? ? return [...map.entries()]
? ? ? ? .filter(item => item[1] == Math.max(...map.values()))
? ? ?? ?.map(item => item[0])
}

二、數(shù)組扁平化 / 數(shù)組降維

二維數(shù)組，以[[],[{a:1}],[],[3,4],5] 為例，降維后得到[{a:1},3,4,5]

二維數(shù)組：雙重循環(huán)

需要檢查是否每個元素都是數(shù)組

function flatten(arr){
? ? const res = []
? ? for(let i = 0;i < arr.length; i++){
? ? ? ? if(Array.isArray(arr[i])){
?? ??? ??? ?for(let j = 0;j < arr[i].length;j++){
? ? ? ? ? ? ?? ?res.push(arr[i][j])
? ? ? ? ?? ?} ? ? ? ? ? ?
? ? ? ? } else {
? ? ? ? ? ? res.push(arr[i])
? ? ? ? } ? ? ?
? ? }
? ? return res
}

二維數(shù)組：循環(huán) + concat

concat 本身就可以給數(shù)組降維一次

function reduceDiemension(arr){
? ? const res = []
? ? for(let i = 0;i < arr.length;i++){
? ? ? ? res = res.concat(arr[i])
? ? }
? ? return res
}

二維數(shù)組：reduce + concat

上面的過程本身是一種歸并，所以考慮使用 reduce

function flatten(arr){
? ? return arr.reduce((acc,cur) => acc.concat(cur),[])
}

二維數(shù)組：展開 / apply + concat

通過展開原數(shù)組或者將其作為 apply 的第二個參數(shù)，把數(shù)組轉(zhuǎn)化為一個參數(shù)列表

function flatten(arr){
? ? // return [].concat([],arr)
? ? return [].concat(...arr)
}

多維數(shù)組，以下面的數(shù)組為例：

const arr = [
    1,
    [
        2,[3],
        [4,5,6],
        [7,8,9],
        10,11
    ],
    12,
    13,
    [15,16,17]
]

降維后得到 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17]

多維數(shù)組：toString + split

數(shù)組降維可以看作是把所有的括弧都去掉，而數(shù)組的 toString 方法剛好可以做這個事，之后再調(diào)用字符串的 split 把字符串轉(zhuǎn)換回數(shù)組即可。但這個方法很局限，要求數(shù)組元素的數(shù)據(jù)類型都相同。

function flattern_numberArray(arr){
? ? return arr.toString().split(",").map(x => Number)
}

多維數(shù)組：forEach + 遞歸

function flatten(arr){
? ? const res = []
? ? arr.forEach(item => {
? ? ? ? if(Array.isArray(item)){
? ? ? ? ? ? flatten(item)
? ? ? ? } else {
? ? ? ? ? ? res.push(item)
? ? ? ? }
? ? })
? ? return res
}

多維數(shù)組：reduce + 遞歸

同理，上面的過程是一種歸并，可以使用 reduce 完成。需要注意的是，reduce 的回調(diào)函數(shù)必須返回一個數(shù)組，所以不要再用 push 了

function flatten(arr){
? ? return arr.reduce((acc,cur) => {
? ? ? ? if(Array.isArray(cur)){
? ? ? ? ?? ?return [...acc , ...flatten(cur)] ? ?
? ? ? ? } else {
? ? ? ? ? ? return [...acc,cur]
? ? ? ? }
? ? },[])
}

多維數(shù)組：while + some

只要數(shù)組中還有數(shù)組，就使用 concat 給這個數(shù)組降維。這個方法可以不使用遞歸

function flatten(arr){ ? ?
? ? while(arr.some(item => Array.isArray(item))){
? ? ? ? arr = [].concat(...arr)
? ? }
? ? return arr
}

不確定維數(shù)的數(shù)組： flat

數(shù)組降維，直接用之前講過的 flat 是最簡單的。默認(rèn)傳參 1，表示降維一次；可以傳參 Infinity，實現(xiàn)完全降維，最終得到一個一維數(shù)組。

到此這篇關(guān)于JavaScript 數(shù)組常見操作技巧 (二)的文章就介紹到這了,更多相關(guān)JavaScript 數(shù)組操作技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論