Як ініціалізувати довжину масиву в 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]

Створення вкладених масивів

При створенні 2D масиву 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(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

N-мірний масив

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будь-які "масиви" або ітерабельні об'єкти:

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

з досить швидкою швидкістю (приблизно 50 мс для 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 разів повільніше). Це буде не лише розподіл, а й 10000 натискань для циклу тощо.

(це, мабуть, було краще як коментар, але вийшло занадто довго)

Отже, прочитавши це, мені було цікаво, чи попереднє виділення насправді було швидшим, бо теоретично це повинно бути. Однак цей блог дав кілька порад, що радили проти нього 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твердження підніме a SyntaxError. Ви встановлюєте властивість lengthмасиву test, тому немає потреби в іншому var.

Що стосується ваших варіантів, array.lengthце єдиний «чистий». Питання полягає в тому, навіщо вам в першу чергу встановлювати розмір? Спробуйте перефактурувати свій код, щоб позбутися цієї залежності.

Якщо припустити, що довжина масиву є постійною. У 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++; 
}

Перевірте цю загадку з наведеними вище прикладами.

Також куточки *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