json数组排序,深拷贝,浅拷贝,删除,增加,筛选,

js 同时被 2 个专栏收录
15 篇文章 0 订阅
21 篇文章 0 订阅

json数组排序,深拷贝,浅拷贝,删除,增加

一 根据json里面的某个数值排序,倒叙或者顺序

sort会改变原数组,因为这个差点和后端打起来了!!!
后来发现,是sort惹的祸,
至于我是怎么踩得坑,就不写了,
下面是真确的方法,记住就好了;

需求;
一 添加新的用户时,接口返回数据,会将它添加在数组的第一个;
二 前端显示数组,要按照年龄的大小显示

注:至于为什么不让后端排序好,因为我需要当前数组第一个数据
一般后台给的数据是这样的

var res.info=[
		{naem:'莫西子诗',ages:38},
		{naem:'百里登风',ages:32},
		{naem:'刺客伍六一',ages:27}
	] 
  //var arr = res.info;  // 浅拷贝
  var arr = [...res.info]; // 深拷贝
  arr.sort((a, b) => {
      return b.bargain_price - a.bargain_price
    })
    console.log(res.info)
    console.log(arr)
浅拷贝和深拷贝的区别是,一个改变原数组,一个不改变;

** 1.浅拷贝是指, 修改B对象的属性和方法会影响到A对象的属性和方法, 我们称之为浅拷贝 **

	var arr = res.info;
	 // 这样写的话,不管你将arr数组处理成啥样的,
		打印  arr 和 res,info 是一样的
		即   console.log(res.info)   和 *console.log(arr)* 是一样的,
	 // 本质上是res.info和arr都指向了同一块存储空间
	 // 所以无论是修改res.info还是arr都会影响到另外一个

** 深拷贝是指, 修改B对象的属性和方法不会影响到A对象的属性和方法, 我们称之为深拷贝 **

	var arr = [...res.info];
这样  console.log(res.info)   和 *console.log(arr)*  
在接下来你修改他们其中一个,另一个的数据都不会跟着发生改变

从富文本 里面获取所有图片地址的方法

原来是这样的

// res.data.info.description
<p><p><p><img src="https://wxiong.cn/cofc.png"/></p><p><img src="https://wxixiong.cn/6aba1b.png"/></p></p></p>

处理方法

 var str = res.data.info.description;
 var imUrl = str.match(/src="([^"]*)/g).map(s => s.substring(5));
   console.log(imgUrl)

打印出来是这样的

 ["https://wxiong.cn/cofc.png",  "https://wxixiong.cn/6aba1b.png"]

筛选出你想要的的字段 filter()

在一个json数组里面筛选type是banner的相应数组

     let dataInfo = res.data.info.all_data;
     let banner = dataInfo.filter((e) => {
            if(e.type == 'banner'){return  e }
          }) 
     that.setData({
        banner:banner[0].list,
        advert:advert
       })

删除一些字段

     let dataInfo = res.data.info.all_data;
     let banner = dataInfo.filter((e) => {
            if(e.type != 'banner'){return  e }
          }) 
	//  删除type:banner的数组
     that.setData({
        banner:banner[0].list,
        advert:advert
       })
  • 2
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值