遍历数组、对象的方法
前提:前端最重要的任务的经常要处理数据的!经常的是列表的遍历问题!例如遍历数组、对象的方法!!!
遍历数组:
1、普通for循环
for(var i = 0; i < arr.length;i++ ){//代码
}
2、forEach循环
arr.forEach((item,index,arr)=>{//代码
})
forEach接收一个回调函数作为参数,而这个回调函数有接受三个参数,作为参数。item是每个元素,index元素在数组中的下标,arr数组本身。 没有返回值!
3、map循环
var brr= arr.map((item,index,arr)=>{//代码return item * 2;
})
//arr---->[1,2,3]
//brr---->[2,4,6]
map的用法和forEach差不多。但是map是有返回值的。他的返回值是一个新数组
map方法不改变原数组。是映射,即数组元素的映射。它提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。默认返回一个数组,这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。
4、for–of循环
for(var item of arr){//代码
}
只有是现实iterator 接口的才能用for—of.对象不能
es6新增了interator接口的概念,目的是对于所有数据结构提供一种统一的访问机制,这种访问机制就是for of。
即:所有有interator接口的数据,都能用for of遍历。常见的包括数组、类数组、Set、Map等都有interator接口。
5、filter过滤
var arr = [{name:'张三',age:'20'},{name:'李四',age:"50"}
]arr.filter(item=>{return item.name;// [张三,李四]})arr.filter(item=>{return item.age>30;//[{name:"李四",age:"50"}]})//接受一个回调函数作为参数,返回值是一个新数组
filter,过滤,即对数组元素的一个条件筛选。它提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。默认返回一个数组,原数组的元素执行了回调函数之后返回值若为true,则会将这个元素放入返回的数组中。
filter方法不改变原数组
6、every遍历
var arr=[50,6,70,80];arr.every((item,index,arr)=>{return item > 50; //每一项数据都要大于50})//false
every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。(全部符合条件)
7、some遍历
var arr=[50,6,70,80];arr.some((item,index,arr)=>{return item > 50; //只要有一项数据都要大于50})//true
some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。(只要有一个符合)
some方法和every的用法非常类似,提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。
数组的每一个元素都会执行回调函数,当返回值全部为true时,every方法会返回true,只要有一个为false,every方法返回false。当有一个为true时,some方法返回true,当全部为false时,every方法返回false。
some、every方法不改变原数组。
8、reduce
//reduce()方法接收一个函数作为累加器,数组中每个值(从左往右)开始缩减,最重为一个值[1,2,3].reduce((a,b) => {return a + b;//6 })[1,2,3].reduce((previousValue,currentValue,index,arr)=>{return previousValue + currentValue;})//reduce还有第二个参数,我们可以把这个参数作为第一次调用callback时的第一个参数,上面这个例子因为没有第二个参数,所以直接从数组的第二项开始,如果我们给了第二个参数为5[1,2,3].reduce((previousValue,currentValue,index,arr)=>{return previousValue + currentValue;},5)// 6, 8 ,11
//第一次调用的previousValue的值就用传入的第二个参数代替,
reduce方法有两个参数,第一个参数是一个回调函数(必须),第二个参数是初始值(可选)。回调函数有四个参数,依次为本轮循环的累计值、当前循环的元素(必须),该元素的下标(可选),数组本身(可选)。
reduce方法,会让数组的每一个元素都执行一次回调函数,并将上一次循环时回调函数的返回值作为下一次循环的初始值,最后将这个结果返回。
如果没有初始值,则reduce会将数组的第一个元素作为循环开始的初始值,第二个元素开始执行回调函数。
最常用、最简单的场景,是数组元素的累加、累乘
9、reduceRight
var arr = [0,1,2,3,4];arr.reduceRight(function (preValue,curValue,index,array) {return preValue + curValue;}); // 107 = 4 + 3 第一次9 = 2 + 7 第二次10 = 9 + 1 第三次10 = 10 + 0 第四次
reduceRight()方法的功能和reduce()功能是一样的,不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
reduceRight()首次调用回调函数callbackfn时,prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 prevValue 等于 initialValue,curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, curValue 等于数组中倒数第二个值。
10、find
var stu = [{name: '张三',gender: '男',age: 20},{name: '王小毛',gender: '男',age: 20},{name: '李四',gender: '男',age: 20}
]function getStu(element){return element.name == '李四'}stu.find(getStu)//返回结果为//{name: "李四", gender: "男", age: 20}
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
11、findIndex
[1,2,3].findIndex(function(x) { x == 2; });//1[1,2,3].findIndex(x => x == 4);//-1
对于数组中的每个元素,findIndex 方法都会调用一次回调函数(采用升序索引顺序),直到有元素返回 true。只要有一个元素返回 true,findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true,则 findIndex 返回 -1。findIndex 不会改变数组对象!!!
12、keys,values,entries
for (let index of ['a', 'b'].keys()) {console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {console.log(index, elem);
}
// 0 "a"
// 1 "b"
ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
遍历对象:
1. vue中v-for遍历对象
<el-form-item label="状态:"><el-select v-model="searchData.generateStatus"><el-option label="全部" value="null"></el-option><el-optionv-for="(value, key) in incomeStatusEnum":key="key":label="value":value="key"></el-option></el-select>
</el-form-item>//data数据
incomeStatusEnum: {1: '未开始',2: '生成中',3: '生成完成',4: '生成失败',},//列表中需要显示时候
<el-table-column prop="name" label="状态" min-width="100"><template slot-scope="{ row: { generateStatus } }"><span v-text="incomeStatusEnum[generateStatus]"></span></template>
</el-table-column>
2. for…in 遍历数组和对象都可以
var t = {"A":[1,2,3],"B":[1,2,3],"C":[1,2,3],"D":[1,2,3],"E":[1,2,3]
}
let loop = (t) => {for (let i in t) {if(i == "A"){return console.log(i, t[i]) //i是键名,t[i]是键值 A (3) [1, 2, 3]} }
}
loop(t)
console.log(t)
3. Object的方法
// 遍历返回键名
for (let i in Object.values(t)) {console.log(i)
}
//遍历返回键名
for (let i in Object.values(t)) {console.log(i)
}
//返回键值对组成的数组,如:['key', 'value']
for (let i in Object.entries(t)) {console.log(i)
}
4. Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(t).forEach(key => {console.log(key, t[key])
})
5. 使用Reflect.ownKeys(obj)遍历
Reflect.ownKeys(t).forEach(key=>{console.log(key,t[key]);
});
遍历数组、对象的方法相关推荐
- javascript数组——新建数组、访问数组、遍历数组的方法、数组对象的方法、冒泡排序算法、json的正反序列化
目录 数组 通过构造函数的三种方法 字面量创建数组方式 访问数组 遍历数组的方法 遍历:遍历就是把数组中的元素从头到尾都访问一次 操作数组对象的方法 删除和添加 delete与Vue.delete区别 ...
- js遍历数组和数组对象的方法
遍历数组 // 数组var arr = [0,2,4,6,8]var arr1=[]// ------------------------------------forEachconsole.log( ...
- JS遍历数组的forEach方法
forEach是JS中为我们提供的一个方法,用来遍历数组, 此方法只支持IE8以上浏览器使用 var arr = ["中","美","俄", ...
- vue 中遍历数组对象 存到一个新数组里
vue 中遍历数组对象 存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值 方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...
- 数组去重以及数组对象去重方法总结
数组去重以及数组对象去重方法总结 一.数组对象去重 1.reduce方法 2.利用原生js+空对象+空数组 3.利用原生js+标志位+空数组 4.利用双指针思想+splice方法 二.数组去重 1.利 ...
- js解析java对象数组_js接收并转化Java中的数组对象的方法
在做项目时,要向ocx控件下发命令,就要在js中得到java中的对象,然后拼成一种格式,下发下去...当对象是一个时比较简单,但如果对象是一个数组时,就略显麻烦了. 开始我以为有简单的方式,可以直接进 ...
- 综合演练 对象数组 对象的方法 我们9203班 0912
综合演练 对象数组 对象的方法 我们9203班 0912 需求 需要有一个班级对象,对学生对象进行管理 班级类说明 类名称MyClass 属性,name,班级名称,初始值9203 班级有29名学生,定 ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- html怎么遍历数组,js遍历数组有多少种方法
如果你看完了你会体会到一个人能有多无聊,这东西都能看完!!?? 大概js有以下几种循环遍历的方法: 1 let arr = ['aaa','bbb','ccc'] 2 let obj = {a:'aa ...
- 【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践
es6数组中对象去重 方法一: filter()与findIndex()给数组去重 1. filter()用法 2. findIndex()用法 3. 去重实战 方法二:reduce()去重 1. r ...
最新文章
- 无限互联新浪微博项目(视频)分享
- 国外开源威胁情报feed站点 简介
- linux 事实日志_Linux是25。是的! 让我们用有关Linux的25个令人震惊的事实来庆祝。
- java并发-多线程方面的思考
- 手机计算机的冷知识,重度手机控也未必知道的冷知识!现在智能手机都一个样?...
- Python Type Hint类型注解
- Linux命令sort的常用用法
- 工作两年总结(一句话)
- 融合应急指挥调度系统
- 获取当前时间戳的方法
- html中设计对联,js实现很实用的对联广告代码 可自适应高度
- input隐藏域赋值数组,node获取val的值
- 解决Windows更新失败(0x8007000d)的详细方法
- Elastic认证特训营 难点解读04——集群问题排查实战指南
- c语言中scanf返回值被忽略,返回值被忽略scanf是什么意思
- 多線程之 CreateThread
- 《别告诉我你懂PPT》--北京大学出版社
- drupal笔记之block缓存踩坑
- 游戏中java未安装不了_游戏运行库和常见游戏安装问题的解决方法
- 手机处理器天梯_手机处理器(SOC)天梯表2020年3月
热门文章
- 对计算机学院祝福语,学校祝福语
- 英文阅读必备——说说那些翻译软件
- Oracle FAST_START_MTTR_TARGET参数的理解
- 爱情十二课,失恋后遗症
- PROFINET与以太网之间的关系?
- 淘宝承接页是如何实现秒开的
- 分子模拟的理论与实践_化工热力学领域最新译著适合工业应用的热力学模型:从经典与高级混合规则到缔合理论正式出版...
- offer(第二版)2021-06-02
- (八)play之yabe项目【身份验证】
- 每日机话:苹果iPhone4S亚马逊合约促销