목차
여기서는 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++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

방법: 1. 첫 번째 요소를 삭제하려면 Shift()를 사용하세요. 구문은 "array.shift()"입니다. 2. pop()을 사용하여 마지막 요소를 삭제하면 구문은 "array.pop()"입니다. 임의의 위치에서 요소를 삭제하려면 splice()를 사용하세요. 구문은 "array.splice(position, number)"입니다. 4. 마지막 N개 요소를 삭제하려면 length를 사용하세요. 구문은 "array.length=original array length-N"입니다. ; 5. 요소를 지우려면 빈 배열 "[ ]"를 직접 할당합니다. 6. 지정된 아래 첨자에서 요소를 삭제하려면 삭제를 사용합니다.

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

3가지 변환 방법: 1. 분할()을 사용하여 주어진 문자열을 문자열 배열로 분할합니다. 구문은 "str.split(구분자, 배열의 최대 길이)"입니다. 2. 확장 연산자 "..."를 사용하여 반복 가능합니다. 문자열 객체를 문자 배열로 변환합니다("[...str]" 구문). 3. Array.from()을 사용하여 문자열을 "Array.from(str) " 구문으로 배열로 변환합니다.

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

js 배열을 php 배열로 변환할 수 있습니다. 1. php 샘플 파일을 생성합니다. 2. "JSON.stringify()" 구문을 사용하여 js 배열을 JSON 형식의 문자열로 변환합니다. "json_decode()" 구문을 사용하여 "JSON 형식 문자열을 PHP 배열로 변환합니다. 여기에 매개변수 true가 추가됩니다. 이는 JSON 형식 문자열이 PHP 연관 배열로 변환됨을 의미합니다.

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

JS에서 배열의 길이를 얻는 것은 매우 간단합니다. 각 배열에는 배열의 최대 길이를 반환하는 길이 속성이 있습니다. 즉, 해당 값은 최대 첨자 값에 1을 더한 것과 같습니다. 숫자 첨자는 2^32-1보다 작아야 하므로 길이 속성의 최대값은 2^32-1과 같습니다. 다음 코드는 빈 배열을 정의한 다음 인덱스가 100인 요소에 값을 할당하고 length 속성은 101을 반환합니다. 따라서 길이 속성은 배열 요소의 실제 수를 반영할 수 없습니다.

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

js 배열에서 요소를 삭제하는 방법에는 4가지가 있습니다. 1. splice를 사용합니다. 2. 필터를 사용합니다. 3. pop 메서드를 사용하고 4. delete 키워드를 사용합니다.

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

JavaScript의 Array.prototype.sort() 메서드는 배열 요소를 정렬하는 데 사용됩니다. 이 메서드는 제자리에서 정렬됩니다. 즉, 새로 정렬된 배열을 반환하는 대신 원래 배열을 수정합니다. 기본적으로 sort() 메서드는 유니코드 코드 포인트 값에 따라 문자열을 정렬합니다. 즉, 객체나 기타 복잡한 데이터 유형을 정렬하는 대신 주로 문자열과 숫자를 정렬하는 데 사용됩니다.

js 배열에서 중복을 제거하는 방법은 무엇입니까? js 배열에서 중복을 제거하는 방법은 무엇입니까? Aug 09, 2023 pm 04:47 PM

js 배열을 중복 제거하는 방법에는 Set 사용, indexOf 사용, 포함 사용, 필터 사용 및 축소 사용이 포함됩니다. 1. 집합의 요소가 반복되지 않는다는 특징이 있는 Set을 사용합니다. 2. 배열에서 지정된 요소의 첫 번째 인덱스 위치를 반환하려면 indexOf를 사용합니다. 3. 요소가 이미 있는지 확인하려면 포함을 사용합니다. 4. 필터를 사용하여 요소를 필터링합니다. 5. 축소를 사용하여 배열의 요소를 압축합니다.

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

JavaScript에서는 길이 속성을 사용하여 배열의 길이를 얻을 수 있으며 구문은 "array object.length"입니다. 감소() 또는 감소Right() 함수를 사용하여 요소의 합계를 찾을 수 있습니다. 구문은 " arr.reduce(function f(pre,curr){ return pre+cur})" 또는 "arr.reduceRight(function f(pre,curr){return pre+cur})".

See all articles