js 各种循环使用

雨点打透心脏的1/2处 2023-01-12 01:46 67阅读 0赞

### 文章目录 ###

*   *   *  Javascript 数组，对象循环
         *  前端开发宝藏网站
         *  一. Javascript常用的循环
         *  二. ES 6常用的循环
         *   *  1. forEach
             *  2. for ... of
             *  3. for ... in
             *  4. some, every
             *  5. find, filter

### 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 之间有什么区别][Javscript ES5 ES6]
5.  [JS][]
6.  [HTML][]
7.  [CSS][]
8.  [浏览器DOM][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

#### 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]

[MDN]: https://developer.mozilla.org/zh-CN/
[Javscript ES5 ES6]: https://www.cnblogs.com/fuheng01/articles/JS.html
[JS]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/
[HTML]: https://developer.mozilla.org/zh-CN/docs/Web/HTML
[CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS
[DOM]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model