JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 배열 메소드


배열을 문자열로 변환

JavaScript 메소드 toString()는 배열을 (쉼표로 구분된) 배열 값의 문자열로 변환합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

결과:

Banana,Orange,Apple,Mango

join()메서드는 또한 모든 배열 요소를 문자열로 결합합니다.

처럼 작동 toString()하지만 추가로 구분 기호를 지정할 수 있습니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

결과:

Banana * Orange * Apple * Mango

터지고 밀기

배열로 작업할 때 요소를 제거하고 새 요소를 추가하는 것은 쉽습니다.

팝업 및 푸시는 다음과 같습니다.

배열에서 항목 을 꺼내 거나 항목 배열로 푸시합니다 .



자바스크립트 배열 pop()

pop()메서드는 배열에서 마지막 요소를 제거합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

pop()메서드는 "팝아웃"된 값을 반환합니다 .

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

자바스크립트 배열 push()

push()메서드는 배열에 새 요소를 추가합니다(끝에).

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

push()메서드는 새 배열 길이를 반환합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

이동 요소

이동은 팝핑과 동일하지만 마지막 요소 대신 첫 번째 요소에서 작업합니다.


자바스크립트 배열 shift()

shift()메서드는 첫 번째 배열 요소를 제거하고 다른 모든 요소를 ​​더 낮은 인덱스로 "이동"합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

shift()메서드는 "이동된" 값을 반환합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

자바스크립트 배열 unshift()

unshift()메서드는 배열에 새 요소를 추가하고(처음에) 이전 요소를 "이동 해제"합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

unshift()메서드는 새 배열 길이를 반환합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

요소 변경

배열 요소는 인덱스 번호 를 사용하여 액세스합니다 .

배열 인덱스 는 0으로 시작합니다.

[0]은 첫 번째 배열 요소입니다
. [1]은 두 번째 배열 요소입니다.
[2]는 세 번째...

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

자바스크립트 배열 길이

속성 은 length배열에 새 요소를 추가하는 쉬운 방법을 제공합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

자바스크립트 배열 삭제()

경고 !

배열 요소는 JavaScript 연산자를 사용하여 삭제할 수 있습니다 delete.

delete배열에 나뭇잎 undefined구멍을 사용 합니다.

대신 pop() 또는 shift()를 사용하십시오.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

배열 병합(연결)

concat()메서드는 기존 배열을 병합(연결)하여 새 배열을 만듭니다.

예(두 배열 병합)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

concat()방법은 기존 어레이를 변경하지 않습니다. 항상 새 배열을 반환합니다.

concat()메서드는 배열 인수를 원하는 만큼 사용할 수 있습니다.

예(3개의 배열 병합)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

concat()메서드는 문자열을 인수로 사용할 수도 있습니다.

예(값과 배열 병합)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

배열 스플라이싱 및 슬라이싱

splice()메서드는 배열에 새 항목을 추가합니다.

slice()메서드는 배열의 조각을 잘라냅니다.


자바스크립트 배열 splice()

splice()메서드는 배열에 새 항목을 추가하는 데 사용할 수 있습니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

첫 번째 매개변수(2)는 새 요소를 추가 (연결) 해야 하는 위치 를 정의합니다.

두 번째 매개변수(0)는 제거 해야 하는 요소의 수를 정의합니다 .

나머지 매개변수("Lemon" , "Kiwi")는 추가 할 새 요소를 정의합니다 .

splice()메서드는 삭제된 항목이 있는 배열을 반환합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

splice()를 사용하여 요소 제거

영리한 매개변수 설정을 사용 splice()하면 배열에 "구멍"을 남기지 않고 요소를 제거하는 데 사용할 수 있습니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

첫 번째 매개변수(0)는 새 요소를 추가 (연결) 해야 하는 위치를 정의합니다 .

두 번째 매개변수(1)는 제거 해야 하는 요소의 수를 정의합니다 .

나머지 매개변수는 생략됩니다. 새로운 요소는 추가되지 않습니다.


자바스크립트 배열 슬라이스()

slice()메서드는 배열의 일부를 새 배열로 잘라냅니다.

이 예는 배열 요소 1("주황색")에서 시작하는 배열의 일부를 잘라냅니다.

예시

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

메모

slice()메서드는 새 배열을 만듭니다.

slice()메서드는 소스 배열에서 요소를 제거하지 않습니다.

이 예에서는 배열 요소 3("Apple")에서 시작하는 배열의 일부를 잘라냅니다.

예시

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

slice()메서드는 와 같은 두 개의 인수를 사용할 수 있습니다 slice(1, 3).

그런 다음 메서드는 시작 인수에서 끝 인수까지(포함하지 않음) 요소를 선택합니다.

예시

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

첫 번째 예와 같이 end 인수가 생략되면 이 slice() 메서드는 배열의 나머지 부분을 잘라냅니다.

예시

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

자동 toString()

JavaScript는 기본 값이 예상되는 경우 배열을 쉼표로 구분된 문자열로 자동 변환합니다.

이것은 배열을 출력하려고 할 때 항상 그렇습니다.

이 두 가지 예는 동일한 결과를 생성합니다.

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

예시

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

메모

모든 JavaScript 객체에는 toString() 메서드가 있습니다.


배열에서 최대값과 최소값 찾기

JavaScript 배열에서 가장 높거나 낮은 값을 찾기 위한 내장 함수는 없습니다.

이 튜토리얼의 다음 장에서 이 문제를 해결하는 방법을 배우게 될 것입니다.


배열 정렬

배열 정렬은 이 튜토리얼의 다음 장에서 다룹니다.

완전한 어레이 참조

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Use the correct Array method to remove the last item of the fruits array.

const fruits = ["Banana", "Orange", "Apple"];
;