찾다

집  >  기사  >  웹 프론트엔드  >  es6의 for와 foreach의 차이점은 무엇입니까?

es6의 for와 foreach의 차이점은 무엇입니까?

青灯夜游
青灯夜游원래의
2022-10-21 17:32:541536검색

차이점: 1. forEach는 반복 가능한 객체 순회(Array Set Map)를 담당하는 반복자이고, for는 배열만 순회할 수 있는 루프 메커니즘입니다. 2. for 루프에는 일부 인터럽트 동작이 사용되는데 이는 배열 순회 및 검색을 최적화하는 데 좋습니다. 그러나 forEach는 반복자이고 순서대로만 순회할 수 있으므로 인터럽트 동작을 지원하지 않습니다. 3. forEach 루프의 시작점은 0만 가능하며 사람의 개입이 불가능합니다. for 루프와 달리 루프의 시작점은 수동으로 제어할 수 있습니다.

es6의 for와 foreach의 차이점은 무엇입니까?

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

for 루프와 forEach

for 루프의 본질적인 차이점은 js가 제안되었을 때부터 있었던 루프 방식입니다. for循环是js提出时就有的循环方法。

forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。

forEach是一个迭代器，负责遍历可迭代对象。

那么遍历，迭代，可迭代对象分别是什么呢。

  • 遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

  • 迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。

  • 可迭代对象：ES6中引入了 iterable 类型，Array Set Map String arguments NodeList 都属于 iterable，他们特点就是都拥有 [Symbol.iterator] 方法，包含他的对象被认为是可迭代的 iterable。

forEach 其实是一个迭代器，他与 for 循环本质上的区别是 forEach 是负责遍历（Array Set Map）可迭代对象的，而 for 循环是一种循环机制，只是能通过它遍历出数组。

什么是迭代器，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值。

迭代器是一种特殊对象。ES6规范中它的标志是返回对象的 next() 方法，迭代行为判断在 done 之中。在不暴露内部表示的情况下，迭代器实现了遍历。看代码

let arr = [1, 2, 3, 4]  // 可迭代对象
let iterator = arr[Symbol.iterator]()  // 调用 Symbol.iterator 后生成了迭代器对象
console.log(iterator.next()); // {value: 1, done: false}  访问迭代器对象的next方法
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

我们看到了。只要是可迭代对象，调用内部的 Symbol.iterator 都会提供一个迭代器，并根据迭代器返回的next 方法来访问内部，这也是 for...of 的实现原理。

let arr = [1, 2, 3, 4]
for (const item of arr) {
    console.log(item); // 1 2 3 4 
}

把调用 next 方法返回对象的 value 值并保存在 item 中，直到 value 为 undefined 跳出循环，所有可迭代对象可供for...of消费。再来看看其他可迭代对象：

function num(params) {
    console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    let iterator = arguments[Symbol.iterator]()
    console.log(iterator.next()); // {value: 1, done: false}
    console.log(iterator.next()); // {value: 2, done: false}
    console.log(iterator.next()); // {value: 3, done: false}
    console.log(iterator.next()); // {value: 4, done: false}
    console.log(iterator.next()); // {value: undefined, done: true}
}
num(1, 2, 3, 4)

