4、js数组方法Map、fileter、reduce、sort
要点
filter
过滤操作，有点像 SQL 里面的 select 语句。筛出运行结果是 true 的组成数组返回。
const __fifteen = inventors.filter(function(inventor) {if (inventor.year >= 1500 && inventor.year < 1600 ) {return true;} else {return false;}
});
console.table(__fifteen);
const fifteen = inventors.filter(inventor =>(inventor.year >= 1500 && inventor.year < 1600));
console.table(fifteen);
map
map 形象的理解就是，把数组中的每个元素进行处理后，返回一个新的数组。
// 展示数组对象 inventors 里发明家的姓名
const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);
sort
const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1);
console.table(__ordered);
filter 和 map 的结合使用
筛选出这一个页面中包含 CSS 的书名。代码如下：
// https://book.douban.com/tag/webconst cate = document.querySelectorAll('.subject-list h2 a');const book = links.map(link => link.title).filter(title => title.includes('CSS'));
需要提一点，由 querySelectorAll() 获取到的是一个 NodeList ，它并非是 Array 类型的数据，所以并不具有 map 和 filter 这样的方法，所以如果要进行筛选操作则需要把它转化成 Array 类型，使用下面示例之中的 Array.from() 来转化。
var links = Array.from(document.querySelectorAll('#ordersContainer div.order div.a-row > a.a-link-normal'))var object = order.map( order => {var a = {};
var time = order.querySelector('.order-info span.value').textContent.trim();
var title = order.querySelector('div.a-row > a.a-link-normal').textContent.trim();
a["time"] = time;
return a;
})
reduce
这是一个归并数组的方法，它接受一个函数作为参数（这个函数可以理解成累加器），它会遍历数组的所有项，然后构建一个最终的返回值，这个值就是这个累加器的第一个参数。例子如下：
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){return previousValue + currentValue;
});
而此处我们需要统计一个给定数组中各个项的值，恰好可以用到这个方法，在累加器之中，将统计信息存入一个新的对象，最后返回统计值。
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];const reduce = data.reduce( (obj, item) => {if( !obj[item] ) {obj[item] = 0;}obj[item]++;return obj;}, {});console.log(reduce);
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Array Cardio
4、js数组方法Map、fileter、reduce、sort相关推荐
- 前后端交互必备之js数组方法大全
CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录 数组简介 一.js数组方法 二.js数组方法的使用 1.基础方法 2.进阶方法 数组简介 数组,就是将多个元素(通常是同一类型)按一定 ...
- 22个超详细的 JS 数组方法
22个超详细的 JS 数组方法 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
- js数组中的join(),reverse(),sort(),方法
join() join()方法将数组中所有元素都转化为字符串并且连接在一起,返回最后生成的字符串.可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号. Eg: ...
- 给数组倒序_22个超详细的 JS 数组方法
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
- android给数组添加新元素_重磅！超详细的 JS 数组方法整理出来了
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
- JS的组成-JS数组方法-JS函数-系统化学习
JS Day01 什么是js的组成? ECMAScript(es) 其实就是js的规范(规则) DOM 文档对象模型 div span BOM 浏览器对象模型 JS的使用方式 行内样式的书写(不经常使 ...
- JS数组方法中哪些会改变原数组，哪些不会？
前言 作为一名前端开发人员,我们每天都会与数组打交道.JS 也提供了很多操作数组的原生 API 供我们调用.在这些方法里面,有的方法会改变原数组,有些不会改变原数组.别看这一点小小的区别,往往会造成巨 ...
最新文章
- 微信公众号新功能-原创声明、赞赏功能、评论管理、页面模版
- databricks使用
- Linux进程间通信六 Posix 共享内存简介与示例
- 学习opengl（起步）
- 利用python 对比相似度_头条、油条商标有多像？Python检测发现相似度高达98.4%
- 调剂厦大计算机,2017智能系硕士统考研究生调剂信息
- 【C语言】（数组方式）输出一组成绩中的最高分与最低分
- 大数据平台监控告警系统的实现
- lua——牛牛牌型处理相关算法（下）——牌型比较
- 关于Java工具eclipse的基本
- 小乌龟git如何同步远程分支_在git远程之间同步分支的过程
- hdfs 路径 could not be cleaned up
- FTP服务器是什么【摘自IT百科】
- jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？
- 德州大学达拉斯分校计算机工程,“你的留学故事”| 德克萨斯大学达拉斯分校交换生感悟...
- php+剧影评系统 毕业设计-附源码140859
- 非 Java、C、Python，我使用的第一门计算机语言是它！
- Laravel数据库 Eloquent 操作返回值
- Mac网络正常但是所有浏览器无法上网问题解决
- element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
热门文章