목차
여기서는 Array.from의 두 번째 매개변수인 mapFunction이 주로 사용됩니다. 기본적으로 mapFunction은 배열의 값과 첨자라는 두 가지 매개변수를 전달합니다.
웹 프론트엔드 JS 튜토리얼 JS 배열에 대해 알아야 할 사항: Array.from

JS 배열에 대해 알아야 할 사항: Array.from

Sep 08, 2020 pm 01:21 PM
JS 배열

ㅋㅋㅋ 시간이 없어서 좋은 이름이 생각나지 않아서 보류했어요. 지난 금요일에 숙제를 하다가 댓글에서 해결책을 보았는데, Array.from을 사용하여 한 줄로 해결한다는 내용이었는데 꽤 효율적입니다. 그래서 문서와 블로그를 쭉 읽어보고, 내용을 파악한 후, 이제 이 시리즈를 시작해야겠다는 생각이 들었습니다. 또한 배열은 우리 개발에서 가장 일반적으로 사용되는 데이터 구조 중 하나입니다. 배열을 생성하는 방법 중 하나로 시작하는 것이 좋습니다. 시리즈 이름만 정하자.

JS 배열에 대해 알아야 할 사항: Array.from

기본 구문

정의: from() 메서드는
length

속성이 있는 객체 또는 반복 가능한 객체를 통해 배열을 반환하는 데 사용됩니다. 구문: ​​Array.from(object, mapFunction, thisValue)

Parameters

Description

object

필수, 배열로 변환할 개체입니다.

mapFunction이 예제를 작성할 때 저는 여전히 궁금했습니다. 맵을 배열로 변환할 수 있는 이유입니다. 그리고 객체는 빈 배열로만 변환될 수 있습니다. 초보자 튜토리얼을 보고 위의 정의를 보고 이해했습니다. 객체에는 길이도 없고 반복 가능한 객체도 없습니다. 저는 객체도 반복 가능한 객체라고 생각했습니다. 결국 for-in을 사용할 수 있습니다. 하지만 사실 es6의 객체는 반복 가능한 객체가 아닙니다. 여기서는 자세히 설명하지 않겠습니다. 관심 있는 학생들은 확인해 보세요. 2. 배열 전체 복사(코드 한 줄)
선택사항, 배열의 각 요소에 대해 호출되는 함수입니다.

thisValue

선택사항, 매핑 함수(mapFunction)의 this 개체입니다.

사용 예
1. 클래스 배열을 배열로 변환

Array.from('hello')                        //["h", "e", "l", "l", "o"]
Array.from(new Set(['name','age']))        //["name", "age"]
Array.from({name:'lgc',age:25})            //[]
let map=new Map()
map.set('name','lgc')
map.set('age',25)
Array.from(map)                            //[["name", "lgc"],["age", 25]]
function test(){
    console.log(Array.from(arguments))
}
test(1,2,3)                                //[1, 2, 3]复制代码
로그인 후 복사
function clone(arr){
    return Array.isArray(arr) ? Array.from(arr, clone):arr
}
let arrayA=[[1,2],[3,4]]
let arrayB=clone(arrayA)
arrayA===arrayB                                  //false
arrayA[0]===arrayB[0]                            //false复制代码
로그인 후 복사

여기서는 Array.from의 두 번째 매개변수인 mapFunction이 주로 사용됩니다. 기본적으로 mapFunction은 배열의 값과 첨자라는 두 가지 매개변수를 전달합니다.

  • 3. 어레이 중복 제거
function unique(arr){
    return Array.from(new Set(arr))
}复制代码
로그인 후 복사

이것은 from의 가장 기본적인 기능이자 가장 일반적으로 사용되는 기능 중 하나입니다.

4. from

의 다른 용도

from의 정의를 다시 살펴보세요. from() 메서드는 length 속성이 있는 객체나 반복 가능한 객체를 통해 배열을 반환하는 데 사용됩니다. 길이만 있나요? 한번 시도해 보세요

Array.from({length:2},(val,index)=>index)                        //[0,1]复制代码
로그인 후 복사

알겠습니다. 그런데 그게 무슨 소용이 있나요? 첫째, 위의 코드처럼 특정 범위 내에서 특정 규칙에 따라 배열을 생성하는 것은 쉽습니다

Array.from({length:3},(val,index)=>index*10)                     //[0,10,20]复制代码
로그인 후 복사

둘째, 배열의 초기화입니다. 예를 들어, 지정된 길이의 객체 배열을 생성하려고 합니다. 당신의 첫 반응은 어땠나요? 채우다?

let testArr=Array(3).fill({})
testArr[0]===testArr[1]                                         //true复制代码
로그인 후 복사
여기 있는 모든 개체는 실제로 동일합니다. 하나를 수정하면 다른 개체도 그에 따라 자연스럽게 변경되지만 우리에게 필요한 것은 그렇지 않은 경우가 많습니다.

