详解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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解Js中的模块化是如何实现的
Oct 18 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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校验ISBN码的函数代码
2011/01/17 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
pip安装python库的方法总结
2019/08/02 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
材料物理专业个人求职信
2013/12/15 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
大学生党课感想
2015/08/11 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
创业计划书之宠物店
2019/09/19 职场文书