N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

programing

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

prostudy 2022. 9. 5. 22:22

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

JavaScript에서 N개의 객체 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

어레이는 변경 가능하며 결과는 입력 어레이 중 하나에 저장할 수 있습니다.

3대 이상의 어레이를 접속하는 경우는, 편리함과 퍼포먼스를 실현하기 위해서, 를 추천합니다.

var a = [1, 2], b = ["x", "y"], c = [true, false];
var d = a.concat(b, c);
console.log(d); // [1, 2, "x", "y", true, false];

어레이만 , 2개의 를 연결하는 경우push는 어레이에 추가할 요소로 구성된 여러 인수를 받아들입니다.대신 새로운 어레이를 생성하지 않고 한 어레이의 요소를 다른 어레이의 끝에 추가할 수 있습니다.★★★★★★★★★★★★★★★★ slice()대신 사용할 수도 있습니다.concat()이렇게 하면 퍼포먼스가 향상되지 않을 것으로 생각됩니다.

var a = [1, 2], b = ["x", "y"];
a.push.apply(a, b);
console.log(a); // [1, 2, "x", "y"];

ECMAScript 2015 이후에서는 이 값을 더 줄일 수 있습니다.

a.push(...b)

(어레이의 을 (100,000명 이상)으로 것 .push이든 사용)apply()또는 ECMAScript 2015 스프레드 연산자)가 실패할 수 있습니다.이러한 어레이에서는 루프를 사용하는 것이 더 나은 방법입니다.상세한 것에 대하여는, https://stackoverflow.com/a/17368101/96100 를 참조해 주세요.

[].concat.apply([], [array1, array2, ...])

편집: 효율성 증명: http://jsperf.com/multi-array-concat/7

edit2: Tim Supinie는 코멘트에서 인터프리터가 콜스택 사이즈를 초과할 가능성이 있다고 언급하고 있습니다.이는 js 엔진에 따라 다를 수 있지만 Chrome에서는 적어도 "Maximum call stack size exceeded"라는 메시지가 나타납니다.테스트 케이스:[].concat.apply([], Array(300000).fill().map(_=>[1,2,3]))(또한 현재 받아들여지고 있는 답변에서도 같은 에러가 발생하고 있기 때문에, 그러한 사용 사례를 예상하거나 다른 사용자를 위한 라이브러리를 구축하거나, 어떤 솔루션을 선택하든 특별한 테스트가 필요할 수 있습니다.)

ES2015(ES6)를 사용하는 사용자용

이제 [구문 확산(Spread Syntax)]를 사용하여 어레이를 연결할 수 있습니다.

const arr1 = [0, 1, 2],
      arr2 = [3, 4, 5];

const result1 = [...arr1, ...arr2]; // -> [0, 1, 2, 3, 4, 5]

// or...

const result2 = [...arr2, ...arr1]; // -> [3, 4, 5, 0, 1, 2]

새로운 답변

다중 어레이 및 ES6 어레이의 경우

arr.flat();

예를 들어 다음과 같습니다.

const arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]];
const newArr = arr.flat();
// output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

이것은 노드 > 11 및 최신 브라우저로 동작합니다.

오래된 답변

(이전 노드 버전에 필요한 경우를 위해 여기에 저장):

다중 어레이 및 ES6 어레이의 경우

Array.prototype.concat(...arr);

예를 들어 다음과 같습니다.

const arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]];
const newArr = Array.prototype.concat(...arr);
// output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Array.protype.concat.apply를 사용하여 여러 어레이의 연결을 처리합니다.

var resultArray = Array.prototype.concat.apply([], arrayOfArraysToConcat);

예제:

var a1 = [1, 2, 3],
    a2 = [4, 5],
    a3 = [6, 7, 8, 9];
