JS--更改数据格式(数组,对象,键值对互转)

本文介绍了JavaScript中常见的数据转换方法,包括对象转数组、数组转对象、添加属性、数组格式修改、对象键值对处理、字符串与数组的相互转换以及对象内容修改等。此外,还展示了如何合并对象、对比数组差异以及在Vue中修改对象值的方法,这些技巧在日常开发中非常实用。
摘要由CSDN通过智能技术生成

1.对象转数组

	let obj={
    	"北京市": 150,
    	"安徽省": 145,
    	"上海市": 86,
    	"四川省": 46,
    	"陕西省": 42,
    	"湖北省": 41,
    	"台湾省": 40,
	}
    function convertToArray(objct) {
        return Object.keys(objct).map(key => ({name:key,number:objct[key]}));
    }  
    let arr=convertToArray(obj);   
    console.log(arr)    // [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

2.数组转对象

	let arr = [
 	 {
    	"type": "北京市",
    	"number": 150
     },
  	 {
    	"type": "安徽省",
    	"number": 145
  	 }
	]
	let obj = {}
	arr.forEach(item=> {
    	obj[item.type] = item.number
	})
	console.log('obj', JSON.stringify(obj, null, 2));    //{北京市: 150, 安徽省: 145}

3.数组格式添加属性

	//数组对象添加字段
	// arr原数组为[
	  //  {fruit: 'apple',price: '25'},
	  //  {fruit: 'banana',price: '10'},
	  //  {fruit: 'pineapple',price: '15'}
	  // ]
	  let _arr = []
	  arr.map((item, index) => {
		_arr.push(Object.assign({},item,{flag: false}))
	  })
	  // _arr返回结果
	  // [
	  //  {fruit: 'apple',price: '25',flag: false},
	  //  {fruit: 'banana',price: '10',flag: false},
	  //  {fruit: 'pineapple',price: '15',flag: false}
	  // ]

	 //数组添加属性
	    let array=["要闻","综合","生活","卫生","教育","军事","国际","社会","经济","体育","文化","科技","时政","农业","法制","国内"]	        
	    let arr=[]
        array.forEach((item,index) => {
          arr.push(Object.assign({ id: index,value: item }));
        });
        console.log(arr);
        //[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
        //0: {id: 0, value: '要闻'}
		//1: {id: 1, value: '综合'}
		//2: {id: 2, value: '生活'}
		//3: {id: 3, value: '卫生'}
		//4: {id: 4, value: '教育'}
        ...

4.数组改为键值对

	let a=[{id:1,type:1},{id:2,type:2},{id:3,type:1},{id:4,type:2},{id:5,type:1}]
      const reginObj={}
      a.forEach(item=>{
        reginObj[item.id]=item.type
      })
      let c=reginObj
      console.log(c);     //{1: 1, 2: 2, 3: 1, 4: 2, 5: 1} 

5.修改数组内容

	//将type只修改
	this.cities=[{id:1,type:true},{id:2,type:true},{id:3,type:true}]
	let newObj = [];
      this.cities.map(function(item, index) {
        var sevm = {};
        sevm["id"] = item.id;
        sevm["type"] = 2;
        newObj[index] = sevm;
      });
      this.sourceMap = newObj;
	  // [{"id": 1,"type": 2},{"id": 2,"type": 2},{"id": 3,"type": 2}
]

6.取键值对对象的value,及转化为数组

	  let obj = {'11':[1,2],'22':[3,4],'33':[5,6]};
      let arrData = [];
      //for (let key in obj) {
      //  if (Object.prototype.hasOwnProperty.call(obj, key)) {
      //    arrData.push(obj[key]);
      //  }
      // }
      arrData=Object.values(obj)
      console.log(arrData);       //[[1,2], [3,4], [5,6]]
      
      let arr_data = [];
      arrData.map(function(value, index, array) {
        arr_data = arr_data.concat(value);
      });
      console.log(arr_data);       //[1, 2, 3, 4, 5, 6]

7.合并两个对象map

	  let a={1:[1,2,3,4]}
      let b={2:[5,6,7,8]}
      for (var key in b) {
        if (b.hasOwnProperty(key) === true) {
          a[key] = b[key];
        }
      }
      console.log(a,"1111111");     //{1: Array(4), 2: Array(4)}

