자바 스크립트와 역순으로 배열에서 map ()을 사용하는 방법이 있습니까?


94

map()자바 스크립트 배열 에서 함수 를 사용하고 싶지만 역순으로 작동하고 싶습니다.

그 이유는 Meteor 프로젝트에서 스택 된 React 구성 요소를 렌더링하고 나머지는 아래 이미지를로드하는 동안 최상위 요소가 먼저 렌더링되기를 원하기 때문입니다.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.map(function (el, index, coll) {
    console.log(el + " ")
});

인쇄하다 a b c d e 되지만 인쇄 된 mapReverse ()가 있었으면 좋겠습니다.e d c b a

어떤 제안?


2
왜 당신 reverse은 배열 하지 않습니까?
— 존

2
요소를 정렬하기 위해 배열 인덱스로 z- 인덱스를 설정했습니다. Z- 색인을 음수로 설정할 수 있다고 가정합니다.
— Robin Newhouse 2016

좋은 생각 같네요.
— 존

참고로 실제로 map반환 되는 배열을 사용하고 있습니까? 그렇지 않으면을 고려해야 forEach합니다.
— canon

1
맵 콜백 내에서 reverse 요소에 액세스 할 수 있습니다.console.log(coll[coll.length - index - 1] + " ")
— le_m

답변:


147

원래 배열을 되돌리고 싶지 않다면 얕은 복사본을 만든 다음 반전 된 배열을 매핑 할 수 있습니다.

myArray.slice(0).reverse().map(function(...

결국 음수 색인을 사용하여 z- 색인을 지정했지만 질문을 구성하는 방식에서 이것이 가장 정확합니다.
— Robin Newhouse 2016

3
.slice (0)가 필요한 이유는 무엇입니까? myArray.slice (0) .reverse () 대신 myArray.reverse ()가 아닌 이유는 무엇입니까? 내 댓글에 대한 대답처럼 보인다는 여기에 있습니다 : stackoverflow.com/questions/5024085/...
— Haradzieniec

Haradzieniec-Z-index css 속성을 설정하기 위해 원래 순서가 필요했지만 반대로 인쇄된다는 점에서 원래 질문이 어떻게 구성되었는지에 대한 세부 사항과 함께 제공됩니다.
— AdamCooper86

은 slice(0)으로 필요하지 않은 reverse()새로운 배열을 반환하고 현재 배열을 수정하지 않습니다. @ AdamCooper86 나는 당신이 그것을 변경하기를 바랍니다.
— Fahd Lihidheb

4
@FahdLihidheb reverse()는 원래 배열을 수정합니다.
— Ferus

20

배열을 전혀 변경하지 않고 여기에 한 줄짜리 O (n) 솔루션이 있습니다.

myArray.map((val, index, array) => array[array.length - 1 - index]);

val여기에 사용되지 않으므로 이것이 OP가 찾던 것이라고 생각하지 않습니까? (여전히 좋은 솔루션입니다)
— Paul Razvan Berg

또한 map ()의 세 번째 인수는 배열 자체입니다
— Knut

19

당신이 사용할 수있는 Array.prototype.reduceRight()

var myArray = ["a", "b", "c", "d", "e"];
var res = myArray.reduceRight(function (arr, last, index, coll) {
    console.log(last, index);
    return (arr = arr.concat(last))
}, []);
console.log(res, myArray)


noice (어쨌든 감소를 수행하려는 경우)-MDN : reduceRight () 메서드는 누적 기와 배열의 각 값 (오른쪽에서 왼쪽으로)에 대해 함수를 적용하여 단일 값으로 줄입니다.
— TamusJRoyce

8

명명 된 콜백 기능 사용

const items = [1, 2, 3]; 
const reversedItems = items.map(function iterateItems(item) {
  return item; // or any logic you want to perform
}).reverse();

속기 (명명 된 콜백 함수 없음)-화살표 구문, ES6

const items = [1, 2, 3];
const reversedItems = items.map(item => item).reverse();

결과는 다음과 같습니다.

여기에 이미지 설명 입력


지도가 얕은 카피로 사용되고 있습니다
— TamusJRoyce

7

또 다른 해결책은 다음과 같습니다.

const reverseArray = (arr) => arr.map((_, idx, arr) => arr[arr.length - 1 - idx ]);

기본적으로 배열 인덱스로 작업합니다.


2
이것은 이상한 방법처럼 보이지만, 요소 외에 인덱스에 대한 액세스를 원하거나 실제로 감소를 원하지 않는 경우에는 reduceRight 접근 방식도 이상합니다. 제 경우에는 이것은 가장 깨끗한 솔루션.
— RealHandy 2010

1
맵 내에서 추가 작업을 수행해야하는 경우 arr [...]를 사용하면 두 번째 복사본이나 원래 배열을 조작 할 필요가 없습니다. 세 번째 매개 변수를 잊어 버렸습니다. 내가 찾던 것!
— TamusJRoyce

6

mapReverse 함수를 한 번 작성한 다음 사용하는 것을 선호합니다. 또한 이것은 배열을 복사 할 필요가 없습니다.

function mapReverse(array, fn) {
    return array.reduceRight(function (result, el) {
        result.push(fn(el));
        return result;
    }, []);
}

console.log(mapReverse([1, 2, 3], function (i) { return i; }))
// [ 3, 2, 1 ]
console.log(mapReverse([1, 2, 3], function (i) { return i * 2; }))
// [ 6, 4, 2 ]

1
function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I 당신은 Revers를 매핑하기 위해 배열을 전달하고 함수에서 반전 된 배열을 반환합니다. 맵 cb에서는 전달 된 배열에서 10 (길이)에서 1까지 계수하는 인덱스 값을 가져옵니다.


이 코드가 수행하는 작업에 대한 서면 설명이 도움이 될 수 있습니다.
— Pro Q

0

다음은 O (n)이고 배열을 두 번 실행하는 것을 방지하여 다른 솔루션보다 더 효율적인 TypeScript 솔루션입니다.

function reverseMap<T, O>(arg: T[], fn: (a: T) => O) {
   return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}

JavaScript에서 :

const reverseMap = (arg, fn) => arg.map((_, i, arr) => fn(arr[arr.length - 1 - i]))

// Or 

function reverseMap(arg, fn) {
    return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}

-1

myArray.reverse () 먼저 할 수 있습니다.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});

그것은 일반적으로 내 해결책이 될 것이지만 설정에서 내가 사용하는 상단 카드는 마지막 색인과 함께 배치됩니다. 더 나은 인덱싱이 문제를 해결할 수 있다고 생각합니다.
— Robin Newhouse 2016

16
참고로, 이것은 원래 배열을 뒤집어 배열의 순서를 파괴적으로 변경 함을 의미합니다.
— AdamCooper86 2016

-2

오래된 질문이지만 새로운 시청자에게는 이것이지도를 사용하여 배열을 뒤집는 가장 좋은 방법입니다.

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());

이것은 원래 배열을 수정합니다
— TamusJRoyce

아마도 당신은 의미 : [...myArray].map((_, _, arr) => arr.pop());?
— Madeo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.