js循环遍历的各种方法和区别

循环遍历的各种方法和区别

循环遍历的各种方法

1.while循环

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

语法：while (条件) {语句}

2.do…while循环

do…while循环与while循环类似，唯一的区别就是先运行循环体，然后判断循环条件。

语法：do{语句}while(条件)

3.for循环

例如：

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

4.for…in循环

var obj ={a:1,b:2,c:3}
for(var i in obj){//i为键名
    console.log(i+':'+obj[i]);//a:1  b:2  c:3
}
//也可以用来循环遍历数组，这个时候，i就是数组的索引了。

注意：for…in循环一般用于对象的遍历

注意：for…in循环如果用于数组，会跳过空元素，也就是说不会操作空的数组元素，但是对应的索引值还是存在的。而且遍历出来的索引其实是string类型的

var a = [1, , 15, 1, , 21, 6, , 9]
var num = 0;
for (let i in a) { //遍历数组
    //i是数组索引，要想拿到数组值要a[i]
    console.log(i);//输出0，2，3，5，6，8
    console.log(typeof i);//输出string
    num++; //计数器
}
console.log(num); //输出6，说明循环了6次

注意：任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，for… in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成会遍历到不属于自身的属性。

5.for…of遍历

这是es6新增的方法，支持数组，对象，字符串的遍历

var arr = [5,6,7,8,9,10,11];
for( let i of arr){
    console.log(i);
}

这个方法遍历出的是值，不是索引。

6.Array map()方法

var numbers = [1, 2, 3];
 
var a = numbers.map(function (n) { 
     return n + 1; 
}); 

a// [2, 3, 4] 
 
numbers // [1, 2, 3]

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

注意：是返回一个新数组，而不会改变原数组。

注意：函数参数的第一个参数是必须的，用来拿遍历的数组的值

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

[1, 2, 3].map(function(value, index, arr) { 
    return value * index; 
}); 
// [0, 2, 6]

此外，map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

var arr = ['a', 'b', 'c'];
 
var a = [0, 1, 2].map(function (e) {
    return this[e];
}, arr)
 console.log(a)// ['a', b', 'c']

7.Array forEach循环

let arr = [1,2,3];
arr.forEach(function(i,index,arr){
    console.log(i,index)
    console.log(arr);//[1,2,3]
})
// 1 0
// 2 1
// 3 2

该方法和map方法很类似，也是对数组的所有成员依次执行参数函数。

注意：函数参数i代表的是当前数组值，参数index是当前数组下标，函数参数的第一个参数是必须的，第二个参数可选,第三个参数是当前遍历的整个数组。forEach循环和map循环一样也可以用绑定回调函数内部的this变量，间接操作其它变量（参考上面的map()循环例子）。

注意：该方法没有返回值，只用来操作数据。也就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。

注意：会不会改变原来的值，要看回调函数的currentValue是引用类型还是基本类型，如果是引用数据类型，改该数据里的属性会改变原值，但是直接改该数据不会改变原值（原因是参数其实相当于定义一个局部变量，然后存传进来的数据的一个复制的值，已经跟传进来的数据无关了，只是值一样而已，但是引用数据类型他们的变量存的是地址，就导致参数存的也是地址，就指向了同一个地方，也就会改变原来的值）。如果参数是基本数据类型，那么原来的值不会改变。

注意：forEach循环在元素调用完毕之前是不能停止的，它没有 break 语句，break对它无效。

8.filter()过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (value) {
     return (value > 3); 
}) // [4, 5]
 
// 上面代码将大于3的数组成员，作为一个新数组返回。
 
var arr = [0, 1, 'a', false]; 
var newArr = arr.filter(Boolean) 
console.log(newArr)// [1, "a"]

filter方法的参数函数也可以接受三个参数：当前数组成员值，当前位置和整个数组。

此外，filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。

var obj = { MAX: 3 }; var myFilter = function (item) {
     if (item > this.MAX) return true; 
}; 
var arr = [2, 8, 3, 4, 1, 3, 2, 9]; 
arr.filter(myFilter, obj) // [8, 4, 9]

上面代码中，通过filter方法的第二个参数把参数函数内部的this指向obj，此时，this.MAX就是3，整个代码的意思就是返回数组arr中大于3的成员

9.some()

some() 方法循环遍历，用于检测数组中的元素是否有满足指定条件的（函数参数提供）,返回 boolean 值。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});//true

some()方法是只要一个成员的返回值是true，则整个some方法的返回值就是true,否则返回false.

10.every()

every()方法循环遍历，用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolean 值。

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

只有所有成员的返回值都是true，整个every方法才会返回true，否则返回false。

注意：只要有一个成员返回了false，就直接返回false，并且之后的成员不会再进行检测。

11.reduce()

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

参数

• callback

  执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：

  **accumulator**累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。

  currentValue数组中正在处理的元素。

  index 可选数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。

  array可选调用reduce()的数组

• initialValue可选

  作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

注意：回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

12.reduceRight()

和reduce方法基本一样，它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

它们之间的一些区别和特点

一：map，foreach，filter之间的一些区别和特点

共同点

1.map，foreach，filter循环都是中途无法停止的，总会将所有的成员遍历完。

2.他们都可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

3.map，foreach，filter循环都会跳过空位。(for和while不会)

4.参数都是函数参数可以接受三个参数：当前数组成员值，当前位置和整个数组。此外，接受第二个参数，用来绑定参数函数内部的this变量。

区别

1.forEach循环没有返回值；map，filter循环有返回值。

适合的使用场景

map适用于：想要一个新的数组，并且想要对数组的数据进行一些操作(注意：不会对原数组的数据进行修改)

forEach适用于：比普通的for和while循环更加方便，可以直接得到当前成员的索引和值

filter适用于：只想要符合条件的数组中的某些成员。

---

二：for…in和for…of

最简单的区别：

1.for…in循环出的是key，for…of循环出的是value

2.推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。

更深入的区别：

1.具备 Iterator 接口（遍历器，迭代器）的数据结构（Array，Map，Set，String，TypedArray，函数的 arguments 对象，NodeList 对象）才能使用for...of，具有可枚举属性的才能使用for...in。注意：普通对象是没有Iterator 接口的。

2.for...of就是专门给遍历器（迭代器）使用的。