for、while、do While、for in、forEach、map、reduce、every、some、filter的使用

news2024/10/7 8:24:55

for、while、do While、for in、forEach、map、reduce、every、some、filter的使用

for

let arr = [2, 4, 6, 56, 7, 88];

//for
for (let i = 0; i < arr.length; i++) {
	console.log(i + ':' + arr[i]) //0:2 1:4 2:6 3:56 4:7 5:88
}

普通的for循环可以用数组的索引来访问或者修改原来数组对应的元素，即可以改原数组的数据

while

//while
let arr=[1,0,8,7],i=0;
while(i<arr.length){
    console.log(i+':'+arr[i]);//0:1 1:0 2:8 3:7
    i++;
}

do while

//do while
let arr=[1,0,8,7],i=0;
do{
    console.log(i+':'+arr[i]);//0:1 1:0 2:8 3:7
    i++
}while(i<arr.length)

for in

let obj = {
	name: '小明',
	age: 18,
	hobby: 'run,song,game'
};

for(let key in obj){
    console.log(key+':'+obj[key]) //name:小明 age:18 hobby:run,song,game
}

注意，对象也可以遍历的。

for of

let arr = [2, 4, 6, 56, 7, 88];
let obj = {
	name: '小明',
	age: 18,
	hobby: 'run,song,game'
};
for(let value of arr){
    console.log(value) //2 4 6 56 7 88
}

for (let [key, value] of arr.entries()) {
    console.log(key+':'+value); //0:2 1:4 2:6 3:56 4:7 5:88
}

for (let [key, value] of Object.entries(obj)) {
    console.log(key+':'+value); //name:小明 age:18 hobby:run,song,game
}

注意：这个for of既可以遍历列表也可以遍历对象。

forEach

最节省内存的一种遍历方式，但是不能用break，也不能用return

let arr = [2, 4, 6, 56, 7, 88];
let obj = {
	name: '小明',
	age: 18,
	hobby: 'run,song,game'
};
arr.forEach((value,key)=>{
	console.log(key + ':' + value) //0:2 1:4 2:6 3:56 4:7 5:88
})

Object.keys(obj).forEach((value)=>{
	console.log(value) //"name", "age", "hobby"
})

既可以遍历列表也可以遍历对象。

注意：forEach会改变原来数组中的值。

let arr = [
	{ id: '01001', title: '考研成绩' },
	{ id: '01002', title: '中国经济复苏进度条' },
]
arr.forEach(function(item,index,arr){
	item.date = "2023-1-1"
})

console.log(arr)

在这里插入图片描述

我们改变了原数组，并且，从上面例子可以看出，在js中，可以给一个对象直接添加一个原来没有的属性。

map

同forEach写法一样，循环每一个的时候就相当于在内存中新建了一个数据，比较占内存，与forEach不同的是，它可以return。返回数组。

let arr = [2, 4, 6, 56, 7, 88];
let obj = {
	name: '小明',
	age: 18,
	hobby: 'run,song,game'
};
arr.map((value,index)=>{
    console.log(index+':'+value) //0:2 1:4 2:6 3:56 4:7 5:88
})

Object.values(obj).map((value,key)=>{
    console.log(key+':'+value) //0:小明 1:18 2:run,song,game
})

console.log(Object.keys(obj)) // (3) ["name", "age", "hobby"]
console.log(Object.values(obj)) // (3) ["小明", 18, "run,song,game"]

在这里插入图片描述

注意：map方法不会改变原来数组

let arr = [1,2,3,4,5]
let newArr = arr.map(function(item,index,arr){
	return item*2
})
console.log(arr) // [1,2,3,4,5]
console.log(newArr) // [2,4,6,8,10]

在这里插入图片描述

但是对于数组中引用类型中的属性修改，还是会影响原来的数组中对象的属性值的。效果就和forEach一样了。

