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

ㅋㅋㅋ 시간이 없어서 좋은 이름이 생각나지 않아서 보류했어요. 지난 금요일에 숙제를 하다가 댓글에서 해결책을 보았는데, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!