let set = new Set('1234')
set.forEach(item => {
    console.log(item); // 1 2 3 4
})
let iterator = set[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

所以可迭代对象中的 Symbol.iterator 属性被调用时都能生成迭代器，而 forEach 也是生成一个迭代器，在内部的回调函数中传递出每个元素的值

<span style="font-size: 20px;">for</span>循环和<span style="font-size: 20px;">forEach</span>的语法区别

了解了本质区别，在应用过程中，他们到底有什么语法区别呢？

  • forEach 的参数。

  • forEach 的中断。

  • forEach 删除自身元素，index不可被重置。

  • for 循环可以控制循环起点。

forEach 的参数

我们真正了解 forEach 的完整传参内容吗？它大概是这样：

arr.forEach((self,index,arr) =>{},this)

  • self： 数组当前遍历的元素，默认从左往右依次获取数组元素。

  • index： 数组当前元素的索引，第一个元素索引为0，依次类推。

  • arr： 当前遍历的数组。

  • this： 回调函数中this指向。

let arr = [1, 2, 3, 4];
arr.forEach(function (self, index, arr) {
    console.log(`当前元素为${self}索引为${index},属于数组${arr}`);
}, person)

我们可以利用 arr

forEach는 ES5에서 제안한 방법으로 Array Set Map과 같은 반복 가능한 객체의 프로토타입에 탑재됩니다. 코드>. 🎜🎜<code>forEach는 반복 가능한 객체 순회를 담당하는 반복자입니다. 🎜🎜그럼 🎜traversal🎜, 🎜iteration🎜, 🎜iterable object🎜은 각각 무엇인가요? 🎜
  • 🎜🎜Traversal🎜: 데이터 구조의 각 구성원에 대한 일반 및 일회성 액세스를 나타냅니다. 🎜
  • 🎜🎜Iteration🎜: 반복은 특별한 형태의 재귀이자 반복자가 제공하는 방법입니다. 기본적으로 특정 순서에 따라 데이터 구조 멤버에 하나씩 액세스합니다. 반복은 순회 동작이기도 합니다. 🎜
  • 🎜🎜Iterable 객체🎜: iterable 유형은 ES6, Array Set Map <code>문자열 인수 NodeList는 모두 반복 가능이며 특징은 모두 [ Symbol.iterator ] 메서드를 포함하는 객체는 반복 가능한 iterable로 간주됩니다. 🎜
🎜forEach는 실제로 반복자입니다. for 루프와 근본적인 차이점은 forEach가 Traverse(Array Set Map) 반복 가능한 객체를 담당하며 for 루프는 다음 작업만 수행할 수 있는 루프 메커니즘입니다. 배열을 반복합니다. 🎜🎜🎜Iterator🎜란 무엇인가요? 호출되면 Iterator 객체가 생성됩니다. 여기에는 .next() 메서드가 있으며 각 호출은 {value:value' 객체를 반환합니다. ,done:Boolean}, value는 yield 이후의 반환 값을 반환합니다. yield가 끝나면 done는 true가 되고, 지속적인 호출과 순차 반복을 통해 내부 값에 액세스됩니다. 🎜🎜🎜Iterator🎜는 특별한 종류의 객체입니다. ES6 사양의 기호는 객체를 반환하는 next() 메서드이며 반복 동작은 done에서 판단됩니다. 반복자는 내부 표현을 노출하지 않고 순회를 구현합니다. 코드를 보면 🎜
let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
    arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);   // [1,2,3]
🎜 보입니다. 반복 가능한 객체인 한 내부 Symbol.iterator를 호출하면 반복자가 제공되고 반복자가 반환한 next 메서드에 따라 내부에 액세스합니다. ...of의 구현 원칙에도 적용됩니다. 🎜
let arr = [1, 2, 3, 4],
    i = 0,
    length = arr.length;
for (; i < length; i++) {
    console.log(arr[i]); //1,2
    if (arr[i] === 2) {
        break;
    };
};

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        break; //报错
    };
});

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        continue; //报错
    };
});
🎜next 메서드를 호출하여 개체의 value 값을 반환하고 value까지 item에 저장합니다. 정의되지 않음은 루프에서 벗어나며 모든 반복 가능한 객체는 for...of에서 사용할 수 있습니다. 다른 반복 가능한 객체를 살펴보겠습니다. 🎜
try {
    var arr = [1, 2, 3, 4];
    arr.forEach(function (item, index) {
        //跳出条件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        //do something
        console.log(item);
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};
🎜따라서 반복 가능한 객체의 Symbol.iterator 속성은 호출될 때 반복자를 생성할 수 있으며 forEach도 반복자를 생성합니다. 루프와 🎜🎜forEach🎜🎜🎜🎜🎜🎜의 구문 차이 이제 본질적인 차이점을 이해했으므로 적용하는 동안 이들 사이의 문법적 차이점은 무엇입니까? 🎜
  • 🎜forEach의 매개변수. 🎜
  • 🎜forEach의 인터럽트입니다. 🎜
  • 🎜forEach는 자체 요소를 삭제하며 색인을 재설정할 수 없습니다. 🎜
  • 🎜for 루프는 루프의 시작점을 제어할 수 있습니다. 🎜

🎜forEach의 매개변수🎜

🎜우리는 forEach의 완전성을 정말로 이해하고 있습니다. > 매개변수 내용을 전달하시겠습니까? 아마도 다음과 같을 것입니다: 🎜
let arr = [1, 2, 3, 4];

function find(array, num) {
    array.forEach((self, index) => {
        if (self === num) {
            return index;
        };
    });
};
let index = find(arr, 2);// undefined
  • 🎜🎜self: 🎜 현재 배열이 통과하는 요소, 배열 요소는 기본적으로 왼쪽에서 오른쪽으로 가져옵니다. . 🎜
  • 🎜🎜index: 🎜 배열의 현재 요소 인덱스, 첫 번째 요소 인덱스는 0 등입니다. 🎜
  • 🎜🎜arr: 🎜 현재 탐색된 배열입니다. 🎜
  • 🎜🎜this: 🎜 콜백 함수를 가리킵니다. 🎜
let arr = [1,2,3,4]
arr.forEach((item, index) => {
    console.log(item); // 1 2 3 4
    index++;
});
🎜arr를 사용하여 배열 중복 제거를 달성할 수 있습니다.🎜
let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
    arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);   // [1,2,3]

forEach 的中断

在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。

let arr = [1, 2, 3, 4],
    i = 0,
    length = arr.length;
for (; i < length; i++) {
    console.log(arr[i]); //1,2
    if (arr[i] === 2) {
        break;
    };
};

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        break; //报错
    };
});

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        continue; //报错
    };
});

