자바스크립트의 forEach 메소드에 대한 심층적인 이해

저는 최근 JavaScript를 심도있게 공부하고 있으며 여러분과 공유할 몇 가지 지식 포인트를 요약했습니다. 이 글은 주로 자바스크립트 배열의 forEach 메소드에 대해 이야기하고 있으니, 필요하신 분들은 참고하셔서 배워보시면 좋을 것 같습니다.

forEach 메소드는 유효한 값을 포함하는 배열의 각 항목에 대해 오름차순으로 콜백 함수를 실행합니다. 삭제되었거나(daleta 메소드 등을 사용하여) 초기화되지 않은 항목은 건너뜁니다(단, 해당 항목은 제외). );
메서드는 콜백 함수를 받아들이고 콜백 함수는 현재 항목, 인덱스, 작업 배열 등 세 가지 매개 변수를 받아들입니다.

var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
  console.log(element);
});
// a
// b
// c

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

Case: for 루프가 forEach로 변환됩니다

변환 전

const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
  copy.push(items[i])
}

변환 후

const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
  copy.push(item)
});

결과는 모두

copy： ["item1", "item2", "item3"]

Case: 배열의 내용을 인쇄합니다

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
// 注意索引2被跳过了，因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[3] = 9
[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9
[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
let xxx;
// undefined
[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

forEach 순회 범위는 이전입니다. 첫 번째 콜백은 Will be Sure라고 합니다. forEach를 호출한 후 배열에 추가된 항목은 콜백에서 액세스되지 않습니다. 기존 값이 변경되면 콜백에 전달되는 값은 forEach가 이를 반복하는 순간의 값입니다. 삭제된 항목은 순회되지 않습니다. 반복 중에 방문한 요소가 삭제되면(예: Shift() 사용) 다음 요소는 건너뜁니다. 코드를 보세요

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

위 코드를 이해했는지 모르겠습니다. 두 개를 실행할 때 삭제하기 때문입니다. 그러나 배열의 첫 번째 항목은 이전 항목을 삭제한 후 원래 인덱스가 1인 항목이 0이 되고 0은 이미 실행되었으므로 실행 측에 있지 않으므로 forEach가 통과하는 범위가 있습니다. 콜백 함수가 처음 호출되기 전에 결정되며 삭제된 항목은 순회되지 않습니다.

예를 살펴보고 약간만 변경해 보겠습니다.

var words = ["one", "two", "three","", "four"];
words.forEach(function(word) {
words =  ["one", "two", "three","fix", "four"];
  console.log(word);
  if (word === "two") {
    words.shift();
 }
});
// one
// two
// three
//  
// four

인덱스가 3이면 출력 결과가 비어 있으며, 한 번 다시 할당했더라도 단어의 결과를 살펴보겠습니다.

console.log(words)
// ["one", "two", "three", "fix", "four"]

위는 다음과 같습니다. 제 요약입니다. 더 추가해 주셨으면 좋겠습니다.

위 내용은 자바스크립트의 forEach 메소드에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!