Array.prototype.concat.apply([], [a1, a2, a3]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

concat()메서드는 둘 이상의 어레이를 결합하는 데 사용됩니다.기존 어레이는 변경하지 않고 조인된 어레이의 복사본만 반환합니다.

array1 = array1.concat(array2, array3, array4, ..., arrayN);

맵/필터/소트 등을 통해 결과를 파이핑하는 중에 배열 배열을 조합하려면reduce

let sorted_nums = ['1,3', '4,2']
  .map(item => item.split(','))   // [['1', '3'], ['4', '2']]
  .reduce((a, b) => a.concat(b))  // ['1', '3', '4', '2']
  .sort()                         // ['1', '2', '3', '4']

이것으로, 복수의 어레이를 조합할 수 있게 되었습니다.ES6 Spread사용하는 대신concat()어레이를 연결하려면 확산 구문을 사용하여 여러 어레이를 하나의 평탄한 어레이로 결합해 보십시오.예:

var a = [1,2];
var b = [3,4];
var c = [5,6,7];
var d = [...a, ...b, ...c];
// resulting array will be like d = [1,2,3,4,5,6,7]

이렇게 풀렸어요.

let arr = [[1, 2], [3, 4], [5, 6]];
 console.log([].concat(...arr));

ES6로 단축

new Set([].concat(...Array));

이것에 의해, 복수의 어레이가 대응해, 일의가 됩니다.

let Array = [
  ['vue','babel','npm','gulp','mysql','less','laravel'],
  ['jquery','react','js','css','wordpress','html','bootstrap'],
  ['vue','babel','npm','gulp','mysql','less','laravel'],
  ['angular','cms','js','css','graphql','nodejs','php'],
  ['severless','headless','js','css','design','photoshop','php'],
]

const Boom = new Set([].concat(...Array));


// This is not necessary 
let dStr = '';
Boom.forEach(e=>{
  dStr += e + ' ';
})
document.write(dStr);

<div class="result"></div>

Push를 사용하여 어레이 병합:

const array1 = [2, 7, 4];
const array2 = [3, 5,9];
array1.push(...array2);
console.log(array1)

Concat 및 스프레드 연산자 사용:

const array1 = [1,2];
const array2 = [3,4];

// Method 1: Concat 
const combined1 = [].concat(array1, array2);

// Method 2: Spread
const combined2 = [...array1, ...array2];

console.log(combined1);
console.log(combined2);

jsperf.com 사이트를 사용하여 성능을 비교할 수 있습니다.concat에 대한 링크입니다.

다음 항목 비교 추가 비교:

var c = a.concat(b);

또, 다음과 같이 합니다.

var c = [];
for (i = 0; i < a.length; i++) {
    c.push(a[i]);
}
for (j = 0; j < b.length; j++) {
    c.push(b[j]);
}

두 번째는 크롬이 거의 10배 느리다.

콘캣 기능으로 간단하게:

var a = [1,2,3];
var b = [2,3,4];
a = a.concat(b);
>> [1,2,3,2,3,4]

여기에서는, 복수의 어레이를 접속할 수 있는 기능이 있습니다.

function concatNarrays(args) {
    args = Array.prototype.slice.call(arguments);
    var newArr = args.reduce( function(prev, next) {
       return prev.concat(next) ;
    });

    return newArr;
}

예 -

console.log(concatNarrays([1, 2, 3], [5, 2, 1, 4], [2,8,9]));

will 출력

[1,2,3,5,2,1,4,2,8,9]

배열이 있고 요소를 단일 배열로 결합하려면 다음 코드(ES2015 필요)를 사용해 보십시오.

let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = [];
for (let arr of arrOfArr) {
    newArr.push(...arr);
}

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

기능 프로그래밍에 관심이 있다면

let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = arrOfArr.reduce((result,current)=>{
    result.push(...current);
    return result;
});

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

또는 ES5 구문(확산 연산자 없음)을 사용하는 것이 더 좋습니다.

var arrOfArr = [[1,2,3,4],[5,6,7,8]];
var newArr = arrOfArr.reduce((result,current)=>{
    return result.concat(current);
});
console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

이 방법은 코드 시 어레이 수를 모르는 경우에 편리합니다.

이것을 시험해 보세요.

i=new Array("aaaa", "bbbb");
j=new Array("cccc", "dddd");

i=i.concat(j);

여기서 'n'은 몇 개의 어레이를 나타냅니다.배열일 수 있습니다.

var answer = _.disples(n, function(a, b){return a.concat(b)})}

구성할 어레이가 2개뿐이고 실제로 어레이 중 하나를 추가해야 하는 경우에는 푸시 또는 루프를 사용하는 것이 좋습니다.

벤치마크: https://jsperf.com/concat-small-arrays-vs-push-vs-loop/

N개의 어레이를 데이터베이스에서 가져와 하드코딩하지 않으면 ES6를 사용하여 이렇게 합니다.

let get_fruits = [...get_fruits , ...DBContent.fruit];

어레이에 실제로 참여하지 않고 어레이를 1개처럼 반복하는 것이 10배 빠릅니다(가능한 경우).

시험이 불공평하지 않는 한 콘카트가 푸시보다 약간 빠르다는 사실에 놀랐습니다.

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
const arr2 = ['j', 'k', 'l', 'i', 'm', 'n', 'o', 'p', 'q', 'r', 's'];
const arr3 = ['t', 'u', 'v', 'w'];
const arr4 = ['x', 'y', 'z'];

let start;

// Not joining but iterating over all arrays - fastest
// at about 0.06ms
start = performance.now()

const joined = [arr1, arr2, arr3, arr4];

