小程序 setData 修改 data 中数组内不定对象的数据

普通变量的 setData()

在某些时候,我们的小程序中存在的不只是像下面这样的简单的变量: 变量值这种形式

data: {
    name: 'Kyle',
    age: 28,
    mail: 'kylebing@163.com'
}

这种形式的数据,在需要修改的时候,只需要如下形式修改就可以了

this.setData({
    name: 'Tina'
 })

数组内部的 setData()

有时候,里面会有对象数组,需要修改数组内部的变量,如下面的 people数组:

people: [
  {
    name: 'Kyle',
    age: 24,
    products: [
      {name: 'iPhone', price: 4550},
      {name: 'AirPods Pro', price: 1999},
    ]
  },
  {
    name: 'Tina',
    age: 26,
    products: [
      {name: 'Dell P2415Q', price: 1800},
      {name: 'Macbook Pro', price: 8500},
    ]
  }
]

像这种改变数组内部属性的值,需要不同于普通变量的 setData(),格式如下: 方括号里接收的是字符串

this.setData({
    [ 定位数据的字符串 ]: 数据
})

如: 修改 Kyle 的 age

this.setData({
    ['people[0].age']: 25
})

上面这是修改数组中固定位置元素的数据,比如现在已经知道需要修改的数据下标变量为 index,修改不定下标的数据又该怎么写呢?

因为 []方括号中接收的是字符串,所以我们只需要放入对应的字符串即可,可以是 单引号拼接的字符串,也可以是 ES6 反引号形式的字符串,说白了只要是字符串就可以。 对比两种形式的写法就能明白什么意思了,写法如下:

普通字符串拼接:

let index = 1;
this.setData({
  ['people[' + index + '].age']: 25
})

ES6 形式字符串:

let index = 1;
this.setData({
  [`people[${index}].age`]: 25
})

修改数组中数组的值

这个无非就是再加一层而已,如:修改第二个人的第二个产品的价格,每次点击加 2

定义一个方法 changeAirPodsPrice绑定中页面中的按钮上,代码如下:

changeAirPodsPrice: function() {
    let index = 1;  // people 下标,也就是第二个人
    let productIndex = 1 // 产品 下标,也就是第二个产品
    this.setData({
      [`people[${index}].products[${productIndex}].price`]: this.data.people[index].products[productIndex].price + 2
    })
},

效果如图:

原文链接:segmentfault.com

上一篇:Javascript中的高级特性及特别对象、属性和方法
下一篇:初探 node events模块

相关推荐

  • (深入)使用jQuery复制数组(复制)

    Communitymorgancodes(https://stackoverflow.com/users/1/community)提出了一个问题:(Deep) copying an array usi...

    2 年前
  • 顺时针螺旋输出二维数组

    给定一个数组,将该数组从第一个元素开始顺时针打印出来。 思路: 先考虑打印周围一圈的问题,然后可以使用递归求解,直到最后全都打印完为止。也就是先打印最外围的数,然后对于元二维数组中间的数组作为一个新的...

    2 年前
  • 项目中数组循环的一个优化案例

    最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000,甚至更长,所以导致筛选之后的...

    3 个月前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... ...

    4 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    19 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    20 天前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 重新排序的数组

    重新排序的数组...

    2 年前
  • 重学JS:数组

    除了Object类型之外,Array类型恐怕是js中最常用的类型了,并且随着js的发展进步,数组中提供的方法也越来越来,对数组的处理也出现了各种骚操作,此篇文章将会带你重新学习数组中的实例方法 数...

    10 个月前
  • 遍历数组的n种方法

    var arr = 1,2,3,4,5 // arr.forEach(function(item){ // // 当 item =2 的时候 打印123 同时让 循环终止 // // forEac...

    1 年前

官方社区

扫码加入 JavaScript 社区