JS中給數組去重的方法小結
更新時間：2024年08月14日 10:38:51 作者：Lipn
給一個存放數字或字符串的數組去重很簡單,那么現在問題升級,如何一個數組a里面存放的元素是若干個數組,那么如何給這個數組a去重？本文給大家介紹了JS中給數組去重的方法小結,需要的朋友可以參考下
基本思路：
- 首先肯定毫無疑問地想到使用Set對數組進行去重，但是試過之后會發(fā)現單純地使用Set無法達到預期結果，因為數組里面的元素又是數組，而Set在進行去重時，并不會將
[1,2]元素和[1,2]元素判斷為相等，因為他們并不是同一個數組，只是數組里面存放的元素一樣。 - 那么我們自然而然想到，我們需要想辦法讓Set認為
[1,2]元素和[1,2]元素相等。我剛開始想到的是使用數組的join(',')方法將數組變成字符串，例如[1,2].join(',')變成'1,2'，去重之后再將Set里面的元素變成數組，例如'1,2'.split(',')變成['1','2']。但是這樣會有一個問題，最后得到的是['1','2']，而我們想要的是[1,2]，所以這種方式達不到預期。
此方式的完整代碼如下：
let arr = [
[1, 2],
[3, 4],
[1, 2],
[5, 6],
[3, 4],
[11, 13],
[11, 12],
[11, 13],
];
let temp = arr.map((item) => {
return item.join(",");
});
console.log(temp); // ['1,2','3,4','1,2','5,6','3,4','11,13','11,12','11,13']
let set = new Set(temp);
console.log(set); // Set { '1,2', '3,4', '5,6', '11,13', '11,12' }
let res = [...set].map((item) => {
return item.split(",");
});
console.log(res);
/*
[
[ '1', '2' ],
[ '3', '4' ],
[ '5', '6' ],
[ '11', '13' ],
[ '11', '12' ]
]
*/
- 最后,我們找到一種方式達到預期效果。使用
JSON.stringify()和JSON.parse()。
代碼如下：
let arr = [
[1, 2],
[3, 4],
[1, 2],
[5, 6],
[3, 4],
[11, 13],
[11, 12],
[11, 13],
];
let temp = arr.map((item) => {
return JSON.stringify(item);
});
console.log(temp);
/*
[
'[1,2]', '[3,4]',
'[1,2]', '[5,6]',
'[3,4]', '[11,13]',
'[11,12]', '[11,13]'
]
*/
let set = new Set(temp);
console.log(set);
// Set { '[1,2]', '[3,4]', '[5,6]', '[11,13]', '[11,12]' }
let result = Array.from(set);
console.log(result);
// [ '[1,2]', '[3,4]', '[5,6]', '[11,13]', '[11,12]' ]
result = result.map((item) => {
return JSON.parse(item);
});
console.log(result);
// [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 11, 13 ], [ 11, 12 ] ]
相關知識點：
1. JSON.stringify()
JSON.stringify() 方法將一個 JavaScript 對象或值轉換為 JSON 字符串。
使用 JSON.stringify() 示例：
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
2. JSON.parse()
JSON.parse() 方法用來解析 JSON 字符串，構造由字符串描述的 JavaScript 值或對象。
使用 JSON.parse() 示例：
JSON.parse("{}"); // {}
JSON.parse("true"); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse("null"); // null
3. Set與數組之間相互轉換
Set轉換成數組有兩種方式：
① [...set]② Array.from(set)數組轉換成Set：new Set(arr)
// Set轉換成數組 let set = new Set(); set.add(1); set.add(2); set.add(2); let arr = [...set]; // [1,2] let arr2 = Array.from(set); // [1,2]
// 數組轉換成Set
let arr = [1,2,2,3,1];
let set = new Set(arr); // Set { 1, 2, 3 }
以上就是JS中給數組去重的方法小結的詳細內容，更多關于JS數組去重的資料請關注腳本之家其它相關文章！
相關文章
在 JavaScript 項目中,注釋是非常重要的,它不僅幫助開發(fā)者理解代碼,也便于團隊協作、代碼維護和調試,良好的注釋能讓別人更快理解和修改代碼,本文將結合實際項目代碼示例,介紹如何為 JavaScript 代碼添加注釋,需要的朋友可以參考下2025-05-05
擁Bootstrap入懷 導航欄篇，和大家一起走進Bootstrap，了解Bootstrap的導航欄，感興趣的小伙伴們可以參考一下2016-05-05
bootstrap——bootstrapTable實現隱藏列的示例
本篇文章主要介紹了bootstrapTable實現隱藏列的示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了前端頁面禁止別人調試的方法的相關資料,需要的朋友可以參考下2023-03-03
javascript 關于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁面。原來‘#’代表的是 #top ，2009-10-10
這篇文章主要介紹了LayUI—tree樹形結構的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Js實現網頁上的MD5加密功能，將文字轉換為MD5字符，本代碼調用簡單，你可以新建一個網頁，將此網頁上傳到你的服務器上，用戶瀏覽網頁，就可實現MD5加密轉換功能，用戶可方便查詢任一字符的MD5碼，很不錯的功能2013-03-03
面試題中有一題數組去重，首先想到的是對象存鍵值的方法可是遇到不同類型又能轉換成同樣的字符串的就完了接下來為大家介紹下雙重循環(huán)/存鍵值和類型實現去重，感興趣的各位可以參考下哈2013-03-03
這篇文章主要為大家詳細介紹了微信小程序實時聊天WebSocket的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章介紹了js函數排序的代碼，有需要的朋友可以參考一下2013-07-07