【ES5和ES6】数组遍历的各种方法集合

在这里插入图片描述

一、ES5的方法

1.for循环

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

2.forEach()

  1. 特点: 没有返回值,只是针对每个元素调用func
  2. 三个参数:item, index, arr ;当前项,当前项的索引,被遍历的数组
let arr = [1, 2, 3]
arr.forEach(function (item, index, arr) {console.log(item, index)
})
//  1 0
//  2 1
//  3 2

3. for 循环 和forEach区别

for 循环可以在循环体中终止或跳过该循环,forEach不可以

let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {if (arr[i] === 1) {continue // 跳过}if (arr[i] === 3) {break}console.log(arr[i])
}
// 2 

4.map()

  1. 特点:返回新的arr, 每个元素为调用函数返回的结果
  2. 参数:
    function:必选,数组中每个元素都会执行的函数
    thisValue:可选,用作"this"指向,如果不传,那么回调函数的this为全局对象
    function的参数:item, index, arr ;当前项,当前项的索引,被遍历的数组
let arr = [1, 2, 3]
let result = arr.map(function (value) {value += 1return value
})
console.log(arr, result)
//(3) [1, 2, 3] (3) [2, 3, 4]

4.filter()

  1. 特点:过滤元素, 返回符合条件的元素组成的新数组
let arr = [1,2,3] 
let result = arr.filter(function (value) {return value === 2
})
console.log(arr, result)
// (3) [1, 2, 3] [2]

5.some()

  1. 特点: 返回boolean,只要循环中,有一个元素符合条件,那么就返回true,否则false
let arr = [1,2,3]
let result = arr.some(function (value) {return value === 2
})
console.log(arr, result )
// (3) [1, 2, 3] true

6.every()

  1. 特点: 返回boolean,在循环中,每一个元素都符合条件,那么就返回true,否则false
let arr = [1,2,3]
let result = arr.every(function (value) {return typeof value === 'number'
})
console.log(arr, result)
// (3) [1, 2, 3] true

7.reduce()

1. 接收一个函数作为累加器

2. 参数:function(prev, cur, index, arr), initValue

prev 表示上一次调用函数的返回值
cur 表示当前正在处理的元素
index 当前元素的索引
arr 原数组
initValue 传递给函数的初始值

3. 常见应用场景

  1. 求数组的每一项的和
let arr = [1, 2, 3]
let sum = arr.reduce(function(prev, cur, index, arr){return prev + cur
}, 0) 
console.log(sum)
// 6
  1. 找到数组里面最大的值
let arr = [1, 2, 3]
let max = arr.reduce(function (prev, cur) {return Math.max(prev, cur)
})
console.log(arr, max)
// (3) [1, 2, 3] 3
  1. 数组去重
let arr = [1, 2, 3, 2, 4]
let res = arr.reduce(function (prev, cur) {prev.indexOf(cur) == -1 && prev.push(cur)return prev 
}, [])
console.log(res)
// (4) [1, 2, 3, 4]

8.for in (谨慎使用)

1.特点:不仅循环遍历了数组本身,同时循环遍历了数组原型链上的属性和方法

let arr = [1, 2, 3]
Array.prototype.name ='xiaoxiao'
Array.prototype.foo = function () {console.log('foo')
}
for (let index in arr) {console.log(index, arr[index])
}
//0 1
// 1 2
// 2 3
// name xiaoxiao
// foo ƒ () {
//	console.log('foo')
// }

二、ES6的方法

1.find()

返回第一个符合条件的元素

let arr = [1,2,3,4, 2]
let res = arr.find(function (value) {return value === 2
})
console.log(res, arr)
// 2 (5) [1, 2, 3, 4, 2]
// 返回第一个数字2

2.findIndex()

返回第一个符合条件的元素的索引

let arr = [1,2,3,4, 2]
let res = arr.findIndex(function(value) {return value === 2
})
console.log(arr, res)
// (5) [1, 2, 3, 4, 2] 1

3.for of 循环

1. 普通循环

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr) {console.log(item, arr)
}
// {name: '张三', age: 18}, Object (2) [{…}, {…}]
// {name: '赵四', age: 20}, Object (2) [{…}, {…}]

