JavaScript에서 배열 평탄화

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 배열 평탄화
Moataz Farid 2023년10월12일
JavaScript JavScript Array
  1. concat()을 사용하여 JavaScript에서 배열 평면화
  2. Array.reduce()를 사용하여 JavaScript에서 다차원 배열을 평면화하십시오
  3. flat()을 사용하여 JavaScript에서 특정 깊이 수준으로 배열을 평면화합니다
JavaScript에서 배열 평탄화

이 튜토리얼은 JavaScript에서 배열을 평면화하는 방법을 소개합니다. 다중 깊이 수준을 지원하는concat(),reduce 및 ECMAScript 6 Arrays.flat()메서드를 사용하여 JavaScript 배열을 평면화하는 방법을 배웁니다. 또한 ECMAScript 6을 사용할 수없는 사람들을 위해 순수한 for루프로 유사한 메서드를 구현할 것입니다.

concat()을 사용하여 JavaScript에서 배열 평면화

다음 배열이 있다고 가정 해 보겠습니다.

var array1 = [['element 1'], ['element 2']];

위의 JavaScript 배열array1을 평면화하려면 하위 배열의 모든 요소가 상위 배열의 요소 여야합니다. 따라서["element 1", "element 2"]와 같습니다.

배열을 평면화하기 위해Arrays.concat()메소드를 사용할 수 있습니다.

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

출력:

["element 1", "element 2"]

Array.reduce()를 사용하여 JavaScript에서 다차원 배열을 평면화하십시오

Array.reduce()함수는 고차 함수 중 하나입니다. 인수로 실행하려면reducer 함수가 필요합니다. reduce()함수를 이해하기 위해 다음 예제를 보겠습니다.

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

출력:

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

배열을 평평하게하기 위해, 우리는 입력이 배열이 아닌 경우 입력을 연결하는reducer함수를 실행하기 위해reduce 함수를 사용할 것입니다. 그렇지 않으면 재귀 적으로 다시 줄입니다.

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

출력:

["element 1", "element 2"]

위의 예를 사용하여 둘 이상의 레벨 깊이로 구성된 배열을 평면화 할 수도 있습니다.

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

출력:

["element 1", "element 2", "element 3"]

flat()을 사용하여 JavaScript에서 특정 깊이 수준으로 배열을 평면화합니다

Array.prototype.flat()메소드는 깊이 레벨을 인수로 전달하여 레벨 깊이가 둘 이상인 배열을 평면화하는 데 사용됩니다. 정확한 깊이 수준을 모르는 경우 Infinity를 함수의 인수로 전달할 수 있습니다.

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

출력:

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]