如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：

try {
    var arr = [1, 2, 3, 4];
    arr.forEach(function (item, index) {
        //跳出条件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        //do something
        console.log(item);
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};

若遇到 return 并不会报错，但是不会生效

let arr = [1, 2, 3, 4];

function find(array, num) {
    array.forEach((self, index) => {
        if (self === num) {
            return index;
        };
    });
};
let index = find(arr, 2);// undefined

forEach 删除自身元素，index不可被重置

在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：

let arr = [1,2,3,4]
arr.forEach((item, index) => {
    console.log(item); // 1 2 3 4
    index++;
});

index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意。

for 循环可以控制循环起点

如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同：

let arr = [1, 2, 3, 4],
    i = 1,
    length = arr.length;

for (; i < length; i++) {
    console.log(arr[i]) // 2 3 4
};

那之前的数组遍历并删除滋生的操作就可以写成

let arr = [1, 2, 1],
    i = 0,
    length = arr.length;

for (; i < length; i++) {
    // 删除数组中所有的1
    if (arr[i] === 1) {
        arr.splice(i, 1);
        //重置i，否则i会跳一位
        i--;
    };
};
console.log(arr); // [2]
//等价于
var arr1 = arr.filter(index => index !== 1);
console.log(arr1) // [2]

<span style="font-size: 18px;">for</span>循环和<span style="font-size: 18px;">forEach</span>的性能区别

在性能对比方面我们加入一个 map 迭代器，它与 filter 一样都是生成新数组。

对比 for forEach map 的性能在浏览器环境中都是什么样的：

性能比较：for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右。

原因分析for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。

forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。

map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。

如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。

当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。

【相关推荐：javascript视频教程、编程视频】

위 내용은 es6의 for와 foreach의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

관련 기사

더보기