JavaScript에서 매핑된 구성의 배열이 작동하지 않는 이유

맵 구조의 배열이 JavaScript에서 작동하지 않는 이유

그리고 어떻게 정확하게 조작하는지

스크립트

프레젠테이션에 편리하도록 0에서 99까지의 숫자 그룹을 만들어야 한다고 가정하십시오.어떻게 할 거예요?여기에는 다음과 같은 옵션이 있습니다.

const arr = [];

for (let i = 0; i < 100; i++) {
  arr[i] = i;
}

만약 네가 나처럼 자바스크립트에서 전통적인 for 순환을 본다면 너를 좀 불편하게 할 것이다.사실 고급 함수, 예를 들어 forEach, map, filter과 reduce 때문에 나는 이미 여러 해 동안 전통적인 for순환을 작성하지 않았다.성명식 함수 프로그래밍의 승리!
아마도 너는 아직 drunk the functional programming Kool-aid 이 없을 것이다. 너는 위의 해결 방안이 매우 좋은 것 같다고 생각한다.기술적으로는 그렇지만 고급 함수의 마력을 체험한 후에는 "더 좋은 방법이 있을 거야."라고 생각할 수도 있다.
이 문제에 대한 나의 첫 번째 반응은 "알아요! 길이가 100인 공수 그룹을 만들고 색인을 모든 요소에 비추겠습니다!"JavaScript는 다음과 같이 배열 구조 함수를 사용하여 n 길이의 빈 배열을 생성할 수 있습니다.

const arr = Array(100);

완벽해, 그렇지?나는 길이가 100인 그룹을 가지고 있기 때문에, 지금은 색인을 모든 요소에 비추기만 하면 된다.

const arr = Array(100).map((_, i) => i);

console.log(arr[0] === undefined); // true

뭐야!?그룹의 첫 번째 요소는 0이어야 하지만, 실제로는 정의되지 않았습니다!

설명하다

왜 이런 상황이 발생했는지 설명하기 위해서 나는 여기서 중요한 기술 구분을 해야 한다.내부에서 JavaScript 배열은 객체이고 숫자는 키입니다.예:

['a', 'b', 'c']

본질적으로 이 객체와 같습니다.

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

그룹에 있는 색인 0의 요소에 접근할 때, 실제로는 접근 키가 0인 대상 속성일 뿐입니다.이 점은 매우 중요하다. 왜냐하면 당신이 수조를 대상으로 보고 이 고급 함수의 실현 방식을 결합할 때 (걱정하지 마세요. 제가 이 부분을 해 드렸기 때문입니다.) 우리 문제의 원인은 완전히 일리가 있기 때문이다.
그룹 구조 함수를 사용하여 새 그룹을 만들 때, 새 그룹을 만들 것입니다. 그 길이의 속성은 입력한 값으로 설정됩니다. 그렇지 않으면 진공입니다.그룹의 대상 표시에 색인 키가 없습니다.

{
  //no index keys!
  length: 100
}

인덱스 0의 배열 값에 액세스하려고 하면 정의되지 않은 값이 표시되지만, 정의되지 않은 값이 인덱스 0에 저장되는 것이 아니라 JavaScript의 기본 동작은 존재하지 않는 키의 객체 값에 액세스하려고 하면 정의되지 않은 값을 반환하는 것입니다.
고급 함수 맵,reduce,filter,forEach는 그룹 대상의 색인 키에서 0에서 길이로 교체되지만, 리셋은 대상에 키가 존재할 때만 실행됩니다.이것은 왜 우리의 리셋이 호출되지 않았는지, 그리고 우리가 수조의 맵 함수를 호출할 때 아무 일도 일어나지 않았는지 설명한다 — 색인 키가 없습니다!

솔루션

알다시피, 우리는 내부 대상이 0에서 길이까지의 모든 숫자를 포함하는 키를 표시하는 수조를 필요로 합니다.가장 좋은 방법은 spread the array 를 공수 그룹에 출력하는 것이다.

const arr = [...Array(100)].map((_, i) => i);

console.log(arr[0]);
// 0

그룹을 빈 그룹으로 확장하면 모든 인덱스에 정의되지 않은 그룹을 채울 수 있습니다.

{
  0: undefined,
  1: undefined,
  2: undefined,
  ...
  99: undefined,
  length: 100
}

확산 산자가 반사 함수보다 간단하기 때문이다.이것은 0에서 길이로 그룹 (또는iterable) 에서 순환하고, 현재 인덱스에서 확장된 그룹이 되돌아오는 값을 포함하는 새 인덱스 키를 만듭니다.자바스크립트는 모든 인덱스에서 확장된 그룹에서 정의되지 않은 값을 되돌려줍니다. (기본적으로 이 값의 인덱스 키가 없기 때문에, 이 그룹은 실제로 인덱스 키를 채웠기 때문에 비추어 줍니다. (reduce-able, filter-able, forEach-able)

결론

우리는 자바스크립트 내부에서 대상을 나타내는 몇 가지 의미를 발견했고 임의의 길이의 그룹을 만드는 가장 좋은 방법을 배웠습니다. 그룹에 필요한 값을 채웠습니다.
예전과 같이 아래에 당신의 평론, 문제와 피드백을 남겨 주십시오!
즐거운 인코딩!👍

따라와!

만약 네가 이 게시물을 좋아한다면 나를 따라와라!아니면 박수 한두 개라도 주세요.너는 박수를 좀 아낄 수 있지, 그렇지?
중: @shawn.webdev
트위터:
개발 목표:
Instagram:

내 작업 더 보기

A Quick, Practical Use Case for ES6 Generators: Building an Infinitely Repeating Array

Learn the React Context API With a Practical Example You Can Bring to Your Apps

Building a “Mask Toggle” Password Input Component w/ React and Material UI