แปลง ES6 ซ้ำเป็น Array

สมมติว่าคุณมี Javascript ES6 ที่เหมือนอาร์เรย์ซึ่งคุณรู้ล่วงหน้าว่าจะมีความยาว จำกัด วิธีที่ดีที่สุดในการแปลงเป็น Javascript Array คืออะไร?

เหตุผลในการทำเช่นนั้นคือไลบรารี js จำนวนมากเช่นขีดล่างและ lodash รองรับเฉพาะ Arrays ดังนั้นหากคุณต้องการใช้ฟังก์ชันใด ๆ บน Iterable ต้องแปลงเป็น Array ก่อน

ใน python คุณสามารถใช้ฟังก์ชัน list () ได้ ES6 เทียบเท่าหรือไม่

คุณสามารถใช้Array.fromหรือผู้ประกอบการแพร่กระจาย

ตัวอย่าง:

let x = new Set([ 1, 2, 3, 4 ]);

let y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]

let z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]

สรุป:

• Array.from() ฟังก์ชั่นมันใช้เวลาทำซ้ำได้ในอินพุตและส่งคืนอาร์เรย์ของการทำซ้ำ
• ตัวดำเนินการกระจาย: ...ร่วมกับตัวอักษรอาร์เรย์

const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

const newArr1  = [ ...map  ];  // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map );  // 

console.log(newArr1, newArr2); 

ข้อควรระวังเมื่อคัดลอกอาร์เรย์:

ตระหนักถึงความจริงที่ว่าด้วยวิธีการเหล่านี้ข้างต้นจะมีการสร้างสำเนาตื้นเท่านั้นเมื่อเราต้องการคัดลอกอาร์เรย์ ตัวอย่างจะช่วยแก้ปัญหาที่อาจเกิดขึ้น:

let arr = [1, 2, ['a', 'b']];

let newArr = [ ...arr ];

console.log(newArr);

arr[2][0] = 'change';

console.log(newArr);

ที่นี่เนื่องจากอาร์เรย์ที่ซ้อนกันการอ้างอิงจึงถูกคัดลอกและไม่มีการสร้างอาร์เรย์ใหม่ ดังนั้นหากเรากลายพันธุ์อาร์เรย์ที่ซ้อนกันของอาร์เรย์เก่าการเปลี่ยนแปลงนี้จะปรากฏในอาร์เรย์ใหม่ (เนื่องจากอ้างถึงอาร์เรย์เดียวกันการอ้างอิงจึงถูกคัดลอก)

ทางออกสำหรับข้อแม้:

เราสามารถแก้ไขปัญหาของการมีสำเนาตื้นโดยการสร้างโคลนลึกของอาร์เรย์โดยใช้JSON.parse(JSON.stringify(array)). ตัวอย่างเช่น:

let arr = [1, 2, ['a', 'b']]

let newArr = Array.from(arr);

let deepCloneArr = JSON.parse(JSON.stringify(arr));

arr[2][0] = 'change';

console.log(newArr, deepCloneArr)

คุณสามารถใช้เมธอดArray.fromซึ่งถูกเพิ่มใน ES6 แต่รองรับเฉพาะอาร์เรย์และวัตถุที่ทำซ้ำได้เช่น Maps และ Sets (มาใน ES6 ด้วย) สำหรับอ็อบเจ็กต์ทั่วไปคุณสามารถใช้เมธอดUnderscore toArrayหรือเมธอด toArray ของ lodash เนื่องจากไลบรารีทั้งสองรองรับอ็อบเจ็กต์ได้อย่างดีเยี่ยมไม่ใช่แค่อาร์เรย์เท่านั้น หากคุณใช้ขีดล่างหรือ lodash อยู่แล้วโชคดีที่พวกเขาสามารถจัดการปัญหาให้คุณได้ควบคู่ไปกับการเพิ่มแนวคิดการใช้งานต่างๆเช่นแผนที่และลดขนาดวัตถุของคุณ

แนวทางต่อไปนี้ได้รับการทดสอบสำหรับ Maps:

const MyMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const MyArray = [...MyMap].map(item => {
  return {[item[0]]: item[1]}
});

console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]

 <<Your_Array>> = [].concat.apply([], Array.from( <<Your_IterableIterator>> ));

คุณยังสามารถทำได้:

let arr = [];
for (let elem of gen(...)){
    arr.push(elem);
}

หรือ "วิธีที่ยาก" โดยใช้ฟังก์ชันตัวสร้าง ES5 + ( Fiddle ใช้งานได้ใน Firefox ปัจจุบัน):

var squares = function*(n){
    for (var i=0; i<n; i++){
        yield i*i;
    }
}

var arr = [];
var gen = squares(10);
var g;
while(true){
    g = gen.next();
    if (g.done){
        break;
    }
    arr.push(g.value);
}

แนวทางทั้งสองเป็นวิธีที่ไม่สามารถแนะนำได้อย่างแน่นอนอย่างไรก็ตามเป็นเพียงการพิสูจน์แนวคิดเท่านั้น