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

技术标签: 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

智能推荐

基于内核4.19版本的XFRM框架_linux的xfrm框架-程序员宅基地

文章浏览阅读794次,点赞2次,收藏5次。XFRM框架_linux的xfrm框架

织梦常用标签整理_织梦中什么页面用什么标签教学-程序员宅基地

文章浏览阅读774次。DedeCMS常用标签讲解笔记整理 今天我们主要将模板相关内容,在前面的几节课中已经基本介绍过模板标签的相关内容,大家可以下载天工开物老师的讲课记录:http://bbs.dedecms.com/132951.html,这次课程我们主要讲解模板具体的标签使用,并且结合一些实例来介绍这些标签。 先前课程介绍了,网站的模板就如同一件衣服,衣服的好坏直接决定了网站的好坏,很多网站一看界面_织梦中什么页面用什么标签教学

工作中如何编译开源工具(gdb)_gdb编译-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏15次。编译是大部分工程师的烦恼,大家普遍喜欢去写业务代码。但我觉得基本的编译流程,我们还是需要掌握的,希望遇到相关问题,不要退缩,尝试去解决。天下文章一大抄,百度能解决我们90%的问题。_gdb编译

python简易爬虫v1.0-程序员宅基地

文章浏览阅读1.8k次,点赞4次,收藏6次。python简易爬虫v1.0作者:William Ma (the_CoderWM)进阶python的首秀,大部分童鞋肯定是做个简单的爬虫吧,众所周知,爬虫需要各种各样的第三方库,例如scrapy, bs4, requests, urllib3等等。此处,我们先从最简单的爬虫开始。首先,我们需要安装两个第三方库:requests和bs4。在cmd中输入以下代码:pip install requestspip install bs4等安装成功后,就可以进入pycharm来写爬虫了。爬

安装flask后vim出现:error detected while processing /home/zww/.vim/ftplugin/python/pyflakes.vim:line 28_freetorn.vim-程序员宅基地

文章浏览阅读2.6k次。解决方法:解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录,./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim

HIT CSAPP大作业:程序人生—Hello‘s P2P-程序员宅基地

文章浏览阅读210次,点赞7次,收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程,以及hello程序的进程管理、存储管理与I/O管理,通过hello.c这一程序周期的描述,对程序的编译、加载、运行有了初步的了解。_hit csapp

随便推点

挑战安卓和iOS!刚刚,华为官宣鸿蒙手机版,P40搭载演示曝光!高管现场表态:我们准备好了...-程序员宅基地

文章浏览阅读472次。点击上方 "程序员小乐"关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包!关注订阅号「程序员小乐」,收看更多精彩内容每日英文Sometimes you play a..._挑战安卓和ios!华为官宣鸿蒙手机版,p40搭载演示曝光!高管表态:我们准备好了

精选了20个Python实战项目(附源码),拿走就用!-程序员宅基地

文章浏览阅读3.8w次,点赞107次,收藏993次。点击上方“Python爬虫与数据挖掘”,进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤昔闻洞庭水,今上岳阳楼。大家好,我是小F。Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性,已被广泛使用。那么要想学会并掌握Python,可以实战的练习项目是必不可少的。接下来,我将给大家介绍20个非常实用的Python项目,帮助大家更好的..._python项目

android在线图标生成工具,图标在线生成工具Android Asset Studio的使用-程序员宅基地

文章浏览阅读1.3k次。在网站的导航资源里看到了一个非常好用的东西:Android Asset Studio,可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件,可以直接在Android Studio的插件里搜索,这个工具的优点是可以生成适应各种分辨率的一套图标,有好几种风格的图标资源,遗憾的是虽然有很多套图标风格,毕竟是有限的。Android Asset Studio可以自己选择其..._在线 android 图标

android 无限轮播的广告位_轮播广告位-程序员宅基地

文章浏览阅读514次。无限轮播广告位没有录屏,将就将就着看,效果就是这样主要代码KsBanner.java/** * 广告位 * * Created by on 2016/12/20. */public class KsBanner extends FrameLayout implements ViewPager.OnPageChangeListener { private List

echart省会流向图(物流运输、地图)_java+echart地图+物流跟踪-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏6次。继续上次的echart博客,由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪

Ceph源码解析:读写流程_ceph 发送数据到其他副本的源码-程序员宅基地

文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装:在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger -与客户端沟通1.2 消息调度:Dispatcher类,主要负责消息分类1.3 工作队列:1.3.1 OpWQ: 处理ops(从客户端)和sub ops(从其他的OSD)。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码