วิธีการเริ่มต้นความยาวของอาเรย์ใน JavaScript?

บทเรียนส่วนใหญ่ที่ฉันได้อ่านในอาร์เรย์ใน JavaScript (รวมถึงw3schoolsและdevguru ) แนะนำว่าคุณสามารถเริ่มต้นอาร์เรย์ด้วยความยาวที่แน่นอนโดยส่งจำนวนเต็มไปยังตัวสร้าง Array โดยใช้var test = new Array(4);ไวยากรณ์

หลังจากใช้ซินแท็กซ์นี้อย่างอิสระในไฟล์ js ของฉันฉันรันหนึ่งในไฟล์ผ่านjsLintและทำให้เป็นอิสระ:

ข้อผิดพลาด: ปัญหาที่บรรทัด 1 อักขระ 22: คาดว่า ')' และเห็น '4' แทน
var test = อาร์เรย์ใหม่ (4);
ปัญหาที่บรรทัดที่ 1 อักขระ 23: คาดหวัง ';' และแทนที่จะเห็น ')'
var test = อาร์เรย์ใหม่ (4);
ปัญหาที่บรรทัดที่ 1 อักขระ 23: ต้องการตัวระบุและแทนที่จะเห็น ')'

หลังจากอ่านคำอธิบายของ jsLint เกี่ยวกับพฤติกรรมของมันดูเหมือนว่า jsLint ไม่ชอบnew Array()ไวยากรณ์และชอบ[]เมื่อประกาศอาร์เรย์

ดังนั้นฉันมีคำถามสองสามข้อ:

ก่อนอื่นทำไม ฉันใช้ความเสี่ยงใด ๆ โดยใช้new Array()ไวยากรณ์แทนหรือไม่ เบราว์เซอร์ที่ฉันควรทราบมีความเข้ากันไม่ได้หรือไม่

และที่สองถ้าฉันสลับไปที่ไวยากรณ์ของวงเล็บเหลี่ยมจะมีวิธีใดที่จะประกาศอาร์เรย์และตั้งค่าความยาวทั้งหมดในหนึ่งบรรทัดหรือฉันต้องทำอะไรแบบนี้:

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

1. ทำไมคุณต้องการเริ่มต้นความยาว? ในทางทฤษฎีไม่มีความจำเป็นในเรื่องนี้ มันยังสามารถส่งผลให้เกิดพฤติกรรมที่ทำให้เกิดความสับสนเพราะการทดสอบทั้งหมดที่ใช้lengthเพื่อหาว่าอาร์เรย์ว่างเปล่าหรือไม่จะรายงานว่าอาร์เรย์ไม่ว่างเปล่า การทดสอบ
   บางอย่าง แสดงให้เห็นว่าการตั้งค่าความยาวเริ่มต้นของอาร์เรย์ขนาดใหญ่อาจมีประสิทธิภาพมากขึ้นถ้าอาร์เรย์เต็มหลังจากนั้น แต่ประสิทธิภาพที่เพิ่มขึ้น (ถ้ามี) ดูเหมือนจะแตกต่างจากเบราว์เซอร์ไปยังเบราว์เซอร์

2. jsLint ไม่ชอบnew Array()เพราะตัวสร้างมีความกำกวม

   new Array(4);

   สร้างอาร์เรย์ความยาวที่ว่างเปล่า4 แต่

   new Array('4');

   สร้างอาร์เรย์ที่มีค่า '4'

เกี่ยวกับความคิดเห็นของคุณ: ใน JS คุณไม่จำเป็นต้องเริ่มต้นความยาวของอาร์เรย์ มันเติบโตแบบไดนามิก คุณสามารถเก็บความยาวในตัวแปรบางตัวได้เช่น

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

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

• Array(5) ให้อาร์เรย์ที่มีความยาว 5 แต่ไม่มีค่าดังนั้นคุณจึงไม่สามารถทำซ้ำได้

• Array.apply(null, Array(5)).map(function () {}) ให้อาร์เรย์ที่มีความยาว 5 และไม่ได้กำหนดเป็นค่าตอนนี้สามารถวนซ้ำได้

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) ให้อาร์เรย์ที่มีความยาว 5 และค่า 0,1,2,3,4

• Array(5).forEach(alert)ไม่ทำอะไรเลยArray.apply(null, Array(5)).forEach(alert)ให้การแจ้งเตือน 5 ครั้ง

• ES6ให้เราArray.fromดังนั้นตอนนี้คุณสามารถใช้Array.from(Array(5)).forEach(alert)

• หากคุณต้องการที่จะเริ่มต้นกับค่าบางอย่างเหล่านี้เป็นที่ดีที่จะรู้ว่า ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  หรือArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

ด้วยES2015.fill()ตอนนี้คุณสามารถทำได้:

// `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)

ซึ่งมีความรัดกุมมากกว่านี้มาก Array.apply(0, new Array(n)).map(i => value)

