javascript 中数组对象操作方法

一、Filter方法:该方法会对原数组过滤并返回新数组,它不会改变原数组

javascript 复制代码
let array2=[
          {id:'songxiaofeng',name:'宋晓锋'},
          {id:'xieyongqiang',name:'谢永强'},
          {id:'zhaoyutian',name:'赵玉田'},
          {id:'wangtianlai',name:'王天来'},
          {id:'zhaosi',name:'赵四'}
      ]
    let array=array2.filter(i=>i.id=="zhaosi");
    console.log('array',array);
    

二、Some方法:该方法会遍历数组元素,找到符合条件的元素返回true,否则返回false,它不会修改原数组。

javascript 复制代码
let array2=[
          {id:'songxiaofeng',name:'宋晓锋'},
          {id:'xieyongqiang',name:'谢永强'},
          {id:'zhaoyutian',name:'赵玉田'},
          {id:'wangtianlai',name:'王天来'},
          {id:'zhaosi',name:'赵四'}
      ]
    let bool=array2.some(i=>i.id=="zhaosi");
    console.log('bool',bool);

三、Filter和Some:组合使用可实现在两个数组对象中找到相同的元素

javascript 复制代码
let array1=[
  {id:'pichangshan',name:'皮常山'},
  {id:'xieguangkun',name:'谢广坤'},
  {id:'wanglaoqi',name:'王老七'},
  {id:'liuneng',name:'刘能'},
  {id:'zhaosi',name:'赵四'}
]
let array2=[
  {id:'songxiaofeng',name:'宋晓锋'},
  {id:'xieyongqiang',name:'谢永强'},
  {id:'zhaoyutian',name:'赵玉田'},
  {id:'liuneng',name:'刘能'},
  {id:'zhaosi',name:'赵四'}
]
 let array=array1.filter(i=>array2.some(item=>i.id==item.id));
 console.log('array',array);

四、Filter和Some:组合使用也可实现在两个数组对象中找到不相同的元素

javascript 复制代码
let array1=[
  {id:'pichangshan',name:'皮常山'},
  {id:'xieguangkun',name:'谢广坤'},
  {id:'wanglaoqi',name:'王老七'},
  {id:'liuneng',name:'刘能'},
  {id:'zhaosi',name:'赵四'}
]
let array2=[
  {id:'songxiaofeng',name:'宋晓锋'},
  {id:'xieyongqiang',name:'谢永强'},
  {id:'zhaoyutian',name:'赵玉田'},
  {id:'liuneng',name:'刘能'},
  {id:'zhaosi',name:'赵四'}
]
 let array=array1.filter(i=>!array2.some(item=>i.id==item.id));
 let arrays=array2.filter(i=>!array1.some(item=>i.id==item.id));
 console.log('array',array);
 console.log('arrays',arrays);

五、Map:使用Map对象高效率查找,更适合大量数据使用

javascript 复制代码
let array1=[
        {id:'pichangshan',name:'皮常山'},
        {id:'xieguangkun',name:'谢广坤'},
        {id:'wanglaoqi',name:'王老七'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
    let array2=[
        {id:'songxiaofeng',name:'宋晓锋'},
        {id:'xieyongqiang',name:'谢永强'},
        {id:'zhaoyutian',name:'赵玉田'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
    let map=new Map(array1.map(item=>[item.id,item]));
    console.log('map',map);
    let arrays=array2.filter(i=>map.has(i.id));
    console.log('arrays',arrays);

六:unionBy合并去重,属于 'lodash'下方法‌,需要安装和引入

import {unionBy,isEqual} from 'lodash';

javascript 复制代码
  let array1=[
        {id:'pichangshan',name:'皮常山'},
        {id:'xieguangkun',name:'谢广坤'},
        {id:'wanglaoqi',name:'王老七'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
    let array2=[
        {id:'songxiaofeng',name:'宋晓锋'},
        {id:'xieyongqiang',name:'谢永强'},
        {id:'zhaoyutian',name:'赵玉田'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
    let array=unionBy(array2, array1, 'id');
    console.log('array',array)

七:isEqual判断两个对象是否相同, 属于 'lodash'下方法‌,需要安装和引入

import {unionBy,isEqual} from 'lodash';

javascript 复制代码
    let params1={id:'zhaosi',name:'赵四'};
    let params2={id:'liuneng',name:'刘能'};
      
    let bool=isEqual(params2, params1);
    console.log('bool',bool)

也适用于数组对象比较是否相同

javascript 复制代码
 let array1=[
        {id:'pichangshan',name:'皮常山'},
        {id:'xieguangkun',name:'谢广坤'},
        {id:'wanglaoqi',name:'王老七'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
    let array2=[
        {id:'pichangshan',name:'皮常山'},
        {id:'xieguangkun',name:'谢广坤'},
        {id:'wanglaoqi',name:'王老七'},
        {id:'liuneng',name:'刘能'},
        {id:'zhaosi',name:'赵四'}
      ]
      
    let bool=isEqual(array1, array2);
    console.log('bool',bool)

​
相关推荐
瑞瑞小同学1 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
HexCIer1 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
程序员黑豆2 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos
像我这样帅的人丶你还2 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
南一Nanyi2 小时前
依赖注入和控制反转
前端·设计模式·nestjs
小村儿2 小时前
连载14-实战篇--一个半月,我一个人和 Claude Code 搭出一套数字人工程
前端·后端·ai编程
愚公移码3 小时前
蓝凌EKP18产品:流程虚拟机(PVM)
java·开发语言·前端
promiseThen3 小时前
5 分钟上手 Markdown:标题到表格、代码块与简历实战
前端
web66liang3 小时前
webpack4+vue2项目使用 sass-embedded 导致的 DockerfIle 构建失败的问题
前端
Strayer3 小时前
拓扑管网 3D 可视化大屏demo:科技感(地图 + 拓扑 + 3D 空间)
前端·three.js·数据可视化