etc./StackOverFlow

JavaScript에서 2차원 배열을 만들려면 어떻게 해야 합니까?

청렴결백한 만능 재주꾼 2023. 4. 30. 00:07
반응형

질문자 :Diego


나는 온라인으로 읽었고 어떤 곳에서는 불가능하다고 말하고 어떤 곳에서는 가능하다고 말하고 예를 들어주고 다른 곳에서는 그 예를 논박하는 등입니다.

  1. JavaScript에서 2차원 배열을 어떻게 선언합니까? (가능하다는 가정하에)

  2. 멤버에 액세스하려면 어떻게 해야 합니까? ( myArray[0][1] 또는 myArray[0,1] ?)



 var items = [ [1, 2], [3, 4], [5, 6] ]; console.log(items[0][0]); // 1 console.log(items[0][1]); // 2 console.log(items[1][0]); // 3 console.log(items[1][1]); // 4 console.log(items);


Ballsacian1

배열 내의 각 항목을 배열로 만들기만 하면 됩니다.

 var x = new Array(10); for (var i = 0; i < x.length; i++) { x[i] = new Array(3); } console.log(x);


Sufian

Activa의 답변과 유사하게 n차원 배열을 생성하는 함수는 다음과 같습니다.

 function createArray(length) { var arr = new Array(length || 0), i = length; if (arguments.length > 1) { var args = Array.prototype.slice.call(arguments, 1); while(i--) arr[length-1 - i] = createArray.apply(this, args); } return arr; } createArray(); // [] or new Array() createArray(2); // new Array(2) createArray(3, 2); // [new Array(2), // new Array(2), // new Array(2)]

Matthew Crumley

빈 2차원 배열을 만드는 방법(한 줄)

 Array.from(Array(2), () => new Array(4))

2와 4는 각각 1차원과 2차원이다.

우리는 배열과 유사한 매개변수와 각 요소에 대한 선택적 매핑을 취할 수 있는 Array.from

Array.from(arrayLike[, mapFn[, thisArg]])

 var arr = Array.from(Array(2), () => new Array(4)); arr[0][0] = 'foo'; console.info(arr);

동일한 트릭을 사용하여 1...N을 포함하는 JavaScript 배열을 만들 수 있습니다.


또는 ( n = 10,000 일 때 더 비효율적인 12%)

 Array(2).fill(null).map(() => Array(4))

.map 을 실행하기 위해 초기화된 첫 번째 차원 값이 있어야 한다는 사실과 함께 옵니다. Array .fill 또는 직접 값 할당을 통해 주문할 때까지 위치를 할당하지 않습니다.

 var arr = Array(2).fill(null).map(() => Array(4)); arr[0][0] = 'foo'; console.info(arr);


후속 조치

다음은 올바른 것처럼 보이지만 문제 가 있는 방법입니다.

 Array(2).fill(Array(4)); // BAD! Rows are copied by reference

분명히 원하는 2차원 배열( [ [ <4 empty items> ], [ <4 empty items> ] ] )을 반환하지만 catch: 1차원 배열이 참조로 복사되었습니다. 즉, arr[0][0] = 'foo' 는 실제로 하나가 아닌 두 개의 행을 변경합니다.

 var arr = Array(2).fill(Array(4)); arr[0][0] = 'foo'; console.info(arr); console.info(arr[0][0], arr[1][0]);


zurfyx

Javascript에는 1차원 배열만 있지만 다른 사람들이 지적한 것처럼 배열의 배열을 만들 수 있습니다.

다음 함수를 사용하여 고정 차원의 2차원 배열을 구성할 수 있습니다.

 function Create2DArray(rows) { var arr = []; for (var i=0;i<rows;i++) { arr[i] = []; } return arr; }

열의 수는 사용하기 전에 배열의 크기를 지정할 필요가 없기 때문에 실제로 중요하지 않습니다.

그런 다음 다음과 같이 호출할 수 있습니다.

 var arr = Create2DArray(100); arr[50][2] = 5; arr[70][5] = 7454; // ...

Philippe Leybaert

가장 쉬운 방법:

 var myArray = [[]];

Fred

