js 各种循环使用

Javascript 数组，对象循环

1. 目前框架常用的Js 版本为 ES6, 故介绍常用的各种循环
2. forEach
3. some
4. filter
5. every
6. for (var i = 0;i < n;i++){}
7. for … of

前端开发宝藏网站

1. MDN
2. 该网站涵盖了 JS，HTML，CSS，HTTP，浏览器等知识
3. 所有的细节都能在该网站上找到，非常推荐
4. Javscript ES5 ES6 之间有什么区别
5. JS
6. HTML
7. CSS
8. 浏览器DOM

一. Javascript常用的循环

var a = [1,2,4];
for (var i=0;i<a.length;i++){
	console.log(i, a[i])
}

二. ES 6常用的循环

1. forEach

let a = [1,2,4];
a.forEach(v => {
	if (v == 1){
	   console.log("v == 1");
	   return
	} else {
	   console.log("v !== 1");
	}
})

2. forEach 中 break/continue 都不可用，return 在forEach 中的作用与 continue一样，也就是当执行了return 后，依旧会遍历数组剩余的数据
3. 如何实现break的效果呢，使用如下代码，主要原理是 try catch

var a = [1,2,4];
try {
	a.forEach(v => {
		if (v == 1){
		   console.log("v == 1");
		   throw "break";
		} else {
		   console.log("v !== 1");
		}
	})
} catch(e) {
  console.log(e)
};

2. for … of

1. for … of 使用起来就很方便，完美结合了 for (var i=0;i<n;i++) 和 forEach 的优点

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

2. 在里面使用 break 或者 continue 都是没问题的

3. for … in

1. 官方说用来循环对象，但其实用来循环数组也是OK的
2. 相反，for of 不可以用来循环对象

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

4. some, every

用来判断数组的数据是否部分满足，或全部满足某一条件

1. some

const array1 = [5, 12, 8, 130, 44];

const found = array1.some(element => element > 10);

console.log(found);
// expected output: true

2. every

const array1 = [5, 12, 8, 130, 44];

const found = array1.every(element => element > 10);

console.log(found);
// expected output: false

5. find, filter

1. find 可以返回满足条件的一个元素，并立即返回，剩余的数据不遍历

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

2. filter 可以返回搜索满足条件的元素组成的数组，会进行完整遍历

const array1 = [5, 12, 8, 130, 44];

const found = array1.filter(element => element > 10);

console.log(found);
// expected output: Array [12, 130, 44]