js遍历的六种方式

javaScript原生遍历方法的建议用法:

• 用for循环遍历数组
• 用for-in常用于遍历对象(也可以遍历数组,但是获取到的index值是字符串)
• 用for-of遍历类数组对象(Es6新增语法)
• 用Object.keys()获取对象的属性名的集合
• forEach遍历数组
• map,reduce遍历数组

for循环

1.循环数组

const arr = [1, 2, 3];
for(let i = 0; i　< arr.length; i++) {
    console.log(arr[i]);
}
// 1
// 2
// 3

 1.使用break;停止循环

for(let i = 1 ;i<=10;i++){
  console.log(i)
if(i === 5)break
}
//1
//2
//3
//4
//5

 2.使用continue会跳过条件数据继续执行

for(let i = 1 ;i<=10;i++){
  console.log(i)
if(i === 5){continue}
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// 10

 for-in

1.打印出来的i值是key值

const arr = ["a",  "b",  "c"];
for(let i in arr){
console.log(i)
}
 //"0"
 // "1"
 // "2"

for-of:

1.遍历数组打印出来的是value值

const arr = ["a",  "b",  "c"];
for(let i of arr){
console.log(i)
}
// "a"
// "b"
// "c"

2.可以遍历数组里的每一项

var arr = [
    { name:'nick', age:18 },
    { name:'nini', age:24 },
    { name:'mike', age:26 },
    { name:'jame', age:34 }
];
for(var item of arr){	
    console.log(item.name,item.age);
}

//  "nick" 18
// "nini" 24
//  "mike" 26
//  "jame" 34

注意:

1.for-in可以遍历自定义属性,但是for-of不会

const arr = ["a",  "b",  "c"];
arr.name="中国"
for(let i of arr){
console.log(i)
}  
console.log("--------------")
for(let i in arr){
console.log(i)
}

//  "a"
//  "b"
//  "c"
//  "--------------"
//  "0"
//  "1"
//  "2"
//  "name"

2.for-in是为遍历对象而设计的，不适用于遍历数组。

遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串

   var arr = [1, 2, 0, 3, 9];
    for (var index in arr) {
      console.log(index);
    }
    console.log("======================");
    for (var index of arr) {
      console.log(index);
    }

灰色是字符串格式,蓝色是数字形式

Map是ECMA5新增的犯法,ie9以下的浏览器不支持

var arr = [1,2,0,3,9];
var temp=arr.map(function(val,index){
  console.log(val); 
  return val*val          
})
console.log(temp);
// 1
// 2
// 0
// 3
// 9
// Array [1, 4, 0, 9, 81]

 forEach遍历数组

var arr = [1,2,0,3,9];
arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);
 
})
// "forEach遍历:0--1"
// "forEach遍历:1--2"
// "forEach遍历:2--0"
// "forEach遍历:3--3"
// "forEach遍历:4--9"

Object.keys()获取数组的属性值的集合

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));
 // console: ['0', '1', '2']

拜~