JavaScript 배열 및 loops_javascript 기술에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 배열 및 loops_javascript 기술에 대한 자세한 설명

May 16, 2016 pm 04:02 PM

javascript 주기 정렬

배열은 요소를 순서대로 조합한 것입니다. JavaScript에서는 형식 객체 표기법을 사용하여 배열을 생성하거나 리터럴 표기법을 사용하여 초기화할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arrObject = new Array("val1", "val2"); // 객체로 배열

var arrLiteral = ["val1", "val2"]; // 배열 리터럴

개발자에게는 차이가 없습니다. 배열 메소드는 리터럴과 객체 모두에서 호출될 수 있습니다. JavaScript 엔진의 경우 배열 리터럴은 액세스될 때마다, 특히 함수 내에서 사용될 때마다 다시 해석되어야 합니다.

new 연산자를 사용하여 새 배열 개체를 만듭니다.

코드 복사 코드는 다음과 같습니다.

var arrObject = new Array();

특정 값을 사용하여 새 배열을 만들 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var arrObject = new Array("val1", "val2");

JavaScript의 배열은 0부터 인덱스가 지정됩니다. 즉, 첫 번째 요소의 인덱스는 0이고 마지막 요소는 배열 길이에서 1을 뺀 값임을 의미합니다.

1. 배열을 반복합니다

문제: 배열의 모든 요소에 쉽게 액세스하고 싶습니다.

해결책:

배열에 액세스하는 가장 일반적인 방법은 for 루프를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript">

var Animals = new Array("고양이", "개", "고래", "물개");

var AnimalString = "";

for (var i = 0; i < Animals.length - 1; i ) {

AnimalString = 동물[i] " ";

}

경고(animalString);

토론:

for 루프를 사용하여 배열의 각 요소에 액세스할 수 있습니다. 배열은 0부터 시작하고 배열 속성 길이는 루프의 끝을 설정하는 데 사용됩니다.

2. 값을 순서대로 저장하고 액세스합니다

문제: 저장된 방식대로 순차적으로 액세스할 수 있도록 값을 저장하고 싶습니다.

해결책:

수신된 순서대로 값을 저장하고 액세스하려면 FIFO(선입선출) 대기열을 생성하세요. JavaScript Array 객체의 push 메소드를 사용하여 대기열에 항목을 추가하고 Shift를 사용하여 항목을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

// 3개 항목 푸시
Queue.push("첫번째");
Queue.push("두 번째");
Queue.push("세 번째");

// 두 개의 항목 가져오기
경고(queue.shift());
경고(queue.shift());
경고(큐);

토론:

Array push 메소드는 새 배열 요소를 생성하고 이를 배열 끝에 추가합니다.

코드 복사 코드는 다음과 같습니다.

queue.push("첫번째");

요소가 푸시될 때마다 배열 요소의 수가 증가합니다.

Array Shift 메소드는 배열 앞부분에서 배열 요소를 추출하고 이를 배열에서 삭제한 후 해당 요소를 반환합니다.

코드 복사 코드는 다음과 같습니다.

var elem = queue.shift();

Shift 작업의 각 요소에 대해 Shift는 항목을 반환할 뿐만 아니라 배열을 수정하기 때문에 배열 요소가 감소합니다.

3. 값을 역순으로 저장하고 액세스합니다.

문제: 값에 역순으로 액세스하여 가장 최근에 저장된 값에 먼저 액세스하는 방식, 즉 LIFO(후입선출) 스택으로 값을 저장하고 싶습니다.

해결책:

값을 역순으로 저장하려면 LIFO 스택을 생성하세요. 스택에 항목을 추가하려면 JavaScript Array 객체의 push 메서드를 사용하고, 항목을 가져오려면 pop 메서드를 사용하세요.

코드 복사 코드는 다음과 같습니다.

// 3개 항목 푸시
stack.push("첫번째");
stack.push("두 번째");
stack.push("세번째");

// 두 개의 항목 팝업
Alert(stack.pop()); // 세 번째 항목 반환
Alert(stack.pop()); // 두 번째 항목 반환
Alert(stack); // 첫 번째 항목 반환

토론:

스택은 배열이기도 하며, 새로 추가된 각 요소는 스택의 맨 위에 있고 후입선출 순서로 얻어집니다.

Array push 메소드는 새 요소를 생성하여 배열 끝에 추가합니다.

코드 복사 코드는 다음과 같습니다.

stack.push("첫 번째");

요소가 푸시될 때마다 배열 요소 수가 증가합니다.

Array pop 메소드는 배열의 꼬리에서 배열 요소를 추출하고 이를 배열에서 제거한 후 해당 요소를 반환합니다.

코드 복사 코드는 다음과 같습니다.

var elem = stack.pop();

요소가 팝될 때마다 배열 요소 개수가 감소합니다. 팝으로 인해 배열도 수정되기 때문입니다.

4. 배열에서 검색

질문: 배열에서 특정 값을 검색하고, 발견된 경우 배열 요소의 인덱스를 가져오고 싶습니다.

해결책:

새로운(ECMAScript 5) 배열 객체 메서드 indeOf 및 lastIndexOf 사용:

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript">

var Animals = new Array("개", "고양이", "물개", "코끼리", "사자");

Alert(animals.indexOf("elephant")); // 3을 출력합니다

