js数组遍历相关方法

---

一、普通的for循环

let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

这与C语言，C++，JAVA很像，就是普通的数组for循环遍历。

二、forEach()遍历

特点：没有返回值，只是针对每个元素调用function。
forEach()方法接受一个函数作为参数，一般用箭头函数。

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach((element, index, self) => {
	console.log(element, index, self);
})

可以看出这个箭头函数可接受三个参数，这三个参数分别表示：
element：遍历数组的当前元素。
index：当前元素的索引。
self：被遍历的数组。

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr1 = arr.forEach((element, index, self) => {
	//console.log(element, index, self);
})
console.log(arr1);

这段代码可以说明forEach是没有返回值的。

三、map()遍历

特点：返回新的Array，Array中每个元素为调用function的结果。

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr1 = arr.map((element, index, self) => {
    console.log(element, index, self);
    return element + 'gg';
})
console.log(arr1);

可以看出，map()方法里面也接受一个函数作为参数，这个函数也有三个参数，这三个参数表示的也和forEach()方法相同。
但是，map方法会有返回值，它会将每一步的返回值作为一个元素，最终返回一个拥有这些元素的数组。

四、filter()遍历

特点：返回符合function条件的元素数组（起到过滤作用）。

		let arr = [{
            name: 'zs',
            age: 12
        }, {
            name: 'lisi',
            age: 19
        }, {
            name: 'xiaoming',
            age: 22
        }, {
            name: 'xiaogang',
            age: 34
        }, {
            name: 'xiaohong',
            age: 25
        }]
        let arr1 = arr.filter((element, index, self) => {
            console.log(element, index, self);
            return element.age > 30
        })
        console.log(arr1);

可以看出，filter方法的参数和forEach，map完全一样。
而且filter和map都是有返回值的，
但是filter是返回满足条件的，起到一个过滤的作用。
像这里，就是返回了年龄大于30的对象。

五、some()方法

特点：返回boolean，判断是否有元素是否符合function条件

        let arr = [{
            name: 'zs',
            age: 12
        }, {
            name: 'lisi',
            age: 19
        }, {
            name: 'xiaoming',
            age: 22
        }, {
            name: 'xiaogang',
            age: 34
        }, {
            name: 'xiaohong',
            age: 25
        }]
        let res = arr.some((element, index) => {
            return element.age > 30
        })
        console.log(res);//true

some方法是只要数组元素中有满足return条件的就返回true，否则返回false。
这里因为有年龄大于30的，所以这里输出res为true。

六、every()方法

特点：返回boolean，判断每个元素是否符合function条件

        let arr = [{
            name: 'zs',
            age: 12
        }, {
            name: 'lisi',
            age: 19
        }, {
            name: 'xiaoming',
            age: 22
        }, {
            name: 'xiaogang',
            age: 34
        }, {
            name: 'xiaohong',
            age: 25
        }]
        let res = arr.every((element, index) => {
            return element.age > 30
        })
        console.log(res);//false

必须每个元素都满足条件才返回true，否则返回false。
因为这里不是每个对象的age都大于30，所以返回false。

七、reduce()方法

        let arr = [1, 5, 6, 23, 4];
        let num = arr.reduce((pre, now, index, self) => {
            console.log(pre, now);
            return pre + now;
        }, 2)
        console.log(num);

reduce方法可接受两个参数，第一个参数为函数，一般用箭头函数,第二个参数为箭头函数第一个参数的初值，即这里pre的初值。
箭头函数里面的后三个参数和forEach一样，
第一个参数为处在上一个元素时的函数返回值，即之间计算的累计。
所以当now=1时 pre为初值2
当now=5时，pre为2+1 = 3。
以此类推，上述代码输出结果为：

八、find() 与 findIndex()（ES6新增）

find()：返回第一个满足条件的元素。
findIndex()：返回的值为满足条件的第一个元素的索引。

        let arr = [1, 2, 5, 7, 8, 7];
        let str1 = arr.find(element => {
            return element > 5;
        })
        console.log(str1);//7

        let str2 = arr.findIndex(element => {
            return element > 5;
        })
        console.log(str2);//3

这里第一个大于5的元素是7，它的索引是3。

九、for…in…循环

for…in…循环可遍历数组，对象，Set，Map等所有可迭代数据类型。

let arr = [1, 2, 3, 4, 5];
let obj = {
	name: 'zs',
	age: 18,
	sex: 'male'
}
for(let key in arr){
	console.log(key);
}
for(let key in obj){
	console.log(key);
}	

可以看出，对于数组来说，这里的key是索引，
对于对象来说，这里的key是键值。

十、for…of…循环（ES6新增）

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

这里输出：

for…of…遍历数组参数是数组的值。

---

我们可以在of后边的数组上加一些方法来控制我们of前面的变量的值。

1.keys()方法

let arr = [1, 2, 3, 4, 5];
for(let key of arr.keys()){
    console.log(key);
}

加keys()方法获得索引。

---

2.values()方法

let arr = [1, 2, 3, 4, 5];
for(let val of arr.values()){
    console.log(val);
}

加values方法获取元素值（额…和没加没什么区别）。

---

3.entries()方法

let arr = [1, 2, 3, 4, 5];
for(let [val, index] of arr.entries()){
	console.log(val, index);
}

加entries方法既可获得索引，也可获得元素值，但要注意参数的先后顺序。

---

另注：for…of…循环不可用为对象的循环。

        let obj = {
            name: 'zs',
            age: 18,
            sex: 'male'
        }
        for (let val of obj) {
            console.log(val);
        }