ES6如何將?Set?轉(zhuǎn)化為數(shù)組示例詳解

更新時(shí)間：2023年02月20日 10:53:49 作者：天行無忌

這篇文章主要為大家介紹了ES6如何將?Set?轉(zhuǎn)化為數(shù)組的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Set 是 ES6 中新增的一種集合類型，類似于數(shù)組，但其成員的值是唯一的，即不會(huì)重復(fù)。關(guān)于Set，可以閱讀《JavaScript中的Set數(shù)據(jù)操作：交集、差集、交集、對(duì)稱差集》。Set 對(duì)象是一個(gè)構(gòu)造函數(shù)，可以使用 new 關(guān)鍵字來創(chuàng)建一個(gè) Set 實(shí)例。

例如：

const mySet = new Set();

Set 對(duì)象具有以下特征：

Set 實(shí)例的成員唯一，不會(huì)重復(fù)。
Set 實(shí)例可以存儲(chǔ)任何類型的值，包括基本類型和對(duì)象。
Set 實(shí)例是可迭代的，可以使用 for...of 循環(huán)遍歷其中的值。
Set 實(shí)例的 size 屬性可以用來獲取它包含的成員數(shù)量。

Set 對(duì)象有以下常用方法：

add(value)：添加一個(gè)值到 Set 實(shí)例中。 delete(value)：從 Set 實(shí)例中刪除一個(gè)值。 has(value)：判斷 Set 實(shí)例中是否包含某個(gè)值，返回一個(gè)布爾值。 clear()：清空 Set 實(shí)例中的所有值。

可以使用以下代碼創(chuàng)建一個(gè)包含幾個(gè)元素的 Set 對(duì)象并使用其方法：

const mySet = new Set();
mySet.add(1);
mySet.add("two");
mySet.add({ name: "DevPoint" });
console.log(mySet.has("two")); // 輸出 true
mySet.delete(1);
console.log(mySet.size); // 輸出 2
mySet.clear();
console.log(mySet.size); // 輸出 0

在 ES6 中，可以使用 Array.from() 方法將 Set 轉(zhuǎn)換為數(shù)組。該方法接受一個(gè)可迭代對(duì)象，并返回一個(gè)新數(shù)組。

例如，假設(shè)有一個(gè) Set 對(duì)象 mySet，可以按以下方式將其轉(zhuǎn)換為數(shù)組：

const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
console.log(myArray); // 輸出 [1, 2, 3]

除此之外，還可以使用擴(kuò)展運(yùn)算符 ... 來將 Set 轉(zhuǎn)換為數(shù)組。例如：

const mySet = new Set([1, 2, 3]);
const myArray = [...mySet];
console.log(myArray); // 輸出 [1, 2, 3]

這種方法更簡潔，但不支持 IE 瀏覽器。

除了使用 Array.from() 方法和擴(kuò)展運(yùn)算符 ...，還有就是通過遍歷 Set 并將每個(gè)元素添加到一個(gè)新數(shù)組中。

const mySet = new Set([1, 2, 3]);
const myArray = [];
for (let item of mySet) {
  myArray.push(item);
}
console.log(myArray); // 輸出 [1, 2, 3]

以上就是ES6如何將 Set 轉(zhuǎn)化為數(shù)組示例詳解的詳細(xì)內(nèi)容，更多關(guān)于ES6將Set轉(zhuǎn)化為數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

json_decode 索引為數(shù)字時(shí)自動(dòng)排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下
2020-03-03
javascript 從if else 到 switch case 再到抽象
大家覺得在接手遺留代碼時(shí)，見到什么東東是最讓人感到不耐煩的？復(fù)雜無比的 UML ？我覺得不是。
2010-07-07
JS/HTML5游戲常用算法之路徑搜索算法隨機(jī)迷宮算法詳解【普里姆算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法隨機(jī)迷宮算法,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12
梳理總結(jié)JavaScript的23個(gè)String方法
文章主要介紹了梳理總結(jié)JavaScript的23個(gè)String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無符號(hào)整數(shù)值作為元素而組成的集合,更多詳細(xì)內(nèi)容需要的朋友可以參考一下
2022-07-07
IE下Ajax緩存問題的快速解決方法(get方式)
IE下Ajax緩存問題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案，一大把，下面是我認(rèn)為比較全面的解決方案。主要分為客戶端解決和服務(wù)端解決
2014-01-01
手把手教會(huì)你使用redux的入門教程
本文主要介紹了手把手教會(huì)你使用redux的入門教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
js?通過Object.defineProperty()?定義和控制對(duì)象屬性
這篇文章主要介紹了js?通過Object.defineProperty()?定義和控制對(duì)象屬性，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-08-08
解決JavaScript精度問題的常見方法
在 JavaScript 中,處理浮點(diǎn)數(shù)時(shí)經(jīng)常會(huì)遇到精度丟失的問題,這是由于 JavaScript 內(nèi)部采用 IEEE 754 標(biāo)準(zhǔn)表示浮點(diǎn)數(shù),導(dǎo)致某些小數(shù)無法精確表示,本文將介紹一些常見的方法來解決 JavaScript 中的精度問題,并討論它們的優(yōu)缺點(diǎn),需要的朋友可以參考下
2024-05-05
微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的方法實(shí)例
在使用微信的時(shí)候,為方便我們發(fā)送文件可以直接在上面進(jìn)行手寫簽名,這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的相關(guān)資料,需要的朋友可以參考下
2021-07-07
解讀JavaScript代碼 var ie = !-[1,] 最短的IE判定代碼
這句代碼在IE9之前曾被稱為世界上最短的IE判定代碼。代碼雖短但確包含了不少javascript基礎(chǔ)知識(shí)在里面。
2011-05-05