8.将对象转为key=值&key=值格式

	let obj = { id: '01', name: '张三', job: '项目经理' }
	let arr = []
	for (let key in obj) {
	  arr.push(`${key}=${obj[key]}`)
	}
	let str = arr.join('&')
	console.log(str)              //id=01&name=张三&job=项目经理

9.将key=值&key=值格式转为对象

	let str = 'id=01&name=张三&job=项目经理'
	let arr = str.split('&')  
	let obj = {}
	arr.forEach(function(item) {
	  item = item.split('=')
	  obj[item[0]] = item[1]
	})
	console.log(obj)        //{"id": "01","name": "张三","job": "项目经理"}

10.字符串与数组的互相转化

	//1.字符串转数组(合起来)
	let a='abdcjw'
	console.log(a.split())        // ["abdcjw"]
	let b='asd,asd';
	console.log(b.split())       //  ["asd,asd"]
	 

	//2.逗号隔开的字符串转数组
	let a="1,2,3,4,5,6"
	console.log(a.split(","))   //['1', '2', '3', '4', '5', '6']
	
	//3.字符串转数组
	let haha = [..."Hello"];       
    console.log(haha);    //['H', 'e', 'l', 'l', 'o']

	//4.数组转字符串(可选择分割符号)
	let arr=['1', '2', '3', '4', '5', '6']      
	console.log(arr.join(','))   // 1,2,3,4,5,6
	
	//5.数组遍历,逗号拼接(方法)
	let arr=[{name:'aaa'},{name:'bbb'},{name:'ccc'}]   
    getTextByJs(arr) {
      var str = "";
      for (var i = 0; i < arr.length; i++) {
        str += arr[i].name + ",";
      }
      //去掉最后一个逗号(如果不需要去掉,就不用写)
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      return str;
    },
	let a=this.getTextByJs(arr)
    console.log(a);               //aaa,bbb,ccc

11.修改对象中的某个值

1.对象的合并覆盖(Object.assign)
//1.构建想对象
	let type='twSource'
	let obj={}
	obj[type]=2
	console.log(obj)    // {"twSource": 2}
//2.合并(对象合并是指:将源对象里面的属性添加到目标对象中去,若两者的属性名有冲突,后面的将会覆盖前面的)	
	let oldObj={'id':'1','twSource':'0'}
	Object.assign(oldObj, obj);
	console.log(oldObj)     //{"id": "1","twSource": 2}
2.直接修改对象,数组------VUE(this.$set())
//1.对象
let oldObj={'id':'1','twSource':'0'}
this.$set(oldObj,'twSource',2)
console.log(oldObj)   // {"id": "1","twSource": 2}

//2.数组
var arr = [1, 2, 3];
this.$set(arr, 0, 4);   //用4来替换下标为0位置的值
console.log(arr);   //[4, 2, 3]

12.将两个数组进行对比,获取添加和删除部分,转化为键值对对象

	compareArrayDiff(oldArr, newArr) {
      const tNewArr = newArr || [];
      const tOldArr = oldArr || [];
      const totalArr = [...new Set(tNewArr.concat(tOldArr))];
      // 新数组 与 全数组比较差异,得到新数组 删掉的项(新数组中不存在,而总数组存在,则是新数组删掉的)
      const delArr = [];
      totalArr.forEach((item) => {
        if (!tNewArr.includes(item)) delArr.push(item);
      });
      // 旧数组 与 全数组比较差异,得到新数组 增加的项(旧数组中不存在,而总数组存在,则是新数组增加的)
      const addArr = [];
      totalArr.forEach((item) => {
        if (!tOldArr.includes(item)) addArr.push(item);
      });
      let obj = {};
      obj["0"] = addArr;
      obj["1"] = delArr;
      return {
        obj,
        delArr,
        addArr,
      };
    },

      let objArr = this.compareArrayDiff(arr1, arr2);      //调用及获取值
      console.log(objArr.obj);     //  {"0": [2,4,11,12,15],"1": [16,18,22,13]}
      console.log(objArr.delArr);  //  [16, 18, 22, 13] 
      console.log(objArr.addArr);  //  [2, 4, 11, 12, 15]

13.将数组根据label相同的对象放到相邻位置

    conversionAdjacent(data) {
      // 使用reduce和Object.entries来分组数据
      const groupedData = data.reduce((acc, item) => {
        acc[item.classification] = acc[item.classification] || [];
        acc[item.classification].push(item);
        return acc;
      }, {});
      // 按label顺序重新构建数组(一维)
      return Object.values(groupedData).flat();
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值