let arr = [
	{ id: '01001', title: '考研成绩' },
	{ id: '01002', title: '中国经济复苏进度条' },
]

let newArr = arr.map(function(item,index,arr){
	item.date = "2023-1-1"
    return item
})
console.log("arr",arr)
console.log("newArr",newArr)

在这里插入图片描述

但是可以用{…item}来做拷贝，然后我们修改拷贝后的值就行了，这样就不会影响原来的数组数据了。

let arr = [
	{ id: '01001', title: '考研成绩' },
	{ id: '01002', title: '中国经济复苏进度条' },
]

let newArr = arr.map(function(item,index,arr){
	item = {...item} // 这里我们多了一步拷贝处理
	item.date = "2023-1-1"
	return item
})

console.log("arr",arr)
console.log("newArr",newArr)

在这里插入图片描述

扩展：

js中…的用法

1.什么是…

…是扩展运算符，是es6的新语法

2.怎么使用

作用在对象上，返回一个对象，取出对象所有可遍历属性，返回一个新的对象可以进行拷贝

  1. 基本用法

    let person = { name:'张三'，age:18}
 
let someone = {...person}
 
console.log(someone) //返回 { name:'张三'，age:18 }

  2. 作用于数组对象

    et array = ['a','b','c']

let obj = {...array} 
 
console.log(obj) // {0:'a',1:'b',2:'c'} 说明：给数组的每个元素生成key,从0开始返回一个新的对象

  3. 合并对象

    let name = { name:'张三' }
 
let age = { age:18 }
 
let person = { ...name,...age }
 
console.log(person)  //{name:'张三'，age:18}

  4. 属性的合并

    let person = {name: "Amy", age: 15};
 
let someone = { ...person, name: "Mike", age: 17};
 
console.log(someone); //{name: "Mike", age: 17} 说明：自定义属性和扩展属性相同的时候，将会被覆盖。如果自定义属性在前，那么扩展属性覆盖自定义属性。反之则是自定义属性覆盖拓展属性。

filter

作用：不影响原数组，这个方法会返回一个新数组。回调函数若返回true，filter就会把这一项添加到要返回的新数组中作为一个元素。

注意：传入的函数里必填return，因为会根据return的值为false或true来过滤数据。

filter的几种情况如下：

（1）直接return布尔值，为true则元素值放入数组中，为false的就被过滤掉。

例子1：

let arr = [
	{ id: '01001', title: '考研成绩', isHot: true },
	{ id: '01002', title: '中国经济复苏进度条', isHot: false },
]

let result = arr.filter((item) => {
	return item.isHot
})

console.log(result) // [{ id: '01001', title: '考研成绩', isHot: true }]

// 看打印结果可以发现isHot为false的对象数据就被过滤掉了

例子2：

let arr = [1,2,3,4,5];
let result = arr.filter(function(item, index) {
    return item>2;
});
console.log(result);
// 输出[ 3, 4, 5 ]
// item：当前元素  index：当前元素的索引值

（2）return非布尔值时，也会通过将数据隐式转化为布尔值来过滤数组。

例子：

let arr = [1,undefined,null,3,0,"",NaN]
let result = arr.filter((item) => {
	return item
})

console.log(result) // [1，3]

// 将item的值转化为布尔值后，为false的元素就被过滤掉了，留下的为true的

（3）与其他方法结合使用：

这里先用一个小例子帮大家回忆一下数组的indexOf()方法的用法：用于返回某个指定的值在数组中首次出现的索引值，如果没有找到匹配的元素则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(2);
// 在数组中查找是否有2这个元素
console.log(index) //打印结果是1，表示2和数组中索引为1的元素的值匹配

①与indexOf()方法组合使用进行数组去重：

let arr = [1,1,2,4,5,6,5,5,6]
let newArr = arr.filter((item,index)=>{
	return arr.indexOf(item) === index
	// 因为indexOf始终返回第一个符合条件的元素的索引
	// 数组中重复出现的数值就不可能满足全等判断，就会被过滤掉
})

