三种循环遍历

关于for()循环便利、forEach()遍历、$.each()便利的区别与使用
众所周知，在前端的学习里面少不了接触到各种各样的循环遍历，那么这些循环长得都差不多，到底要怎么分清楚，又怎么去使用呢。

for循环是js提出时就有的循环方法。for 循环可以使用continue跳出当次循环，使用break跳出整个循环，forEach 不行。for 循环可控制循环起点i,forEach 只能默认从0开始。for循环可在循环中修改i,forEach不行（底层隐式控制index 自增，无法操作）

forEach是ES5提出的一个迭代器，负责遍历可迭代对象。forEach()传入的是一个回调函数，因而形成一个作用域，其内部所定义的变量不会像for 循环一样污染全局变量。以为forEach()中传入的是一个函数，所以一般也是用return来跳出循环

$.each是jQuery中的循环遍历方法。那么遍历，迭代，可迭代对象分别是什么呢。

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

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

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

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

for 循环的使用
for 循环可以控制循环的起点，跳出循环用continue break

var arr = [1, 2, 3, 4],

for (var i = 1,; i < arr.length; i++) {

console.log(arr[i]) // 2 3 4

};

//用for循环删除数组内容会改变数组的index值

var arr1 = [1, 2, 1],

for (var i = 1,; i < arr1.length; i++) {

// 删除数组中所有的1

if (arr1[i] === 1) {

    arr1.splice(i, 1);

    //重置i，否则i会跳一位

    i--;

};

};

console.log(arr); // 这里输出的就只有[2]

forEach() 的使用
forEach() 不可以控制起点，中间传的是一个回调函数，跳出循环用return或return false

那么同样的循环换成forEach()应该怎么写呢

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

var person = {

name: '摆烂'

};

arr.forEach(function (item, index, arr) {

console.log(`当回调函数里只有一个参数时${self}代表该集合里的元素`);

console.log(`当前元素为${item},索引为${index},属于数组${arr}`);

console.log(this.name+='yyds');

}, person)

由于forEach()不能改变自身index所以一般新建一个新的来接收我们想要的东西

利用forEach()实现数组去重

var arr1 = [1, 2, 1, 3, 1];

var arr2 = [];

arr1.forEach(function (self, index, arr) {

arr.indexOf(self) === index ? arr2.push(self) : null;

});

console.log(arr2); // [1,2,3]

.each()是jQuery函数，要引用jQ才能使用，跳出循环也是用return或return false

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

$.each(arr, function(index, item){

console.log(当前索引为${index},元素为${item}，我会返回一个对象集合);

})

作者：小刺猬_0421
链接：https://www.jianshu.com/p/d475ca329d7f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。