for (let j = 0; j < 1000; j++) {
  let i = 0;
  while (joined.length) {
    // console.log(joined[0][i]);
    if (i < joined[0].length - 1) i++;
    else {
      joined.shift()
      i = 0;
    }
  }
}

console.log(performance.now() - start);

// Concating (0.51ms).
start = performance.now()

for (let j = 0; j < 1000; j++) {
  const a = [].concat(arr1, arr2, arr3, arr4);
}

console.log(performance.now() - start);

// Pushing on to an array (mutating). Slowest (0.77ms)
start = performance.now()

const joined2 = [arr1, arr2, arr3, arr4];

for (let j = 0; j < 1000; j++) {
  const arr = [];
  for (let i = 0; i < joined2.length; i++) {
    Array.prototype.push.apply(arr, joined2[i])
  }
}

console.log(performance.now() - start);

추상화 작업을 더 깔끔하게 진행하지 않고도 반복 작업을 2배 빠르게 수행할 수 있습니다.

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
const arr2 = ['j', 'k', 'l', 'i', 'm', 'n', 'o', 'p', 'q', 'r', 's'];
const arr3 = ['t', 'u', 'v', 'w'];
const arr4 = ['x', 'y', 'z'];

function iterateArrays(arrays, onEach) {
  let i = 0;
  while (joined.length) {
    onEach(joined[0][i]);
    if (i < joined[0].length - 1) i++;
    else {
      joined.shift();
      i = 0;
    }
  }
}

// About 0.23ms.
let start = performance.now()

const joined = [arr1, arr2, arr3, arr4];

for (let j = 0; j < 1000; j++) {
  iterateArrays(joined, item => {
    //console.log(item);
  });
}

console.log(performance.now() - start);

이것을 사용할 수 있습니다.

let array2d = [[1, 2, 3], [5, 4], [7, 8]];

let array1d = array2d.reduce((merged, block) => {
                          merged.push(...block); 
                          return merged; 
                     }, []);

console.log(array1d); // [1, 2, 3, 5, 4, 7, 8]

또는 위의 답변 중 하나에서 마음에 들었던 것이기도 합니다.

let array2d = [[1, 2, 3], [5, 4], [7, 8]];
console.log([].concat(...array2d)); // [1, 2, 3, 5, 4, 7, 8]

아니면 내가 발견한...

let array2d = [[1, 2, 3], [5, 4], [7, 8]];
console.log(array2d.join().split(',').map(Number); // [1, 2, 3, 5, 4, 7, 8]

정답은 JS 엔진에 따라 다를 수 있습니다.테스트 스위트에서 얻은 결과는 ninjagecko의 답변에 링크되어 있습니다.

[].concat.applyWindows 및 Android의 Chrome 83에서 가장 빠른 속도이며, 그 다음입니다.reduce대 56% 느림);
가 있는 「」concat의 Safari 13 Safari 13 mac 、 음음음음 、 음음음음음음 。reduce13% 느림);
reduce의 Safari 그 Safari 12의 iOS가 있습니다.concat40% 느림);
push의 Firefox , 의 Firefox 70 이 그 를 잇습니다.[].concat.apply(30 % ★★★★★★★★★★★★★)

이 블로그에서는 push()와 concat()의 퍼포먼스를 비교했습니다.또한 특정 시나리오에서 더 나은 성능을 발휘하는 커스텀 기능이 만들어집니다.

https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki

언급URL : https://stackoverflow.com/questions/5080028/what-is-the-most-efficient-way-to-concatenate-n-arrays

저작자표시 (새창열림)

'programing' 카테고리의 다른 글

VUE.JS - vNode 인수를 사용하여 알 수 없는 수량의 항목을 동적 탐색에 추가 (0)	2022.09.05
Node.js 디렉토리에 있는 모든 파일 이름 목록을 가져오려면 어떻게 해야 합니까? (0)	2022.09.05
JavaScript에서 선두에 0이 있는 숫자를 출력하려면 어떻게 해야 합니까? (0)	2022.09.05
MySQL GUI 도구를 사용하여 필드를 NULL로 만드는 방법 (0)	2022.09.05
정적 콘텐츠 서비스용 서블릿 (0)	2022.09.05

현재글N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

python-3, TypeScript, react-router, Reactjs, 공연, Rxjs, react-native, java, vuetify, vue-component, react-redux, C, react-hooks, vuex, VUE, 전시, Python, vuejs2, python-2, Vue-Router,

Today :
Yesterday :

prostudy

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

ES2015(ES6)를 사용하는 사용자용

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

N개의 어레이를 연결하는 가장 효율적인 방법은 무엇입니까?

ES2015(ES6)를 사용하는 사용자용

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바