欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js 各种循环使用

程序员文章站 2022-04-25 20:22:41
...

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");
	}
})
  1. forEach 中 break/continue 都不可用,return 在forEach 中的作用与 continue一样,也就是当执行了return 后,依旧会遍历数组剩余的数据
  2. 如何实现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);
}
  1. 在里面使用 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

  1. 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

  1. filter 可以返回搜索满足条件的元素组成的数组,会进行完整遍历
const array1 = [5, 12, 8, 130, 44];

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

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