console.log(newArr) // [1,2,4,5,6]

②还有与map方法一起使用：

let arr = [
	{ id: '01001', title: '考研成绩', isHot: true },
	{ id: '01002', title: '中国经济复苏进度条', isHot: false },
]

// 用map方法给数据加上日期属性

let result = arr.map((item) => {
	item = {...item}
	item.date = '2023-01-01'
	return item
    // map方法后紧接着使用filter方法过滤数据
}).filter((item) => {
	return item.isHot === true
})

console.log(result)

reduce

作用：遍历数组，并构建返回一个最终的值。

语法：array.reduce(function(previous,current,index,arr),initValue);

参数说明：

①不传第二参数initValue时，我们以一个计算数组元素相加之和的例子说明：

let arr = [1,3,5,7]
let result = arr.reduce((previous,current)=>{
	console.log('previous:',previous, ' current:',current)
	return previous + current
})

console.log('result:',result)

打印结果为：

在这里插入图片描述

我们可以看到：

  • 传入的箭头函数执行了数组长度-1次，也就是3次；

  • 回调函数多次调用：

    第一次调用时，previous表示就是数组的第一个元素的值1，current是数组第二个元素的值3；

    第二次调用时，previous表示的是上次调用时return出来的值也就是1+3为4，current是数组第三个元素的值5；

    第三次调用时，previous同样表示的是上次调用返回的值也就是4+5为9，current表示数组第四个元素的值7。

  • result的值就是最后一次计算9+7的结果值16。

②传入第二参数initValue时，我们以一个获得新数组的每个元素是原数组每个元素累计相加之和的例子说明：

let arr = [1,3,5,7]
let sum = 0
let result = arr.reduce((previous,current)=>{
	console.log(previous, 'current:', current)
	previous.push(sum + current)
	sum += current
	return previous
}, [])

console.log('result:', result)

打印结果为：

在这里插入图片描述

我们可以看到：

  • 传入的箭头函数执行了arr数组长度一样的次数，也就是4次；
  • previous：箭头函数第一次调用时，表示的是传入的初始值initValue，也就是空数组，后面表示的是上次return出来的值；current：始终表示的是数组arr的每个元素的值；
  • result同样表示最后一次箭头函数调用return返回的结果。

reduce的使用例子：

上面我们举了2个简单例子区分reduce方法传入1个参数和2个参数的区别，下面我以一个计算购物车选中产品数量的例子来说明项目中reduce的具体应用场景。

在这里插入图片描述

目前购物车一共有3个产品，其中选中了2种产品，并计算选中的总价为22393，我们可以通过reduce方法计算①②这个2个值。

// arr表示购物车里所有产品数组，其中用不到的数据就省略了
let arr = [
    {
        id:12334,isChecked:1, // 1表示购物车选中了这个产品
        cartPrice:5999, // 表示产品单价5999
        skuNum:1, // 表示购物车产品数量为1
        skuName:"小米10 至尊纪念版 双模5G 骁龙865 120W快充 8GB+128GB 陶瓷黑 游戏手机",
    },{
        id:12375,
        isChecked:0, // 0表示购物车没有选中这个产品
        cartPrice:2323, // 表示产品单价为2323
        skuNum:1, // 表示购物车产品数量为1
        skuName:"华为P40 5G全网通智能手机 支持鸿蒙HarmonyOS 零度白 8G+128G",
    },{
        id:12376,
        isChecked:1, // 1表示购物车选中了这个产品
        cartPrice:8197, // 表示产品单价为8197
        skuNum:1, // 表示购物车产品数量为1
        skuName:"Apple iPhone 12 (A2404) 64GB 黑色 支持移动联通电信5G 双卡双待手机",
    }
]

因为每个产品对象的isChecked属性1就表示选中了，0表示没有选中，因此我们可以通过累计相加这个值来计算购物车选择的产品数：

