浅谈JS数组内置遍历方法有哪些和区别

2024-10-08 05:54:23

forEach()（ES6）方法

forEach()（ES6）方法对数组的每个元素执行一次给定的函数。

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

注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try...catch可以实现跳出循环

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

缺点：没有办法中止或跳出 `forEach()` 循环

map()（ES6）方法

map()（ES6）方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

    const array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);  //[2, 8, 18, 32]

三个参数：数组元素，元素索引，原数组本身

flatMap()方法

flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

    var arr1 = [1, 2, [3, 4]];
    arr1.flatMap(x => x);    //[1, 2, 3, 4]
    var arr1 = [1, 2, 3, 4];
    arr1.flatMap(x => [[x * 2]]);   // [[2], [4], [6], [8]]

for...in...

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

for...of...

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

filter（ES6）遍历数组

filter（ES6）遍历数组，过滤出符合条件的元素并返回一个新数组, 如果没有任何数组元素通过测试，则返回空数组。

    const result = words.filter(word => word.length > 6);
    console.log(result)   //["exuberant", "destruction", "present"]
some（）函数（ES6）
    遍历数组中是否有符合条件的元素，返回值为Boolean值
    这个它只要找到一个符合条件的，就返回 true。
    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
简单的说就是如果回调函数每次返回的值都是 true 的话，则 every() 返回 true，否则为 false。

    var arr = [
        { id: 1, name: '买笔', done: true },
        { id: 2, name: '买笔记本', done: true },
        { id: 3, name: '练字', done: false }
    ]
    var bool = arr.every((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( (item, index) => {
        return item === 3
    })
    console.log(num)   //  3

findIndex（）函数（ES6）

这个函数与上面的find（）作用一样，就是它返回的值为该通过第一个元素的索引。

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

到此这篇关于浅谈JS数组内置遍历方法有哪些和区别的文章就介绍到这了,更多相关JS数组内置遍历内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js数组循环遍历数组内所有元素的方法

例,for(){}遍历数组复制代码代码如下: <script type="text/javascript">  </script> 例,for in循环遍历数组复制代码代码如下: <html><body>
JS数组的遍历方式for循环与for...in

JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&
JS实现遍历不规则多维数组的方法

本文实例讲述了JS实现遍历不规则多维数组的方法.分享给大家供大家参考,具体如下: 直接进入正文: 我们有时候处理数据,可能会遇到一些不规则(无法预料的数据结构),那么拿到这种数据我们如何进行遍历操作呢?举个例子: var data= { a: { one: 1, two: 2, three: {four:'2',five:'4'} }, b: { six: 4, seven: 5, eight: 6 }, c: { nine: 7, ten: 8} } 比如上边的数据(实际情况是这个数据会有各种
JS中循环遍历数组的四种方式总结

本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl
浅谈JS数组内置遍历方法有哪些和区别

目录 forEach()(ES6)方法 map()(ES6) 方法 flatMap()方法 for...in... for...of... filter(ES6)遍历数组 every()函数(ES6) find()函数(ES6) findIndex()函数 (ES6) forEach()(ES6)方法 forEach()(ES6)方法对数组的每个元素执行一次给定的函数. 1. 数组里的元素个数有几个,该方法里的回调就会执行几次 2. 第一个参数是数组里的元素,第二个参数为数组里元素的索引
浅谈js常用内置方法和对象

JS内置函数不从属于任何对象,在JS语句的任何地方都可以直接使用这些函数.JS中常用的内置函数如下: 1.eval(str)接收一个字符串形式的表达式,并试图求出表达式的值.作为参数的表达式可以采用任何合法的操作符和常数.如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样. 2.parseInt(str,n)试图从一个字符串中提取一个整数.可附加一个n整数实现返回n进制整数.如果在字符串中存在除了数字.符号.小数点和指数符号以外的字符,就停止转换,返回已有的结果.如
浅谈JavaScript的内置对象和浏览器对象

在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性. 2. 用来操作对象特性的若干动作,也就是若干函数,通常称为方法. 浏览器对象对象含义 anchor 当前文档中设置了name属性的超链接 applet 当前文档中的小程序 area 客户端图形映射中的区域 button 表单中的按钮 checkbook 表单中的复选框 document 当前窗口中的HTML文档
浅谈js数组和splice的用法

首先添加一个splice函数: splice:该方法的作用就是从数组中删除一个元素 array.splice(index,count,value....); index:表示从哪一个下标开始, count:表示删除元素的个数 value:代表增加的元素 example: 1.var array = new Array(1,2,3,4,5,6); array.splice(0,1,2) result:2,2,3,4,5 2.var array = new Array(1,2,3,4,5,6); a
浅谈Java数组的一些使用方法及堆栈存储

数组用于存储一组同一数据类型数据的容器数组会对放入其中的数据自动编号,编号是从0开始的---下标定义格式数据类型[] 数组名 = new 数据类型[数组的大小];---可以先声明再初始化 int[] arr = new int[5];---定义了一个最多能存储5的整数的数组 arr[3] = 4; arr[3]---通过数组名[下标]的形式来获取数组元素或者给对应的位置赋值数据类型[] 数组名 = new 数据类型[]{元素1,元素2--}; int[] arr = new int[]
浅谈使用Python内置函数getattr实现分发模式

本文研究的主要是使用Python内置函数getattr实现分发模式的相关问题,具体介绍如下. getattr 常见的使用模式是作为一个分发者.举个例子,如果你有一个程序可以以不同的格式输出数据,你可以为每种输出格式定义各自的格式输出函数,然后使用唯一的分发函数调用所需的格式输出函数. 例如,让我们假设有一个以 HTML.XML 和普通文本格式打印站点统计的程序.输出格式在命令行中指定,或者保存在配置文件中.statsout 模块定义了三个函数:output_html.output_xml 和 o
浅谈js中子页面父页面方法变量相互调用

(1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q
浅谈js函数的多种定义方法与区别

定义一个函数一般有如下三种方式: 1.函数关键字(function)语句: function fnMethodName(x){ alert(x); } 2.函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} 3.Function()构造函数: var fnMethodName = new Function('x', 'alert(x);') 上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常
浅谈js数组splice删除某个元素爬坑

先来看下几个概念: // splice:返回从原始数组中删除的项(如果没有任何删除,则返回空数组) // 当指定2个参数时,表示删除 // 当指定3个参数,且第2个参数为0时表示插入 // 当指定3个参数,且第2个参数为1时表示替换本次就拿删除举例,本身我们想删除数组中的某个指定元素,我们需要知道它所在数组中的下标,我们可以用数组.indexOf获取它所在的下标,然后拿splice删除这个元素. 本身是没问题代码如下: var arr = ["张三","李四"
浅谈JS中的!=、== 、!==、===的用法和区别

var num = 1; var str = '1'; var test = 1; test == num //true 相同类型相同值 test === num //true 相同类型相同值 test !== num //false test与num类型相同,其值也相同, 非运算肯定是false num == str //true 把str转换为数字,检查其是否相等. num != str //false == 的非运算 num === str //false 类型不同,直接返回fals