2.values() 获取每一项的value值

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr.values()) {console.log(item, arr)
}
// {name: '张三', age: 18}, Object (2) [{…}, {…}]
// {name: '赵四', age: 20}, Object (2) [{…}, {…}]

3.keys() 获取每一项的索引

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr.keys()) {console.log(item, arr)
}
// 0 (2) [{…}, {…}]
// 1 (2) [{…}, {…}]

4.entries(),返回每一项 索引 和 value值 组合的数组

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let [index, item]  of arr.entries()) {console.log(index, item)
}
// 0 {name: '张三', age: 18}
// 1 {name: '赵四', age: 20}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44927.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式Linux开发实操(八):UART串口开发

串口可以说是非常好用的一个接口,它同USB、CAN、I2C、SPI等接口一样,为SOC/MCU构建了丰富的接口功能。那么在嵌入式linux中又是如何搭建和使用UART接口的呢? 一、Console接口即ttyS0 ttyS0通常做为u-boot(bootloader的一种,像是Windows的BIOS),它需要一个交互界面,一般…

HTML中的字符串转义

为什么要转义&#xff1f; 转义可以防止 xss 攻击。接下来&#xff0c;我们来看一下如何转义。 HTML Sanitizer API Sanitizer 是浏览器自带的转义方法&#xff0c;在2021年初被提出&#xff0c;兼容性问题很大。 列举几个常用的 API&#xff1a; const $div document.qu…

C++------利用C++实现二叉搜索树【数据结构】

文章目录 二叉搜索树概念二叉搜索树的操作查找插入删除 二叉搜索树的应用 二叉搜索树 概念 什么是二叉搜索树&#xff0c;二叉搜索树就是指左孩子永远比根小右孩子永远比根大。这个规则适用于所有的子树。 上面的就是一棵二叉搜索树&#xff0c;我们还可以发现这棵树走一个中…

英伟达结构化剪枝工具Nvidia Apex Automatic Sparsity [ASP](1)——使用方法

英伟达结构化剪枝工具Nvidia Apex Automatic Sparsity [ASP]&#xff08;1&#xff09;——使用方法 Apex是Nvdia维护的pytorch工具库&#xff0c;包括混合精度训练和分布式训练&#xff0c;Apex的目的是为了让用户能够更早的使用上这些“新鲜出炉”的训练工具。ASP&#xff0…

块设备驱动模板

内核版本&#xff1a;4.14.0 基于设备树 使用请求队列&#xff0c;请求队列会用到I/O调度器&#xff0c;适合机械硬盘这种存储设备。 #include <linux/module.h> #include <linux/blkdev.h> #include <linux/hdreg.h> #define RAMDISK_SIZE (2*1024*1024…

Windows安装 Elasticsearch 教程

下载地址 Past Releases of Elastic Stack Software | Elastic 解压 解压完的样子 进入BIN目录 D:\Develop\elasticsearch\elasticsearch-7.12.0\bin 按住shift 鼠标右键 打开 powershell 窗口 查看ES版本 .\elasticsearch.bat --version 出现问题了 警告&#xff1a;不赞成…

如何学习专业的学术用语01

问题的提出——凭啥人家写的词汇这么专业 做法一 做法二&#xff1a;做一个专业数据库 专门做教育技术类的

React(6)