// 计算购物车选中产品数
let num = arr.reduce((previous,current)=>{
	return previous + current.isChecked
	// previous初始值是传入的第二个参数0，current表示数组的当前遍历到的对象
},0)

// 通过累计相加所有产品的isChecked的属性值，获得选中的产品数量num为2

//计算选中产品总价格，我们也是通过reduce方法累计计算：

// 计算购物车选中产品总价格
let price = arr.reduce((previous,current)=>{
    return previous + current.isChecked * current.cartPrice * current.skuNum
    // 选中的产品的数量和价格的乘积累计相加
	},0)

// 最终的price的值就是选中产品总价

通过上面的例子我们可以看到这种要累计计算处理数据的情况，使用reduce方法是比较方便的操作。

some和every

因为some()方法和every()方法比较简单，因为比较相似所以这里也是一起讲解。

（1）some()方法用于检测数组中的元素是否满足return的判断条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

// some方法只要有一个元素符合return的条件就返回true，后面元素就不会再执行判断
let arr = [2,3,4,6]
let result = arr.some((item)=>{
	return item % 2 === 1 // 判断数组的每个元素是否除以2能余1
})
console.log(result) // 因为第二个元素3符合，所以结果为true

（2）every()方法用于检测数组中的元素是否都满足return的判断条件，只要有一个不符合就会返回false，都符合才返回true。

// every方法要求所有元素符合return的判断条件才返回true，不然就返回false
let arr = [2,3,4,6]
let result = arr.every((item)=>{
	return item % 2 === 0 // 判断数组的每个元素是否都能被2整除
})
console.log(result) // 因为第二个元素3不符合条件，所以结果为false

总结：

for：简单、可以通过索引访问或者修改原数组

while、do while：循环条件确定，和java一样

for in：可以遍历对象出对象的属性和属性值。

for of：既可以遍历列表也可以遍历对象。可以拿到列表的索引和值，也可以拿到对象的属性和属性值

forEach：省内存，但是不能使用for寻找中的break。可以拿到数组的索引和元素。可以获取对象中的属性值。注意：forEach会改变原来数组中的值。forEach方法没有返回值，一般用于直接修改原数组；

map：不会改变原来数组。但是对于引用数据类型还是会影响原来数组中的对象的属性的。但是可以用过{… 对象}的语法来解决这个问题。map会返回一个数组对象，这个数组对象就是被改变后的对象。

filter：filter()方法用于过滤列表，返回的结果就是过滤后的新数组。这个还是很好用的。

reduce：一般我们用来做累加

some：判断列表中是否有某个元素符合某个规则

every：判断列表中是否全部元素都符合某个规则

注意：js中可以给一个对象直接添加原来没有的属性。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI篇-如何用AI辅助对图片进行鉴赏

AI篇-如何用AI辅助对图片进行鉴赏

前言 目录 前言 一、观众侧鉴赏图片 方法1&#xff1a;直接将图片发给文心一言&#xff0c;让文心一言分析。 方法2&#xff08;正确方法&#xff09;&#xff1a;将图片简单介绍并把图片发给文心一言&#xff0c;让文心一言分析。 二、作者介绍图片 方法&#xff08;正…
阅读更多...
智慧公厕管理系统：让公厕更智能、更高效的利器

智慧公厕管理系统：让公厕更智能、更高效的利器

公厕是城市基础设施的重要组成部分&#xff0c;然而&#xff0c;由于管理不善和公共卫生意识的薄弱&#xff0c;公厕经常面临着脏乱差的问题&#xff0c;令人不愿意使用。为了改善公厕管理的现状&#xff0c;智慧公厕管理系统的出现成为了一种创新的解决方案。 智慧公厕管理系…
阅读更多...
大模型微调发展-学习调研总结

大模型微调发展-学习调研总结

