Javascript 배열 시리즈 이해하기 II - 배열을 만드는 대체 방법.

이 시리즈의 첫 번째 부분에서는 배열이 무엇이며 여기에서 배열을 만드는 방법에 대해 이야기했습니다.

자바스크립트 배열 이해하기 시리즈 I - 배열이란?

Nedy Udombat ・ 9월 16 '19 ・ 3분 읽기

#javascript #react #html

이 부분에서는 몇 가지 배열 메서드를 사용하여 자바스크립트에서 배열을 만드는 다른 방법에 대해 이야기하겠습니다.

바로 들어가 보겠습니다.

1. 배열.프로토타입.채우기()

.fill() 함수는 이름에서 알 수 있듯이 기본적으로 시작 인덱스(0)부터 끝 인덱스(배열의 길이)까지 지정된 값으로 채워진 배열을 반환합니다.

  const filledArray = Array(5).fill(6);
  console.log(filledArray); // [6, 6, 6, 6, 6]

.fill() 메서드는 채울 값, 채울 시작 색인 및 끝 색인의 세 가지 인수를 허용합니다.

  Array().fill(value, start, end);
  // the start and end arguments defaults to 0 when not provided


  // when 1 argument is specified, it assumes it to be the value to be filled
  const arr = Array(5).fill('nedy') // ['nedy', 'nedy', 'nedy', 'nedy', 'nedy']

  // when a second argument is provided, it assumes it to be the starting position.
  const arr2 = Array(5).fill('a', 2) // [undefined, undefined', 'a', 'a', 'a']

  // when a third argument is provided, that signifies the end position.
  const arr3 = Array(5).fill('b', 2, 4) // [undefined, undefined', 'b', 'b', undefined]

.fill() 메서드는 변형된 배열을 반환한다는 점에 유의해야 합니다. 즉, 원래 배열의 수정된 버전을 반환합니다.

2. 배열.of()

.of()는 배열 생성에 사용하는 Array() 방법과 유사합니다. 유일한 차이점은 여기에서 전달된 인수가 배열의 실제 요소로 취급된다는 것입니다.

  const arr = Array.of(7); // [7] 
  const arr1 = Array.of(7, 'nedy'); // [7, "nedy"]
  const arr2 = Array.of(7, 'nedy', 7); // [7, "nedy", 7]
  const arr3 = Array.of();  // []

  // Difference between Array() and Array.of()
  const arr4 =  Array(2) // [undefined, undefined]
  const arr5 =  Array.of(2) // [2] 

Array.of() 메서드를 "이 값x의 배열2 만들기"로 생각하면 이 값const x = Array.of(2)과 같이 작성할 수 있습니다.

3. 배열.from()

이 메서드는 배열과 같은 객체(길이 속성이 있는 객체), 반복 가능한 객체(Map 및 Set와 같은 요소를 가져올 수 있는 객체)에서 새 배열을 반환합니다. 기본적으로 "이 개체 배열.from() 만들기"입니다.

  const arr = Array.from('56'); // ["5", "6"]
  const arr1 = Array.from(56); // []
  const arr2 = Array.from('nedy'); // ["n", "e", "d", "y"]
  const arr3 = Array.from([1, 'nedy', undefined, null]); // [1, "nedy", undefined, null]
  // Array from a Set
  const set = Array.from(new Set([1, "nedy", 5])); // [1, "nedy", 5]
  // Array from a Map
  const map = Array.from(new Map([[2, 2], ['nedy', 'ned']])); //[[2, 2], ["nedy", "ned"]]

이 메서드는 배열의 각 요소에서 함수를 실행하는 맵 함수와 같은 선택적 인수를 허용합니다.

  // The map function can be written in two ways

  // 1. passing the function as an argument
  const arr1 = Array.from([1, 3, 5], elem => elem + 1); // [2, 4, 6]
  const arr2 = Array.from(Array(5), (elem, index) => index + 1); // [1, 2, 3, 4, 5]

  // 2. By method chaining.
  const arr3 = Array.from(Array(5)).map((elem, index) => index + 1); // [1, 2, 3, 4, 5]

4. 스프레드 연산자(...arg)

이 메서드는 요소를 배열로 확산하는 데 사용할 수 있습니다. Array.from() 와 유사하게 작동합니다.

  const arr = [...'nedy']; // ["n", "e", "d", "y"]

Array.from() 메서드와 마찬가지로 함수를 연결하여 결과 배열에서 맵 및 필터와 같은 함수를 수행할 수 있습니다.

  // mapping
  const arr = [...'nedy'].map(elem => elem + "o"); // ["no", "eo", "do", "yo"]

  // filtering
  const arr1 = [...'nedy'].filter(elem => elem !== "e"); // ["n", "d", "y"]

결론

배열 메서드, Array.prototype.fill() , Array.of() 및 Array.from()는 Es6 지원이 있는 브라우저에서만 작동합니다.

다음은 내가 작성한 이 어레이 시리즈의 다른 기사에 대한 링크입니다.

질문, 추가 또는 수정 사항이 있습니까? 댓글을 남겨주세요.

읽어 주셔서 감사합니다. 👍