Làm cách nào để khởi tạo độ dài của một mảng trong JavaScript?

Hầu hết các hướng dẫn mà tôi đã đọc về mảng trong JavaScript (bao gồm w3schools và devguru ) đề nghị bạn có thể khởi tạo một mảng với độ dài nhất định bằng cách chuyển một số nguyên cho hàm tạo Array bằng var test = new Array(4);cú pháp.

Sau khi sử dụng cú pháp này một cách tự do trong các tệp js của tôi, tôi đã chạy một trong các tệp thông qua jsLint và nó bị lỗi:

Lỗi: Sự cố ở dòng 1 ký tự 22: Dự kiến ​​')' và thay vào đó đã thấy '4'.
kiểm tra var = mảng mới (4);
Vấn đề ở dòng 1 ký tự 23: Dự kiến ​​';' và thay vào đó đã thấy ')'.
kiểm tra var = mảng mới (4);
Sự cố ở dòng 1 ký tự 23: Dự kiến ​​một mã định danh và thay vào đó đã thấy ')'.

Sau khi đọc qua lời giải thích của jsLint về hành vi của nó , có vẻ như jsLint không thực sự thích new Array()cú pháp, và thay vào đó thích []khi khai báo mảng.

Vì vậy, tôi có một vài câu hỏi:

Đầu tiên, tại sao? Tôi có đang chạy bất kỳ rủi ro bằng cách sử dụng new Array()cú pháp thay thế? Có sự không tương thích trình duyệt mà tôi nên biết?

Và thứ hai, nếu tôi chuyển sang cú pháp dấu ngoặc vuông, có cách nào để khai báo một mảng và đặt tất cả độ dài của nó trên một dòng hay tôi phải làm một cái gì đó như thế này:

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

1. Tại sao bạn muốn khởi tạo độ dài? Về mặt lý thuyết không cần thiết cho việc này. Nó thậm chí có thể dẫn đến hành vi khó hiểu, bởi vì tất cả các thử nghiệm sử dụng lengthđể tìm hiểu xem một mảng có trống hay không sẽ báo cáo rằng mảng đó không trống.
   Một số thử nghiệm cho thấy rằng việc thiết lập độ dài ban đầu của các mảng lớn có thể hiệu quả hơn nếu mảng được lấp đầy sau đó, nhưng mức tăng hiệu suất (nếu có) dường như khác nhau giữa trình duyệt với trình duyệt.

2. jsLint không thích new Array()vì trình xây dựng không rõ ràng.

   new Array(4);

   tạo ra một mảng trống có độ dài 4. Nhưng

   new Array('4');

   tạo một mảng chứa giá trị '4' .

Về nhận xét của bạn: Trong JS, bạn không cần phải khởi tạo độ dài của mảng. Nó phát triển năng động. Bạn chỉ có thể lưu trữ độ dài trong một số biến, ví dụ:

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

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

• Array(5) cung cấp cho bạn một mảng có độ dài 5 nhưng không có giá trị, do đó bạn không thể lặp lại trên đó.

• Array.apply(null, Array(5)).map(function () {}) cung cấp cho bạn một mảng có độ dài 5 và không được xác định là giá trị, bây giờ nó có thể được lặp lại.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) cung cấp cho bạn một mảng có chiều dài 5 và các giá trị 0,1,2,3,4.

• Array(5).forEach(alert)không có gì, Array.apply(null, Array(5)).forEach(alert)cung cấp cho bạn 5 cảnh báo

• ES6cung cấp cho chúng tôi Array.fromđể bây giờ bạn cũng có thể sử dụngArray.from(Array(5)).forEach(alert)

• Nếu bạn muốn khởi tạo với một giá trị nhất định, đây là những điều tốt để biết ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  hoặcArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Với ES2015.fill() bây giờ bạn có thể chỉ cần làm:

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

Mà ngắn gọn hơn nhiều Array.apply(0, new Array(n)).map(i => value)

Có thể thả 0vào .fill()và chạy mà không cần đối số, sẽ điền vào mảng undefined. ( Tuy nhiên, điều này sẽ thất bại trong Bản in )

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

HOẶC LÀ

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

Lưu ý: bạn không thể lặp các khe trống tức là Array(4).forEach(() => …)

HOẶC LÀ

( bản đánh máy an toàn )

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

HOẶC LÀ

Phương pháp cổ điển sử dụng hàm (hoạt động trong mọi trình duyệt)

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]

Tạo mảng lồng nhau

Khi tạo một mảng 2D bằng filltrực giác sẽ tạo ra các thể hiện mới. Nhưng những gì thực sự sẽ xảy ra là cùng một mảng sẽ được lưu trữ như một tài liệu tham khảo.

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

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

Giải pháp

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

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

Vì vậy, một mảng 3x2 sẽ trông giống như thế này:

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

Mảng N chiều

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

Khởi tạo bàn cờ

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

Ngắn nhất:

[...Array(1000)]

ES6 giới thiệu Array.fromcho phép bạn tạo một Arraytừ bất kỳ "giống như mảng" đối tượng hoặc lặp lại :

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

Trong trường hợp này {length: 10} đại diện cho định nghĩa tối thiểu của một đối tượng "giống như mảng" : một đối tượng trống chỉ có một thuộc lengthtính được xác định.

Array.from cho phép đối số thứ hai để ánh xạ qua mảng kết quả.

Điều này sẽ khởi tạo thuộc tính độ dài thành 4:

var x = [,,,,];

Tôi ngạc nhiên khi không có một giải pháp chức năng nào được đề xuất cho phép bạn đặt độ dài trong một dòng. Sau đây là dựa trên UnderscoreJS:

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

