数组遍历和去重几种方法_数组遍历去重-程序员宅基地

技术标签: JS  

1、map()当数组中元素是值类型,map不会改变原数组;当是引用类型,则可以改变原数组,map()没法做到的过滤

1.当数组中元素是值类型时
const arr = [1, 2, 3];
const result = arr.map(item => {
  item = item * 2;
  return item;
});
console.log('arr', arr);     // [1, 2, 3]
console.log('result', result);  // [2, 4, 6]

2.当数组中元素是引用类型时
const arr = [
  { name: 'Tom', age: 16 },
  { name: 'Aaron', age: 18 },
  { name: 'Denny', age: 20 }
]
const result = arr.map(item => {
  item.age = item.age + 2;  // 将他们的年龄都加2
  return item
});
console.log('arr', arr); // [{ name: 'Tom', age: 18 },{ name: 'Aaron', age: 20 },{ name: 'Denny', age: 22 }]
console.log('result', result);  // [{ name: 'Tom', age: 18 },{ name: 'Aaron', age: 20 },{ name: 'Denny', age: 22 }]
// map()没法做到的过滤​​​​​​​
let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item })
 console.log(newArr)   // [undefined, undefined, undefined, 4, 5]

2、forEach当数组中元素是值类型,forEach绝对不会改变数组;当是引用类型,则可以改变数组

     特性:

  1. 可以改变数组自身,没有返回值;
  2. 中途不能用常规操作跳出循环,可以用抛出异常(try/catch)的方式,但不推荐这样做;
let arr1 = [
   {name:'张三',age:10},
   {name:'李四',age:20}
];

arr1.forEach(item => { 
  item.age = item.age + 1;
});
console.log(arr1);  // [{name:'张三',age:11},{name:'李四',age:21}]

let newArr = arr1.forEach(item => { 
  item.age = item.age + 1;
});
console.log(arr1);  // [{name:'张三',age:11},{name:'李四',age:21}]
console.log(newArr); // undefined   验证forEach没有返回值


// forEach当数组中元素是值类型,不会改变原数组
let arr2 = [1,2,3];
arr2.forEach(item => {
  item = item * 2
});
console.log(arr2)  //  [1,2,3]

3、filter()方法: 由于map()没法做到的过滤,filter()可以过滤

let arr = [1,2,3,4,5];
let newArr = arr.filter(item =>{
   if(item > 3) return item 
})
console.log(newArr)  //  [4,5]
console.log(arr)  //  => [1,2,3,4,5]

4、some()方法: 检查数组中是否有某些符合条件,只要有一个满足即返回true,之后的不再执行

let result = [
   {name: '张三',age: 10},
   {name: '李四',age: 20}
];
let flag = result.some(item => {
	return item.age > 16 
});
console.log(flag);  // true

5、every():检测数组中的每一项是否都满足条件,只有都满足了才会返回true​​​​​​​

let result = [
   {name: '张三',age: 10},
   {name: '李四',age: 20}
];
let flag = result.some(item => {
	return item.age > 16 
});
console.log(flag);  // false

6、find(): 用来在数组中找到我们所需要的元素,只要有一个满足即返回该元素,不会多余遍历;(注:IE 11及更早版本不支持find()方法)

let arr= [{name:'张三',age:10},{name:'王二',age:21},{name:'小李',age:78}]
let obj = arr.find(item => { return item.age > 20 });
console.log(obj)  // {name:'王二',age:21}  返回数组元素

7、findIndex(): 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1;(注:IE 11及更早版本不支持findIndex()方法)

      场景:在数组中找到我想要的那一个,并且返回给我,这个数组里即使有我想的那个,也肯定只有一个,不可能出现多个,所以,出于性能的考虑,不想从头遍历到尾;

let arr= [{name:'张三',age:10},{name:'王二',age:19},{name:'小李',age:78}]
let indexs = arr.findIndex(item => { return item.age > 20 });
console.log(indexs)  // => 1   返回数组索引值

8、数组去重

     8.1 new Set() 的局限性;new Set()只能去重元素是值类型;当元素是引用对象的数组没法用new Set()去重

// 1.当元素是值类型
let tempArr = new Set([1,2,3,3,4,4,5])
console.log(tempArr)  // => {1,2,3,4,5}   new Set()会将结果转换成对象

//并且已有元素是添加不进去的:
tempArr.add(3) 
console.log(tempArr) // => {1,2,3,4,5}

tempArr.add(6)
console.log(tempArr)  // => {1,2,3,4,5,6}

// 2.当元素是引用类型
let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
mySet.add('some text'); 
console.log([...mySet])
// => [1,5,'some text']

mySet.add({name:'jay Chou',age:40});
mySet.add({name:'jay Chou',age:40});

console.log([...mySet])
// => [1,5,'some text',{name:'jay Chou',age:40},{name:'jay Chou',age:40}]

     8.2 对象属性去重

function uniqueArr(arr) {
  var obj = {};
  var result = [];
  for (var i = 0, j = arr.length; i < j; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = true;
      result.push(arr[i]);
    }
  }
  return result;
}
let testArr = [1, 1, 2, 4, 2, 2, 3, 3, 5, 6, 1];
console.log(uniqueArr(testArr));// 1,2,4,3,5,6

    8.3 _.uniqWith();(使用Lodash提供的方法)

import _ from 'lodash';

let objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

_.uniqWith(objects, _.isEqual);

//=> [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_30376375/article/details/82730913

智能推荐

ASP.NET配置KindEditor富文本编辑器_aspnet富文本编辑器-程序员宅基地

文章浏览阅读1.8k次。KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使..._aspnet富文本编辑器

