详解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 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python实现数据写入excel表格
2018/03/25 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python实时监控cpu小工具
2018/06/21 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
django将数组传递给前台模板的方法
2019/08/06 Python
pycharm配置git(图文教程)
2019/08/16 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
卖车协议书范例
2014/09/16 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
红楼梦读书笔记
2015/06/25 职场文书
python实现简单的名片管理系统
2021/04/26 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