1.React插槽 import React, { Component } from react import Child from ./compoent/Childexport default class App extends Component {render() {return (<div><Child><div>App下的div</div></Child></div>)} }import React, { Compon…

(二)结构型模式:4、组合模式(Composite Pattern)(C++实例)

目录 1、组合模式&#xff08;Composite Pattern&#xff09;含义 2、组合模式应用场景 3、组合模式的优缺点 4、组合模式的UML图学习 5、C实现组合模式的简单示例&#xff08;公司的OA系统&#xff09; 1、组合模式&#xff08;Composite Pattern&#xff09;含义 组合模…

2022寒假牛客训练4

G-子序列权值乘积 设计知识&#xff1a; 欧拉降幂 如果我们要求ab%p 而b是一个很大的数&#xff0c;可以先将b对p-1取模&#xff0c;不会影响结果的正确性&#xff0c;前提是a和p互质。 这一题我们可以将数字先进行排序&#xff0c;因为子序列中只有最大和最小的才会被计算&am…

Hyper-V 扩展虚拟磁盘后,如何扩容到 /ubuntu--vg-ubuntu--lv

创建虚拟机的时候&#xff0c;一般选择 动态扩展虚拟硬盘&#xff0c;N 多年以来&#xff0c;一直没有关心过他是如何动态扩展的&#xff0c;直到最近折腾大文件 SQL 导入任务&#xff0c;遇到了磁盘空间占满的情形 以下这 2 个就体现了动态扩展空间&#xff0c;扩展起来很容易…

Visual Studio 如何放大代码字体的大小

1.打开Visual Studio&#xff0c;新建一个程序&#xff0c;一段代码&#xff0c;为接下去的操作做好准备。单击菜单栏的【工具】选项。 2.在跳出来菜单中找到【选项】&#xff08;一般在最后一项&#xff09;&#xff0c;然后单击。跳出新的窗口。 3.跳出新的窗口后&#xff…

Leetcode 0814周总结

本周刷题&#xff1a; 88, 108, 121, 219, 228, 268, 283, 303, 349, 350, 414, 448 88 合并两个有序数组 nums1{1, 2, 3 ,0, 0, 0} nums2{2, 5, 6} 合成效果&#xff1a;nums1{1, 2, 2, 3, 5, 6} 思路&#xff1a;【双指针】对两个数组设置双指针&#xff0c;依次比较哪…

无涯教程-TensorFlow - 单词嵌入

Word embedding是从离散对象(如单词)映射到向量和实数的概念&#xff0c;可将离散的输入对象有效地转换为有用的向量。 Word embedding的输入如下所示: blue: (0.01359, 0.00075997, 0.24608, ..., -0.2524, 1.0048, 0.06259) blues: (0.01396, 0.11887, -0.48963, ..., 0.03…

C++数组初始化

在C中&#xff0c;bool a[5]{} 和 bool a[5] 之间存在一些不同。 bool a[5]{}&#xff1a; 这将会初始化数组 a 的所有元素为 false&#xff0c;因为在初始化列表中没有提供任何值&#xff0c;编译器会自动将数组的所有元素初始化为其对应数据类型的默认值。对于布尔型数据&…

【Docker】Docker安装 MySQL 8.0,简洁版-快速安装使用

今天&#xff0c;使用docker安装mysql数据库进行一个测试&#xff0c;结果网上找了一篇文章&#xff0c;然后。。。。坑死我… 特总结本篇安装教程&#xff0c;主打一个废话不多说&#xff01; 坑&#xff1a;安装成功&#xff0c;客户端工具连接不上数据库》。。。 正文&…

【蓝桥杯】[递归]母牛的故事

原题链接&#xff1a;https://www.dotcpp.com/oj/problem1004.html 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 我们列一个年份和母牛数量的表格&#xff1a; 通过观察&#xff0c;找规律&#xff0c;我们发现&#xff1a; 当年份小于等于4时&…

js 小程序限流函数 return闭包函数执行不了

问题&#xff1a; 调用限流 &#xff0c;没走闭包的函数&#xff1a; checkBalanceReq&#xff08;&#xff09; loadsh.js // 限流 const throttle (fn, context, interval) > {console.log(">>>>cmm throttle", context, interval)let canRun…

五、二维费用的背包问题

五、二维费用的背包问题 题记算法题目代码 题记 二维费用的背包问题是指在选择物品放入背包时&#xff0c;每个物品有两个不同的费用&#xff0c;且背包的容量也有限制。目标是在保证费用不超过限制的前提下&#xff0c;使得放入背包的物品价值最大化。 算法 费用加了一维&a…

〔011〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇

✨ 目录 🎈 脸部崩坏🎈 下载脸部修复插件🎈 启用脸部修复插件🎈 插件生成效果🎈 插件功能详解🎈 脸部崩坏 相信很多人在画图时候,特别是画 有多个人物 图片或者 人物在图片中很小 的时候,都会很容易出现面部崩坏的问题这是由于神经网络无法完全捕捉人脸的微妙细节…