【面试题】Js数组去重都有哪些方法?

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

 表妹一键制作自己的五星红旗国庆头像,超好看

1. indexOf

  • 定义:
    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。注意:iindexOf() 方法区分大小写。

  • 语法:
    string.indexOf(searchvalue,start)//;searchvalue必需。searchvalue可选参数。

  • 返回值:
    Number //查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。

  • 实例:

//indexOf
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");
//去重
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
var newArr = [];
arr.forEach((key,index)=>{if(newArr.indexOf(key) === -1){newArr.push(key)}        
})
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

2. new Set()

  • 定义:

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构

  • 实例:
let arr = [1,1,2,2,3,3];
let set = new Set(arr);
let newArr = Array.form(set);   //Array.from方法可以将Set结构转为数组。
console.log(newArr);   //[1,2,3]
  • Set对象的其他方法:
方法描述实例
add添加某个值,返回Set对象本身,当添加实例中已经存在的元素,set不会进行处理添加let list = new Set(arr);
list.add(5).add(2);//数组长度是4 [1,2,3,5]
clear删除所有键/值对,没有返回值list.clear();
delete删除某个键,返回值true。如果删除失败返回falselist.delete(3);
has返回一个布尔值,表示某个键是否还在当前Set对象之中。list.has(2);
forEach对每个元素执行指定操作list.forEach((val,key) => {console.log(key + ':' + val); //1:1 2:2 3 })
keys对每个元素执行指定操作,返回键名for(let key of set.keys()) {console.log(key);}
values对每个元素执行指定操作,返回键值for(let value of set.values()) {console.log(value);}

3. new Map()

  • 是什么?:
    map数据结构是es6中新出的语法,其本质也是键值对,只是其键不局限于普通对象的字符串。
    map的数据结构:一组具有键值对的结构,注意参数顺序(key:value),key具有 唯一性 value可有可无,可重复。
  • 写法:
//1
var m = new Map([['Lily',12],['Bob',15],['Amy',13]]);
//2
var scoreList = [
{name:'Lily',age:12,score:98},
{name:'Bob',age:15,score:95},
{name:'Amy',age:13,score:99},
]
  • 实例:
let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]
let newList3 = [];
let map = new Map();
// 如果map.has指定的item不存在,那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
// 如果下次出现重复的item,那么map.has(item等于ture 取反 !map.has(item)  不执行
list.forEach((item) => {if(!map.has(item)){map.set(item,true)newList3.push(item)}
})
console.log('newList3', newList3);//newList3 (9) ["你是最棒的2", 8, 1, 2, 3, 4, 5, 6, 7]
  • Map对象的其他方法:
方法描述实例
set添加新键值var mymap = new Map(); mymap.set('name','Amy')
get获取map某个键的值mymap.get('name');
hasmap是否有这个键mymap.has('name');
delete删除map某个元素mymap.delete('name');
clear清空mapmymap.clear();
size属性返回map的成员数量mymap.size;

4. filter() + indexOf

  • 定义:filter()用于对数组进行过滤。
  • 用法:filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。- 注意: filter() 不会对空数组进行检测;不会改变原始数组。
  • 语法:array.filter(function(currentValue,index,arr){},thisValue);
  • 返回值:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
//filter
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 9, 2];
let res = nums.filter((num) => {return num < 5;
});
console.log(res);  // [1, 2, 3, 4, 2]//去重let res = nums.filter((item,index) => {return nums.indexOf(item) === index;
})
console.log(res);  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

5. reduce() + Includes

① reduce();
  • 定义和用法:
    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。
  • 语法:
    array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • 参数:
    function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数。函数的参数:total。必需。初始值, 或者计算结束后的返回值。currentValue必需。当前元素。currentIndex 可选。当前元素的索引。arr可选。当前元素所属的数组对象。
    initialValue可选。传递给函数的初始值。
  • 实例:
 //html<button onclick="myFunction()">点我</button> <p>数组元素之和: <span id="demo"></span></p>//js 四舍五入后计算数组元素的总和:var numbers = [15.5, 2.3, 1.1, 4.7];  function getSum(total, num) {return total + Math.round(num);}function myFunction(item) {document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);}
② includes();
  • 定义和用法:
    includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true,否则返回 false。includes() 方法区分大小写。
  • 语法:
    string.includes(searchvalue,start)
  • 参数:
    searchvalue必需。要查找的字符串。start可选,设置从哪个位置开始查找,默认为0。
  • 返回值:
    布尔值。如果找到匹配的字符串返回 true,否则返回 false。
  • 实例:
// 判断数组中是否包含某个元素
var arr = [1, 2, 3, 4, 5];
var result1 = arr.includes(3); // true
var result2 = arr.includes(6); // false
console.log(result1);
console.log(result2);
③ 去重
  • reduce 该方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值
  • 实例:
 let arr = [1,3,5,3,5]let newArr = [];let unique = (arr)=>{let newArr = [];//新数组,用来接管不反复的数组for(var i=0; i<arr.length; i++){if(! newArr.includes(arr[i])){newArr.push(arr[i]);}}return newArr;}console.log(unique(arr));

边学习边整理,如有问题欢迎指正,大家一起加油!

  前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

 表妹一键制作自己的五星红旗国庆头像,超好看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/84229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot整合sentinel完成限流

1、直入正题&#xff0c;下载sentinel的jar包 1.1 直接到Sentinel官网里的releases下即可下载最新版本&#xff0c;Sentinel官方下载地址&#xff0c;直接下载jar包即可。不过慢&#xff0c;可能下载不下来 1.2 可以去gitee去下载jar包 1.3 下载完成后&#xff0c;进行打包…

【办公小神器】:快速批量转换Word、Excel、PPT为PDF脚本!

文章目录 ✨哔哩吧啦✨脚本使用教程✨温馨小提示设置&#x1f4da;资源领取 专栏Python零基础入门篇&#x1f525;Python网络蜘蛛&#x1f525;Python数据分析Django基础入门宝典&#x1f525;小玩意儿&#x1f525;Web前端学习tkinter学习笔记Excel自动化处理 ✨哔哩吧啦 前…

[pai-diffusion]pai的easynlp的clip模型训练

EasyNLP带你玩转CLIP图文检索 - 知乎作者&#xff1a;熊兮、章捷、岑鸣、临在导读随着自媒体的不断发展&#xff0c;多种模态数据例如图像、文本、语音、视频等不断增长&#xff0c;创造了互联网上丰富多彩的世界。为了准确建模用户的多模态内容&#xff0c;跨模态检索是跨模态…

Ctfshow web入门 代码审计篇 web301-web310 详细题解 全

CTFshow 代码审计 web301 下载的附件的目录结构如下&#xff1a; 开题后界面&#xff0c;看见输入框&#xff0c;感觉是sql。 大概浏览一遍源码&#xff0c;我们可以发现在checklogin.php文件中有无过滤的SQL语句&#xff0c;SQL注入没得跑了。 这题SQL注入有三种做法。 方法一…

Linux:GlusterFS 集群

GlusterFS介绍 1&#xff09;Glusterfs是一个开源的分布式文件系统,是Scale存储的核心,能够处理千数量级的客户端.在传统的解决 方案中Glusterfs能够灵活的结合物理的,虚拟的和云资源去体现高可用和企业级的性能存储. 2&#xff09;Glusterfs通过TCP/IP或InfiniBand RDMA网络链…

Everything + Cpolar,打造在线搜索的终极神器

文章目录 前言1. 下载安装注册cpolar2. Everything安装和设置2.1 进入Everything官网进行下载2.2 对Everything文件进行设定 3. 创建cpolar内网穿透隧道4. 公网访问测试Everything5. 固定连接公网地址 前言 你还在用Windows资源管理器自带的搜索工具来搜索文件吗&#xff1f;这…

轮换对称性

二重积分 普通对称性–D关于 y x yx yx对称&#xff1a; ∬ D f ( x , y ) d σ { 2 ∬ D 1 f ( x , y ) d σ f ( x , y ) f ( y , x ) 0 f ( x , y ) − f ( y , x ) \iint_{D}f(x,y)d\sigma\begin{cases} 2\iint_{D_1}f(x,y)d\sigma\ \ \ \ \ \ f(x,y)f(y,x) \\ 0 \ \…

OpenStack创建云主机并连接CRT

文章目录 OpenStackT版创建云主机并连接CRT命令行操作&#xff08;1&#xff09;创建镜像&#xff08;2&#xff09;创建实例&#xff08;3&#xff09;创建网络创建内网创建外网 &#xff08;4&#xff09;创建安全组&#xff08;5&#xff09;创建路由&#xff08;6&#xff…

1952-2018年中国各省份人均GDP数据(消涨处理)

1952-2018年中国各省份人均GDP数据&#xff08;消涨处理&#xff09; 1、时间&#xff1a;1952-2018年 2、范围&#xff1a;30省市 3、指标&#xff1a;人均GDP 4、来源&#xff1a;《新中国60周年统计汇编》和各省年鉴 5、指标解释&#xff1a; 过程为环比人均GDP指数转…

YSA Toon (Anime/Toon Shader)

这是一个Toon着色器/Cel阴影着色器,用于Unity URP 此着色器的目的是使角色或物体阴影实时看起来尽可能接近真实的动画或卡通效果 可以用于游戏,渲染,插图等 着色器特性,如:面的法线平滑、轮廓修复、先进的边缘照明、镜面照明、完全平滑控制 这个文档包括所有的功能https:/…

Eclipse ABAP ADT 集成详细安装教程

最近看到网上有个源码使用CDS做的&#xff0c;然后看了一下原来还可以用eclipse&#xff0c;趁热打铁&#xff0c;试了一把&#xff0c;最后成功了&#xff0c;中间可能会有一些报错&#xff0c;可以自己慢慢解决&#xff0c;大概就是这样的。 SAP的开发&#xff0c;有三种开发…

Java————List

一 、顺序表和链表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c; 常见的线性表&#xff1a;顺序表、链表、栈、队列… 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直…

微信小程序与idea后端如何进行数据交互

交互使用的其实就是调用的req.get(url)方法 进行路径访问&#xff0c;你要先保证自己的springboot项目已经成功运行了&#xff1a; 如下&#xff1a; 如何交互的&#xff1f; 微信小程序&#xff1a;如下为index.js页面 在onLoad()事件中调用方法Project.findAllCities() 要…

贝叶斯滤波计算4d毫米波聚类目标动静属性

机器人学中有些问题是二值问题&#xff0c;对于这种二值问题的概率评估问题可以用二值贝叶斯滤波器binary Bayes filter来解决的。比如机器人前方有一个门&#xff0c;机器人想判断这个门是开是关。这个二值状态是固定的&#xff0c;并不会随着测量数据变量的改变而改变。就像门…

rv1126-rv1109-test

测试指令 播放音频:aplay aigei.wav 测试时间: 查看系统时间:date 设置时间:date -s "2023-09-21 16:00:00" 设置芯片时间:hwclock -w 查看芯片时间:hwclock 测试背光: echo 0 > sys/class/backlight/backlight/brightness echo 50 > sys/class/backlig…

期权如何交易?期权如何做模拟交易?

买卖期权的第一步就是要有期权账户&#xff0c;国内的期权品种有商品期权和ETF期权以及股指期权&#xff0c;每种的开户方式和要求都不同&#xff0c;下文为大家介绍期权如何交易&#xff1f;期权如何做模拟交易&#xff1f; 一、期权交易需要开立一个期权账户&#xff0c;可以…

【Spring Boot 源码学习】OnBeanCondition 详解

Spring Boot 源码学习系列 OnBeanCondition 详解 引言往期内容主要内容1. getOutcomes 方法2. getMatchOutcome 方法2.1 ConditionalOnBean 注解处理2.2 ConditionalOnSingleCandidate 注解处理2.3 ConditionalOnMissingBean 注解处理 3. getMatchingBeans 方法 总结 引言 上篇…

实战演练 | Navicat 常用功能之转储与运行 SQL 文件

数据库管理工作中&#xff0c;"转储 SQL 文件"和"运行 SQL 文件"是两个极为常见操作。一般来说&#xff0c;用户使用数据库管理工具或命令行工具来完成。Navicat 管理开发工具中的“转储 SQL 文件”和“运行 SQL 文件”功能具有直观易用的界面、多种文件格…

Linux内核源码分析 (B.x)Linux物理内存的初始化

Linux内核源码分析 (B.x)Linux物理内存的初始化 文章目录 Linux内核源码分析 (B.x)Linux物理内存的初始化一、DDR简介二、内存节点三、内存管理区域ZONE四、 struct zone五、 struct page六、mem_map数组七、伙伴系统简介八、迁移类型九、内存初始化十、总结 一、DDR简介 详细可…

threejs给3d模型中的物体换肤(修改材质)

变成这样 this.otherModel.traverse(function (child) {if (child instanceof THREE.Mesh && child.name Cylinder240) {// 导入纹理const textureLoader new THREE.TextureLoader();const floorColortextureLoader.load(require(../../../public/img/color.jpg));co…