修复异常org.elasticsearch.cluster.block.ClusterBlockException: blocked by: [SERVICE_UNAVAILABLE/1/_blocked by: [service_unavailable/1/state not recov-程序员宅基地

文章浏览阅读1.3w次。elasticsearch服务中断后重启,无法启动报异常如下:org.elasticsearch.cluster.block.ClusterBlockException: blocked by: [SERVICE_UNAVAILABLE/1/state not recovered / initialized]解决问题的官方API:https://www.elastic.co/guide..._blocked by: [service_unavailable/1/state not recovered / initialized];

传统蓝牙HCI Command(蓝牙HCI命令)详细介绍-程序员宅基地

文章浏览阅读1.7w次,点赞18次,收藏89次。一. 声明本专栏文章我们会以连载的方式持续更新,本专栏计划更新内容如下:第一篇:蓝牙综合介绍 ,主要介绍蓝牙的一些概念,产生背景,发展轨迹,市面蓝牙介绍,以及蓝牙开发板介绍。第二篇:Transport层介绍,主要介绍蓝牙协议栈跟蓝牙芯片之前的硬件传输协议,比如基于UART的H4,H5,BCSP,基于USB的H2等第三篇:传统蓝牙controller介绍,主要介绍传统蓝牙芯片的介绍,包括射频层(RF),基带层(baseband),链路管理层(LMP)等第四篇:传统蓝牙host介绍,主要_hci command

Unity Android汉化_unity 安卓游戏汉化-程序员宅基地

文章浏览阅读4.2k次。汉化Unity的资源例如:data.unity3d中的图片、文字、代码中的文字。广告接入等_unity 安卓游戏汉化

检查生成的apk的签名方式是否是V1 + V2_怎么检查apk有没有v2签名-程序员宅基地

文章浏览阅读1.3k次。1.打开命令行:然后将命令行的目录切换到你安装的Android sdk目录下的build-tools中的随便一个文件夹下(只要其中有apksigner.bat即可)2.输入 apksigner verify -v [apk的路径]如上图可知,是v1 + v2的签名方式..._怎么检查apk有没有v2签名

QGIS:利用等高线生成dem_qgis等高线生成dem-程序员宅基地

文章浏览阅读3.4k次。QGIS:利用等高线生成dem打开QGIS,首先导入等高线的线文件,确保属性表里有高程这项数据,笔者导入的是云浮的等高线,源文件分成了5个图层,关键字段均是elev。将等高线合并到一个图层,步骤为矢量-数据管理工具-合并矢量图层,选择合并的图层即可,英文版的朋友自行翻译(等高线只有一个图层的小伙伴可以跳过这步)。 合并后的图层 放大后是这样的合并完成后,进行矢量转栅格操作,这步是核心,栅格-转换-矢量栅格化(矢量转栅格),然后把必要的信息填上,记得选择的关键字_qgis等高线生成dem

随便推点

vue 使用 lang=“less“ lang=“scss“ 报错 less scss使用_lang="scss-程序员宅基地

文章浏览阅读2.1w次,点赞3次,收藏27次。vue使用 less sass 安装及使用规范。_lang="scss

EasyCode插件和mysbatisPlus_mybatisplus代码生成器与easycode哪个好用-程序员宅基地

文章浏览阅读4.2k次。EasyCode可以自定义模板,自动生成实体类,Dao,Server。。。。用起来非常的方便,mybatis有CRUD功能,不用自己在写简单的查询,删除,更新的mapper了,还有很多功能。两者可结合使用Idea的EasyCode使用EasyCode可以自动根据表格生成:entity,dao,service,serviceImpl,controller..._mybatisplus代码生成器与easycode哪个好用

【R】解决R语言报错 Error: ‘U‘ used without hex digits in character string starting ““C:U“_\u' used without hex digits in character string-程序员宅基地

文章浏览阅读1.2w次,点赞16次,收藏9次。解决R语言报错 Error: '\U' used without hex digits in character string starting ""C:\U" _\u' used without hex digits in character string

UE4基础学习笔记———零碎知识02_ue绿色碰撞那个叫什么-程序员宅基地

文章浏览阅读641次。地形模式地形模式,选择ground材质,大小,创建。默认雕刻工具雕刻地面(默认凸出,shift凹陷)。2.新建地形,赋予水材质。运用各种工具进行地形处理。植被模式资源找到树木,花草,石头等物体。放入。树木沿着表面法线方向生长了,需要修改。单击绘制对象,修改Z高度随机,关闭对齐法线。 2.树木设置碰撞。(一般来说碰撞是后期才去设置的)。设置为BlockAll..._ue绿色碰撞那个叫什么

hadoop记录篇10-数据仓库查询组件impala-程序员宅基地

文章浏览阅读294次。一。impala架构 Impala是Cloudera在受到Google的Dremel启发下开发的实时交互SQL大数据查询工具,Impala没有再使用缓慢的Hive+MapReduce批处理,而是通过使用与商用并行关系数据库中类似的分布式查询引擎(由Query Planner、Query Coordinator和Query Exec Engine三部分组成),..._impala does not have read and write permissions on this directory

SQL语句左连接LEFT OUTER JOIN的作用_left outer join 的效果-程序员宅基地

文章浏览阅读7.8k次。SQL在联表查询的时候,如果遇到字表的数据是没有的,如果是普通的查询就会出现一种查不到数据的情况,这时候就需要用到联表查询的使用左连接指向主表(左右连接看功能的具体需求),我的情况是主表连接多个子表(这些表是查询下拉框的数据),因为总有用户会不选上某一个的下拉框的情况,这样就会在修改时绑定数据的时候就会出现数据绑不上的情况我们就可以使用左连接,然后就可以查询到有的数据,就不会受到没有的数..._left outer join 的效果