มันเป็นไปได้ที่จะวาง0ในและเรียกใช้โดยไม่ขัดแย้งซึ่งจะเติมอาร์เรย์ที่มี.fill() undefined( อย่างไรก็ตามสิ่งนี้จะล้มเหลวใน typescript )

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

หรือ

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

หมายเหตุ: คุณไม่สามารถวนซ้ำช่องว่างเช่น Array(4).forEach(() => …)

หรือ

( ปลอดภัยสำหรับตัวพิมพ์ดีด )

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

หรือ

วิธีคลาสสิกโดยใช้ฟังก์ชั่น (ทำงานในเบราว์เซอร์ใด ๆ )

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]

สร้างอาร์เรย์ที่ซ้อนกัน

เมื่อสร้างอาเรย์แบบ 2 มิติด้วยการfillสังหรณ์ใจควรสร้างอินสแตนซ์ใหม่ แต่สิ่งที่เกิดขึ้นจริงคืออาร์เรย์เดียวกันจะถูกเก็บไว้เป็นข้อมูลอ้างอิง

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

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

สารละลาย

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

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

ดังนั้น 3x2 Array จะมีหน้าตาดังนี้:

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

อาร์เรย์ N-Dim

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

เริ่มต้นกระดานหมากรุก

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

ที่สั้นที่สุด:

[...Array(1000)]

ES6 แนะนำArray.fromซึ่งช่วยให้คุณสร้างวัตถุArrayจาก"อาร์เรย์เหมือน"หรือวัตถุiterablesใด ๆ :

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

ในกรณีนี้{length: 10}หมายถึงคำจำกัดความที่น้อยที่สุดของวัตถุ"คล้ายอาร์เรย์" : วัตถุว่างเปล่าที่มีเพียงlengthคุณสมบัติที่กำหนด

Array.from อนุญาตให้มีอาร์กิวเมนต์ที่สองเพื่อแมปผ่านอาร์เรย์ผลลัพธ์

สิ่งนี้จะเริ่มต้นคุณสมบัติความยาวเป็น 4:

var x = [,,,,];

ฉันประหลาดใจที่ยังไม่มีวิธีแก้ปัญหาการทำงานที่แนะนำให้คุณกำหนดความยาวในหนึ่งบรรทัด ต่อไปนี้เป็นไปตาม UnderscoreJS:

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

ด้วยเหตุผลดังกล่าวข้างต้นฉันจะหลีกเลี่ยงการทำเช่นนี้เว้นแต่ว่าฉันต้องการเริ่มต้นอาร์เรย์เป็นค่าเฉพาะ เป็นที่น่าสนใจที่จะทราบว่ามีห้องสมุดอื่น ๆ ที่ใช้ช่วง ได้แก่ Lo-dash และ Lazy ซึ่งอาจมีลักษณะการทำงานที่แตกต่างกัน

