Array.from() MDN의 설명입니다
정적 메서드는 반복 가능하거나 배열 과 유사한 객체 에서 **Array.from()**얕은 복사된 새 인스턴스를 만듭니다 .Array
Array.from() 의 첫번째 파라미터는 배열의 길이를 나타 냅니다.
문자열은 배열과 유사한형태의 객체이므로
Array.from("안녕하세요")
[ '안', '녕', '하', '세', '요' ]
이렇게 글자하나하나를 가진 리스트로 반환해준다
또한 임의의 숫자 리스트를 만들기위해서는 from()메소드에 두번째파라미터는 콜백함수를 사용할수있습니다.
Array.from() 메소드의 콜백 함수는 세 개의 인자를 받습니다:
- 현재 생성되는 요소의 값
- 현재 생성되는 요소의 인덱스
- 생성되는 배열 자체
길이 10개짜리 배열을 만들고싶다면
Array.from({length:10})
[ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]
from()메소드에 첫번째 파라미터은 배열과 유사한객체를 전달할떄 속성값을 length로 지정해두면 해당길이의 배열을 만듭니다
하지만 이코드는 길이는 10개인 리스트이지만 값이없기때문에 길이가 10개이나 값이 undefined 인 배열10개가 만들어집니다.
Array.from({length:10},(_,i)=>i+1)
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
Array.from()의 콜백함수의 파라미터는 위의 설명처럼
- 현재 생성되는 요소의 값 : undefined
- 현재 생성되는 요소의 인덱스 : 0부터 길이만큼시작
첫번째 파라미터를 “_” 언더바로 표시하게되면 사용하지않겠다는 자바스크릡트의 관례적인표현입니다.
요소의값을 사용하지않고 인덱스값에 +1 을 해주므로써
[1,2,3,4,5,6,7,8,9,10] 과같은 배열을 만들수있습니다.
'WEB > Javascript' 카테고리의 다른 글
자바스크립트 함수를 정의하는 방법 (0) | 2024.02.07 |
---|---|
자바스크립트 import, export, export default 사용방법 (0) | 2024.02.07 |
Fetch() 와 axios() 의 차이점. (0) | 2023.12.31 |
debounce 함수, 콜백함수를 지연시키는 방법 (0) | 2023.10.12 |
[자바스크립트] 숫자,영어,한글,특수문자 구분법 (0) | 2023.09.06 |