模型微调前言 https://blog.csdn.net/weixin_39663060/article/details/130724730 针对于小公司&#xff0c;如何能够利用开源的大模型&#xff0c;在自己的数据上继续训练&#xff0c;从而应用于自己的业务场景&#xff1f;或低成本的方法微调大模型。 目前主流的方法包括201…
阅读更多...
小程序之微信登录授权（6）

小程序之微信登录授权（6）

⭐⭐ 小程序专栏&#xff1a;小程序开发专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.了解微信授权登录 小程序登录授权基本原理&#xff1a; 二.微信授权登录演示 三.微信授权与后端的交互 3.1后台代码&#xff1a; 3.2 前端代码&#xff1a; 四.微信退出 五.微信表情包…
阅读更多...
DELM深度极限学习机回归预测研究（Matlab代码实现）

DELM深度极限学习机回归预测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
自然语言处理---Self Attention自注意力机制

自然语言处理---Self Attention自注意力机制

Self-attention介绍 Self-attention是一种特殊的attention&#xff0c;是应用在transformer中最重要的结构之一。attention机制&#xff0c;它能够帮助找到子序列和全局的attention的关系&#xff0c;也就是找到权重值wi。Self-attention相对于attention的变化&#xff0c;其实…
阅读更多...
项目总结-商品购买流程

项目总结-商品购买流程

&#xff08;1&#xff09;添加购物车 Controller&#xff1a; CartService&#xff1a; 实现类&#xff1a; CartDetail detaildao.queryByCdid(cid,gds.getId()); CartDao&#xff1a; //获取详情对象Select("select * from t_cartdetail where cid#{cid} and gid#{gid…
阅读更多...
buu第五页 wp

buu第五页 wp

[RootersCTF2019]babyWeb 预期解 一眼就是sql注入&#xff0c;发现过滤了 UNION SLEEP " OR - BENCHMARK盲注没法用了&#xff0c;因为union被过滤&#xff0c;堆叠注入也不考虑&#xff0c;发现报错有回显&#xff0c;尝试报错注入。 尝试&#xff1a; 1||(updatex…
阅读更多...
ubuntu20.04下安装nc

ubuntu20.04下安装nc

前言 nc在网络渗透测试中非常好用&#xff0c;这里的主要记一下Ubuntu20.04中nc的安装 编译安装 第一种方式是自己编译安装&#xff0c;先下载安装包 nc.zip wget http://sourceforge.net/projects/netcat/files/netcat/0.7.1/netcat-0.7.1.tar.gz/download -O netcat-0.7.…
阅读更多...
anyproxy 的安装和抓包使用

anyproxy 的安装和抓包使用

简介 AnyProxy是阿里开发的开源的代理服务器&#xff0c;主要特性包括&#xff1a; 基于Node.js&#xff0c;开放二次开发能力&#xff0c;允许自定义请求处理逻辑支持Https的解析提供GUI界面&#xff0c;用以观察请求 安装运行Anyproxy 首先需要电脑由安装 node&#xff0…
阅读更多...
H3C SecParh堡垒机 data_provider.php 远程命令执行漏洞

H3C SecParh堡垒机 data_provider.php 远程命令执行漏洞

构造poc执行远程命令&#xff1a; /audit/data_provider.php?ds_y2019&ds_m04&ds_d02&ds_hour09&ds_min40&server_cond&service$(id)&identity_cond&query_typeall&formatjson&browsetrue漏洞证明&#xff1a; 文笔生疏&#xff0c…
阅读更多...
【大模型应用开发教程】02_LangChain介绍

【大模型应用开发教程】02_LangChain介绍

LangChain介绍 什么是 LangChain1. 模型输入/输出2. 数据连接3. 链&#xff08;Chain&#xff09;4. 记忆&#xff08;Meomory&#xff09;5. 代理&#xff08;Agents&#xff09;6.回调&#xff08;Callback&#xff09;在哪里传入回调 ?你想在什么时候使用这些东西呢&#x…
阅读更多...
1024常玩到的漏洞(第十六课)

