js只保留数组对象的某个属性或往数组对象添加属性
 
保留数组中对象的id属性，其他属性删除
 
var oldData=['id','123','name']；
var newData= oldData.map((item,index) =>{
    return Object.assign({},{'id':item.id})
})
console.log(newData)

 
假如我想往数组对象添加labe属性
 
	 data=res.data
     let arryNew = [];
     data.map((item, index) => {
     arryNew.push(Object.assign({}, item, { label: 1 }));
       });
     console.log(arryNew)

 
添加后跟上代码
this.$set(this.zhaobiaos, i, this.zhaobiaos[i]);复制代码
 


 
转载于:https://juejin.im/post/5c75f6156fb9a049ae088f8b

 
项目中有个很简单的需求，一个空数组，mounted请求到数据后添加到数组中。
 
 
一开始用for循环给数组[0][1][2]赋值，报错undefined
 
 
https://blog.csdn.net/kgojiwong/article/details/82258732
 
 
解决之后，发现页面数据为空，设置数组属性未生效。
 
 
于是掉了第二个坑
 
 
https://www.cnblogs.com/zhuzhenwei918/p/6893496.html
 
 
记录一下。
 
转载于:https://www.cnblogs.com/xiaoyuchen/p/11061711.html

前言：
 
        在软件开发中，前端为了实现某些效果，需要给后端返回的数据中动态添加属性，本文中就来具体阐释下如何给对象数组动态添加属性的问题
 
正文：
 
        需求：
 
 
        布局如上图所示，基本需求为：每张银行卡有自己的名字、logo、银行卡号、背景色，前后端的交互数据结构为：
 
bankCardList: [
        {
          key: 'gongshang',
          backName: '中国工商银行',
          backCard: '****1205',
        },
        {
          key: 'jiaotong',
          backName: '交通银行',
          backCard: '****1206',
        },
        {
          key: 'nongye',
          backName: '农业银行',
          backCard: '****1207',
        },
        {
          key: 'guangda',
          backName: '广大银行',
          backCard: '****1208',
        },
 ],
 
        其中数据结构中缺少了背景色和logo，此时就需要交互成功之后，前端给返回的数组中，动态添加属性：背景色和logo地址，接下来需要两步可实现：
 
        第一，分别定义两个数组：背景色和logo地址
 
backColorList: [
        {
          key: 'gongshang',
          color: '#ff4d4f',
        },
        {
          key: 'jiaotong',
          color: '#40a9ff',
        },
        {
          key: 'nongye',
          color: '#13c2c2',
        },
        {
          key: 'guangda',
          color: '#faad14',
        },
      ],
logoList: [
        {
          key: 'gongshang',
          url: require('../../static/gongshang.jpeg'),
        },
        {
          key: 'jiaotong',
          url: require('../../static/jiaotong.jpeg'),
        },
        {
          key: 'nongye',
          url: require('../../static/nongye.jpeg'),
        },
        {
          key: 'guangda',
          url: require('../../static/guangda.jpeg'),
        },
      ]
 
        在页面的初始化加载的钩子函数中执行：
 
  created () {
    this.bankCardList = this.bankCardList.map((item) => {
      let backColor = this.backColorList.find(x => x.key === item.key).color
      let logoURL = this.logoList.find(x => x.key === item.key).url
      return Object.assign(item, { backColor: backColor, logoURL: logoURL })
    })
  },
 
        其中页面布局采用了less语言，运用flex布局完成了页面的样式开发，通过&引用父级名称，增加可读性
 
.main {
  &-display {
    display: flex;
    flex-direction: column;
    align-items:center;
    .van-card{
      background-color: #fff;
      border-radius: 5px;
      width: 90%;
      height: 4rem;
    }
    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-backName {
        display: flex;
        justify-content: flex-start;
        padding: 0.5rem;
        span {
          display: flex;
          align-items: center;
          padding: 0 0 0 0.5rem;
        }
      }
    }
  }
}
 
<template>
  <div class="main">
    <br/>
    <div class="main-display" v-for="(item, index) in bankCardList" :key="index">
      <van-card :style="'background-color:' + item.backColor">
        <div slot="tags" class="main-display-content">
          <div class="main-display-content-backName">
            <van-image round width="2rem" height="2rem" :src="item.logoURL"/>
            <span>{{item.backName}}</span>
          </div>
          <div class="main-display-content-backCard">
            <span>{{item.backCard}}</span>
          </div>
        </div>
      </van-card>
      <br/>
    </div>
    <div class="main-add">
      <van-card class="">
        <div slot="tags">
        </div>
      </van-card>
    </div>
  </div>
</template>
 
       如此一来，整个需求就完成了，在布局的实现上，代码经过了雕琢，融入了更多的逻辑性思考，进阶中✌️
 
结语：
 
       just do it