遍历数组、对象的方法_遍历数组对象

前提​：前端最重要的任务的经常要处理数据的​！经常的是列表的遍历问题​！例如遍历数组、对象的方法​！！！

遍历数组：

1、普通for循环

for(var i = 0; i < arr.length;i++  ){
    //代码
}
1
2
3

2、forEach循环

arr.forEach((item,index,arr)=>{
     //代码
})
1
2
3

forEach接收一个回调函数作为参数,而这个回调函数有接受三个参数,作为参数。item是每个元素,index元素在数组中的下标,arr数组本身。 没有返回值！​

3、map循环

var brr= arr.map((item,index,arr)=>{
    //代码
    return item * 2;
})
//arr---->[1,2,3]
//brr---->[2,4,6]
1
2
3
4
5
6

map的用法和forEach差不多。但是map是有返回值的。他的返回值是一个新数组
map方法不改变原数组。是映射，即数组元素的映射。它提供一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。默认返回一个数组，这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。

4、for–of循环

for(var item of arr){
    //代码
}
1
2
3

只有是现实iterator 接口的才能用for—of.对象不能
es6新增了interator接口的概念，目的是对于所有数据结构提供一种统一的访问机制，这种访问机制就是for of。

即：所有有interator接口的数据，都能用for of遍历。常见的包括数组、类数组、Set、Map等都有interator接口。

5、filter过滤

var arr = [
    {name:'张三',age:'20'},
    {name:'李四',age:"50"}
]
    arr.filter(item=>{
        return item.name;
        // [张三,李四]
    })
    arr.filter(item=>{
        return item.age>30;
        //[{name:"李四",age:"50"}]
    })
    //接受一个回调函数作为参数,返回值是一个新数组
1
2
3
4
5
6
7
8
9
10
11
12
13

filter，过滤，即对数组元素的一个条件筛选。它提供一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。默认返回一个数组，原数组的元素执行了回调函数之后返回值若为true，则会将这个元素放入返回的数组中。

filter方法不改变原数组

6、every遍历

var arr=[50,6,70,80];
    arr.every((item,index,arr)=>{
        return item > 50; //每一项数据都要大于50
    })
    //false
1
2
3
4
5

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。(全部符合条件)

7、some遍历

    var arr=[50,6,70,80];
    arr.some((item,index,arr)=>{
        return item > 50; //只要有一项数据都要大于50
    })
    //true
1
2
3
4
5

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。(只要有一个符合)

some方法和every的用法非常类似，提供一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。

数组的每一个元素都会执行回调函数，当返回值全部为true时，every方法会返回true，只要有一个为false，every方法返回false。当有一个为true时，some方法返回true，当全部为false时，every方法返回false。

some、every方法不改变原数组。

8、reduce

//reduce()方法接收一个函数作为累加器,数组中每个值(从左往右)开始缩减,最重为一个值
    [1,2,3].reduce((a,b) => {
        return a + b;//6   
    })
    [1,2,3].reduce((previousValue,currentValue,index,arr)=>{
        return previousValue + currentValue;
    })

//reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数，上面这个例子因为没有第二个参数，所以直接从数组的第二项开始，如果我们给了第二个参数为5
     [1,2,3].reduce((previousValue,currentValue,index,arr)=>{
        return previousValue + currentValue;
    },5)

    // 6, 8 ,11
//第一次调用的previousValue的值就用传入的第二个参数代替，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

reduce方法有两个参数，第一个参数是一个回调函数（必须），第二个参数是初始值（可选）。回调函数有四个参数，依次为本轮循环的累计值、当前循环的元素（必须），该元素的下标（可选），数组本身（可选）。

reduce方法，会让数组的每一个元素都执行一次回调函数，并将上一次循环时回调函数的返回值作为下一次循环的初始值，最后将这个结果返回。

如果没有初始值，则reduce会将数组的第一个元素作为循环开始的初始值，第二个元素开始执行回调函数。

最常用、最简单的场景，是数组元素的累加、累乘

9、reduceRight

    var arr = [0,1,2,3,4];
 
    arr.reduceRight(function (preValue,curValue,index,array) {
        return preValue + curValue;
    }); // 10
    7 = 4 + 3   第一次
    9 = 2 + 7   第二次
   10 = 9 + 1   第三次
   10 = 10 + 0  第四次
1
2
3
4
5
6
7
8
9

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。

10、find

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]
    function getStu(element){
    return element.name == '李四'
    }
    
    stu.find(getStu)
    //返回结果为
    //{name: "李四", gender: "男", age: 20}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

11、findIndex

[1,2,3].findIndex(function(x) { x == 2; });
    //1
    [1,2,3].findIndex(x => x == 4);
    //-1
1
2
3
4

对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。findIndex 不会改变数组对象!!!

12、keys,values,entries

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

遍历对象：

1. vue中v-for遍历对象

<el-form-item label="状态：">
	   <el-select v-model="searchData.generateStatus">
          <el-option label="全部" value="null"></el-option>
             <el-option
                 v-for="(value, key) in incomeStatusEnum"
                 :key="key"
                 :label="value"
                 :value="key"
             ></el-option>
         </el-select>
</el-form-item>

//data数据
incomeStatusEnum: {
     1: '未开始',
     2: '生成中',
     3: '生成完成',
     4: '生成失败',
 },

//列表中需要显示时候
<el-table-column prop="name" label="状态" min-width="100">
     <template slot-scope="{ row: { generateStatus } }">
         <span v-text="incomeStatusEnum[generateStatus]"></span>
     </template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. for…in 遍历数组和对象都可以

var t = {
	"A":[1,2,3],
	"B":[1,2,3],
	"C":[1,2,3],
	"D":[1,2,3],
	"E":[1,2,3]
}
let loop = (t) => {
	for (let i in t) {
		if(i == "A"){
			return console.log(i, t[i])  //i是键名，t[i]是键值 A (3) [1, 2, 3]
		}			     
	}
}
loop(t)
console.log(t)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. Object的方法

// 遍历返回键名
for (let i in Object.values(t)) {
	console.log(i) 
}
1
2
3
4

//遍历返回键名
for (let i in Object.values(t)) {
	console.log(i) 
}
1
2
3
4

//返回键值对组成的数组，如：['key', 'value']
for (let i in Object.entries(t)) {
	console.log(i) 
}
1
2
3
4

4. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(t).forEach(key => {
	console.log(key, t[key])
})
1
2
3

5. 使用Reflect.ownKeys(obj)遍历

Reflect.ownKeys(t).forEach(key=>{
	console.log(key,t[key]);
});
1
2
3