博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript数组去重
阅读量:6720 次
发布时间:2019-06-25

本文共 1872 字,大约阅读时间需要 6 分钟。

hot3.png

数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。

在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。

一、利用ES6中的set方法去重(ES中最常用)

var arr = [1,2,3,3,false,false,false,true,true,4,undefined,null,null,55,NaN];function fun(arr){  var num = Array.from(new Set(arr));  console.log(num); //[1, 2, 3, false, true, 4, undefined, null, 55, NaN]}			fun(arr);

下面我们介绍一下用到的方法:

第一个方法就是数组的from方法--Array.from();

数组的from方法可以把一个类数组(伪数组)或者可遍历(可循环)的对象转化成一个真正的数组,例如

var a = {	0: 'a',	1: '90',	2: '88',	3: ['mm', 'nn', 'hh'],	'length': 4 // 不带引号直接 length: 4 也是行的}var b = Array.from(a);console.log(b) // ['a','90','88',['mm','nn','hh']]

假如我们把a对象中的 'length': 4 代码去掉会出现什么情况?或者把 'length': 4 中的4变成0呢?

var a = {	0: 'a',	1: '90',	2: '88',	3: ['mm', 'nn', 'hh']}var b = Array.from(a);console.log(b) // []
var a = {	0: 'a',	1: '90',	2: '88',	3: ['mm', 'nn', 'hh'],        'length': 0}var b = Array.from(a);console.log(b) // []

没想到这两段代码得到的竟然都是一个空数组!!!

从这我们就可以看出要想把一个类数组转化成一个真正的数组,该类数组就必须要具有length属性,并且length属性还得有指定得长度,如果没有length属性或length属性得值为0,那么得到得就是一个空数组。

假如我们把类数组对象的属性名由数值型变成字符串型的数字会出现什么样的结果呢?

var a = {		  '0': 'a',		  '1': '90',		  '2': '88',		  '3': ['mm', 'nn', 'hh'],		  'length': 4}var b = Array.from(a);console.log(b) //['a','90','88',['mm','nn','hh']]

这个例子告诉我们其实类数组对象的属性名为字符串型的数字也是可以的!!!!

var a = { //第一种情况		'a': 'a',		'b': '90',		'c': '88',		'd': ['mm', 'nn', 'hh'],		'length': 0}var b = Array.from(a);console.log(b) // []var a = { //第二种情况		a: 'a',		b: '90',		c: '88',		d: ['mm', 'nn', 'hh'],		'length': 0}var b = Array.from(a);console.log(b) // []

像上面这两种情况得到的都是空数组!!!!!

由此可见,将一个类数组对象转化为一个真正的数组 ,必须具备以下条件:

(1)该类数组对象必须具备length属性,用于指定数组的长度;如果没有length属性,那么转换后的数组就是一个空数组

(2)该类数组对象的属性名必须为数值型或字符串型的数字

注:该类数组对象的属性名可以加引号,也可以不加引号

第二个方法就是set方法:这个方法的作用就是去重,这也是个集合的方法,我们都知道集合它有个特点就是无重复性,所以用它来达到去重的目的。

 

 

转载于:https://my.oschina.net/u/3946362/blog/2962530

你可能感兴趣的文章
《Axure RP8产品原型设计快速上手指南》一1.7 大纲面板
查看>>
《机器学习与R语言(原书第2版)》一第3章 懒惰学习——使用近邻分类
查看>>
《Python游戏编程快速上手》——2.4 本章小结
查看>>
《配置管理最佳实践》——2.13 结论
查看>>
《Python金融大数据分析》一导读
查看>>
数据挖掘与数据化运营实战. 3.3 运营群体的活跃度定义
查看>>
Storm-源码分析- hook (backtype.storm.hooks)
查看>>
BTrace使用简介
查看>>
ROS机器人程序设计(原书第2版)2.4.3 创建ROS功能包和综合功能包
查看>>
Akka笔记之消息传递
查看>>
《企业大数据系统构建实战:技术、架构、实施与应用》一1.3 本章小结
查看>>
为什么不能用memcached存储Session?
查看>>
《C++编程风格(修订版)》——2.2 明确定义的状态
查看>>
页面加载显示进度条
查看>>
Logstash 日志搜集处理框架 安装配置
查看>>
Manifest.xml 入门基础(一) 概述与<manifest>标签
查看>>
2016全球最强数据库大盘点
查看>>
可视化与领域驱动设计
查看>>
数据结构实践——字符串加密
查看>>
其他转移指令(0904)
查看>>