찾다
웹 프론트엔드JS 튜토리얼JavaScript에서 일반적으로 사용되는 Array 객체 메서드 소개(코드 예제)

이 글은 자바스크립트에서 일반적으로 사용되는 Array 객체의 메소드를 소개합니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.

JS에서 배열은 특별한 객체입니다. 우리가 일반적으로 사용하는 데이터 형식입니다. 오늘은 일반적으로 사용되는 배열 방법을 정리해 보겠습니다.

1. 기본

몇 가지 기본 사항을 간략하게 소개합니다.
배열 만들기

var arr1 = new Array();  //括号可以传参,指定数组长度。目前arr1.length是0
var arr2 = new Array(3);//arr2.length是3
var arr3 = new Array(1,2,3,4);  //当传多个参数时,js会把这些参数作为数组的初始值。
console.log(arr3);  // [1,2,3,4]
# 🎜🎜#new Array() 배열을 생성할 때 주의해야 할 점이 하나 있습니다. 하나의 매개변수만 전달되는 경우 값이 숫자가 아닌 경우. 배열의 첫 번째 매개변수로 사용되어 길이가 1인 배열을 생성합니다. 숫자인 경우 해당 숫자 길이의 빈 배열이 생성됩니다.

그러나 실제로 위의 생성 방법은 일반적으로 사용되지 않습니다.

var arr = [];
var arr = [0,1,2,3]
기본 방법

arr.length  //数组的长度
arr[1] //数组下标是1的值。数组的下标从0开始计数
arr.push(值) //往数组添加元素
2.기타 방법

var arr = ["element1","element2","element3","element4"];     //下面所有案列都是用的这个数组

//获取指定元素的下标
var index = arr. indexOf(”element2“);   // 1

(1)splice(index,number, item1,....,itemX)는 배열에서 요소를 추가/제거하고 제거된 요소를 반환합니다.

매개변수설명#🎜🎜 # index번호item1, ..., itemX 실제 예제를 살펴보겠습니다
필수입니다. 정수. 항목이 추가/제거되는 위치로, 배열의 끝에서부터 위치를 지정하려면 음수를 사용하십시오.
필수입니다. 삭제할 항목 수입니다. 0으로 설정하면 항목이 삭제되지 않습니다.
선택사항. 배열에 새 항목이 추가되었습니다.
//删除
let getReturn = arr.splice(1,1);
console.log(getReturn);  // ["element2"]
console.log(arr);    //["element1",","element3","element4"]

//添加
let getReturn = arr.splice(arr.length,0,"element5","element6");
console.log(getReturn);  //[]
console.log(arr);    //["element1","element2","element3","element4","element5","element6"]

(2) pop() 메서드에서 배열의 마지막 숫자를 삭제하고 삭제된 요소를 반환합니다.

let getReturn = arr.pop();
console.log(getReturn);    //element4
console.log(arr);    //["element1","element2","element3"]

(3) Slice(start,end)는 기존 배열에서 선택한 요소를 반환합니다.

매개변수#🎜🎜 # 시작필수입니다. 정수. 항목이 추가/제거되는 위치로, 배열의 끝에서부터 위치를 지정하려면 음수를 사용하십시오. end필수입니다. 삭제할 항목 수입니다. 0으로 설정하면 항목이 삭제되지 않습니다. 참고: 이 메서드는 배열을 수정하지 않고 하위 배열을 반환합니다. 배열에서 요소의 세그먼트를 삭제하려면 Array.splice() 메서드를 사용해야 합니다.
let getReturn = arr.slice(1,3);
console.log(getReturn);    //["element2", "element3"]
console.log(arr);    //["element1", "element2", "element3", "element4"]
설명
(4) Join(separator)은 배열의 모든 요소를 ​​문자열에 넣습니다.

구분 기호: 선택 사항입니다. 사용할 구분 기호를 지정합니다. 이 매개변수를 생략하면 쉼표가 구분 기호로 사용됩니다.

let getReturn = arr.join();
console.log(getReturn);    //element1,element2,element3,element4
console.log(arr);    //["element1", "element2", "element3", "element4"]

(5) concat(array1,array2,...,arrayX) 메서드는 두 개 이상의 배열을 연결하는 데 사용됩니다.