Vì các lý do đã đề cập ở trên, tôi sẽ tránh làm điều này trừ khi tôi muốn khởi tạo mảng thành một giá trị cụ thể. Thật thú vị khi lưu ý rằng có những thư viện khác triển khai phạm vi bao gồm Lo-dash và Lazy, có thể có các đặc điểm hiệu suất khác nhau.

Xin mọi người đừng từ bỏ thói quen cũ của bạn. Có một sự khác biệt lớn về tốc độ giữa việc cấp phát bộ nhớ một lần sau đó làm việc với các mục trong mảng đó (như cũ) và phân bổ nó nhiều lần khi một mảng phát triển (chắc chắn là những gì hệ thống thực hiện dưới mui xe với các phương thức được đề xuất khác) .

Tất nhiên không có vấn đề này, cho đến khi bạn muốn làm một cái gì đó tuyệt vời với các mảng lớn hơn. Sau đó, nó làm.

Hiện tại dường như vẫn chưa có tùy chọn nào trong JS để đặt dung lượng ban đầu của một mảng, tôi sử dụng ...

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

Có sự đánh đổi liên quan:

• Phương thức này mất nhiều thời gian cho các cuộc gọi đầu tiên đến hàm, nhưng rất ít thời gian cho các cuộc gọi sau (trừ khi yêu cầu một mảng lớn hơn).
• Các standardmảng không vĩnh viễn dành như không gian nhiều như các mảng lớn nhất bạn đã yêu cầu.

Nhưng nếu nó phù hợp với những gì bạn đang làm thì có thể có một khoản tiền. Đặt thời gian không chính thức

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

ở tốc độ khá nhanh (khoảng 50ms cho 10000 được cho rằng với n = 1000000, mất khoảng 5 giây) và

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

trong hơn một phút (khoảng 90 giây cho 10000 trên cùng bảng điều khiển chrome hoặc chậm hơn khoảng 2000 lần). Đó sẽ không chỉ là sự phân bổ, mà còn là 10000 lần đẩy, cho vòng lặp, v.v.

(điều này có lẽ tốt hơn như một nhận xét, nhưng đã quá lâu)

Vì vậy, sau khi đọc điều này, tôi đã tò mò liệu phân bổ trước có thực sự nhanh hơn không, bởi vì về lý thuyết thì nó phải như vậy. Tuy nhiên, blog này đã đưa ra một số lời khuyên để chống lại nó http://www.html5rocks.com/en/tutorials/speed/v8/ .

Vì vậy, vẫn không chắc chắn, tôi đưa nó vào thử nghiệm. Và hóa ra nó dường như chậm hơn.

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

Mã này mang lại những điều sau đây sau một vài lần chạy ngẫu nhiên:

$ 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

Đây là một giải pháp khác

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

Đối số đầu tiên apply()là ràng buộc đối tượng này, điều mà chúng tôi không quan tâm ở đây, vì vậy chúng tôi đặt nó thành null.

Array.apply(..)đang gọi Array(..)hàm và trải ra { length: 3 }giá trị đối tượng làm đối số của nó.

Hàm tạo có một cú pháp mơ hồ và cuối cùng, JSLint chỉ làm tổn thương cảm xúc của bạn.

Ngoài ra, mã ví dụ của bạn bị hỏng, varcâu lệnh thứ hai sẽ tăng a SyntaxError. Bạn đang thiết lập thuộc tính lengthcủa mảng test, vì vậy không cần thêmvar .

Theo như lựa chọn của bạn, array.lengthlà "sạch" duy nhất. Câu hỏi là, tại sao bạn cần đặt kích thước ở vị trí đầu tiên? Cố gắng cấu trúc lại mã của bạn để thoát khỏi sự phụ thuộc đó.

Giả sử rằng độ dài của Array là không đổi. Trong Javascript, đây là những gì chúng tôi làm:

const intialArray = new Array(specify the value);

Như đã giải thích ở trên, sử dụng new Array(size)là hơi nguy hiểm. Thay vì sử dụng nó trực tiếp, hãy đặt nó bên trong một "hàm tạo mảng". Bạn có thể dễ dàng đảm bảo rằng chức năng này không có lỗi và bạn tránh được nguy hiểm khi gọi new Array(size)trực tiếp. Ngoài ra, bạn có thể cung cấp cho nó một giá trị ban đầu mặc định tùy chọn. Đây createArraychức năng thực hiện chính xác rằng:

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

Trong hầu hết các câu trả lời, nó được khuyến nghị cho fillmảng bởi vì nếu không thì "bạn không thể lặp lại nó" , nhưng điều này không đúng. Bạn có thể lặp lại một mảng trống, chỉ không với forEach. Trong khi các vòng lặp, cho các vòng lặp và cho các vòng lặp hoạt động tốt.

const count = Array(5);

Không hoạt động.

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

Những công việc này:

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

Kiểm tra câu đố này với các ví dụ trên.

Ngoài ra các góc *ngForhoạt động tốt với một mảng trống:

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

Bạn có thể đặt độ dài mảng bằng cách sử dụng array.length = youValue

Vì vậy, nó sẽ là

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

Lý do bạn không nên sử dụng new Arrayđược thể hiện bằng mã này:

var Array = function () {};

var x = new Array(4);

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

Một số mã khác có thể gây rối với biến Array. Tôi biết rằng có một chút xa vời rằng bất cứ ai cũng sẽ viết mã như vậy, nhưng vẫn ...

Ngoài ra, như Felix King đã nói, giao diện hơi không nhất quán và có thể dẫn đến một số lỗi rất khó theo dõi.

Nếu bạn muốn một mảng có length = x, được điền không xác định (như new Array(x)sẽ làm), bạn có thể làm điều này:

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

alert(myArray.length); // 4