วิธีแปลง Set เป็น Array


469

ชุดดูเหมือนว่าเป็นวิธีที่ดีในการสร้างอาร์เรย์ที่มีองค์ประกอบที่ไม่ซ้ำกันรับประกัน แต่ก็ไม่ได้เปิดเผยวิธีที่ดีใด ๆ ที่จะได้รับคุณสมบัติยกเว้นสำหรับเครื่องกำเนิดไฟฟ้า [Set] .values mySet.values.next()ซึ่งเรียกว่าในทางที่น่าอึดอัดใจของ

สิ่งนี้คงจะดีถ้าคุณสามารถโทรmapและฟังก์ชั่นที่คล้ายกันในชุด แต่คุณไม่สามารถทำเช่นนั้นได้

ฉันพยายามArray.fromแล้ว แต่ดูเหมือนว่าจะแปลงเฉพาะวัตถุที่เหมือนอาร์เรย์ (NodeList และ TypedArrays?) ไปเป็น Array ลองอีกครั้ง: ใช้Object.keysไม่ได้กับชุดและ Set.prototype ไม่มีวิธีคงที่ที่คล้ายกัน

ดังนั้นคำถาม: มีวิธีการ inbuilt ที่สะดวกสำหรับการสร้าง Array ด้วยค่าของ Set ที่กำหนดหรือไม่ (ลำดับขององค์ประกอบไม่สำคัญจริงๆ)

หากไม่มีตัวเลือกดังกล่าวอยู่แล้วอาจจะมีสำนวนหนึ่งที่ดีสำหรับการทำเช่นนั้น? ชอบใช้for...ofหรือคล้ายกัน?

คำตอบ:


850

หากไม่มีตัวเลือกดังกล่าวอยู่แล้วอาจจะมีสำนวนหนึ่งที่ดีสำหรับการทำเช่นนั้น? ชอบใช้สำหรับ ... จากหรือคล้ายกัน

อันที่จริงมีหลายวิธีในการแปลงSetเป็นArray :

การใช้ Array.from

let array = Array.from(mySet);

เพียงแค่spreadingกำหนดออกมาเป็นอาร์เรย์

let array = [...mySet];

วิธีแบบเก่า ๆ วนซ้ำและผลักไปยังอาร์เรย์ใหม่ (ชุดมีforEach)

let array = [];
mySet.forEach(v => array.push(v));

ก่อนหน้านี้ใช้ไวยากรณ์ที่ไม่ได้มาตรฐานและตอนนี้เลิกเข้าใจอาร์เรย์:

let array = [v for (v of mySet)];

7
สิ่งนี้ไม่ทำงานใน Safari (8) หรือ Chrome (41) แต่มันใช้ได้กับ Firefox (35)
425nesp

2
var array = [v for (v of mySet)];ไม่ทำงานในchrome 46
Eric

18
[...mySet]ผมคิดว่าวิธีที่สง่างามมากที่สุดก็คือ
Wojciech Bednarski

18
@WojciechBednarski l33t ไม่สง่างาม หากตัวอย่างใดเป็นเช่นนั้นนั่นก็คือArray.from(mySet);
Buffalo

3
เพิ่งต้องการเพิ่มที่[...mySet]มีปัญหาเมื่อรวบรวมโดยใช้ typescript (ดูปัญหานี้ ) ดังนั้นอาจจะปลอดภัยกว่าArray.from(mySet)หากคุณต้องการแปลงเป็น typescript ในอนาคตอันใกล้
Ivan Gozali

65

ผ่านhttps://speakerdeck.com/anguscroll/es6-uncensoredโดย Angus Croll

ปรากฎว่าเราสามารถใช้spreadโอเปอเรเตอร์:

var myArr = [...mySet];

หรือมิฉะนั้นให้ใช้Array.from:

var myArr = Array.from(mySet);

1
ทำไมต้องลงคะแนน มีปัญหากับวิธีนี้หรือไม่? หรือใครบางคนพยายามที่จะรันรหัสนี้ใน IE11 และล้มเหลว ? ;)
c69

6
ฉันไม่ได้ลงคะแนน แต่ฉันได้ลองใน Chrome เวอร์ชันล่าสุดและล้มเหลวดังนั้นจึงไม่ใช่แค่ปัญหา IE
Meshaal

3
อ้างถึงkangax.github.io/compat-table/es6สำหรับแผนภูมิการสนับสนุนที่มากขึ้นหรือน้อยลง ปัจจุบันของเบราว์เซอร์เดสก์ท็อปทั้งหมดรองรับเฉพาะ FF และ IE TP (aka Spartan, aka เบราว์เซอร์ MS Non-IE) Array.fromและ...
c69

หน้าตาเช่น Firefox Array.fromเป็นเบราว์เซอร์ที่ให้การสนับสนุนเท่านั้น developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
425nesp

1
ที่นี่คุณสามารถเปิดใช้งาน Chrome ได้chrome://flags/#enable-javascript-harmonyโปรดจำไว้ว่าการทดลองไม่คิดว่าจะเป็นวิธีแก้ปัญหาที่ดีสำหรับการพัฒนา
sospedra

12

สมมติว่าคุณเพียงแค่ใช้Setชั่วคราวเพื่อรับค่าที่ไม่ซ้ำกันในอาเรย์แล้วแปลงกลับเป็นอาเรย์ลองใช้สิ่งนี้:

_.uniq([])

นี้ต้องอาศัยการใช้ขีดหรือดูเถิดประ


โชคไม่ดีที่โซลูชันครอสโบรเชอ
ร์ตัว

6

อาจจะไปปาร์ตี้ช้า แต่คุณสามารถทำสิ่งต่อไปนี้ได้:

const set = new Set(['a', 'b']);
const values = set.values();
const array = Array.from(values);

สิ่งนี้จะทำงานได้โดยไม่มีปัญหาในเบราว์เซอร์ที่รองรับ ES6 หรือหากคุณมี shim ที่สามารถเติมฟังก์ชันการทำงานข้างต้นได้อย่างถูกต้อง

แก้ไข : วันนี้คุณสามารถใช้สิ่งที่ @ c69 แนะนำ:

const set = new Set(['a', 'b']);
const array = [...set]; // or Array.from(set)

1
ดูเหมือนว่าการใช้งานset.entries()คุณจะได้รับชุดข้อมูลจำนวนมาก คุณสามารถใช้set.values()เพื่อรับอาร์เรย์ธรรมดา
Shimon Rachlenko

@ShimonRachlenko เป็นความจริงและผู้ใช้ไม่ได้ขอสิ่งนั้น
Roland

2
คุณสามารถใช้งานได้var array = Array.from(set);
Buffalo

คำตอบนี้ผิด คุณไม่จำเป็นต้องเรียกร้องให้หรือ.entries .values@Buffalo ดังกล่าวข้างต้น - Array.from(set)ก็เพียงพอแล้ว
c69

1
@ c69 ที่เป็นจริง ในช่วงเวลาของคำตอบนี้Array.from()ไม่ทำงานตามที่คาดไว้ แต่ตอนนี้แพร่กระจายและArray.from()ทั้งสองทำงานได้ดี
Roland


0

ในกรณีของฉันการแก้ปัญหาคือ:

var testSet = new Set();
var testArray = [];

testSet.add("1");
testSet.add("2");
testSet.add("2"); // duplicate item
testSet.add("3");

var someFunction = function (value1, value2, setItself) {
    testArray.push(value1);
};

testSet.forEach(someFunction);

console.log("testArray: " + testArray);

value1 เท่ากับ value2 => ค่าที่มีอยู่ในตำแหน่งปัจจุบันในชุด มีการส่งค่าเดียวกันสำหรับทั้งสองอาร์กิวเมนต์

ทำงานภายใต้ IE11


0

ใช้ชุดและแปลงเป็นอาเรย์นั้นคล้ายกับการคัดลอก Array ...

ดังนั้นคุณสามารถใช้วิธีการเดียวกันในการคัดลอกอาร์เรย์ที่ง่ายมาก ES6

ตัวอย่างเช่นคุณสามารถใช้ ...

ลองนึกภาพคุณมีชุดนี้ด้านล่าง:

const a = new Set(["Alireza", "Dezfoolian", "is", "a", "developer"]);

คุณสามารถแปลงโดยใช้:

const b = [...a];

และผลลัพธ์คือ:

["Alireza", "Dezfoolian", "is", "a", "developer"]

อาร์เรย์และตอนนี้คุณสามารถใช้วิธีการทั้งหมดที่คุณสามารถใช้สำหรับอาร์เรย์ ...

วิธีทั่วไปอื่น ๆ ในการทำ:

const b = Array.from(a);

หรือใช้ลูปเช่น:

const b = [];
a.forEach(v => b.push(v));

0

รหัสด้านล่างสร้างชุดจากอาร์เรย์จากนั้นใช้...โอเปอเรเตอร์

var arr=[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,];
var set=new Set(arr);
let setarr=[...set];
console.log(setarr);

โปรดใส่รหัสของคุณลงไป
Hima

1
.. และนี่คืออะไร
ZF007

-1

นี่เป็นวิธีง่ายๆในการรับค่าดิบเฉพาะจากอาร์เรย์ หากคุณแปลงอาร์เรย์เป็น Set และหลังจากนี้ให้ทำการแปลงจาก Set เป็น array การแปลงนี้ใช้ได้เฉพาะกับค่าดิบสำหรับวัตถุในอาร์เรย์ที่ไม่ถูกต้อง ลองด้วยตัวเอง

    let myObj1 = {
        name: "Dany",
        age: 35,
        address: "str. My street N5"
    }

    let myObj2 = {
        name: "Dany",
        age: 35,
        address: "str. My street N5"
    }

    var myArray = [55, 44, 65, myObj1, 44, myObj2, 15, 25, 65, 30];
    console.log(myArray);

    var mySet = new Set(myArray);
    console.log(mySet);

    console.log(mySet.size === myArray.length);// !! The size differs because Set has only unique items

    let uniqueArray = [...mySet];
    console.log(uniqueArray); 
    // Here you will see your new array have only unique elements with raw 
    // values. The objects are not filtered as unique values by Set.
    // Try it by yourself.

-1

คำตอบที่ง่ายที่สุด

เพียงแค่กระจายชุดภายใน []

let mySet = new Set()
mySet.add(1)
mySet.add(5)
mySet.add(5) 
let arr = [...mySet ]

ผลลัพธ์ : [1,5]

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.