数组中元素都是对象,需要过滤掉对象中的键值对的操作

写项目时,很多操作,都会自己慢慢找到

而我也是,我是一个不会太去管深层原理的人,只管一些效果是否能出来

下面介绍的是在数组中有多个对象,然后对象中存在多个键值对,我们怎样把自己所需要的键值对拿出来呢

现在我想要name,跟weight这个键值对,前两种方法不改变原来的数组,第三种方法会返回新的数组

1、第一种方法: 使用find方法进行操作

数组:
var arr =  [
    {
        id:15,
        name: 'jinjinjin',
        age:18,
        height: '150',
        weight: '150'
    },
    {
        id:13,
        name: 'qianqinjin',
        age:18,
        height: '180',
        weight: '100'
    },
    {
        id:12,
        name: 'jinkkkjin',
        age:19,
        height: '150',
        weight: '130'
    }  
]                

我们可以先定义一个对象,根据你所需要的那个地方传入的id来找出这条数据,也可以是其他变量,但是在我这里就是id的形式
let obj  =  arr.find(v=>v.id = id)    
找到这条数据之后就可以用
var brr = [
    {
        obj.name,
        obj.weight
    }
]  
来接收这个新的数组,数组的对象中就只有这两个属性了

2、使用map方法,但是不用返回新的数组,我们会做一个深克隆的操作去改变这样的数组

数组还是原来一样的
var arr =  [
    {
        id:15,
        name: 'jinjinjin',
        age:18,
        height: '150',
        weight: '150'
    },
    {
        id:13,
        name: 'qianqinjin',
        age:18,
        height: '180',
        weight: '100'
    },
    {
        id:12,
        name: 'jinkkkjin',
        age:19,
        height: '150',
        weight: '130'
    }  
] 

进行深克隆得到一个新的变量
var brr  =  arr.map(v=>{
    // 深克隆操作在这里分为两步进行
    let tmp = JSON.stringify(v)
    tmp = JSON.parse(tmp)
    // 删除对象中所不需要的属性
    delete tmp.age
    delete tmp.height
    return tmp
})
最后我们也能得到这个只有name跟weight的键值对的对象所存在的数组!!!

  

3、第二种方法使用map进行操作会改变原来的返回一个新的数组

在代码中,这个数组,跟上面的数组是一样的
var arr =  [
    {
        id:15,
        name: 'jinjinjin',
        age:18,
        height: '150',
        weight: '150'
    },
    {
        id:13,
        name: 'qianqinjin',
        age:18,
        height: '180',
        weight: '100'
    },
    {
        id:12,
        name: 'jinkkkjin',
        age:19,
        height: '150',
        weight: '130'
    }  
] 
然后使用map方法
arr.map(v=>{
  // 直接删除不必要的元素
  delete v.age
  delete v.height
  return v
})
这样就能直接得到一个新的数组,数组arr中也只有name跟height这个属性了

还是特别怕忘记,所以来博客一番!!!

posted @ 2020-11-28 01:03  码大大  阅读(943)  评论(0)    收藏  举报