精华内容
下载资源
问答
  • 问题是这样的,通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环。 我是使用 $.each() 进行数组循环遍历,但是当进入判断时,不清楚该如何跳出当前循环,于是我就用 javascript 的方法...
  • (即用each方法内,当不满足条件时想break跳出循环体,想continue继续执行下一个循环遍历),我们经常会习惯JS中的break何continue,但是使用之后没有效果,因为在JQuery中没有这两条命令,非其关键字。 1. JQuery ...
  • 首先,上jquery源码:[javascript] view plain copyeach: function( obj, callback ) { var length, i = 0; //判断是否为数组 if ( isArrayLike( obj ) ) { length = obj.length...

    jquery

     1.首先,上jquery源码:

    [javascript]  view plain  copy
    1. each: function( obj, callback ) {  
    2.         var length, i = 0;  
    3.         //判断是否为数组  
    4.         if ( isArrayLike( obj ) ) {  
    5.             length = obj.length;  
    6.             for ( ; i < length; i++ ) {  
    7.                 //为数组中的每一项执行函数,如果函数返回false,则终止循环;返回true则继续下一个循环  
    8.                 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {  
    9.                     break;  
    10.                 }  
    11.             }  
    12.         } else {              
    13.             for ( i in obj ) {  
    14.                 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {  
    15.                     break;  
    16.                 }  
    17.             }  
    18.         }  
    19.         return obj;  
    20.     },  

    通过源码的分析,就很容易理解了,jquery中的each()跳出当前循环,继续执行下一个循环为return true;跳出整个的for循环为:return false;

    实例:

    [javascript]  view plain  copy
    1. function getValue() {  
    2.                 var value="";  
    3.                 $('input[name="Fruit"]').each(function(index, element) {  
    4.                     if($(element).parent().hasClass("radioOn")) {  
    5.                         value= $(element).val();  
    6.                         //终止循环   终止本次循环为:return true  
    7.                         return false;  
    8.                     }  
    9.                 });  
    10.                 //该方法的返回  
    11.                 return value;  
    12.             }  

    javaScript:

    对于js主要写数组的几个遍历方法:every(),filter(),forEach(),map(),some()

    1.every():对数组中的每一项运行给定函数,如果该函数针对每一项都返回true,则返回true;其可以通过控制函数返回true或者false来控制循环是否继续

    实例:

    [javascript]  view plain  copy
    1. function indexOf(arr, item) {  
    2.                 if(Array.isArray(arr)) {  
    3.                     var indexValue = -1;  
    4.                     arr.every(function(element, index, arr) {  
    5.                         if(element == item) {  
    6.                             indexValue = index;  
    7.                             //跳出循环    
    8.                             return false;  
    9.                         }  
    10.                         //为了保证循环正常的运行    
    11.                         return true;  
    12.                     });  
    13.                     return indexValue;  
    14.                 }  
    15.             }  


    2.filter():对数组中的每一项运行给定的函数,返回函数返回值为true的项组成的数组;即,最后的返回值为一个新的数组;该方法会将整个数组全部遍历完,不能够通过控制返回true或者false来中断循环.(该方法可用于筛选数组中的元素)

    3.forEach():对数组中的每一项运行给定函数,这个方法没有返回值.(该方法可用于对数组中的元素进行逻辑处理,无返回值)

    4.map():对数组中的每一项运行给定的函数,返回函数运行后的所有结果组成的数组;(适用于对数组中的元素进行逻辑处理,并且返回处理结果)

    5.some():对数组中的每一项运行给定的函数.如果该函数对任一项返回true,则返回true.可通过控制返回true或者false来决定是否中断循环;

    实例:

    [javascript]  view plain  copy
    1. function indexOf(arr, item) {  
    2.                 if(Array.isArray(arr)) {  
    3.                     var indexValue = -1;                       
    4.                     arr.some(function(element, index, arr) {  
    5.                         if(element == item) {  
    6.                             indexValue = index;  
    7.                             return true;  
    8.                         }  
    9.                     });  
    10.                     return indexValue;  
    11.                 }  
    12.             }  
    注意:break以及continue 是跳出for或者while循环

    展开全文
  • JS数组遍历方法集合

    千次阅读 2021-01-17 16:26:57
    就让我们在逆战中成长吧,加油武汉,加油自己1.for...iconsole.log(i)console.log(ar1[i])}2.foreach循环遍历数组中每个数,没有返回值使用break不能中断循环,使用return也不能返回到外层函数var ar1=[2,4,6,8]ar1....

    就让我们在逆战中成长吧,加油武汉,加油自己

    1.for循环

    使用零时变量将长度存起来,当数组较大时优化效果才会比较明显。

    var ar1=[2,4,6,8]for(var i=0;i

    console.log(i)

    console.log(ar1[i])

    }

    2.foreach循环

    遍历数组中每个数,没有返回值

    使用break不能中断循环,使用return也不能返回到外层函数

    var ar1=[2,4,6,8]

    ar1.foreach((item,index,arr){//第一个参数代表当前元素

    //第二个参数代表当前元素下标

    //第三个参数代表原数组

    })//数组中长度多少就循环多少次

    3.for-of循环

    运行循环获得键值

    var ar1=[2,4,6,8]for(vari of ar1){

    console.log(i)//2,4,6,8

    }

    for-of可用使用break,continue 和 return 配合使用,跳出循环

    for(vari of ar1){if(i==4){break}

    console.log(i)//2

    }

    对于普通对象直接遍历的话是会报错的 obj is not iterable

    for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法:

    可以使用 Object.keys(obj) 方法将对象的键名生成一个数组,然后遍历这个数组

    var obj={&

    展开全文
  • 引言:ES6为javascript为数组遍历提供了新的一种方式: for....of....。那之前的遍历方法各存在哪些缺点?for...of...有什么好处?接下来,我们先回顾一下有多少种方式。方法:第一种: for 循环特点:1. 代码不够...

    引言:

    ES6为javascript为数组遍历提供了新的一种方式: for....of....。那之前的遍历方法各存在哪些缺点?for...of...有什么好处?接下来,我们先回顾一下有多少种方式。

    方法:

    第一种: for 循环

    特点:

    1. 代码不够简洁

    2.常用,性能比较好,数组较大时,也需要优化。

    第二种: forEach

    特点:

    代码比较简洁,但是没法中断停止整个循环,性能比for弱

    第三种: for ....in...

    特点:

    更常用于对象遍历,注意点输出的i 是一个字符串类型,非数值类型,要用,通常还得转换,效率也比较低

    第四种:for...of... (es6新增)

    特点:

    1. 可以用break终止循环,continute跳出当前循环,继续后面的循环

    2. 用keys()方法获得数值型索引。

    4. 能遍历的对象有:数组,类数组对象,字符串,set和map结构等具有iterator接口的数据结构

    第五种: filter

    特点:

    不会对空数组检测 ,不会改变原始数组

    第六种:map

    特点:支持return 返回值,实际使用效率比foreach还低

    第七种:every

    特点:

    检测数组所有元素都符合条件返回true,否则返回false.

    第八种: some

    特点:

    检测数组只要有一个符合条件就返回true,剩下元素不会再继续执行,全部不符合返回false

    第9种:reduce & reduceRight

    特点:

    reduce ()接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值

    reduceRigh()  跟reduce不一样的是 他是从右边到左边。

    第10种: find() & findIndex()

    特点:

    1.find() 返回数组中符合测试函数条件的第一个元素。否则返回undefined 。

    2.findIndex() 返回数组中符合测试函数条件的第一个元素位置

    总结: for...of 是es6新出的一种遍历方式,能遍历的对象有:数组,类数组对象,字符串,set和map结构等具有iterator接口的数据结构。

    展开全文
  • JS数组遍历的几种方法

    万次阅读 多人点赞 2019-04-27 08:51:25
        最简单的一种循环遍历方法,也是使用频率最高的一种,可优化 var arr = [1, 2, 3, 4, 5, 6] for(var i = 0; i < arr.length; i++) { console.log(arr[i]) } // 1 2 3 4 5 6     优化:...

    for

        最简单的一种循环遍历方法,也是使用频率最高的一种,可优化
        循环过程中支持修改索引(修改 i)

    var arr = [1, 2, 3, 4, 5, 6]
    for(var i = 0; i < arr.length; i++) {
    	console.log(arr[i])
    }
    
    // 1 2 3 4 5 6
    

        优化:使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显

    var arr = [1, 2, 3, 4, 5, 6]
    var len = arr.length
    for(var i = 0; i < len; i++) {
    	console.log(arr[i])
    }
    
    // 1 2 3 4 5 6
    

    for…in…

        这个循环用的人也很多,但是效率最低(输出的 key 是数组索引),如果遍历的是对象,输出的则是对象的属性名

    var arr = ['我', '是', '谁', '我', '在', '哪']
    for(let key in arr) {
        console.log(key)
    }
    
    // 0 1 2 3 4 5
    
    let obj = {
            a: 11,
            b: 22,
            c: 33
    }
    for(let key in obj) {
    	console.log(key)
    }
    // a b c 
    

    for…of…(ES6)

        虽然性能要好于 for..in...,但仍然比不上普通的 for 循环
        注意:不能循环对象,因为任何数据结构只要部署 Iterator接口,就可以完成遍历操作,有些数据结构原生具备 Iterator 接口,比如ArrayMapSetString等,而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的,而对象Object恰恰是没有Symbol.iterator属性的,所以无法被for..of遍历

    var arr = ['我', '是', '谁', '我', '在', '哪']
    for(var key of arr) {
        console.log(key)
    }
    
    // 我 是 谁 我 在 哪
    

    forEach(也叫作增强for循环)

        1. 数组里的元素个数有几个,该方法里的回调就会执行几次
        2. 第一个参数是数组里的元素,第二个参数为数组里元素的索引,第三个参数则是它自己(利用第三个参数可以进行数组去重)
        3. 数组自带的遍历方法,foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高
        4. 循环的数组元素是基本数据类型,不会改变原数据的数据,循环的数组元素为对象,会改变原数组的对象属性的值
        5. 循环过程中不支持修改索引,回调中使用return不会报错,但是无效
        注意:不能使用breakcontinue跳出整个循环或当前循环的,会报错,但是结合try...catch可以实现跳出循环

    var arr = [1, 2, 3, 4, 5, 6]
    arr.forEach((item, idnex, array) => {
        console.log(item)     // 1 2 3 4 5 6
        console.log(array)    // [1, 2, 3, 4, 5, 6]
    })
    
    // 循环的数组元素是基本数据类型,不会改变原数据的数据
    var arr1 = [1, 2, 3, 4, 5, 6]
    arr1.forEach((item) => {
        item = 10
    })
    console.log(arr1) // [1, 2, 3, 4, 5, 6]
    
    // 循环的数组元素为对象,会改变原数组的对象属性的值
    var arr2 = [
        { a:1, b:2 },
        { a:11, b:12 }
    ]
    arr2.forEach((item) => {
        item.a = 10
    })
    console.log(arr2) //  [{a: 10, b: 2}, {a: 10, b: 2}]
    
    // 使用try...catch...可以跳出循环
    try {
       let arr = [1, 2, 3, 4];
       arr.forEach((item) => {
           // 跳出条件
           if (item === 3) {
               throw new Error("LoopTerminates");
           }
           console.log(item);
       });
    } catch (e) {
        if (e.message !== "LoopTerminates") throw e;
    };
    // 1 2
    

    map(ES6)

        遍历每一个元素并且返回对应的元素(可以返回处理后的元素) (map 映射 一一 对应)
        返回创建的新数组和原来旧数组的长度是一样的,使用比较广泛,但其性能还不如 forEach
        前两种写法都会改变原数组,第三中方式则不会改变原数组
        注意:不能使用breakcontinue跳出整个循环或当前循环的,会报错,但是结合try...catch可以实现跳出循环

    // 一、会改变原数组
    var arr = [1, 2, 3, 4, 5, 6]
    var newArr = arr.map(function (item, idnex) {
        return item * item
    })
    
    console.log(arr)      // [1, 2, 3, 4, 5, 6]
    console.log(newArr)   // [1, 4, 9, 16, 25, 36]
    
    // 二、会改变原数组元素中对象的属性值
    var arr = [{a: 1, b: 2},{a: 11, b: 12}]
    let newARR = arr.map((item)=>{
        item.b = 111
        return item
    })
    console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]
    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
    
    // 三、不会改变原数组
    var arr = [{a: 1, b: 2},{a: 11, b: 12}]
    let newARR = arr.map((item)=>{
        return {
        	...item,
        	b:111
        }
    })
    console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]
    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
    
    // 四、使用try...catch...可以跳出循环
    try {
        var arr = [1, 2, 3, 4];
        arr.map((item) => {
            //跳出条件
            if (item === 3) {
                throw new Error("LoopTerminates");
            }
            console.log(item);
            return item
        });
    } catch (e) {
        if (e.message !== "LoopTerminates") throw e;
    };
    // 1 2
    

    filter(ES6)

        遍历数组,过滤出符合条件的元素并返回一个新数组,没有符合条件的元素则返回空数组

    var arr = [
    	{ id: 1, name: '买笔', done: true },
    	{ id: 2, name: '买笔记本', done: true },
    	{ id: 3, name: '练字', done: false }
    ]
        
    var newArr = arr.filter(function (item, index) {
    	return item.done
    })
    
    console.log(newArr)
    
    // [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]
    

    some(ES6)

        遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false

    var arr = [
    	{ id: 1, name: '买笔', done: true },
    	{ id: 2, name: '买笔记本', done: true },
    	{ id: 3, name: '练字', done: false }
    ]
    
    var bool = arr.some(function (item, index) {
    	return item.done
    })
    
    console.log(bool)    // true
    

    every(ES6)

        遍历数组,每一个元素都满足条件 则返回 true,否则返回 false

    var arr = [
    	{ id: 1, name: '买笔', done: true },
    	{ id: 2, name: '买笔记本', done: true },
    	{ id: 3, name: '练字', done: false }
    ]
    
    var bool = arr.every(function (item, index) {
    	return item.done
    })
    
    console.log(bool)    // false
    

    find(ES6)

        遍历数组,返回符合条件的第一个元素,如果没有符合条件的元素则返回 undefined

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
        
    var num = arr.find(function (item, index) {
    	return item === 3
    })
    
    console.log(num)   //  3
    

    findIndex(ES6)

         遍历数组,返回符合条件的第一个元素的索引,如果没有符合条件的元素则返回 -1

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
        
    var num = arr.findIndex(function (item) {
    	return item === 3
    })
    
    console.log(num)   //  4
    
    展开全文
  • 最简单的一种循环遍历方法,也是使用频率最高的一种,可优化 循环过程中支持修改索引(修改 i) 在这里插入代码片// for 最简单的一种循环遍历方法,循环过程中支持修改索引(修改i) console.log('1 for循环') let...
  • 本篇文章主要介绍了Javascript 数组循环遍历之forEach详解,对学习forEach有很好的帮助,有需要的可以了解一下。1.js 数组循环遍历数组循环变量,最先想到的就是 for(var i=0;i除此之外,也可以使用较简便的...
  • for循环 使用示例 let array = ['item1','item2']; let len = array.length;...适用场景:非常灵活的一种方式,可以不必要遍历整个数组,可以根具需求随意跳出循环,但写法较为繁琐。 foreach 描述 for...
  • 顺序for循环:var myStringArray = ["Hello","World"];var arrayLength = myStringArray.length;for (var i = 0; i < arrayLength; i++) {console.log(myStringArray[i]);//Do something}优点适用于各种环境您...
  • javascript数组遍历for in的一些坑

    千次阅读 2017-04-20 20:38:03
    js数组遍历的时候,常见的的是for循环,简单易懂for (var index = 0; index ; index++) { console.log(myArray[index]); }但这样写比较麻烦也许你想到了用数组的forEach方法遍历myArray.forEach(function (value)...
  • 以任意顺序遍历一个对象的可枚举属性,遍历数组时,key为数组下标字符串;遍历对象,key为对象字段名 数组 let arr = [{age: 1}, {age: 5}, {age: 100}, {age: 34}] for (let key in arr) { console.log(key, a
  • js-数组遍历方法的总结与辨析(强烈推荐every与some) javascript中除了forEach等基础的遍历方法外,还有很多在遍历的同时做判断或修改数组的原生方法。这里记录一下常见方法的总结和相近方法的辨析。(部分方法介绍...
  • 本篇文章给大家比较一下6种JS数组遍历方法:for、foreach、for in、for of、....6种JS数组遍历方法一、forJavascript中的for循环,它用来遍历数组var arr = [1,2,3,4]for(var i = 0 ; i< arr.length ; ...
  • (即用each方法内,当不满足条件时想break跳出循环体,想continue继续执行下一个循环遍历),我们经常会习惯JS中的break何continue,但是使用之后没有效果,因为在JQuery中没有这两条命令,非其关键字。1. JQuery each...
  • 因为forEach可以用return进行类似for循环中continue的功能,但for循环中break的功能无法实现,而every和some都通过控制return的值来控制循环中断跳出break。 具体做法是: every方法返回值是布尔类型,最终返回值...
  • 1.首先看看跳出循环的方法 1)结束本次循环进入下一次循环: continue:for循环 、 for in 、 for of return true/false:for Each 2)结束整个循环 break:for循环 、 for in 、 for of、while、do{}while()、 ...
  • 先说结论:在for、for-in、for-of...在forEach、map、filter中break和continue会出现异常,return会跳出当前循环,但是会继续接下来的循环。 一、for循环 1、break使用 let array = new Array(0, 1, 2, 3, 4, 5, 6, ...
  • 使用break会报错,使用return也不能跳出循环。使用break将会报错:var arr = [1,2,3,4,5];var num = 3;arr.forEach(function(v){if(v == num) {break;}console.log(v);});使用return也不能跳...
  • js数组遍历方法大全

    2020-03-24 23:04:15
    1.forEach() :为每个数组元素调用一次函数(回调函数),无返回值。 语法:array.forEach(function(currentValue, index, arr), thisValue) function(currentValue, index, arr) 必需。 数组中每个元素需要调用...
  • js数组遍历所有元素方法 总结

    万次阅读 2018-02-28 01:39:42
    方法一:for(){} 遍历 这是最笨的方法,low到不解释 缺点:蠢! var arr = [1,2,3,&quot;a&quot;,true]; for(var i=0;i&amp;lt;arr.length;i++){ console.log(&quot;第&quot; + i + &...
  • 作者:Lichun Dai前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,...
  • JavaScript 中的循环遍历方法

    千次阅读 2020-12-22 14:48:47
    1、forlet arr = [1,2,3];for (let i=0;... //循环被跳过 }console.log(i,arr[i])}// 0 1// 2 3最常见的循环,不过注意 这里我用的是let , 如果你使用var的话 那么会有一种名为变量提升的默认操作...
  • console.log(item)//只打印7 说明跳出循环 })}catch(e){ console.log(e.message); if (e.message!=="myerr") {//如果不是咱们定义的错误扔掉就好啦 throw e } } 运行结果:
  • JS中的遍历方法 (借鉴了网上的其他文章内容) 1.for循环 一种优化版的for循环,将长度缓存起来,避免重复获取数组长度 for(let i = 0,a = arr.length;i < a;i++) 2.for of 用于遍历数组元素 3.forEach() arr....
  • 参考网站: http://www.cnblogs.com/lvmh/p/6104397.html 第一种最常用的:for循环 for(j =0;j < arr.length;j++) { } 优化版for循环 for(j = 0,len=arr.length...对于数组较大时,优化比较明显; 第二...
  • 只能用于遍历数组     函数参数     1 、值传递参数   2 、引用传递参数       2 、 time() 描述:返回 1970 年 1 月 1 日 0 时 0 分 0 秒,到现在的秒数。     ...
  • 原文出处:... 1. [...].some(ck)函数 ---- 某个一个为true,则为true ...对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true。...检查整个数组中是否有满足ck函数的元素。 

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,159
精华内容 3,263
关键字:

js数组遍历跳出循环