详解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操纵Cookie实现购物车程序
Nov 23 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
php 远程图片保存到本地的函数类
2008/12/08 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
validator验证控件使用代码
2010/11/23 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
django 中QuerySet特性功能详解
2019/07/25 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
python处理写入数据代码讲解
2020/10/22 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
大学生职业生涯规划书参考模板
2014/03/05 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB