English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 기본 튜토리얼

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 튜토리얼

JavaScript 참조 매뉴얼

JavaScript 배열 메서드

JavaScript는 배열을 처리하는 데 유용한 내장 메서드가 많습니다.

원래 배열을 수정하는 메서드는mutator(변경자) 메서드。

새 값 또는 표현 형식을 반환하는메서드이라고 불리는accessor (접근자) 메서드。

배열을 문자열로 변환

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

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();
테스트를 보고‹/›

join()배열 메서드는 배열의 모든 요소를 새 문자열로 변환할 수도 있습니다.

이 메서드의 행동은 다음과 유사합니다toString()하지만, join 메서드에 구분자를 지정할 수도 있습니다.

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　");　　　//　Banana　+　Apple　+　Mango
fruits.join("　/　");　　　//　Banana　/　Apple　/　Mango
fruits.join("　©　");　　//　Banana © Apple © Mango
테스트를 보고‹/›

원래 값을 필요로 할 때, JavaScript는 자동으로 배열을 쉼표로 구분된 문자열로 변환합니다.

배열을 출력하려고 할 때마다 이런 일이 일어납니다.

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
document.getElementById("result").innerHTML = fruits;
테스트를 보고‹/›

push() 메서드 - 배열 요소 추가

push()배열 메서드는 하나나 여러 개의 새 요소를 배열의 마지막에 추가합니다.

var fruits = ["Banana", "Mango", "Apple"];
fruits.push("Strawberry");
테스트를 보고‹/›

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

다음 코드는 세 개의 요소를 배열에 추가합니다. 총 변수는 배열의 새 길이를 포함합니다：

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");
테스트를 보고‹/›

unshift()배열 메서드는 하나나 여러 개의 새 요소를 배열의 시작에 추가합니다.

var fruits = ["Banana", "Mango", "Apple"];
fruits.unshift("Strawberry");
테스트를 보고‹/›

이unshift()메서드의 역할은: 새 배열 길이를 반환하는 것입니다.

다음 코드는 세 개의 요소를 배열에 추가합니다. 총 변수는 배열의 새 길이를 포함합니다：

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");
테스트를 보고‹/›

pop() 메서드 - 배열 요소 제거

pop()메서드의 역할은: 배열의 마지막 요소를 제거하는 것입니다.

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
fruits.pop();
테스트를 보고‹/›

pop()메서드는 "제거된 (popped out)" 값을 반환합니다:

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
var　x　=　fruits.pop();
테스트를 보고‹/›

shift()배열 메서드는 배열에서 시작하는 첫 번째 요소를 제거합니다。

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
fruits.shift();
테스트를 보고‹/›

shift()메서드는 "제거된 (shifted out)" 요소를 반환합니다:

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
var　x　=　fruits.shift();
테스트를 보고‹/›

splice() 메서드 - 배열 추가 및 수정

splice()메서드는 기존 요소를 제거하고 (또는) 새로운 요소를 추가하여 배열을 변경합니다.

var　months　=　['Jan',　'Mar',　'Apr',　'Jun'];
months.splice(1,　0,　'Feb');//　adding　'Feb'　at　index　1
테스트를 보고‹/›

첫 번째 매개변수（1）은 추가할 요소를 추가할 위치를 정의합니다.

두 번째 매개변수（0）은 추가할 요소를 추가할 위치를 정의합니다。

세 번째 매개변수（'Feb'）를 추가할 새로운 요소를 정의합니다。

아래의 예제에서,4인덱스 위치에서 대체1요소:

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(4,　1,　'May');　　　//　replace　'Jun'　with　'May'　at　index　4
테스트를 보고‹/›

에서 인덱스 값3에서 제거1요소:

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(3,　1);
테스트를 보고‹/›

아래의 예제에서, 인덱스 값2제거 시작2요소:

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(2,　2);
테스트를 보고‹/›

splice()메서드는 제거된 요소를 포함한 배열을 반환합니다:

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
var　arr　=　months.splice(2,　2);
테스트를 보고‹/›

주의splice()다음과 같이slice()접근자 배열 혼란, 후자는 배열의 일부를 복사하는 접근자 배열입니다.

배열 요소 수정

할당 연산자를 사용하여 새로운 값을 할당하여 배열의 어떤 값도 덮어쓸 수 있습니다.

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[0]　=　"Monkey";
테스트를 보고‹/›

concat() 메서드 - 배열 결합

concat()배열 메서드는 두 개나 더 많은 배열을 결합하여 새로운 배열을 형성합니다.

아래의 예제에서, 두 배열을 생성하여 새로운 배열로 결합하겠습니다:

var　fruits　=　["Apple",　"Mango",　"Banana"];
var　numbers　=　[5,　10,　12,　98,　3
var　arr　=　fruits.concat(numbers);
테스트를 보고‹/›

concat()메서드는 여러 파라미터를 사용할 수 있으며, 여러 배열을 하나의 메서드로 연결하여 효과적으로 사용할 수 있습니다.

var　num1　=　[1,　2,　3
var　num2　=　[4,　5,　6
var　num3　=　[7,　8,　9
var　nums　=　num1.concat(num2,　num3);
테스트를 보고‹/›

slice() 메서드 - 배열 슬라이스

slice()배열 메서드는 배열의 일부를 새 배열에 복사합니다.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(1,　3);//　return　Mango,　Apple
테스트를 보고‹/›

첫 번째 매개변수（1）는 추출을 시작하는 위치를 정의합니다.

두 번째 매개변수（3）는 추출을 끝내는 위치를 정의합니다.

두 번째 매개변수를 생략하면 이slice()메서드는 배열의 나머지 부분을 잘라냅니다.

아래의 예제에서는 두 번째 매개변수를 사용하지 않고 요소를 추출할 것입니다:

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(1);//　return　Mango,　Apple,　Orange
테스트를 보고‹/›

아래의 예제에서는 음수 값을 사용하여 배열 요소를 추출할 것입니다:

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(-3,　-1);//　return　Mango,　Apple
테스트를 보고‹/›

배열에서 요소를 찾기

indexOf()배열 메서드는 배열에서 찾을 수 있는 지정된 요소의 첫 번째 인덱스를 반환합니다.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
fruits.indexOf('Apple');//　returns　2
테스트를 보고‹/›

주의:첫 번째 요소의 인덱스는 0입니다. 두 번째 요소의 인덱스는1그리고 계속.

주어진 매개변수가 배열에 존재하지 않는 값이면, 그것은-1。

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
fruits.indexOf('Beer');//　returns　-1
테스트를 보고‹/›

lastIndexOf()배열 메서드는 배열에서 찾을 수 있는 지정된 요소의 마지막 인덱스를 반환합니다.

indexOf()의 동일한 예제에서 테스트할 수 있습니다. 이 예제에는 두 개의 'Apple'이 포함되어 있습니다.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange',　'Apple'];
fruits.lastIndexOf('Apple');//　returns　4
테스트를 보고‹/›

주의:lastIndexOf()배열의 끝에서 시작하여 찾은 첫 번째 인덱스 번호를 반환합니다.

주어진 매개변수가 배열에 존재하지 않는 값이면, 그것은-1。

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange',　'Apple'];
fruits.lastIndexOf('Beer');//　returns　-1
테스트를 보고‹/›

fill() 메서드

fill()배열 메서드는 배열의 모든 요소를 정적 값으로 대체합니다.

var　nums　=　[1,　2,　3,　4
nums.fill(17);
테스트를 보고‹/›

배열의 모든 네 개의 요소가 동일한 값으로 대체되었습니다17。

fill()시작점과 끝점의 선택적인 매개변수를 받을 수 있습니다.

위치2위치40을 채우기 전에(불포함4）：

var　nums　=　[1,　2,　3,　4
nums.fill(0,　2,　4);
테스트를 보고‹/›

사용fill()배열의 하나나 여러 요소를 정적 값으로 대체할 수 있습니다.

배열 정렬과 배열 반전

reverse()배열 메서드는 배열 요소의 순서를 반대로 만듭니다.

var　nums　=　[10,　20,　30,　40,　50];
nums.reverse();
테스트를 보고‹/›

사용reverse()그런 다음, 마지막 요소는 첫 번째 요소가 됩니다. 첫 번째 요소는 마지막 요소가 됩니다.

sort()배열 메서드는 배열 요소의 첫 번째 문자에 따라 배열 요소를 정렬합니다. 첫 번째 문자가 같다면, 다음 행으로 이동하여 두 번째 문자를 비교하고 그렇게 계속합니다.

기본적으로sort()모든 대문자나 소문자 문자열 배열을 문자 순으로 정렬합니다.

var　months　=　['March',　'Jan',　'Feb',　'Dec'];
months.sort();
테스트를 보고‹/›

기본적으로sort()첫 번째 unicode 문자를 기반으로, 따라서 대문자 요소를 먼저 정렬하고, 그 다음 소문자를 정렬합니다.

让我们修改原始数组，以使我们的字符串之一以小写字母开头。

var　months　=　['March',　'Jan',　'Feb',　'dec'];
months.sort();
테스트를 보고‹/›

可以使用sort()方法对数字进行排序。

var　nums　=　[5,　1,　2,　7,　3,　6,　4
nums.sort();
테스트를 보고‹/›

sort()不会按大小对数字数组排序。相反，它只检查数字中的第一个字符。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort();
테스트를 보고‹/›

为了正确地对数字进行排序，您可以创建一个比较函数作为参数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(function(a,　b)　{return　a　-　b});
테스트를 보고‹/›

如果需要重复对数字进行排序，则可以创建一个单独的函数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(sortNumerically);
//　수를 크기에 따라 정렬하는 함수
var　sortNumerically　=　(a,　b)　=>　{
　　return　a　-　b;
}
테스트를 보고‹/›

완전한 배열 참조

완전한 속성과 메서드 참조에 대한 정보는 우리의JavaScript Array 배열 참조 가이드。

참조 부분에는 모든 배열 속성과 메서드의 설명과 예제가 포함되어 있습니다.

JavaScript 배열 이터레이션 메서드JavaScript Array(배열) 객체