JavaScript 數(shù)組常見(jiàn)操作技巧 (二)
前言：
數(shù)組是 JavaScript 中常見(jiàn)數(shù)據(jù)類(lèi)型之一，關(guān)于它的一些操作方法，我在這里做一下簡(jiǎn)單記錄和總結(jié)。
今天主要介紹：
- 如何找出數(shù)組中的重復(fù)/非重復(fù)元素
- 數(shù)組扁平化方法
一、出數(shù)組中的重復(fù)元素或非重復(fù)元素
雙重循環(huán) + slice，找出重復(fù)的元素。雖然只要求找出重復(fù)元素，但應(yīng)該注意要順便去重，否則外循環(huán)還是會(huì)對(duì)重復(fù)元素進(jìn)行一遍檢查；用 flag 記錄重復(fù)次數(shù)，只在第一次重復(fù)的時(shí)候?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，記錄每個(gè)元素出現(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)
需要檢查是否每個(gè)元素都是數(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
上面的過(guò)程本身是一種歸并，所以考慮使用 reduce
function flatten(arr){
? ? return arr.reduce((acc,cur) => acc.concat(cur),[])
}二維數(shù)組：展開(kāi) / apply + concat
通過(guò)展開(kāi)原數(shù)組或者將其作為 apply 的第二個(gè)參數(shù)，把數(shù)組轉(zhuǎn)化為一個(gè)參數(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 方法剛好可以做這個(gè)事，之后再調(diào)用字符串的 split 把字符串轉(zhuǎn)換回?cái)?shù)組即可。但這個(gè)方法很局限，要求數(shù)組元素的數(shù)據(jù)類(lèi)型都相同。
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 + 遞歸
同理，上面的過(guò)程是一種歸并，可以使用 reduce 完成。需要注意的是，reduce 的回調(diào)函數(shù)必須返回一個(gè)數(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 給這個(gè)數(shù)組降維。這個(gè)方法可以不使用遞歸
function flatten(arr){ ? ?
? ? while(arr.some(item => Array.isArray(item))){
? ? ? ? arr = [].concat(...arr)
? ? }
? ? return arr
}不確定維數(shù)的數(shù)組： flat
數(shù)組降維，直接用之前講過(guò)的 flat 是最簡(jiǎn)單的。默認(rèn)傳參 1，表示降維一次；可以傳參 Infinity，實(shí)現(xiàn)完全降維，最終得到一個(gè)一維數(shù)組。
到此這篇關(guān)于JavaScript 數(shù)組常見(jiàn)操作技巧 (二)的文章就介紹到這了,更多相關(guān)JavaScript 數(shù)組操作技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決JS組件bootstrap table分頁(yè)實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題
這篇文章主要介紹了JS組件bootstrap table分頁(yè)實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題，感興趣的小伙伴們可以參考一下2016-04-04
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。這篇文章主要介紹了JavaScript中的this引用的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下2016-08-08
微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
一個(gè)級(jí)聯(lián)菜單(IE ONLY),不過(guò)代碼很精簡(jiǎn)!
一個(gè)級(jí)聯(lián)菜單(IE ONLY),不過(guò)代碼很精簡(jiǎn)!...2006-10-10
JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Webpack中使用環(huán)境變量的各種正確姿勢(shì)
我們?cè)陂_(kāi)發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景,區(qū)分開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境、測(cè)試環(huán)境,不同場(chǎng)景請(qǐng)求不同的接口Api,這時(shí)候項(xiàng)目中配置的「環(huán)境變量」就登場(chǎng)啦,這篇文章主要給大家介紹了關(guān)于Webpack中使用環(huán)境變量的各種正確姿勢(shì),需要的朋友可以參考下2021-09-09
詳解JavaScript中Arguments對(duì)象用途
本文主要介紹了詳解JavaScript中Arguments對(duì)象用途，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS遍歷頁(yè)面所有對(duì)象屬性及實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS遍歷頁(yè)面所有對(duì)象屬性及實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能,涉及javascript針對(duì)頁(yè)面form表單元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12