JavaScript'te bir dizinin uzunluğu nasıl başlatılır?

Ben (dahil JavaScript diziler üzerinde okuduğunuzu öğreticiler çoğu W3Schools'da ve DevGuru ) kullanarak Dizi yapıcısına bir tamsayı geçirerek belirli bir uzunlukta bir dizi sunabilmesi düşündürmektedir var test = new Array(4);sözdizimi.

Bu sözdizimini js dosyalarımda liberal olarak kullandıktan sonra, dosyalardan birini jsLint aracılığıyla çalıştırdım ve çıldırdı:

Hata: 1. satırdaki sorun 22: Beklenen ')' ve onun yerine '4' gördüm.
var testi = yeni Dizi (4);
1. satırdaki sorun 23: Beklenen ';' ve bunun yerine ')' gördüm.
var testi = yeni Dizi (4);
1. satırdaki sorun 23: Bir tanımlayıcı bekleniyordu ve bunun yerine ')' gördü.

JsLint'in davranışıyla ilgili açıklamasını okuduktan sonra, jsLintnew Array() sözdizimini gerçekten sevmiyor gibi görünüyor ve bunun yerine []dizileri bildirirken tercih ediyor .

Birkaç sorum olacak:

İlk olarak, neden? new Array()Bunun yerine sözdizimini kullanarak risk alıyor muyum ? Dikkat etmem gereken tarayıcı uyumsuzlukları var mı?

İkincisi, köşeli ayraç sözdizimine geçersem, bir dizi bildirmenin ve uzunluğunu bir satırda ayarlamanın herhangi bir yolu var mı, yoksa böyle bir şey yapmak zorunda mıyım:

var test = [];
test.length = 4;

1. Uzunluğu neden başlatmak istiyorsunuz? Teorik olarak buna gerek yoktur. Hatta lengthbir dizi boş olup olmadığını bulmak için kullanan tüm sınamalar dizi boş olmadığını bildirir, çünkü kafa karıştırıcı davranış ile sonuçlanabilir .
   Bazı testler , dizi daha sonra doldurulursa büyük dizilerin başlangıç ​​uzunluğunun ayarlanmasının daha verimli olabileceğini , ancak performans kazancının (varsa) tarayıcıdan tarayıcıya değiştiğini göstermektedir.

2. jsLint new Array()yapıcı belirsiz olduğu için hoşlanmıyor .

   new Array(4);

   boş bir uzunluk 4 dizisi oluşturur . Ancak

   new Array('4');

   değeri içeren bir dizi oluşturur '4'.

Yorumunuzla ilgili olarak: JS'de dizinin uzunluğunu başlatmanız gerekmez. Dinamik olarak büyür. Uzunluğu bazı değişkenlerde saklayabilirsiniz, ör.

var data = [];
var length = 5; // user defined length

for(var i = 0; i < length; i++) {
    data.push(createSomeObject());
}

• Array(5) size uzunluğu 5 olan ancak değerleri olmayan bir dizi verir, bu nedenle onu yineleyemezsiniz.

• Array.apply(null, Array(5)).map(function () {}) size uzunluk 5 ve değer olarak tanımlanmamış bir dizi verir, şimdi tekrarlanabilir.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) size 5 uzunluğu ve 0,1,2,3,4 değerleriyle bir dizi verir.

• Array(5).forEach(alert)hiçbir şey yapmaz, Array.apply(null, Array(5)).forEach(alert)5 uyarı verir

• ES6bize Array.fromşimdi de kullanabilirsinizArray.from(Array(5)).forEach(alert)

• Belirli bir değerle başlatmak isterseniz, bunlar iyi bilir ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  veyaArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

ES2015.fill() ile artık şunları yapabilirsiniz:

// `n` is the size you want to initialize your array
// `0` is what the array will be filled with (can be any other value)
Array(n).fill(0)

Hangisinden çok daha özlü Array.apply(0, new Array(n)).map(i => value)

