详解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代码
Nov 20 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
玩转方法:call和apply
May 08 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
详解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
如何给phpadmin一个保护
2006/10/09 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php中smarty区域循环的方法
2015/06/11 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
倡议书格式范文
2014/04/14 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
html5表单的required属性使用
2021/07/07 HTML / CSS
Mysql开启外网访问
2022/05/15 MySQL