设为首页 - 加入收藏 铜仁站长网 (http://www.0856zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 为什么 系统 平台 2019
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

来一个老生常谈的话题,JavaScript中,数组如何去重?

发布时间:2019-08-23 04:34 所属栏目:[优化] 来源:大胡子民工潘半仙
导读:关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种:Set、Array.prototype.filter 以及 Array.prototype.reduce,对于只有简单数据的数组来讲,我最喜欢 Set,没别的,就是写起来简单。 constoriginal

来一个老生常谈的话题,JavaScript中,数组如何去重?

关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种:Set、Array.prototype.filter 以及 Array.prototype.reduce,对于只有简单数据的数组来讲,我最喜欢 Set,没别的,就是写起来简单。

  1. const?originalArray?=?[1,?2,?'咩',?1,?'Super?Ball',?'咩',?'咩',?'Super?Ball',?4]?
  2. const?bySet?=?[...new?Set(originalArray)]?
  3. const?byFilter?=?originalArray.filter((item,?index)?=>?originalArray.indexOf(item)?===?index)??
  4. const?byReduce?=?originalArray.reduce((unique,?item)?=>?unique.includes(item)???unique?:?[...unique,?item],?[])?

使用 Set

先让我们来看看 Set 到底是个啥

  1. Set?对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。?
  2. https://developer.mozilla.org...?
  • 首先,Set 中只允许出现唯一值
  • 唯一性是比对原始值或者对象引用

const bySet = [...new Set(originalArray)] 这一段的操作,我们将它拆分来看:

  1. const?originalArray?=?[1,?2,?'咩',?1,?'Super?Ball',?'咩',?'咩',?'Super?Ball',?4]??
  2. const?uniqueSet?=?new?Set(originalArray)?
  3. //?得到?Set(5)?[?1,?2,?"咩",?"Super?Ball",?4?]?
  4. const?bySet?=?[...uniqueSet]?
  5. //?得到?Array(5)?[?1,?2,?"咩",?"Super?Ball",?4?]?

在将 Set 转为 Array 时,也可以使用 Array.from(set)。

使用 Array.prototype.filter

要理解 filter 方法为什么可以去重,需要关注一下另一个方法 indexOf

  1. indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回?-1。?
  2. https://developer.mozilla.org...?
  1. const?beasts?=?['ant',?'bison',?'camel',?'duck',?'bison'];?
  2. console.log(beasts.indexOf('bison'));?
  3. //?expected?output:?1?
  4. //?start?from?index?2?
  5. console.log(beasts.indexOf('bison',?2));?
  6. //?expected?output:?4?
  7. console.log(beasts.indexOf('giraffe'));?
  8. //?expected?output:?-1?
  1. filter()?方法创建一个新数组,?其包含通过所提供函数实现的测试的所有元素。?
  2. https://developer.mozilla.org...?

filter 方法接受两个参数:

  • 第一个参数:一个回调函数, filter 会将数据中的每一项都传递给该函数,若该函数返回 真值,则数据保存,返回 假值,则数据将不会出现在新生成的数据中
  • 第二个参数:回调函数中 this 的指向

我们将上面的去重方法按下面这样重写一下,就可以看清整个 filter 的执行过程了。

  1. const?originalArray?=?[1,?2,?'咩',?1,?'Super?Ball',?'咩',?'咩',?'Super?Ball',?4]?
  2. const?table?=?[]?
  3. const?byFilter?=?originalArray.filter((item,?index)?=>?{?
  4. ??//?如果找到的索引与当前索引一致,则保留该值?
  5. ??const?shouldKeep?=?originalArray.indexOf(item)?===?index?
  6. ??table.push({?
  7. ????序号:?index,?
  8. ????值:?item,?
  9. ????是否应该保留:?shouldKeep???'保留'?:?'删除'?
  10. ??})?
  11. ??return?shouldKeep?
  12. })??
  13. console.log(byFilter)?
  14. console.table(table)?

来一个老生常谈的话题,JavaScript中,数组如何去重?

使用 Array.prototype.reduce

  1. reduce()?方法对数组中的每个元素执行一个由您提供的?reducer?函数(升序执行),将其结果汇总为单个返回值。?
  2. https://developer.mozilla.org...?

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章