详解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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python实现简单的TCP代理服务器
2014/10/08 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python try except else使用详解
2021/01/12 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
房地产管理毕业生自荐信
2013/11/04 职场文书
质量提升方案
2014/06/16 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Python之基础函数案例详解
2021/08/30 Python