일부 사람들이 그것이 불가능하다고 말하는 이유는 2차원 배열이 실제로는 배열의 배열이기 때문입니다. 여기에 있는 다른 주석은 JavaScript에서 2차원 배열을 생성하는 완벽하게 유효한 방법을 제공하지만 가장 순수한 관점은 객체의 1차원 배열이 있고 이러한 각 객체는 2개의 요소로 구성된 1차원 배열이라는 것입니다.

그래서, 그것이 상충되는 관점의 원인입니다.


James Conigliaro

푸시를 사용하는 사람은 거의 없습니다.
새로운 것을 가져오기 위해 일부 값(예: 0 또는 빈 문자열 "")으로 행렬을 초기화하는 방법을 보여 드리겠습니다.
10개의 요소 배열이 있는 경우 자바스크립트에서 마지막 인덱스는 9가 됩니다!

 function matrix( rows, cols, defaultValue){ var arr = []; // Creates all lines: for(var i=0; i < rows; i++){ // Creates an empty line arr.push([]); // Adds cols to the empty line: arr[i].push( new Array(cols)); for(var j=0; j < cols; j++){ // Initializes: arr[i][j] = defaultValue; } } return arr; }

사용 예:

 x = matrix( 2 , 3,''); // 2 lines, 3 cols filled with empty string y = matrix( 10, 5, 0);// 10 lines, 5 cols filled with 0

Sergio Abreu

투 라이너:

 var a = []; while(a.push([]) < 10);

배열로 채워진 길이 10의 배열을 생성합니다. (Push는 배열에 요소를 추가하고 새 길이를 반환합니다.)


domenukk

가장 현명한 대답은

 var nrows = ~~(Math.random() * 10); var ncols = ~~(Math.random() * 10); console.log(`rows:${nrows}`); console.log(`cols:${ncols}`); var matrix = new Array(nrows).fill(0).map(row => new Array(ncols).fill(0)); console.log(matrix);


채우기가 얕은 복사 생성자를 사용하기 때문에 행을 직접 채울 수 는 없으므로 모든 행이 동일한 메모리를 공유합니다... 다음은 각 행을 공유하는 방법을 보여주는 예입니다(다른 답변에서 가져옴).

 // DON'T do this: each row in arr, is shared var arr = Array(2).fill(Array(4)); arr[0][0] = 'foo'; // also modifies arr[1][0] console.info(arr);

Francesco Dondi

가장 쉬운 방법:

 var arr = []; var arr1 = ['00','01']; var arr2 = ['10','11']; var arr3 = ['20','21']; arr.push(arr1); arr.push(arr2); arr.push(arr3); alert(arr[0][1]); // '01' alert(arr[1][1]); // '11' alert(arr[2][0]); // '20'

Chicharito

이것은 내가 달성 한 것입니다 :

 var appVar = [[]]; appVar[0][4] = "bineesh"; appVar[0][5] = "kumar"; console.log(appVar[0][4] + appVar[0][5]); console.log(appVar);

이것은 나에게 bineeshkumar를 철자했다


Bineesh

2차원 배열은 1차원 배열과 같은 방식으로 생성됩니다. array[0][1] 처럼 액세스합니다.

 var arr = [1, 2, [3, 4], 5]; alert (arr[2][1]); //alerts "4"

TJ L

성능

오늘 2020.02.05 저는 선택한 솔루션에 대해 Chrome v79.0, Safari v13.0.4 및 Firefox v72.0의 MacOs HighSierra 10.13.6에서 테스트를 수행합니다.

초기화되지 않은 2차원 배열에 대한 결론

  • 난해한 솔루션 {}/arr[[i,j]] (N)은 크고 작은 배열에 가장 빠르며 큰 희소 배열에 좋은 선택인 것 같습니다.
  • for-[]/while (A,G) 기반 솔루션은 빠르고 작은 배열에 적합합니다.
  • - for-[] (B,C)에 대한 솔루션은 빠르며 큰 배열에 적합합니다.
  • Array..map/from/fill (I,J,K,L,M) 기반 솔루션은 작은 배열의 경우 매우 느리고 큰 배열의 경우 매우 빠릅니다.
  • 놀랍게도 for-Array(n) for-[] (A)보다 사파리에서 훨씬 느립니다.
  • 놀랍게도 for- for-[] (A) 큰 배열의 경우 모든 브라우저에서 느립니다.
  • 솔루션 K는 모든 브라우저의 작은 어레이에 대해 느립니다.
  • 솔루션 A, E, G는 모든 브라우저의 큰 어레이에 대해 느립니다.
  • 솔루션 M은 모든 브라우저의 모든 어레이에서 가장 느립니다.

여기에 이미지 설명 입력

초기화된 2차원 배열에 대한 결론

  • for/while (A,B,C,D,E,G) 기반 솔루션은 모든 브라우저의 소규모 어레이에 대해 가장 빠르고/매우 빠릅니다.
  • 기반으로하는 솔루션 for (A, B, C, E)는 모든 브라우저에 큰 배열을위한 매우 빠른 / 가장 빠르다
  • Array..map/from/fill (I,J,K,L,M) 기반 솔루션은 모든 브라우저의 작은 배열에 대해 중간 정도 빠르거나 느립니다.
  • 큰 배열을 위한 솔루션 F,G,H,I,J,K,L은 크롬과 사파리에서는 중간이거나 빠르지만 파이어폭스에서는 가장 느립니다.
  • 난해한 솔루션 {}/arr[[i,j]] (N)은 모든 브라우저에서 크고 작은 배열에 대해 가장 느립니다.

여기에 이미지 설명 입력

세부

출력 배열을 채우지(초기화)하지 않는 솔루션 테스트

우리는 솔루션의 속도를 테스트합니다.

 function A(r) { var arr = []; for (var i = 0; i < r; i++) arr[i] = []; return arr; } function B(r, c) { var arr = new Array(r); for (var i = 0; i < arr.length; i++) arr[i] = new Array(c); return arr; } function C(r, c) { var arr = Array(r); for (var i = 0; i < arr.length; i++) arr[i] = Array(c); return arr; } function D(r, c) { // strange, but works var arr = []; for (var i = 0; i < r; i++) { arr.push([]); arr[i].push(Array(c)); } return arr; } function E(r, c) { let array = [[]]; for (var x = 0; x < c; x++) { array[x] = []; for (var y = 0; y < r; y++) array[x][y] = [0]; } return array; } function F(r, c) { var makeArray = function(dims, arr) { if (dims[1] === undefined) { return Array(dims[0]); } arr = Array(dims[0]); for (var i = 0; i < dims[0]; i++) { arr[i] = Array(dims[1]); arr[i] = makeArray(dims.slice(1), arr[i]); } return arr; } return makeArray([r, c]); } function G(r) { var a = []; while (a.push([]) < r); return a; } function H(r,c) { function createArray(length) { var arr = new Array(length || 0), i = length; if (arguments.length > 1) { var args = Array.prototype.slice.call(arguments, 1); while(i--) arr[length-1 - i] = createArray.apply(this, args); } return arr; } return createArray(r,c); } function I(r, c) { return [...Array(r)].map(x => Array(c)); } function J(r, c) { return Array(r).fill(0).map(() => Array(c)); } function K(r, c) { return Array.from(Array(r), () => Array(c)); } function L(r, c) { return Array.from({length: r}).map(e => Array(c)); } function M(r, c) { return Array.from({length: r}, () => Array.from({length: c}, () => {})); } function N(r, c) { return {} } // ----------------------------------------------- // SHOW // ----------------------------------------------- log = (t, f) => { let A = f(3, 4); // create array with 3 rows and 4 columns A[1][2] = 6 // 2-nd row 3nd column set to 6 console.log(`${t}[1][2]: ${A[1][2]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`); } log2 = (t, f) => { let A = f(3, 4); // create array with 3 rows and 4 columns A[[1,2]] = 6 // 2-nd row 3nd column set to 6 console.log(`${t}[1][2]: ${A[[1,2]]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`); } log('A', A); log('B', B); log('C', C); log('D', D); log('E', E); log('F', F); log('G', G); log('H', H); log('I', I); log('J', J); log('K', K); log('L', L); log('M', M); log2('N', N);
 This is presentation of solutions - not benchmark

출력 배열을 채우는(초기화) 솔루션 테스트

우리는 솔루션의 속도를 테스트합니다.

 function A(r, c, def) { var arr = []; for (var i = 0; i < r; i++) arr[i] = Array(c).fill(def); return arr; } function B(r, c, def) { var arr = new Array(r); for (var i = 0; i < arr.length; i++) arr[i] = new Array(c).fill(def); return arr; } function C(r, c, def) { var arr = Array(r); for (var i = 0; i < arr.length; i++) arr[i] = Array(c).fill(def); return arr; } function D(r, c, def) { // strange, but works var arr = []; for (var i = 0; i < r; i++) { arr.push([]); arr[i].push(Array(c)); } for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[i][j]=def return arr; } function E(r, c, def) { let array = [[]]; for (var x = 0; x < c; x++) { array[x] = []; for (var y = 0; y < r; y++) array[x][y] = def; } return array; } function F(r, c, def) { var makeArray = function(dims, arr) { if (dims[1] === undefined) { return Array(dims[0]).fill(def); } arr = Array(dims[0]); for (var i = 0; i < dims[0]; i++) { arr[i] = Array(dims[1]); arr[i] = makeArray(dims.slice(1), arr[i]); } return arr; } return makeArray([r, c]); } function G(r, c, def) { var a = []; while (a.push(Array(c).fill(def)) < r); return a; } function H(r,c, def) { function createArray(length) { var arr = new Array(length || 0), i = length; if (arguments.length > 1) { var args = Array.prototype.slice.call(arguments, 1); while(i--) arr[length-1 - i] = createArray.apply(this, args).fill(def); } return arr; } return createArray(r,c); } function I(r, c, def) { return [...Array(r)].map(x => Array(c).fill(def)); } function J(r, c, def) { return Array(r).fill(0).map(() => Array(c).fill(def)); } function K(r, c, def) { return Array.from(Array(r), () => Array(c).fill(def)); } function L(r, c, def) { return Array.from({length: r}).map(e => Array(c).fill(def)); } function M(r, c, def) { return Array.from({length: r}, () => Array.from({length: c}, () => def)); } function N(r, c, def) { let arr={}; for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[[i,j]]=def; return arr; } // ----------------------------------------------- // SHOW // ----------------------------------------------- log = (t, f) => { let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, // each array cell initilised by 7 A[800][900] = 5 // 800nd row and 901nd column set to 5 console.log(`${t}[1][2]: ${A[1][2]}, ${t}[800][901]: ${A[800][900]}`); } log2 = (t, f) => { let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, // each array cell initilised by 7 A[[800,900]] = 5 // 800nd row 900nd column set to 5 console.log(`${t}[1][2]: ${A[[1,2]]}, ${t}[800][900]: ${A[[800,900]]}`); } log('A', A); log('B', B); log('C', C); log('D', D); log('E', E); log('F', F); log('G', G); log('H', H); log('I', I); log('J', J); log('K', K); log('L', L); log('M', M); log2('N', N);
 This is presentation of solutions - not benchmark

여기에 이미지 설명 입력


Kamil Kiełczewski

누군가가 이것에 대답했는지 확실하지 않지만 이것이 저에게 꽤 효과적이라는 것을 알았습니다.

 var array = [[,],[,]]

예:

 var a = [[1,2],[3,4]]

예를 들어 2차원 배열의 경우.


Uchenna

모든 인덱스를 주소 지정할 수 있고 값이 null로 설정된 비희소 "2D" 배열(x,y)을 생성하려면:

 let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null)))

