JS 遍历

1. for

for 循环可以自定义循环次数；

let arr = [1, 3, 5, 7];
for (var i= 0; i <arr.length;i++) {
       console.log(i,arr[i]); 
}

数组遍历

2. for … of

for ... of 可以迭代循环 可迭代对象如：Array，Map，Set，String，TypedArray，arguments 对象等等）
注：对象不可使用 for ... in 迭代循环；

let arr =[1,3,5,7];
for (let key of arr) {
     console.log(key); // 数组下标
}

以下几个循环都接收一个回调函数，该回调函数可接收三个参数 callback( item[,index[,selfarr] )

• item：回调函数正在处理的数组元素；
• index（可选）：正在处理的元素在数组中所处的下标；
• selfarr （可选）：调用 map 方法的数组本身；

3. forEach( )

arr.forEach( callback( item[,index[,selfarr] ) )

forEach 遍历：每循环一次数组中的元素，就调用一次 callback 回调函数。

返回值：undefined；

提示：1.forEach 不能通过 return、break、contain 跳出循环；

底层实现：

// forEach 底层实现
function forEach(callback){
	for(var i=0;i<arr.length;i++){
		callback(arr[i],i,arr)
	}
}

// forEach 使用
let arr = [1,3,5,7];
arr.forEach( item => {
	console.log(item);
}

4. some( )

let newarr = arr.some( callback( item[,index[,selfarr] ) )

返回值：布尔值 ture / false；

some 方法会对数组中的每一项都进行遍历，找到第一个满足条件的元素就终止循环，返回 true ，如果数组中没有满足条件的元素，返回 false；

注：some 方法不会改变原数组；

底层实现：

//some 底层实现
function some(callback){
	var flag = false;
	for(var i=0;i<arr.length;i++){
		if(callback(arr[i],i,arr)){
			flag = true;
			break;
		}
	}
	return flag;
}

// some 使用
let arr = [1,3,5,7];
let some = arr.some(item => {
	return item > 3;
)
console.log(arr); // arr = [1,3,5,7]
console.log(some); // true 数组每一项与3对比，结果依次为 false true true true some 方法只要有以一项为 true 就返回 true

5. every( )

let newarr = arr.every( callback( item[,index[,selfarr] ) )

返回值：布尔值 ture / false；

every 方法会对数组中的每一项都进行遍历，需要每一项条件都成立才返回 true，否则只要有一项不成立就返回 false。

注：every 方法不会改变原数组；

底层实现：

// every 底层实现
function every(callback){
	var flag = true;
	for(var i=0;i<arr.length;i++){
	
		if(!callback(arr[i],i,arr)){
			flag = false;
			break;
		}
	}
	return flag;
}

let arr = [1,3,5,7];
let every = arr.every(item => {
         return item > 0;
})
console.log(arr); // arr = [1,3,5,7];
console.log(every); // true;

6. filter( )

let newarr = arr.filter( callback( item[,index[,selfarr] ) )

filter 方法会处理数组中的每一个元素，并将处理结果为 true （或满足条件的元素）的元素过滤出来进行返回，这些元素会组成一个新的数组。filter 遍历适合于筛选元素。

返回值：callback 返回为 true 的元素组成一个新的数组；如果没有元素返回结果为 true，返回空数组；

注：filter 方法不会改变原数组；

底层实现：

//filter 底层实现
function filter(callback){
    var res = [];

    for(var i=0;i<arr.length;i++){
    	if(callback(arr[i],i,arr)){
    		res.push(arr[i])
    	}
    }
    
    return res;
}

//filter 用法
let arr = [1,3,5,7];

let filter = arr.filter(item => {
        return item > 4;
})
console.log(arr); // arr = [1,3,5,7]
console.log(filter); //arr = [5,7]

7. map( )

let newarr = arr.map( callback( item[,index[,selfarr] ) )

map 方法会处理数组中的每一个元素，并将每个元素的处理结果通过 return 返回出去，这些结果会组成一个新的数组。

返回值：回调函数 callback 将每次 return 的结果（结果可以为 undefined 或 null）组成一个新的数组；

注：1. map 遍历会遍历数组中每一项，不会跳出循环；
2. map 方法不影响原数组元素；
3. 新数组的长度同原数组长度一样；

注：map 方法不会改变原数组；

底层实现：

// map 底层实现
function map(callback){
	var res = [];

	for(var i=0; i<arr.length; i++){ // arr 待遍历的数组
		res.push(callback(arr[i],i,arr))
	}
	
	return res;
}

// map 使用
let arr = [1,3,5,7]; 

let map = arr.map(item => {
       return item *2;
})

let map1 = arr.map(item => {
	   return item > 3;
})
console.log(arr); // arr = [1,3,5,7]
console.log(map); // map = [2,6,10,14];
console.log(map1); // map1 = [false,false,true,true]

8. find( )

let item = arr.find( callback( item[,index[,selfarr] ) )

返回值：返回第一个符合条件的数组成员，没有符合条件则返回 undefined

注：find 方法不会改变原数组；

9. findIndex( )

let index = arr.findIndex( callback( item[,index[,selfarr] ) )

返回值：返回符合条件的数组成员的下标，没有符合条件则返回 -1

注：findIndex 方法不会改变原数组；

// find、findIndex 用法：
let arr = [1,3,5,7];

// find() 
let item = arr.find(function(val,index,arr) {
	console.log(val,index,arr); // 1,0，[1,3,5,7]
	return val > 4; // 返回 5，虽然 5 7 都符合大于 4 的条件，但是只返回找到符合条件的第一个，即元素 5
})
console.log(item); // 返回 5，虽然 5 7 都符合大于 4 的条件，但是只返回找到符合条件的第一个，即元素 5

// findIndex( )
let ind = arr.findIndex(val => val >5);
console.log(ind); // 3，大于 5 的值的数组元素仅有 7,7 所在的下标为 3

10. reduce( )

arr.reduce( callback(preval, item, index, arr), val)
callback：回调函数，该回调函数中可以传递以下几个参数：

• preval：初始值 或 上次循环中的返回值；
• item：当前数组元素；
• index：当前数组元素的下标；
• arr：当前数组元素所在的数组对象；
• val：传递给回调函数的初始值；

注：reduce 遍历可以记录上次循环中处理结果；

// reduce 底层实现
function reduce(fn){
	if(arr.length==1) return arr[0]
	var res = arr[0];
	for(var i=1;i<arr.length;i++){
		res = fn(res,arr[i],i,arr);
	}
	return res;
}

// reduce 用法
let arr = [1,3,5,7];
let reduce = arr.reduce((preval,item) => {
       console.log(preval,item);
       return preval+item;
},0)
console.log(arr); // arr = [1,3,5,7]
console.log(reduce); // reduce = 16

11. reduceRight( )

arr.reduce( callback(preval, item, index, arr), val)
和 reduce() 方法类似，不同的是，reduceRight() 方法中数组元素是从右到左计算，可将其看作原数组先逆序排列再进行 reduce 方法的结合

let map = arr.reduce((preval, item) => {
       console.log(`pre: ${preval}, item: ${item}`);
       return preval + item;
}, 0)
console.log('map:',map);

let map1 = arr.reduceRight((preval, item) => {
       console.log(`pre: ${preval}, item: ${item}`);
       return preval + item;
}, 0)
console.log('map1:',map1);

对象遍历

1. for … in

for ... in 可以用来遍历对象，获取键名；遍历数组，获取数组元素下标（数组元素下标相对于对象键名）

for ... in 可以通过 continue 、break 和 return 中断遍历，不同的是 return 需要放在函数体中进行中断

// for ... in
let stu = {
       name:'andy',
       age:10,
       sex:'female'
}

for(let key in stu){
       console.log(key,stu[key]); // name 'andy' 每次遍历，都会将键名赋值给 key      
}

2. Object.keys( )

ES6 新特性，参数：被返回其枚举自身属性的对象；
返回值：可枚举属性组成的数组

注：当参数不是对象，Object.keys() 方法会将参数转为对象类型，索引充当键名，返回由键名组成的数组。

参数有以下几种情况：

1. 对象，Object.keys() 方法获取对象的键名，返回一个由键名（键名为字符串类型）组成的数组；
2. 数组，Object.keys() 方法获取数组元素索引，返回一个由索引值（索引值为字符串类型）组成的数组；
3. 字符串，Object.keys() 方法获取字符串的索引，返回一个由索引值（索引值为字符串类型）组成的数组；
   …
   

3. Object.values( )

ES6 新特性，参数：被返回可枚举属性值的对象；
返回值：包含对象自身的所有可枚举属性值的数组；

注：如果参数不是对象，Object.values() 会将参数先转为对象，返回由属性值组成的数组。

参数有以下几种情况：

1. 对象，Object.values() 方法获取对象的属性值，返回一个由属性值组成的数组；
2. 字符串，Object.values() 方法获取字符串的单个字符，返回一个由字符组成的数组；

// 对象
let stu = {
	name:'andy',
	age:20,
	sex:'female'
}
let keysArr= Object.keys(stu);
console.log(keysArr); // [ "name", "age", "sex" ]

let valArr = Object.values(stu);
console.log(valArr); // [ "andy", 10, "female" ]

// 数组
let arr = ['apple','orange','banana'];
let keysArr= Object.keys(arr);
console.log(keysArr); // [ "0", "1", "2" ]

let valArr = Object.values(arr);
console.log(valArr); // [ "apple", "orange", "banana" ]

// 字符串
let str = 'ysjx';
let keysArr= Object.keys(str);
console.log(keysArr); // [ "0", "1", "2","3" ]
let valArr = Object.values(stu);
console.log(valArr); // [ "y", "d", "j","x" ]

4. Object.entries( )

参数：可以返回其可枚举属性的键值对的对象；
返回值：给定对象自身可枚举属性的键值对数组；（返回多个数组，一个数组由可枚举对象的一个属性及其对应的属性值组成，如：[属性，属性值]）

参数有以下几种情况：

1. 对象；
2. 数组；
3. 字符串
   

5. Object.getOwnPropertyNames( )

获取对象的所有属性（和 Object.keys() 类似），但 Object.getOwnPropertyNames() 还可以获取不可枚举的属性

参考博客：1. JS 遍历底层实现