Düşmesi mümkündür 0içinde .fill()olan diziyi dolduracak olan ve kanıtlar olmaksızın çalıştırmak undefined. ( Ancak, bu, Typcript'te başarısız olacaktır )

[...Array(6)].map(x => 0);
// [0, 0, 0, 0, 0, 0]

VEYA

Array(6).fill(0);
// [0, 0, 0, 0, 0, 0]

Not: boş yuvaları döngüleyemezsiniz yani Array(4).forEach(() => …)

VEYA

( daktilo kasası )

Array(6).fill(null).map((_, i) => i);
// [0, 1, 2, 3, 4, 5]

VEYA

Bir işlev kullanarak klasik yöntem (herhangi bir tarayıcıda çalışır)

function NewArray(size) {
    var x = [];
    for (var i = 0; i < size; ++i) {
        x[i] = i;
        return x;
    }
}

var a = NewArray(10);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

İç içe diziler oluşturma

Sezgisel bir 2D dizisi filloluştururken yeni örnekler oluşturmalısınız. Ama aslında olacak olan aynı dizi referans olarak saklanacak.

var a = Array(3).fill([6]);
// [  [6], [6], [6]  ]

a[0].push(9);
// [  [6, 9], [6, 9], [6, 9]  ]

Çözüm

var a = [...Array(3)].map(x => []);

a[0].push(4, 2);
// [  [4, 2], [], []  ]

Yani bir 3x2 Dizisi şöyle görünecektir:

[...Array(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

N boyutlu dizi

function NArray(...dimensions) {
    var index = 0;
    function NArrayRec(dims) {
        var first = dims[0], next = dims.slice().splice(1); 
        if(dims.length > 1) 
            return Array(dims[0]).fill(null).map((x, i) => NArrayRec(next ));
        return Array(dims[0]).fill(null).map((x, i) => (index++));
    }
    return NArrayRec(dimensions);
}

var arr = NArray(3, 2, 4);
// [   [  [ 0,  1,  2,  3 ] , [  4,  5,  6,  7]  ],
//     [  [ 8,  9,  10, 11] , [ 12, 13, 14, 15]  ],
//     [  [ 16, 17, 18, 19] , [ 20, 21, 22, 23]  ]   ]

Bir satranç tahtasını başlat

var Chessboard = [...Array(8)].map((x, j) => {
    return Array(8).fill(null).map((y, i) => {
        return `${String.fromCharCode(65 + i)}${8 - j}`;
    });
});

// [ [A8, B8, C8, D8, E8, F8, G8, H8],
//   [A7, B7, C7, D7, E7, F7, G7, H7],
//   [A6, B6, C6, D6, E6, F6, G6, H6],
//   [A5, B5, C5, D5, E5, F5, G5, H5],
//   [A4, B4, C4, D4, E4, F4, G4, H4],
//   [A3, B3, C3, D3, E3, F3, G3, H3],
//   [A2, B2, C2, D2, E2, F2, G2, H2],
//   [A1, B1, C1, D1, E1, F1, G1, H1] ]

En kısa:

[...Array(1000)]

ES6 tanıttı Array.fromBir oluşturmanızı sağlar Arrayherhangi birinden "benzeri bir diziden" ya Iterables nesneleri:

Array.from({length: 10}, (x, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Bu durumda {length: 10}, "dizi benzeri" bir nesnenin minimal tanımını temsil eder : yalnızca lengthözelliği tanımlanmış boş bir nesne .

Array.from sonuçta ortaya çıkan dizi üzerinden ikinci bir argümanın eşlenmesini sağlar.

Bu, length özelliğini 4 olarak başlatır:

var x = [,,,,];

Uzunluğu bir satırda ayarlamanızı sağlayan işlevsel bir çözüm olmadığına şaşırdım. Aşağıdaki UnderscoreJS dayanmaktadır:

var test = _.map(_.range(4), function () { return undefined; });
console.log(test.length);

Yukarıda belirtilen nedenlerden dolayı, diziyi belirli bir değere başlatmak istemedikçe bunu yapmaktan kaçınırım. Lo-dash ve Lazy dahil olmak üzere farklı performans özelliklerine sahip olabilen başka kütüphaneler olduğunu belirtmek ilginçtir.

Lütfen insanlar henüz eski alışkanlıklarınızdan vazgeçmiyor. Belleği bir kez ayırıp sonra o dizideki girdilerle (eski gibi) çalışmak ve bir dizi büyüdükçe birçok kez ayırmak (sistemin kaçınılmaz olarak diğer önerilen yöntemlerle yaptığı şey) arasında büyük bir hız farkı vardır. .

Daha büyük dizilerle serin bir şeyler yapmak istediğinize kadar elbette bunların hiçbiri önemli değil. Sonra öyle.

Şu anda bir dizinin başlangıç ​​kapasitesini ayarlamak için şu anda JS'de seçenek görünmüyor gibi görüyorum, ben aşağıdakileri kullanın ...

var newArrayWithSize = function(size) {
  this.standard = this.standard||[];
  for (var add = size-this.standard.length; add>0; add--) {
   this.standard.push(undefined);// or whatever
  }
  return this.standard.slice(0,size);
}

Dahil olan ödünleşmeler vardır:

• Bu yöntem, işleve ilk çağrı için diğerleri kadar sürer, ancak daha sonraki çağrılar için çok az zaman alır (daha büyük bir dizi istemedikçe).
• standardDizi kalıcı istediler büyük dizi olarak çok alan olarak rezerve gelmez.

Ama eğer yaptığınız şeye uyuyorsa, bir kazanç olabilir. Gayri resmi zamanlama

for (var n=10000;n>0;n--) {var b = newArrayWithSize(10000);b[0]=0;}

oldukça hızlı bir şekilde (n = 1000000 ile yaklaşık 5 saniye sürdüğü göz önüne alındığında, 10000 için yaklaşık 50 ms) ve

for (var n=10000;n>0;n--) {
  var b = [];for (var add=10000;add>0;add--) {
    b.push(undefined);
  }
}

bir dakikadan fazla bir sürede (aynı krom konsolda 10000 için yaklaşık 90 saniye veya yaklaşık 2000 kat daha yavaş). Bu sadece tahsis değil, aynı zamanda döngü vb.

(bu muhtemelen bir yorum olarak daha iyiydi, ama çok uzundu)

Bu yüzden, bunu okuduktan sonra ön tahsisin gerçekten daha hızlı olup olmadığını merak ettim, çünkü teoride öyle olmalı. Ancak, bu blog buna karşı bazı ipuçları verdi http://www.html5rocks.com/en/tutorials/speed/v8/ .

Hala emin olamadım, test ettim. Ve ortaya çıktığı gibi, aslında daha yavaş görünüyor.

var time = Date.now();
var temp = [];
for(var i=0;i<100000;i++){
    temp[i]=i;
}
console.log(Date.now()-time);


var time = Date.now();
var temp2 = new Array(100000);
for(var i=0;i<100000;i++){
    temp2[i] = i;
}
console.log(Date.now()-time); 

Bu kod, birkaç sıradan çalıştırmadan sonra aşağıdakileri sağlar:

$ node main.js 
9
16
$ node main.js 
8
14
$ node main.js 
7
20
$ node main.js 
9
14
$ node main.js 
9
19

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

İşte başka bir çözüm

var arr = Array.apply( null, { length: 4 } );
arr;  // [undefined, undefined, undefined, undefined] (in Chrome)
arr.length; // 4

İlk argümanı, apply()burada umursadığımız bir nesne bağlamadır, bu yüzden onu ayarladık null.

Array.apply(..)işlevi çağırır Array(..)ve { length: 3 }nesne değerini bağımsız değişkenleri olarak yayar .

Dizi yapıcısının belirsiz bir sözdizimi vardır ve JSLint sadece duygularınızı incitir.

Ayrıca, örnek kodunuz bozuldu, ikinci varifade bir SyntaxError. lengthDizinin özelliğini ayarlıyorsunuz, testbaşka bir diziye gerek yok var.

Bildiğiniz gibi seçeneklerinizi array.length, tek "temiz" olanı. Soru, boyutu neden ilk etapta ayarlamanız gerekiyor? Bu bağımlılıktan kurtulmak için kodunuzu yeniden düzenlemeye çalışın.

Array'ın uzunluğunun sabit olduğunu varsayarsak. Javascript'te, Yaptıklarımız:

const intialArray = new Array(specify the value);

Yukarıda açıklandığı gibi, new Array(size)kullanım biraz tehlikelidir. Doğrudan kullanmak yerine, bir "dizi yaratıcısı işlevi" içine yerleştirin. Bu işlevin hatasız olduğundan kolayca emin olabilirsiniz ve new Array(size)doğrudan arama tehlikesinden kaçınabilirsiniz . Ayrıca, isteğe bağlı bir varsayılan başlangıç ​​değeri de verebilirsiniz. Bu createArrayişlev tam olarak bunu yapar:

function createArray(size, defaultVal) {
    var arr = new Array(size);
    if (arguments.length == 2) {
        // optional default value
        for (int i = 0; i < size; ++i) {
            arr[i] = defaultVal;
        }
    }
    return arr;
}

Çoğu cevapta filldiziye tavsiye edilir , çünkü aksi halde "üzerinde yineleme yapamazsınız" , ancak bu doğru değildir. Boş bir diziyi yineleyebilirsiniz, sadece ile değil forEach. Döngüler, döngüler ve ben döngüler için iyi çalışıyor.

const count = Array(5);

Çalışmıyor.

console.log('---for each loop:---');
count.forEach((empty, index) => {
    console.log(`counting ${index}`);
});

Bu işler:

console.log('---for of loop:---');
for (let [index, empty] of count.entries()) {
  console.log(`counting for of loop ${index}`);
}

console.log('---for i loop:---');
for (let i = 0, il = count.length; i < il; ++i) {
  console.log(`counting for i loop ${i}`);
}

console.log('---while loop:---');
let index = 0;
while (index < count.length) { 
  console.log(`counting while loop ${index}`); 
  index++; 
}

Yukarıdaki örneklerle bu kemanı kontrol edin .

Ayrıca açısallar *ngForboş bir dizi ile iyi çalışır:

<li *ngFor="let empty of count; let i = index" [ngClass]="
  <span>Counting with *ngFor {{i}}</span>
</li>

Dizi uzunluğunu array.length = youValue

Yani olurdu

var myArray = [];
myArray.length = yourValue;

Kullanmamanızın nedeni new Arraybu kodla gösterilmiştir:

var Array = function () {};

var x = new Array(4);

alert(x.length);  // undefined...

Diğer bazı kod olabilir Dizi değişkenle karmaşa. Biraz uzak herkes böyle bir kod yazmak istiyorsunuz getirildi biliyorum, ama yine de ...

Ayrıca, Felix King'in söylediği gibi, arayüz biraz tutarsız ve izlemesi zor bazı hatalara yol açabilir.

Undefined (olduğu gibi new Array(x)) ile doldurulmuş length = x değerine sahip bir dizi istiyorsanız, bunu yapabilirsiniz:

var x = 4;
var myArray = [];
myArray[x - 1] = undefined;

alert(myArray.length); // 4