보너스 "3D" 배열(x,y,z)

 let 3Darray = new Array(x).fill(null).map(item=>(new Array(y).fill(null)).map(item=>Array(z).fill(null)))

이에 대한 변형 및 수정 사항은 이 질문에 대한 응답으로 의견과 여러 지점에서 언급되었지만 실제 답변이 아니므로 여기에 추가합니다.

(대부분의 다른 답변과 유사) 이것은 O(x*y) 시간 복잡도를 가지므로 매우 큰 배열에는 적합하지 않을 수 있습니다.


Justin Ohms

자바스크립트에서 2D 배열을 생성하려면 먼저 배열을 생성한 다음 배열을 요소로 추가할 수 있습니다. 이 메서드는 주어진 수의 행과 열을 가진 2D 배열을 반환합니다.

 function Create2DArray(rows,columns) { var x = new Array(rows); for (var i = 0; i < rows; i++) { x[i] = new Array(columns); } return x; }

Array를 생성하려면 아래와 같이 이 방법을 사용하십시오.

 var array = Create2DArray(10,20);

prime

하나의 라이너 애호가를 위해 Array.from()

 // creates 8x8 array filed with "0" const arr2d = Array.from({ length: 8 }, () => Array.from({ length: 8 }, () => "0"))

다른 하나(dmitry_romanov의 주석에서)는 Array().fill()을 사용합니다.

 // creates 8x8 array filed with "0" const arr2d = Array(8).fill(0).map(() => Array(8).fill("0"))

ES6+ 스프레드 연산자 사용(InspiredJW 답변에서 "영감")

 // same as above just a little shorter const arr2d = [...Array(8)].map(() => Array(8).fill("0"))

my-

4x6 어레이를 생성하려면 다음과 같이 하십시오.

 const x = [...new Array(6)].map(elem => new Array(4))

일반적으로 w 임의의 값을 채우는 것보다 빈 배열로 시작하는 것이 좋습니다. (일반적으로 배열을 const x = [] 로 선언하므로 2D에서 w를 공백으로 시작하는 것이 좋습니다.)


guest

Array(m).fill(v).map(() => Array(n).fill(v))

초기 값이 m 2차원 배열 mxn n 은 임의의 숫자일 v 는 임의의 값 string , number , undefined 일 수 있습니다.

한 가지 접근 방식은 var a = [m][n]


Chirag Agrawal

배열 이해 사용

JavaScript 1.7 이상에서는 배열 이해 를 사용하여 2차원 배열을 만들 수 있습니다. 또한 배열을 채우는 동안 항목을 필터링 및/또는 조작할 수 있으며 루프를 사용할 필요가 없습니다.

 var rows = [1, 2, 3]; var cols = ["a", "b", "c", "d"]; var grid = [ for (r of rows) [ for (c of cols) r+c ] ]; /* grid = [ ["1a","1b","1c","1d"], ["2a","2b","2c","2d"], ["3a","3b","3c","3d"] ] */

nxm 배열을 생성하고 다음을 호출하여 기본값으로 채울 수 있습니다.

 var default = 0; // your 2d array will be filled with this value var n_dim = 2; var m_dim = 7; var arr = [ for (n of Array(n_dim)) [ for (m of Array(m_dim) default ]] /* arr = [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], ] */

더 많은 예제와 문서는 여기 에서 찾을 수 있습니다.

이것은 아직 표준 기능이 아닙니다 .


Tim Hallyburton

내 접근 방식은 @Bineesh 답변과 매우 유사하지만 더 일반적인 접근 방식을 사용합니다.

다음과 같이 이중 배열을 선언할 수 있습니다.

 var myDoubleArray = [[]];

그리고 다음과 같은 방식으로 콘텐츠를 저장하고 접근합니다.

 var testArray1 = [9,8] var testArray2 = [3,5,7,9,10] var testArray3 = {"test":123} var index = 0; myDoubleArray[index++] = testArray1; myDoubleArray[index++] = testArray2; myDoubleArray[index++] = testArray3; console.log(myDoubleArray[0],myDoubleArray[1][3], myDoubleArray[2]['test'],)

이것은 예상 출력을 인쇄합니다

 [ 9, 8 ] 9 123

Alexander

아래에서 가장 간단한 방법을 찾았습니다.

 var array1 = [[]]; array1[0][100] = 5; alert(array1[0][100]); alert(array1.length); alert(array1[0].length);


Sam YC

런타임 에만 알려진 배열 의 행 크기는 다음 방법을 사용하여 동적 2차원 배열 을 생성하는 데 사용할 수 있습니다.

 var num = '123456'; var row = 3; // Known at run time var col = 2; // Known at run time var i = 0; var array2D = [[]]; for(var r = 0; r < row; ++r) { array2D[r] = []; for(var c = 0; c < col; ++c) { array2D[r][c] = num[i++]; } } console.log(array2D); // [[ '1', '2' ], // [ '3', '4' ], // [ '5', '6' ]] console.log(array2D[2][1]); // 6


