详解JS取出两个数组中的不同或相同元素


Posted in Javascript onMarch 20, 2019

1、取出两个数组的不同元素

var arr1 = [0,1,2,3,4,5];
var arr2 = [0,4,6,1,3,9];
function getArrDifference(arr1, arr2) {
    return arr1.concat(arr2).filter(function(v, i, arr) {
      return arr.indexOf(v) === arr.lastIndexOf(v);
    });
  }
  console.log(getArrDifference(arr1,arr2));
 
 //输出:(4) [2, 5, 6, 9]

(1)concat() 方法:用于连接两个或多个数组。

 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本,例:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2));

//输出:George、John、Thomas、James、Adrew、Martin
</script>

(2)Array filter() 方法:

  1. 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  2. 注意: filter() 不会对空数组进行检测。
  3. 注意: filter() 不会改变原始数组。
  4. 语法:array.filter(function(currentValue,index,arr), thisValue)

(3)indexOf() 方法:

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

(4)lastIndexOf() 方法:

  1. 可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。
  2. 注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
  3. 开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
  4. 如果没有找到匹配字符串则返回 -1 。
  5. 注意:lastIndexOf() 方法是区分大小写的!

 2、取出两个数组的相同元素

var arr1 = [0,1,2,3,4,5];
var arr2 = [0,4,6,1,3,9];
function getArrEqual(arr1, arr2) {
    let newArr = [];
    for (let i = 0; i < arr2.length; i++) {
      for (let j = 0; j < arr1.length; j++) {
        if(arr1[j] === arr2[i]){
          newArr.push(arr1[j]);
        }
    }
   }
   return newArr;
}
console.log(getArrEqual(arr1, arr2));
 //输出:(4) [0, 4, 1, 3]

以上所述是小编给大家介绍的JS取出两个数组中的不同或相同元素详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
详解vue中axios的使用与封装
Mar 20 #Javascript
javascript数组去重方法总结(推荐)
Mar 20 #Javascript
浅谈JavaScript面向对象--继承
Mar 20 #Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 #Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 #Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 #Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 #Javascript
You might like
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python restful框架接口开发实现
2020/04/13 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
公务员培训自我鉴定
2013/09/19 职场文书
大型晚会策划方案
2014/02/06 职场文书
青春寄语大全
2014/04/09 职场文书
主持人大赛开场白
2015/05/29 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书