详解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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
JavaScript验证知识整理
Mar 24 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php 删除记录实现代码
2009/03/12 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Python正则捕获操作示例
2017/08/19 Python
python发送告警邮件脚本
2018/09/17 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
工程承包协议书
2014/10/20 职场文书
签订劳动合同通知书
2015/04/16 职场文书
结婚典礼主持词
2015/06/29 职场文书