ES6 Yinelemeyi Diziye Dönüştür


100

Diyelim ki dizi benzeri bir Javascript ES6 Yinelenebilir, önceden bildiğiniz uzunluk olarak sonlu olacak, bunu bir Javascript Dizisine dönüştürmenin en iyi yolu nedir?

Bunu yapmanın nedeni, alt çizgi ve lodash gibi birçok js kitaplığının yalnızca Dizileri desteklemesidir, bu nedenle, işlevlerinden herhangi birini Yinelemeli üzerinde kullanmak isterseniz, önce Diziye dönüştürülmelidir.

Python'da list () işlevini kullanabilirsiniz. ES6'da bir eşdeğeri var mı?


26
Array.from(iterable)Bkz ECMA-262 6 taslak ed .
RobG

Yanıtlar:


156

Sen kullanabilirsiniz Array.from veya yaymak operatörü .

Misal:

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 ]


2
Neredeyse aynısı ES6 let m = new Map()veri yapısı için de geçerlidir : sadece Harita değerlerini elde etmek için, Array.fromoperatörü kullanmak veya yaymak m.values()için aynı m.keys(). Aksi takdirde, diziler içeren bir dizi alırsınız: [[key, value], [key, value]].
Nik Sumeiko

17

Özet:

  • Array.from() işlev, girdideki gibi bir yinelenebilir alır ve yinelenebilir bir dizi döndürür.
  • Yayılma operatörü: ...bir dizi değişmezi ile kombinasyon halinde.

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); 

Dizileri kopyalarken uyarı:

Yukarıdaki yöntemlerle, bir diziyi kopyalamak istediğimizde yalnızca yüzeysel bir kopyanın oluşturulduğunun bilincinde olun. Bir örnek olası sorunu açıklığa kavuşturacaktır:

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

let newArr = [ ...arr ];

console.log(newArr);

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

console.log(newArr);

Burada iç içe geçmiş dizi nedeniyle başvuru kopyalanır ve yeni dizi oluşturulmaz. Bu nedenle, eski dizinin iç içe dizisini değiştirirsek, bu değişiklik yeni diziye yansıtılacaktır (çünkü aynı diziye başvururlar, başvuru kopyalandı).

Uyarı için çözüm:

Kullanarak dizinin derin bir klonunu oluşturarak sığ kopyalara sahip olma sorununu çözebiliriz JSON.parse(JSON.stringify(array)). Örneğin:

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)


12

ES6'da eklenen Array.from yöntemini kullanabilirsiniz , ancak yalnızca dizileri ve Haritalar ve Kümeler gibi yinelenebilir nesneleri (ES6'da da gelir) destekler. Normal nesneler için, Underscore'un toArray yöntemini veya lodash'ın toArray yöntemini kullanabilirsiniz, çünkü her iki kitaplık da yalnızca diziler için değil, nesneler için de harika bir desteğe sahiptir. Halihazırda alt çizgi veya lodash kullanıyorsanız, neyse ki, harita ve nesneleriniz için küçültme gibi çeşitli işlevsel kavramlar eklemenin yanı sıra, sorunu sizin için halledebilirler.


3

Aşağıdaki yaklaşım Haritalar için test edilmiştir:

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}]

Ne sorulmadı - Array. Yoldan bakın
João Antunes

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

-4

Şunları da yapabilirsiniz:

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

Veya ES5 + oluşturucu işlevini kullanarak "zor yol" ( Fiddle , mevcut Firefox'ta çalışıyor):

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);
}

Her ikisi de yaklaşımlar kesinlikle tavsiye edilmez ve sadece bir kavram kanıtıdır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.