for()循环、forEach()、$.each()

关于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()的使用

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

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

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

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

})

最后

以上就是矮小丝袜为你收集整理的for()循环、forEach()、$.each()的全部内容，希望文章能够帮你解决for()循环、forEach()、$.each()所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。