javascript中遍历数组的方法

最新推荐文章于 2024-05-11 11:32:11 发布
最新推荐文章于 2024-05-11 11:32:11 发布
阅读量186 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qin904495445/article/details/105660227
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
         * js中遍历数组的7个方法 
         * 1. forEach
         * 2. map (映射)  有返回值(数组),  个数和之前的一样
         * 3. filter (过滤)  有返回值(数组) 个数和之前的可能不一样  
         * 
         * 判断
         * 4. some  判断是否有一个以上(>=1)满足条件的 true/false
         * 5. every 判断是否都满足条件.  true / false
            
         * 查找
         * 6. find : 查找满足条件的的一个元素 (找不到undefined)
         * 7. findIdex : 查找满足条件的一个索引
            
         * 其他 : 
         * 1. forEach 没有return ,没有返回值
         * 2. 其他都是有return ,有返回值 
         */

        /**
         * 0. for 
         * 支持 break 终止循环
         * 支持 continue 跳过当前循环
         */
        var arr = [1, 2, 3, 4, 5];
        for (var i = 0; i < arr.length; i++) {
            // console.log(arr[i]);
        }

        /**
         * 1. forEach(callback, thisArg)  es5
         * 遍历数组, 等同于 for(但是性能没有for好)
         * 不支持 break 和 continue
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 没有返回值
         */
        arr.forEach(function (item, index, array) {
            // console.log(item,index,array)
        })
        /**
         * 2. map(callback, thisArg) es5
         * 遍历数组, 根据数组里的每一项,把处理之后的数据返回给数组 
         * 不支持 break 和 continue
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 默认返回一个长度等于原数组 的 新数组; 每一个的值取决 循环中return 的值， 默认undefined
         */
        var a = arr.map(function (item, index, array) {
            // // console.log(item,index,array)
            // return item
        })

        /**
         * 3. filter(callback, thisArg) (过滤) es5
         * 遍历数组,过滤出来符合条件的元素,放到一个新数组里面
         * 不支持 break 和 continue
        * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 默认返回一个空数组 ，数组内容取决 原数组中满足 return后的判断条件的item
         */
        var arr1 = [
            { id: 2, name: 'ls', done: false },
            { id: 1, name: 'zs', done: true },
            { id: 3, name: 'ww', done: false },
            { id: 3, name: 'ww', done: false }
        ]
        var a = arr1.filter(function (item, index, array) {
            // console.log(item, index, array)
            return item.done
        })
        // console.log(a);

        /**
         * 4. some(callback, thisArg)  es5
         * some方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
         * 遍历数组, 判断是否有一个以上(>=1)符合条件的元素;遇到第一个满足条件的元素 就会停止循环
         * 不支持 break 和 continue
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 默认返回一个false;存在满足条件的 就会返回true
         * 如果用一个空数组进行测试，在任何情况下它返回的都是false。
         */
        var b = arr1.some(function (item, index, array) {
            // console.log(item.name)
            // console.log(item, index, array)
            return item.done == true
        })
        // console.log(b);


        /**
         * 5. every(callback, thisArg) es5
         * every方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
         * 判断是否`每一个都(全部)符合条件,  如果全部 满足 => true/ false
         * 可以使用 return true或者false 来实现  break 和 continue的行为
         * 不支持 break 和 continue 
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 返回 true 或 false
         * 若收到一个空数组，此方法在一切情况下都会返回 true。
         */
        var c = arr.every(function (item, index, array) {
            if (index === 2) {
                // return false;// return false = 终止循环 
            } else {
                // console.log(item,index,array)
            }
            return true;// 继续循环
        })
        // console.log(c)
        //下例检测数组中的所有元素是否都大于 10。
        // function isBigEnough(element, index, array) {
        //     return element >= 10;
        // }
        // [12, 5, 8, 130, 44].every(isBigEnough);   // false
        // [12, 54, 18, 130, 44].every(isBigEnough); // true
        // // 箭头函数为上面的检测过程提供了更简短的语法。es6 写法
        // [12, 5, 8, 130, 44].every(x => x >= 10); // false
        // [12, 54, 18, 130, 44].every(x => x >= 10); // true

        /**
         * 6. find(callback, thisArg) es6
         * find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
         * 遍历数组 , 查找符合条件的元素 遇到第一个满足条件的元素 就会停止循环
         * 不支持 break 和 continue 
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 返回 只有一个 默认第一个 (找不到返回 undefined)
         */
        var d = arr1.find(function (item, index, array) {
            // console.log(item,index,array)
            return item.name == 'ww';
        })
        // console.log(d);

        /**
         * 7. findIndex(callback, thisArg)  es6
         * findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
         * 遍历数组 , 查找符合条件元素的下标 遇到第一个满足条件的元素 就会停止循环
         * 不支持 break 和 continue 
         * callback 可以接收一至三个参数   
         *      item  => 当前下标的值
         *      index => 当前下标
         *      array => 当前循环的数组
         * thisArg 可选。执行callback时作为this对象的值.
         * 返回 只有一个 默认第一个满足条件的下标 (找不到返回 -1)
         */
        var e = arr1.findIndex(function (item, index, array) {
            // console.log(item,index,array)
            //this => {name:'lili'}
            return item.name == 'w1w';
        },{name:'lili'})
        // console.log(e);


        /**
         * * for in 
         * 支持 break 终止循环
         * 支持 continue 跳过当前循环
         * index 的属性为 string  
         * arr.a = 8  会打印 a 8
         */

        for (const index in arr) {
            if (index === '2') {
                //continue 
                //break
            }
            //console.log(index, arr[index]);
        }

        /**
         *  for of 循环 es6 新增
         * 支持 break 终止循环
         * 支持 continue 跳过当前循环
         * item 的值是遍历对象的 key value 中的 value
         */

        for (const item of arr) {
            if (item === 2) continue;
            console.log(item);
        }
    </script>