คนโปรดอย่ายอมแพ้นิสัยเก่าของคุณ มีความแตกต่างอย่างมากในความเร็วระหว่างการจัดสรรหน่วยความจำเมื่อทำงานกับรายการในอาเรย์นั้น (เหมือนเก่า) และการจัดสรรหลายครั้งเมื่ออาเรย์เติบโตขึ้น (ซึ่งเป็นสิ่งที่ระบบหลีกเลี่ยงภายใต้กระโปรงหน้ารถ .

ไม่มีเรื่องนี้แน่นอนจนกว่าคุณจะต้องการทำสิ่งที่ยอดเยี่ยมกับอาร์เรย์ที่มีขนาดใหญ่กว่า จากนั้นมันก็จะ

เนื่องจากดูเหมือนว่ายังไม่มีตัวเลือกใน JS ในขณะนี้เพื่อตั้งค่าความสามารถเริ่มต้นของอาร์เรย์ฉันใช้ต่อไปนี้ ...

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

มีการแลกเปลี่ยนที่เกี่ยวข้อง:

• วิธีนี้ใช้เวลาตราบเท่าที่คนอื่น ๆ สำหรับการโทรครั้งแรกไปยังฟังก์ชั่น แต่เวลาน้อยมากสำหรับการโทรในภายหลัง (เว้นแต่จะขออาร์เรย์ที่ใหญ่กว่า)
• standardอาร์เรย์ไม่ถาวรสำรองเป็นพื้นที่มากที่สุดเท่าที่อาร์เรย์ที่ใหญ่ที่สุดที่คุณได้ถาม

แต่ถ้ามันเหมาะกับสิ่งที่คุณทำอาจมีผลตอบแทน เวลาที่ไม่เป็นทางการทำให้

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

ที่ค่อนข้างเร็ว (ประมาณ 50ms สำหรับ 10000 ที่กำหนดโดยที่ n = 1000000 ใช้เวลาประมาณ 5 วินาที) และ

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

ที่มากกว่าหนึ่งนาที (ประมาณ 90 วินาทีสำหรับ 10000 บนคอนโซลโครเมี่ยมเดียวกันหรือช้ากว่าประมาณ 2000 เท่า) นั่นไม่เพียงเป็นการจัดสรร แต่ยังรวมถึง 10,000 pushes สำหรับ loop ฯลฯ

(นี่อาจเป็นความคิดเห็นที่ดีกว่า แต่ยาวเกินไป)

ดังนั้นหลังจากอ่านสิ่งนี้ฉันสงสัยว่าการจัดสรรล่วงหน้านั้นเร็วกว่าจริงหรือไม่เพราะในทางทฤษฎีแล้วมันควรจะเป็น แต่บล็อกนี้ให้เคล็ดลับบางอย่างให้คำปรึกษากับมันhttp://www.html5rocks.com/en/tutorials/speed/v8/

ดังนั้นจึงยังไม่แน่ใจฉันนำไปทดสอบ และดูเหมือนว่าในความเป็นจริงมันจะช้ากว่า

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

รหัสนี้ให้ผลตอบแทนต่อไปนี้หลังจากการวิ่งไม่กี่ครั้ง:

$ 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

นี่คือทางออกอื่น

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

อาร์กิวเมนต์แรกของการเป็นวัตถุนี้มีผลผูกพันซึ่งเราไม่สนใจเกี่ยวกับที่นี่เพื่อให้เราตั้งค่าให้apply()null

Array.apply(..)กำลังเรียกใช้Array(..)ฟังก์ชันและกระจาย{ length: 3 }ค่าวัตถุเป็นอาร์กิวเมนต์

ตัวสร้างอาร์เรย์มีไวยากรณ์ที่ไม่ชัดเจนและ JSLint สร้างความเจ็บปวดให้กับคุณ

นอกจากนี้ตัวอย่างรหัสของคุณเสียที่สองคำสั่งจะยกvar SyntaxErrorคุณตั้งค่าคุณสมบัติlengthของอาร์เรย์จึงไม่มีความจำเป็นอีกtestvar

เท่าที่ตัวเลือกของคุณarray.lengthเป็น "สะอาด" เท่านั้น คำถามคือทำไมคุณต้องกำหนดขนาดตั้งแต่แรก? พยายาม refactor รหัสของคุณเพื่อกำจัดการอ้างอิงนั้น

สมมติว่าความยาวของอาร์เรย์นั้นคงที่ ใน Javascript นี่คือสิ่งที่เราทำ:

const intialArray = new Array(specify the value);

ตามที่อธิบายไว้ข้างต้นการใช้งานnew Array(size)ค่อนข้างอันตราย แทนที่จะใช้โดยตรงวางไว้ใน "ฟังก์ชั่นผู้สร้างอาร์เรย์" คุณสามารถตรวจสอบได้อย่างง่ายดายว่าฟังก์ชั่นนี้ปราศจากข้อผิดพลาดและหลีกเลี่ยงอันตรายจากการโทรnew Array(size)โดยตรง นอกจากนี้คุณสามารถตั้งค่าเริ่มต้นเป็นทางเลือกได้ createArrayฟังก์ชั่นนี้ทำสิ่งนั้นอย่างแน่นอน:

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

คำตอบส่วนใหญ่จะแนะนำให้fillกับอาร์เรย์เพราะมิฉะนั้น"คุณไม่สามารถทำซ้ำมันมากกว่า"แต่นี่ไม่เป็นความจริง forEachคุณสามารถย้ำอาร์เรย์ว่างเพียงแค่ไม่ได้อยู่กับ ในขณะที่ลูปสำหรับลูปและสำหรับลูปฉันทำงานได้ดี

const count = Array(5);

ไม่ทำงาน, ไม่เป็นผล.

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

งานเหล่านี้:

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

ตรวจสอบซอนี้ด้วยตัวอย่างข้างต้น

Angulars ยัง*ngForทำงานได้ดีกับอาเรย์ที่ว่างเปล่า:

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

คุณสามารถตั้งค่าความยาวของอาเรย์โดยใช้ array.length = youValue

ดังนั้นมันจะเป็น

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

เหตุผลที่คุณไม่ควรใช้new Arrayจะถูกแสดงโดยรหัสนี้:

var Array = function () {};

var x = new Array(4);

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

บางรหัสอื่น ๆอาจยุ่งกับตัวแปร Array ฉันรู้ว่ามันไกลเกินกว่าที่ทุกคนจะเขียนโค้ดดังกล่าว แต่ยัง ...

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

หากคุณต้องการอาร์เรย์ที่มีความยาว = x เต็มไปด้วยไม่ได้กำหนด (เช่นเดียวกับnew Array(x)) คุณสามารถทำได้ดังนี้:

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

alert(myArray.length); // 4