JS30 04 数组处理

以你之姓@ 2022-09-04 03:46 164阅读 0赞

# JS30 04 数组处理 #

本例主要是对 JavaScript 中关于数组的方法进行练习。涉及对数组的元素进行过滤，对元素中的属性进行拼接，对数组元素进行排序，统计。最后有两个练习。相关数据源见下：

## 对数组的元素进行过滤 ##

> Filter the list of`inventors` for those who were born in the 1500’s
> 
> 对 `inventors` 数组中在1500年代出生的人进行过滤

主要是使用 `filter` 方法，传入一个当前的元素，并对当前元素中的 `year` 属性进行判断。

利用 `console.table` 方法，可以将数组中的元素按照表格方式打印出来，这对于一维对象数组还是比较实用的一种调试方法。

const fifteenInventors = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600 )

## 对数组元素属性进行修改 ##

> Give us an array of the `inventors` first and last names
> 
> 对`inventors`数组的姓和名属性进行拼接

主要是使用 `map` 方法，传入一个回调，这利用回调对元素进行处理。

const fullNames = inventors.map(inventor => `${ inventor.first} ${ inventor.last}`)

## 对数组元素进行排序 ##

> Sort the`inventors` by birthdate, oldest to youngest
> 
> 对`inventors`数组依照出生日期进行升序排序

主要是使用 `sort` 方法，传入 `a, b`两个参数，回调返回的值如果是正值，则排序为：`b, a`，如果为负值，排序为`a, b`。

箭头函数如果想要省略 `return` 关键字，必须去掉函数体外的大括号。

const orders = inventors.sort((a, b) => a.year - b.year)

## 对数组元素进行统计 ##

> How many years did all the `inventors` live all together
> 
> 对`inventors`数组中人员的在世时间进行统计

使用 `reduce` 方法，传入一个回调，这个回调中有两个值，一个是上次计算的返回值，另一个是当前所操作的元素。此外，可以再给 `reduce` 方法传入一个返回值的初始值。

const totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0)

## 实践：对人名按照字典序排序 ##

不像 Java 和 C++ 之类的语言，JavaScript 没有`char`类型，所以也无法直接将其转为 ACSII 码做加减进行比较。但是可以利用逻辑运算符加上三目运算符进行比较。

const alpha = people.sort((a, b) => { 
      const [, alast] = a.split(', ')
      const [, blast] = b.split(', ')
      // return alast[0] - blast[0]
      return alast > blast ? 1 : -1
    })

## 实践：对数组中重复数据进行统计 ##

利用 `reduce` 方法，并将初始值设置为空对象方可解决。

const Statistic = data.reduce((obj, item) => { 
      if (!obj[item]) { 
        obj[item] = 0
      }
      obj[item]++
      return obj
    }, { }) // 此处设置为空对象，不然无法正常统计