JavaScript에서 배열의 길이를 초기화하는 방법은 무엇입니까?

JavaScript의 배열 ( w3schools 및 devguru 포함)에서 읽은 대부분의 자습서 는 var test = new Array(4);구문을 사용하여 Array 생성자에 정수를 전달하여 특정 길이의 배열을 초기화 할 수 있다고 제안 합니다.

내 js 파일 에서이 구문을 자유롭게 사용한 후 jsLint를 통해 파일 중 하나를 실행 했으며 놀라웠 습니다.

오류 : 1 행 문자 22에 문제가 있습니다. ')'이 예상되었지만 '4'가 표시되었습니다.
var test = new Array (4);
1 행 문자 23 문제 : 예상되는 ';' 대신 ')'를 보았습니다.
var test = new Array (4);
1 행 문자 23의 문제점 : 식별자를 예상하고 대신 ')'를 보았습니다.

jsLint의 동작에 대한 설명을 읽은 후에 는 jsLint가 실제로 new Array()구문을 좋아하지 않는 것처럼 보이고 대신 선호합니다.[] 배열을 선언 할 때 합니다.

그래서 몇 가지 질문이 있습니다.

먼저 왜? 를 사용하여 위험을 감수하고 있습니까?new Array()구문을 대신 있습니까? 알아야 할 브라우저 비 호환성이 있습니까?

둘째, 대괄호 구문으로 전환하면 배열을 선언하고 길이를 한 줄로 설정하는 방법이 있습니까? 아니면 다음과 같이해야합니다.

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

1. 왜 길이를 초기화하고 싶습니까? 이론적으로는 이것이 필요하지 않습니다. length배열 을 사용 하는지 여부를 확인하기 위해 를 사용하는 모든 테스트 에서 배열이 비어 있지 않은 것으로보고 하기 때문에 혼동 될 수 있습니다 .
   일부 테스트에 따르면 나중에 배열이 채워지면 큰 배열의 초기 길이를 설정하는 것이 더 효율적일 수 있지만 성능 향상 (있는 경우)은 브라우저마다 다릅니다.

2. new Array()생성자가 모호하기 때문에 jsLint는 마음에 들지 않습니다 .

   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 개의 경고를줍니다

• ES6Array.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)

0in 을 제거하고 .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(() => …)

또는

( typescript safe )

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

꽤 빠른 속도로 (n = 1000000이면 약 5 초가 걸리면 10000의 경우 약 50ms)

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

1 분 이상 (동일한 크롬 콘솔에서 10000의 경우 약 90 초 또는 약 2000 배 느림) 그것은 할당 일뿐 만 아니라 10000 푸시, for 루프 등입니다.

(이것은 아마도 의견으로 더 좋았지 만 너무 길었습니다.)

그래서 이것을 읽은 후에 나는 사전 할당이 실제로 더 빠르면 궁금했습니다. 이론적으로는 그렇게해야하기 때문입니다. 그러나이 블로그는 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()는 this 객체 바인딩이며 여기서는 신경 쓰지 않으므로로 설정하십시오 null.

Array.apply(..)Array(..)함수를 호출하고 { length: 3 }객체 값을 인수로 분산시킵니다 .

배열 생성자는 모호한 구문 을 가지고 있으며 JSLint는 결국 감정을 상하게합니다.

또한 예제 코드가 손상되면 두 번째 var문에서가 발생합니다 SyntaxError. length배열 의 속성 을 설정하므로 다른 속성 이 test필요하지 않습니다 var.

당신의 선택에 따라 array.length, 유일한 "깨끗한"것입니다. 질문은, 왜 먼저 크기를 설정해야합니까? 해당 종속성을 제거하기 위해 코드를 리팩터링하십시오.

Array의 길이가 일정하다고 가정합니다. 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. while 루프, for 루프 및 i 루프는 정상적으로 작동합니다.

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

다른 코드 는 배열 변수를 엉망. 나는 누군가가 그런 코드를 작성할 것이라고 조금은 알고 있지만 여전히 ...

또한 Felix King이 말했듯이 인터페이스가 약간 일치하지 않아 추적하기 어려운 버그가 발생할 수 있습니다.

길이가 x 인 배열이 정의되지 않은 채 채워진 경우 다음과 같이 new Array(x)할 수 있습니다.

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

alert(myArray.length); // 4