js常用循环方式

let list = [
  {name:'张三',age:22},
  {name:'李四',age:24},
  {name:'王五',age:18},
  {name:'小明',age:18},
  {name:'小红',age:18},
  {name:'小张',age:18}
];

1、for循环

for(let i=0;i<list.length;i++){ 
  console.log(list[i])
  // 输出结果：{name:'张三',age:22}   {name:'李四',age:24}  {name:'王五',age:18} 等等
}

2、for in循环（主要用来遍历对象，获取对象键值）

(1)遍历对象时 i 为属性名也就是对象的键

let obj={name:'张三',age:22} 
for(let i in obj){     
  console.log(obj[i],'obj[i]是value'); // 输出结果：张三 22
  console.log(i)// 输出结果：name age
}

(2)遍历数组或JSON时 i为下标也就是索引

for(let i in list){    
   console.log(list[i]); 
   // 输出结果：{name:'张三',age:22}   {name:'李四',age:24}  {name:'王五',age:18} 等等
}

3、for of循环（可遍历数组/集合/字符串，不可遍历对象）

(1)遍历集合[{}]

for(let i of list){
	console.log(i)
	// 输出结果：{name: '张三', age: 22} {name: '李四', age: 24} {name: '王五', age: 18} 等等
}

(2)遍历数组[]，i是数组中的元素值

let list2 = ['a',2,'c','f',5,6];
for(let i of list2){ 
  console.log(i) // a 2 c f 5 6
}

(3)不可遍历对象会报错

let obj={name:'张三',age:22};
for(let i of obj){
	console.log(i,'对象') 
}

4、forEach 循环（遍历数组，会改变原始数组，不会返回执行结果）

val是当前项的值；index是当前项的索引；arr是数组对象本身

list.forEach((val,index,arr)=>{
  console.log(val,index,arr)
  // 输出结果：{name: '张三', age: 22}  0  arr 原数组
  //          {name: '李四', age: 24}  1  arr 原数组
  val.age=val.age/2
})
  console.log(list)
  // 输出结果：{name: '张三', age: 11}{name: '李四', age: 12}{name: '王五', age: 9}{name: '小明', age: 9}{name: '小红', age: 9}{name: '小张', age: 9}

5、map循环 （遍历数组，会返回一个新数组）

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的，总是会将所有成员遍历完

let arr = [1,2,3,4,5];
let arr2 = arr.map((n)=>{
    return n+1
})

6、some（判断数组中是否至少有一个元素满足条件，一真即真）

var arr = [66, 34, 643, 774, 64, 834 ];
console.log( arr.every(a=> { return a>= 100 }) ) // false
console.log( arr.some(a=> { return a>= 40 } ) ) // true

7、every（判断数组中是否每个元素都满足条件，一假即假）

var arrObj = [
    { status:0, id:1 },
    { status:1, id:2 },
    { status:0, id:3 },
]
console.log( arrObj.every( (val) => val.status===0) );// false
console.log( arrObj.some( (val) => val.id===2) );// true

8、filter（该方法用于过滤数组，且不会改变原数组）

满足条件的元素组成一个新数组返回，所有数组元素依次执行该函数，返回结果为true的元素会被返回，如果没有符合条件的元素，则返回空数组。

const arr = [1, 2, 3, 4, 5]
console.log(arr.filter(item => item > 2)); 

var products = [
  {
    name: "cucumber",
    type: "vegetable"
  },
  {
    name: "apple",
    type: "fruit"
  },
  {
    name: "orange",
    type: "fruit"
  }
];
var filters = products.filter(function(item) {
  return item.type == "fruit";
});
console.log(filters);

（2）数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((x, index,arr)=>arr.indexOf(x) === index);
console.log(arr,'arr原数组'); 
console.log(arr2,'arr2新数组');

9、find（返回的是对象）

找到第一个元素后就不会在遍历其后面的元素,所以如果数组中有两个相同的元素，他只会找到第一个，第二个将不会再遍历了。

var post = { id: 1, title: "AAA" };
var comments = [
  { postId: 1, content: "CCC" },
  { postId: 2, content: "BBB" },
  { postId: 1, content: "AAA" }
];
function commentsPost(post, comments) {
  return comments.find(function(item) {
    return item.postId == post.id;
  });
}
console.log(commentsPost(post, comments));

暂时先这样