>웹 프론트엔드 >프런트엔드 Q&A >자바스크립트 배열은 무엇을 의미하나요?

자바스크립트 배열은 무엇을 의미하나요?

青灯夜游
青灯夜游원래의
2021-07-21 19:06:522565검색

Javascript에서 배열은 정렬된 데이터의 집합을 의미합니다. 배열의 각 구성원을 요소라고 하며, 각 요소의 이름(키)을 배열 첨자(인덱스)라고 합니다. . 읽기 및 쓰기가 가능합니다.

자바스크립트 배열은 무엇을 의미하나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 배열(Array)은 정렬된 데이터의 모음입니다. 배열의 각 구성원을 요소(Element)라고 하며, 각 요소의 이름(키)을 배열 인덱스(Index)라고 합니다. 배열의 길이는 유연하고 읽기 및 쓰기가 가능합니다.

Array 배열 개체는 JS의 내장 개체로, 변수를 사용하여 동일하거나 다른 유형의 일련의 값을 저장할 수 있으며, 저장된 각 값을 배열 요소라고 합니다.

JS 배열 생성

Array 객체를 사용하여 데이터를 저장하기 전에 Array 객체를 생성해야 합니다. Array 객체를 생성하는 방법에는 여러 가지가 있으며, 아래에는 두 가지 일반적인 방법이 나열되어 있습니다.

  • 방법 1: var 배열 개체 이름 = [요소 1, 요소 2,..., 요소 n];

  • 방법 2: var 배열 개체 이름 = new Array(요소 1, 요소 2,.. ., 요소 n) );

방법 1은 더 간단한 배열 생성 방법인 반면, 방법 2는 보다 공식적인 배열 생성 방법입니다. 두 가지 생성 방법 모두 새로 생성되고 초기화된 배열 개체를 반환합니다. 둘 다 매개변수에 지정된 값으로 배열을 초기화합니다. 요소 수(배열 길이라고도 함)는 매개변수 수입니다. 이 두 가지 방법의 효과는 일반적으로 동일하지만 방법 1이 더 간결하므로 실제 응용에서 가장 일반적으로 사용됩니다.

배열 생성 예:

var hobbies1 = ["旅游","运动","音乐"];
var hobbies2 = new Array("旅游","运动","音乐");

위의 예 코드는 3개의 요소를 포함하는 두 개의 배열 객체를 생성합니다. 둘은 완전히 동일하지만 코드의 첫 번째 줄이 더 간결합니다.

위의 두 가지 배열 생성 방법은 숫자 유형 매개변수가 하나만 있는 경우를 제외하고는 일반적으로 완전히 동일합니다. 왜냐하면 이때 첫 번째 생성 방법을 사용하면 하나의 요소만 포함하는 배열이 생성된다는 의미이고, 두 번째 생성 방법을 사용하면 해당 요소의 값이 숫자 매개 변수와 동일하다는 의미이므로; 숫자 유형 매개변수와 동일한 길이가 생성됩니다. 예:

var arr = [3]; //创建了一个只有一个元素的数组,元素值为3
var arr = new Array(3);//创建了一个有3个元素的数组,3个元素值均为undefined

JS 배열 요소 참조

배열에 저장된 각 요소에는 위치 인덱스(아래 첨자라고도 함)가 있습니다. 0이고 배열 길이 -1로 끝납니다. 즉, 첫 번째 요소의 인덱스는 0이고 마지막 요소의 인덱스는 배열 길이 - 1입니다.

배열 요소를 참조할 때 배열 이름과 아래 첨자를 사용할 수 있습니다. 참조 형식은 다음과 같습니다.

数组名[元素下标]

예: 3개의 요소를 포함하는 arr이라는 배열의 3개 요소를 각각 전달할 수 있습니다: arr[0], arr[1] 및 arr[2]를 참조하세요.

JS 배열 액세스