let testArrb=Array.from({length:3},()=>({}))
testArrb[0]===testArrb[1]                                       //false复制代码
로그인 후 복사

이 두 가지 방법은 필요에 따라 사용할 수 있습니다.

5. from

의 고급 사용법 위의 내용은 실제로 다음 문제 해결 아이디어를 더 잘 이해하기 위해 점진적으로 설계되었습니다. LeetCode 질문 867:

행렬의 전치 행렬이 주어졌습니다

.

행렬의 전치란 행렬의 주대각선을 뒤집고 행렬의 행 인덱스와 열 인덱스를 교환하는 것을 의미합니다.

예 1: 입력: [[1,2,3],[4,5,6],[7,8,9]] 출력: [[1,4,7],[2,5,8] ,[3,6,9]] 예 2: 입력: [[1,2,3],[4,5,6]] 출력: [[1,4],[2,5],[3,6 ]]

당시 나의 첫 반응은 '이것이 인덱스 스왑이 아니었나요?'였습니다. 너무 간단합니다. 그래서 저는 다음과 같은 코드를 작성했습니다

var transpose = function(A) {
    let x=A.length
    let y=A[0].length
    for(let i=0;i<x;i++){
        for(let j=0;j<y;j++){
            if(j-i>0){
                [A[i][j],A[j][i]]=[A[j][i],A[i][j]]
            }
        }
    }
    return A
};复制代码
로그인 후 복사
실행 코드: 통과, 제출: 실패. 젠장? 에러 메시지를 보니 예제 2에서 "길이와 너비"가 같지 않은 상황이 무시된 것을 발견했습니다. 생각을 바꾸고 내부 및 외부 순환을 바꾸십시오. 가장 바깥쪽 루프가 실행될 때마다 하나의 열이 행으로 처리됩니다. 실행, 통과.

근데 이 버전은 너무 비싸 보이고 실행 시간도 너무 느립니다. 하지만 결국 제가 직접 구현해 봤기 때문에 댓글 영역으로 이동하시면 다른 아이디어를 찾아보실 수 있습니다.

다음은 댓글 영역에 마스터가 구현한 내용인데 처음에는 이해하지 못했습니다.

var transpose = function(A) {    return Array.from({length:A[0].length},(_v,i)=>A.map(v=>v[i]))};复制代码
로그인 후 복사
{length:A[0].length}는 "

lengthA, 返回 A 속성을 가진 객체"라는 조건을 만족시키기 위해 주어진 행렬의 너비를 전치된 행렬의 길이로 사용합니다. (_v,i)=>A.map(v=>v[i])는 주어진 행렬의 열을 전치된 행렬의 행으로 사용합니다. 핵심 아이디어는 두 번째 버전과 동일하지만 구현 방법과 기술이 너무 많습니다. 그리고 실행 시간도 짧아졌습니다. 위대한 신을 숭배하십시오.

프로그래밍 학습에 대해 더 자세히 알고 싶다면

php training

칼럼을 주목해주세요!

위 내용은 JS 배열에 대해 알아야 할 사항: Array.from의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

es6 배열에서 요소를 제거하는 방법 es6 배열에서 요소를 제거하는 방법 Jan 11, 2023 pm 03:51 PM

es6 배열에서 요소를 제거하는 방법

js에서 배열의 길이를 얻는 방법 js에서 배열의 길이를 얻는 방법 Jun 20, 2023 pm 05:33 PM

js에서 배열의 길이를 얻는 방법

자바스크립트에서 문자열을 배열로 변환하는 방법 자바스크립트에서 문자열을 배열로 변환하는 방법 Nov 23, 2022 pm 07:28 PM

자바스크립트에서 문자열을 배열로 변환하는 방법

js 배열을 PHP 배열로 변환할 수 있나요? js 배열을 PHP 배열로 변환할 수 있나요? Jun 02, 2023 am 10:06 AM

js 배열을 PHP 배열로 변환할 수 있나요?

js 배열에서 요소를 삭제하는 방법에는 여러 가지가 있습니다. js 배열에서 요소를 삭제하는 방법에는 여러 가지가 있습니다. Aug 02, 2023 am 10:09 AM

js 배열에서 요소를 삭제하는 방법에는 여러 가지가 있습니다.

JS 배열 정렬: sort() 메서드를 사용하는 방법 JS 배열 정렬: sort() 메서드를 사용하는 방법 Dec 27, 2023 pm 03:40 PM

JS 배열 정렬: sort() 메서드를 사용하는 방법

JavaScript에서 배열 요소의 길이와 합계를 찾는 방법 JavaScript에서 배열 요소의 길이와 합계를 찾는 방법 Sep 20, 2022 pm 02:11 PM

JavaScript에서 배열 요소의 길이와 합계를 찾는 방법

js 배열을 PHP 배열로 변환하는 방법 js 배열을 PHP 배열로 변환하는 방법 Mar 22, 2023 am 11:24 AM

js 배열을 PHP 배열로 변환하는 방법

See all articles