Alert(animals.indexOf("seal", 2)); // 2를 출력합니다

브라우저가 indexOf와 lastIndexOf를 모두 지원하는 경우도 있지만 이는 ECMAScript 5 버전에서만 공식화됩니다. 두 방법 모두 검색 값을 받아들인 다음 이를 배열의 각 요소와 비교합니다. 값이 발견되면 두 메서드 모두 배열 요소에 대한 인덱스를 반환합니다. 값이 없으면 -1이 반환됩니다. indexOf는 발견된 첫 번째 요소를 반환하고 lastIndexOf는 발견된 마지막 요소를 반환합니다.

참조:

모든 브라우저가 indexOf 및 lastindexOf를 지원하는 것은 아닙니다. 이 기능에 대한 해결 방법:

코드 복사 코드는 다음과 같습니다.

if ( from = len;
}

            for (; from < len; from ) {
                if (from this && this[from] === elt) {
                    에서 돌아옴;
                }
            }

            -1을 반환합니다.
        }
    }

5、对每个数字元素应用一个函数

　　问题：想要使用一个函数来检查一个数组值，如果满足给它，就替换它。

　　解决方案：

　　使에 사용되는 새로운 ECMAScript 5 어레이는 forEach 방식에 적합합니다.

复代码代码如下:

    //对每个数组数素应용函数
    charSets.forEach(replaceElement)
    경고(charSets); // 타출**,bb,cd,**,cc,**,dd,**

설명:

　　각 방법에 대해 接受一个参数, 这个参数是个函数.

　　参见：

　　大数浏览器道支持forEach.

复代码代码如下: <script type="text/javascript">

if (!Array.prototype.forEach) {

        Array.prototype.forEach = 함수 (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (재미 유형 != "함수") {
                새로운 TypeError()를 던져보세요.
            }

            var thisp = 인수[1];
            for (var i = 0; i                 if (i in this) {

                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }

6. 필터링된 배열 만들기

질문: 배열의 요소 값을 필터링하고 그 결과를 새 배열에 할당하고 싶습니다.

해결책:

Array 객체의 필터 메소드 사용:

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript">

함수 RemoveChars(요소, 인덱스, 배열) {

          요소 반환 !== "**";

}

var charSets = new Array("**", "bb", "cd", "**", "cc", "**", "dd", "**");

var newArray = charSets.filter(removeChars);

경고(newArray); //bb,cd,cc,dd

토론:

필터 메소드는 ECMAScript 5에 새로 추가된 메소드로 각 배열 요소에 콜백 함수를 적용합니다. 필터 메소드에 매개변수로 전달된 함수는 배열 요소 테스트 결과에 따라 true 또는 false라는 부울 값을 반환합니다. 이 반환 값은 배열 요소가 새 배열에 추가되는지 여부를 결정합니다. 함수가 true를 반환하면 추가되고 그렇지 않으면 추가되지 않습니다.

참조:

필터 방식을 지원하지 않는 브라우저의 시뮬레이션 구현:

코드 복사 코드는 다음과 같습니다.

var res = new Array();
var thisp = 인수[1];
for (var i = 0; i 만약 (내가 이 안에) {
                     var val = this[i] // fun을 배치하면 이 내용이 수정됩니다
If (fun.call(thisp, val, i, this)) {
~ ~ 발);
                 }
                }
            }

해상도 반환;
};
}

7. 배열 콘텐츠 확인

문제: 배열이 특정 조건을 충족하는지 확인하고 싶습니다.

해결책:

Array 객체의 Every 메소드를 사용하여 주어진 조건의 각 요소를 확인하세요.

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript">

함수 testValue(요소, 인덱스, 배열) {

      var re = /^[a-zA-Z] $/;

          re.test(요소) 반환;

}

var elemSet = new Array("**", 123, "abc", "-", "AAA");

경고(elemSet.every(testValue));

토론:

Array 객체의 Every 및 some 메서드는 모두 최신 ECMAScript 5 Array 메서드입니다. 차이점은 Every 메서드를 사용할 때 함수가 false 값을 반환하는 한 처리가 종료되고 메서드가 false를 반환한다는 것입니다. . some 메소드는 콜백 함수가 true를 반환할 때까지 각 배열 요소를 계속 테스트합니다. 이때 다른 요소는 더 이상 검증되지 않으며 이 메서드는 true를 반환합니다. 콜백 함수가 모든 요소를 테스트하고 언제든지 true를 반환하지 않으면 일부 메서드는 false를 반환합니다.

참조:

전부 및 일부를 지원하지 않는 브라우저의 구현 방법:

코드 복사 코드는 다음과 같습니다.

var thisp = 인수[1];
for (; i 만약 (내가 이
&& fun.call(thisp, val, i, this)) {
true를 반환합니다
}
}

false를 반환합니다.
};
}

if (!Array.prototype.every) {
         Array.prototype.every = 함수(fun/*, thisp*/) {
               var len = this.length >>>
If (재미 유형 != "함수") {
                     새로운 TypeError()를 발생시킵니다.
            }

var thisp = 인수[1];
for (var i=0; i 만약 (내가 이
&& fun.call(thisp, val, i, this)) {
거짓 반환
}
}

true를 반환합니다.
};
}

본 웹사이트의 성명

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