programing

JavaScript의 Zip 배열?

magicmemo 2023. 5. 16. 22:29
반응형

JavaScript의 Zip 배열?

2개의 어레이가 있습니다.

var a = [1, 2, 3]
var b = [a, b, c]

결과적으로 제가 원하는 것은 다음과 같습니다.

[[1, a], [2, b], [3, c]]

간단해 보이지만 도저히 이해할 수가 없어요.

저는 두 배열의 각 요소가 함께 압축된 하나의 배열이 결과로 되기를 원합니다.

사용map방법:

var a = [1, 2, 3]
var b = ['a', 'b', 'c']

var c = a.map(function(e, i) {
  return [e, b[i]];
});

console.log(c)

데모

길이가 같은 Zip 배열:

Array.prototype.map() 사용

const zip = (a, b) => a.map((k, i) => [k, b[i]]);

console.log(zip([1,2,3], ["a","b","c"]));
// [[1, "a"], [2, "b"], [3, "c"]]

길이가 다른 Zip 배열:

Array.from() 사용

const zip = (a, b) => Array.from(Array(Math.max(b.length, a.length)), (_, i) => [a[i], b[i]]);

console.log( zip([1,2,3], ["a","b","c","d"]) );
// [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Array.prototype.fill() 및 Array.prototype.map() 사용

const zip = (a, b) => Array(Math.max(b.length, a.length)).fill().map((_,i) => [a[i], b[i]]);

console.log(zip([1,2,3], ["a","b","c","d"]));
// [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Zip 다중(n) 어레이:

const zip = (...arr) => Array(Math.max(...arr.map(a => a.length))).fill().map((_,i) => arr.map(a => a[i]));  
console.log(zip([1,2], [3,4], [5,6])); // [[1,3,5], [2,4,6]]

제너레이터 기능을 활용한 지퍼 생성

또한 제너레이터 기능을 사용하여 다음 작업을 수행할 수 있습니다.zip().

const a = [1, 2, 3]
const b = ['a', 'b', 'c']

/**
 * Zips any number of arrays. It will always zip() the largest array returning undefined for shorter arrays.
 * @param  {...Array<any>} arrays 
 */
function* zip(...arrays){
  const maxLength = arrays.reduce((max, curIterable) => curIterable.length > max ? curIterable.length: max, 0);
  for (let i = 0; i < maxLength; i++) {
    yield arrays.map(array => array[i]);
  }
}

// put zipped result in an array
const result = [...zip(a, b)]

// or lazy generate the values
for (const [valA, valB] of zip(a, b)) {
  console.log(`${valA}: ${valB}`);  
}
.as-console-wrapper { max-height: 100% !important; top: 0; }

위의 내용은 임의의 수의 어레이에 적용되며,zip()그래서 가장 긴 배열undefined더 짧은 배열에 대한 값으로 반환됩니다.

모두의 지퍼Iterables

여기서 모든 사람에게 사용할 수 있는 기능(예: 또는 사용자 정의)Iterable), 어레이뿐만 아니라

const a = [1, 2, 3];
const b = ["a", "b", "c"];

/**
 * Zips any number of iterables. It will always zip() the largest Iterable returning undefined for shorter arrays.
 * @param  {...Iterable<any>} iterables
 */
function* zip(...iterables) {
  // get the iterator of for each iterables
  const iters = [...iterables].map((iterable) => iterable[Symbol.iterator]());
  let next = iters.map((iter) => iter.next().value);
  // as long as any of the iterables returns something, yield a value (zip longest)
  while(anyOf(next)) {
    yield next;
    next = iters.map((iter) => iter.next().value);
  }

  function anyOf(arr){
    return arr.some(v => v !== undefined);
  }
}

// put zipped result in aa array
const result = [...zip(a, new Set(b))];

// or lazy generate the values
for (const [valA, valB] of zip(a, new Set(b))) {
  console.log(`${valA}: ${valB}`);
}

분명히 그냥 사용하는 것도 가능할 것입니다.[...Iterable]어떤 것이든 변형시키기 위해.Iterable배열로 이동한 다음 첫 번째 함수를 사용합니다.

방법 사용:

const a = [1, 2, 3]
const b = ['a', 'b', 'c']

var c = a.reduce((acc, curr, ind) => {
  acc.push([curr, b[ind]]);
  return acc;
}, []);
console.log(c)

방법:

const a = [1, 2, 3]
const b = ['a', 'b', 'c']
const c = [];
a.forEach((el, ind) => {
    c.push([el, b[ind]])
});
console.log(c)

간단한 명령형 프로그래밍으로 솔루션 제공for loop.

이는 대용량 데이터 세트에서 zip 작업을 수행할 때 다음과 같은 편리한 어레이 기능에 비해 더 나은 성능을 발휘합니다.map()그리고.forEach().

예:

const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const result = [];
for (let i = 0; i < a.length; i++) {
  result.push([a[i], b[i]]);
}
console.log(result);

그리고 만약 당신이 한 줄 간단한 솔루션을 원한다면, 당신은 zip 기능이 있는 ramda와 같은 라이브러리를 사용할 수 있습니다.

예:

const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const result = R.zip(a, b);
console.log(result);

언급URL : https://stackoverflow.com/questions/22015684/zip-arrays-in-javascript

반응형