1024常玩到的漏洞(第十六课)

1024常玩到的两个漏洞(第十六课) 漏洞扫描工具 1024渗透OpenVas扫描工具使用(第十四课)-CSDN博客 流程 一 ms12-020漏洞分析 MS12-020漏洞是一种远程桌面协议（RDP）漏洞。在攻击者利用该漏洞之前，它需要将攻击者的计算机连接到受害者的计算机上。攻击者可以通过向受害者计算…
阅读更多...
跟着NatureMetabolism学作图：R语言ggplot2转录组差异表达火山图

跟着NatureMetabolism学作图：R语言ggplot2转录组差异表达火山图

论文 Independent phenotypic plasticity axes define distinct obesity sub-types https://www.nature.com/articles/s42255-022-00629-2#Sec15 s42255-022-00629-2.pdf 论文中没有公开代码&#xff0c;但是所有作图数据都公开了&#xff0c;我们可以试着用论文中提供的数据…
阅读更多...
Linux进程与线程的内核实现

Linux进程与线程的内核实现

进程描述符task_struct 进程描述符&#xff08;struct task_struct&#xff09;pid与tgid进程id编号分配规则内存管理mm_struct进程与文件,文件系统 进程,线程创建的本质 clone函数原型线程创建的实现进程创建的实现 总结 进程描述符task_struct 进程描述符&#xff08;st…
阅读更多...
自动驾驶的商业应用和市场前景

自动驾驶的商业应用和市场前景

自动驾驶技术已经成为了交通运输领域的一项重要创新。它不仅在改善交通安全性和效率方面具有巨大潜力&#xff0c;还为各种商业应用提供了新的机会。本文将探讨自动驾驶在交通运输中的潜力&#xff0c;自动驾驶汽车的制造商和技术公司&#xff0c;以及自动驾驶的商业模式和市场…
阅读更多...
Git GUI工具：SourceTree代码管理

Git GUI工具：SourceTree代码管理

Git GUI工具&#xff1a;SourceTree SourceTreeSourceTree的安装SourceTree的使用 总结 SourceTree 当我们对Git的提交、分支已经非常熟悉&#xff0c;可以熟练使用命令操作Git后&#xff0c;再使用GUI工具&#xff0c;就可以更高效。 Git有很多图形界面工具&#xff0c;这里…
阅读更多...
JAVA高级教程Java 泛型（10）

JAVA高级教程Java 泛型（10）

目录 三、泛型的使用泛型类泛型接口泛型方法 四、泛型在集合中的使用1、使用泛型来创建set2、使用泛型来创建HashSet3、使用equals&#xff0c;hashCode的使用Person 类HashSet的使用泛型TreeSet的使用泛型comparator实现定制比较(比较器) 三、泛型的使用 泛型类语法 类名T表示…
阅读更多...
散列表：如何打造一个工业级水平的散列表？

散列表：如何打造一个工业级水平的散列表？

文章来源于极客时间前google工程师−王争专栏。 散列表的查询效率并不能笼统地说成是O(1)。它跟散列函数、装载因子、散列冲突等都有关系。如果散列函数设计得不好&#xff0c;或者装载因子过高&#xff0c;都可能导致散列冲突发生的概率升高&#xff0c;查询效率下降。 极端情…
阅读更多...
在ESP32上使用Arduino（Arduino as an ESP-IDF component）

在ESP32上使用Arduino（Arduino as an ESP-IDF component）

目录 前言 原理说明 操作步骤 下载esp-arduino 安装esp-arduino 工程里配置arduino 1、勾选该选项&#xff0c;工程将作为一个标准的arduino程序工作 2、不勾选该选型&#xff0c;工程将作为一个传统的嵌入式项目开发&#xff0c; 前言 Arduino拥有丰富的各类库&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023