arrayX: 필수입니다. 이 매개변수는 특정 값이거나 배열 객체일 수 있습니다. 임의의 숫자가 될 수 있습니다.

//传数组
let getReturn = arr.concat(['element5',"element6"],["element7"]);
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6", "element7"]
console.log(arr);    // ["element1", "element2", "element3", "element4"]

//传元素
let getReturn = arr.concat('element5',"element6");
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6"]
console.log(arr);    //["element1", "element2", "element3", "element4"]

(6) sort(sortby) 메서드는 배열의 요소를 정렬하는 데 사용됩니다.

sortby: 선택사항. 정렬 순서를 지정합니다. 함수여야 합니다.

반환값: 배열에 대한 참조입니다. 배열은 원래 배열에 따라 정렬되며 새 배열이 생성되지 않습니다.

비교 규칙: 문자 인코딩에 따라 정렬하므로 결과가 원하는 것과 다를 수 있습니다. 문제를 해결하려면 매개변수를 전달해야 합니다.

let newArr = [3,5,2,4,1];

let getReturn = newArr.sort();
console.log(getReturn);      //[1, 2, 3, 4, 5]
console.log(newArr);    //[1, 2, 3, 4, 5]

다음과 같지 않은 다른 예를 살펴보겠습니다. 좋아요# 🎜🎜#
let newArr = [1000,88,93,6,34];
let getReturn = newArr.sort();
console.log(getReturn);    //[1000, 34, 6, 88, 93]
console.log(newArr);    // [1000, 34, 6, 88, 93]

//要实现大小排序,我们需要传参数解决
function sortNumber(a,b){    //定义函数
    return a - b
}
let getReturn = newArr.sort();
console.log(getReturn);    //[6, 34, 88, 93, 1000]
console.log(newArr);    //[6, 34, 88, 93, 1000]

(7) Shift() 메서드는 배열의 첫 번째 요소를 삭제하고 첫 번째 요소의 값을 반환하는 데 사용됩니다.

배열이 비어 있으면 Shift() 메서드는 아무 작업도 수행하지 않고 정의되지 않은 값을 반환합니다.

  let getReturn = arr.shift();
  console.log(getReturn);    //element1
  console.log(arr);    //["element2","element3","element4"]

(8) unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

arr.unshift(newelement1,newelement2,...,newelementX)

  let getReturn = arr.unshift("element-1","element0");
  console.log(getReturn);    //6
  console.log(arr);    //["element-1","element0","element1","element2","element3","element4"]

(9) toString() 메서드는 배열을 문자열로 변환하고 다음을 반환할 수 있습니다. 결과 .

arr.unshift(newelement1,newelement2,...,newelementX)

  let getReturn = arr.toString();
  console.log(getReturn,typeof getReturn);    //element1,element2,element3,element4 string
  console.log(arr,typeof arr);    //["element1", "element2", "element3", "element4"] "object"

참고: 문자열 작업에 사용되는 경우 JavaScript는 이 메서드를 호출하여 자동으로 배열을 이동합니다. 문자열로 변환합니다. 예:

let string = arr+"123";
console.log(string);    //element1,element2,element3,element4123

(10) reverse() 메서드는 배열 요소의 순서를 바꾸는 데 사용됩니다.

이 방법은 새 배열을 만들지 않고 원래 배열을 변경합니다.

  let getReturn = arr.reverse();
  console.log(getReturn);    //["element4", "element3", "element2", "element1"]
  console.log(arr);    //["element4", "element3", "element2", "element1"]

3.

그 외에도 valueOf(), toLocaleString(), toSource() 메소드가 있습니다. 하지만 저는 사용해본 적도 없고, 사용 시나리오도 생각나지 않아서 따로 이야기하진 않겠습니다.

위 내용은 JavaScript에서 일반적으로 사용되는 Array 객체 메서드 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Java vs JavaScript : 개발자를위한 세부 비교Java vs JavaScript : 개발자를위한 세부 비교May 16, 2025 am 12:01 AM

javaandjavaScriptAredistIntLanguages ​​: javaisusedforenterpriseandmobileApps, whilejavaScriptisforInciveWebPages.1) javaiscompiled, 정적으로 정적, Andrunsonjvm.2) javaScriptISNaterPreted, doineslicallytyted, andrunsinbrowsorsornode.js.3) javausepith

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

See all articles

핫 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 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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