SridharKritha

Javascript는 2차원 배열을 지원하지 않습니다. 대신 다른 배열 내부에 배열을 저장하고 액세스하려는 배열의 위치에 따라 해당 배열에서 데이터를 가져옵니다. 배열 번호는 ZERO 에서 시작한다는 것을 기억하십시오.

코드 예:

 /* Two dimensional array that's 5 x 5 C0 C1 C2 C3 C4 R0[1][1][1][1][1] R1[1][1][1][1][1] R2[1][1][1][1][1] R3[1][1][1][1][1] R4[1][1][1][1][1] */ var row0 = [1,1,1,1,1], row1 = [1,1,1,1,1], row2 = [1,1,1,1,1], row3 = [1,1,1,1,1], row4 = [1,1,1,1,1]; var table = [row0,row1,row2,row3,row4]; console.log(table[0][0]); // Get the first item in the array

Rick

 var playList = [ ['I Did It My Way', 'Frank Sinatra'], ['Respect', 'Aretha Franklin'], ['Imagine', 'John Lennon'], ['Born to Run', 'Bruce Springsteen'], ['Louie Louie', 'The Kingsmen'], ['Maybellene', 'Chuck Berry'] ]; function print(message) { document.write(message); } function printSongs( songs ) { var listHTML; listHTML = '<ol>'; for ( var i = 0; i < songs.length; i += 1) { listHTML += '<li>' + songs[i][0] + ' by ' + songs[i][1] + '</li>'; } listHTML += '</ol>'; print(listHTML); } printSongs(playList);


antelove

ES6+, ES2015+는 훨씬 더 간단한 방법으로 이 작업을 수행할 수 있습니다.


true로 채워진 3 x 2 배열 만들기

 [...Array(3)].map(item => Array(2).fill(true))

jwchang

필요에 따라 "레코드"를 추가하고 추가 처리를 위해 데이터베이스로 보내기 전에 필요한 모든 계산을 수행하고 업데이트할 수 있도록 유연한 배열 기능을 만들어야 했습니다. 다음은 코드입니다. 도움이 되기를 바랍니다. :)

 function Add2List(clmn1, clmn2, clmn3) { aColumns.push(clmn1,clmn2,clmn3); // Creates array with "record" aLine.splice(aPos, 0,aColumns); // Inserts new "record" at position aPos in main array aColumns = []; // Resets temporary array aPos++ // Increments position not to overlap previous "records" }

자유롭게 최적화하거나 버그를 지적하세요. :)


CJ Mendes

다음은 2차원 배열을 만드는 빠른 방법입니다.

 function createArray(x, y) { return Array.apply(null, Array(x)).map(e => Array(y)); }

이 기능을 ES5 기능으로 쉽게 전환할 수도 있습니다.

 function createArray(x, y) { return Array.apply(null, Array(x)).map(function(e) { return Array(y); }); }

이것이 작동하는 이유: new Array(n) Array.prototype 의 프로토타입으로 객체를 생성한 다음 객체의 length 를 할당하여 채워지지 않은 배열을 만듭니다. 실제 멤버가 없기 때문에 Array.prototype.map 함수를 실행할 수 없습니다.

Array(1, 2, 3, 4) 를 수행하는 경우와 같이 생성자에 둘 이상의 인수를 제공하면 생성자는 arguments Array 객체를 올바르게 인스턴스화하고 채웁니다.

Array.apply(null, Array(x)) 사용할 수 있습니다. 왜냐하면 apply 함수가 인수를 생성자로 분산시키기 때문입니다. 설명을 위해 Array.apply(null, Array(3)) Array(null, null, null) 을 수행하는 것과 동일합니다.

이제 실제 채워진 배열을 만들었으므로 map 호출하고 두 번째 레이어( y )를 만들기만 하면 됩니다.


dimiguel

0으로 채워진 am*n 2차원 배열을 만드는 하나의 라이너.

 new Array(m).fill(new Array(n).fill(0));

geniuscarrier

출처 : http:www.stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript

반응형