详解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 相关文章推荐
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
layUI的验证码功能及校验实例
Oct 25 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
详解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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python 阶乘累加和的实例
2019/02/01 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python操作toml文件的示例代码
2020/11/27 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
什么是抽象
2015/12/13 面试题
物业保安主管岗位职责
2013/12/25 职场文书
采购部主管岗位职责
2014/01/01 职场文书
婚礼主持结束词
2014/03/13 职场文书
安全生产工作汇报
2014/10/28 职场文书
婚育证明格式
2015/06/17 职场文书
安全教育日主题班会
2015/08/13 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书