배열에 액세스하는 방법에는 두 가지가 있습니다.

  • 하나는 배열 이름에 직접 액세스하는 것인데, 이 경우 배열에 저장된 모든 요소 값이 반환됩니다. 예를 들어, Alert(hobbies1)는 이 명령문을 실행한 후 위에서 생성한 hobbies1 배열에 저장된 모든 요소 값이 경고 대화 상자에 출력됩니다. 여행, 스포츠, 음악

  • 두 번째, 배열을 사용합니다. 첨자를 더해 액세스하면 배열 첨자에 해당하는 배열 요소 값이 반환됩니다. 예를 들어, Alert(hobbies1[1]), 이 명령문이 실행되면 경고 대화 상자에 "Motion"이 출력됩니다.

JS는 배열을 탐색합니다(for in 및 forEach 루프)

JS 배열(루프 배열)을 탐색하는 방법에는 여러 가지가 있습니다. 전통적인 for 루프를 사용할 수도 있고 업그레이드된 for in 루프를 사용할 수도 있습니다. Array 유형의 forEach() 메서드를 사용할 수도 있습니다. 객체의 키 이름을 반복하려면key() 메서드를 사용할 수도 있습니다.

1. 배열을 탐색하려면 for 및 for in을 사용하세요.

for 및 for/in 문 모두 배열을 반복할 수 있습니다. for 문은 길이 속성과 배열 첨자를 사용하여 구현해야 하며 for/in 문에 비해 실행 효율성이 높지 않습니다. 또한 for/in 문은 빈 요소를 건너뜁니다.

매우 긴 배열의 경우 반복을 위해 for/in 문을 사용하는 것이 좋습니다.

예제 1

다음 예에서는 for 문을 사용하여 배열을 반복하고 모든 숫자 요소를 필터링합니다.

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字,则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);  //返回42,说明循环了42次
console.log(b);  //返回[1,2,4,56]

예제 2

다음 코드는 for/in 문을 사용하여 예 1의 a 배열을 반복합니다. for/in 루프 구조에서 변수 i는 배열의 첨자를 나타내고, a[i]는 지정된 첨자를 읽을 수 있는 요소 값입니다.

var b = [], num = 0;
for (var i in a) {  //遍历数组
    if(typeof a[i] == "number")  //如果为数字,则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);   //返回7,说明循环了7次
console.log(b);  //返回[1,2,4,56]

타이머에서 볼 수 있듯이 for/in 문은 배열을 반복하고 7번만 반복하는 반면 for 문은 42번 반복합니다.

2. forEach를 사용하여 배열을 탐색합니다.

Array 유형은 배열에 대한 반복 작업을 수행하는 데 사용할 수 있는 각 배열에 대한 forEach() 프로토타입 메서드를 정의합니다. 구체적인 설명은 다음과 같습니다.

array.forEach(callbackfn[, thisArg]);

매개변수 설명은 다음과 같습니다.

  • array: 배열 객체입니다.

  • callbackfn: 필수 매개변수, 최대 3개의 매개변수를 받을 수 있는 함수. forEach는 배열의 각 요소에 대해 callbackfn 함수를 한 번씩 호출합니다.

  • thisArg: 선택적 매개변수, callbackfn 함수에서 this가 참조할 수 있는 객체입니다. thisArg가 생략되면 this 값은 정의되지 않습니다.

对于数组中出现的每个元素,forEach 方法都会调用 callbackfn 函数一次,采用升序索引顺序,但不会为数组中空元素调用回调函数。

除了数组对象之外,forEach 方法还可以用于有 length 属性且具有已按数字编制索引的属性名的任何对象,如关联数组对象、Arguments 等。

回调函数语法如下:

funtion callbackfn(value, index, array);

最多可以使用三个参数来声明回调函数。回调函数的参数说明如下。

  • value:数组元素的值。

  • index:数组元素的数字索引。

  • array:包含该元素的数组对象。

forEach 方法不直接修改原始数组,但回调函数可能会修改它。

示例

下面示例使用 forEach 迭代数组 a,然后把每个元素的值和下标索引输出显示,代码如下:

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
a.forEach(f);

演示结果如下:

자바스크립트 배열은 무엇을 의미하나요?

【推荐学习:javascript高级教程

위 내용은 자바스크립트 배열은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.