4、js数组方法Map、fileter、reduce、sort

最新推荐文章于 2024-05-13 10:22:32 发布

弱鸡如我

最新推荐文章于 2024-05-13 10:22:32 发布

阅读量599

点赞数 1

分类专栏：原生JavaScript练习

本文链接：https://blog.csdn.net/qq_37152533/article/details/108469380

版权

原生JavaScript练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

要点

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

默认情况下，Array.prototype.sort() 会将数组以字符串的形式进行升序排列（10 会排在 2 之前），但 sort 也可以接受一个函数作为参数。所以需要对数字大小排序时需要自己设定一个比较函数，例子如下：

const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1);
console.table(__ordered);

filter 和 map 的结合使用

筛选出这一个页面中包含 CSS 的书名。代码如下：

  // https://book.douban.com/tag/web
  const 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 💪</title>
</head>

<body>
  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
  <script>
    // Get your shorts on - this is an array workout!
    // ## Array Cardio Day 1

    // Some data we can work with

    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];

    const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio',
      'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch',
      'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut',
      'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];

    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry',
      'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert',
      'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester',
      'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano',
      'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle',
      'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose',
      'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert',
      'Blair, Tony', 'Blake, William'];

    // 筛选 16 世纪出生的发明家  

    const sixteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
    console.table(sixteen)

    // 展示他们的姓和名

    const names = inventors.map(inventor => inventor.first + ' ' + inventor.last);
    console.table(names)

    // 把他们按照出生日期从大到小进行排序

    const __ordered = inventors.sort((a, b) => (a.year > b.year) ? 1 : -1);
    console.table(__ordered);

    // 计算所有的发明家加起来一共活了多少岁

    const totalYear = inventors.reduce((total, inventor) => {
      return total + inventor.passed - inventor.year;
    }, 0);
    console.log(totalYear);

    // 按照他们活了多久来进行排序

    const lived = inventors.sort((a, b) => ((a.passed - a.year) > (b.passed - b.year)) ? -1 : 1);
    console.table(lived);

    // 筛选出一个网页里含有某个词语的标题

    // 按照姓氏来对发明家进行排序
    const alphabetically = people.sort((a, b) =>
      (a.split(',')[1] > b.split(',')[1]) ? 1 : -1
    );
    console.table(alphabetically);
    // 统计给出数组中各个物品的数量
    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];

    const num = data.reduce((obj,cur)=>{
      if(cur in obj){
        obj[cur]++;
      }else{
        obj[cur]=1;
      }
      return obj
    },{})
    console.log(num);
  </script>
</body>

</html>

结果

在这里插入图片描述

弱鸡如我

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4、js数组方法Map、fileter、reduce、sort

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Array Cardio ????</title></head><body> <p><em>Psst: have a look at the JavaScript Console</em> ????</p&g
复制链接

扫一扫

专栏目录