</body>

</html>
wm-tuzki
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中数组遍历方法
m0_67401761的博客
03-08 845
示例中的数组为： var arr = [ { id: 1, name: '王昭君' }, { id: 2, name: '安琪拉' }, { id: 3, name: '鲁班七号' }, ]; var nums = [1, 2, 3, 4, 5]; 1. 普通for循环； for (let i = 0; i < arr.length; i++) { console.log(arr[i], i); } 2，forEach循环； arr.forEach((ele, index) =&g
JavaScript遍历数组
小游
12-01 73
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 for语句 var arr = [1,2,4,6] for(var i = 0, len = arr.length; i < len; i++){ console.log(arr[i]) } foreach语句 var arr = [1,5,8,9] arr.forEach(function(item) { console.log(item); }) for-in语句 var obj = { name:.
JS遍历数组的十五种方法
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
js中数组的遍历的几种方法
热门推荐
1000001000
02-21 9万+
javascript中数组的几种遍历方法
JS遍历数组的十种方法总结
最新发布
大圣归来圣骑士清欢的博客
05-11 1027
JS遍历数组的十种方法
JavaScript之数组遍历：轻松掌握的五种实用技巧
m0_61932070的博客
05-18 257
在编程世界中，数据处理是一项基本而重要的技能。无论你是初学者，还是有一定经验的开发者，理解和熟练掌握JavaScript中的数组遍历都是提升代码效率的关键。接下来的内容，将引导你步入JavaScript数组遍历的世界，介绍五种常见的遍历方法，帮助你更好地处理数组数据。
JavaScript中数组如何遍历
HRD的博客
06-13 3620
JavaScript中遍历数组的方法：1、使用for循环语句；2、使用forEach()方法调用回调函数；3、使用map()方法调用回调函数；4、使用“for..in”循环语句；5、使用“for…of”循环语句。本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。在使用 JavaScript 编写代码过程中，可以使用多个方法对数组进行遍历；包括 for循环、forEach循环、map 循环、forIn循环和forOf循环等方法。一、for 循环：基础、简单这是最基础和
JavaScript数组遍历的各种方式
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
06-26 2160
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。forEach() 不会改变其调用的数组，但是，作为 callbackFn 的函数可以更改数组。这只是一个大概的测试结果，影响测试的结果也包括运行数据的大小，运行抽样数据的大小等因素。map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。，而且不能继续链式调用。
JavaScript For...In 使用方法
10-30
* For...In 声明可以遍历数组和对象，但是无法遍历字符串和数字，因为它们不是 iterable 的对象。 For...In 声明是 JavaScript 中的一种强大且灵活的遍历方法，它可以用来遍历数组、对象、字符串、数字等多种类型的...
JavaScript 数组的 uniq 方法
10-30
在遍历方法中，可以顺序遍历数组中的每个元素，如果这个元素的值已经访问过，则加入 Array2，否则加入 Array1。这种方法的时间复杂度约为 O(N^2)。 桶算法是一种更高效的方法，可以将时间复杂度降低到 O(N)。桶算法...
解析JavaScript数组方法reduce
10-20
`reduce`方法是一个实例方法，它遍历数组的每个元素，并通过一个累积器函数（callback）来处理这些元素。这个累积器函数可以将数组的值逐步合并成一个单一的最终值。 **语法：** `arr.reduce(callback[, initial...
javascript sort()对数组中的元素进行排序详解
10-16
当调用`sort(ascending)`或`sort(descending)`时，JavaScript会遍历数组中的每一对元素，使用比较函数来决定它们的相对位置。 在实际应用中，`sort()`方法还可以处理更复杂的情况，比如排序对象数组。例如，如果...
ES6ArrayHelper:探索JavaScript ES6中的数组帮助器方法
05-16
您还可以创建一个函数并将引用传递给forEach，如下所示 const items = (item) => { console.log(item) } arr.forEach(items)地图Map会遍历数组的每个项目，就像forEach一样，但是Map返回数组的值。 const arr = [{...
JavaScript数组遍历方法
m0_58013334的博客
08-22 431
在 JavaScript 中，遍历数组是一项常见的任务。它允许我们访问数组中的每个元素，并执行相应的操作。本文将介绍几种常用的 JavaScript 数组遍历方法，让我们一起来了解它们。
Javascript的几种遍历数组的方式
JohnJill的博客
02-25 194
vue前端入门
掌握JavaScript中数组遍历的7种方法
CRMEB小程序商城的博客
11-02 555
作为JavaScript开发人员，熟悉数组的遍历和操作是非常重要的。数组遍历是处理和操作数组元素的基本需求之一。本文将介绍JavaScript中的10种常见数组遍历方法，帮助你成为数组操作的达人。数组的遍历for循环forEach方法for…of循环map方法reduce方法for…in循环filter方法。
JS中循环遍历数组的几种常用方式总结
铁锤妹妹的博客
04-15 5万+
第一种：for循环，也是最常见的 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 打印结果： 第二种：forEach（） 1.）forEach() 遍历普通数组 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; arr.forEach(item => {
JS遍历数组的方法【详解】
杜永康的博客
10-28 5144
数组名称.forEach（(item,index)=>{}）遍历（常见用在对象中，遍历对应的key值和value值）（let 变量名 of 数组名称）{代码块}（let 变量名 in 数组名称）{代码块}遍历（可以同时取出数组中的值和值对应的下标）法三：for --- of。法四：for --- in。法二：forEach。
Javascript常见遍历数组的方法
警警的博客
04-08 285
Javascript常见遍历数组的方法
vue在js中遍历数组
06-08
在Vue之外的JavaScript中，你可以使用for循环或者forEach方法来遍历一个数组。下面是两种遍历数组的方式： 1. 使用for循环： ``` var items = ["apple", "banana", "orange"]; for(var i = 0; i ; i++) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值