微信小程序开发系列（二十一）·wxml语法·setData（）修改数组类型数据（增加、修改、删除）

目录

1.  新增数组元素

方法一：push（）

方法二：concat()

方法三：ES6中的扩展运算符 ...

2.  修改数组元素

样式一：数字

样式二：元素

3.  删除数组元素

方法一：splice（）

方法二：filter（）    

---

        在微信小程序中，setData（）方法用于将数据从逻辑层发送到视图层，以实现页面数据的更新和视图的刷新。通过 setData（）方法可以更新页面上展示的数据，让用户看到最新的信息。

        当调用 setData（）方法时，需要传入一个对象，该对象包含需要更新的数据。例如：

this.setData({
  key1: value1,
  key2: value2,
  // 可以包含多个需要更新的键值对
});

        在这里，key1，key2等表示要更新的属性名，value1，value2分别为对应的属性值。当调用 setData（） 后，相关属性的数据会被更新，并触发页面视图的重新渲染，以展示最新的数据。

        如果想清空当前页面所有数据，可以直接在 setData（）中不传入任何属性，也就是空对象 {}。这样可以达到清空页面数据的效果：

this.setData({});

        调用 setData（{ }）会清空当前页面的所有数据，通常在特定场景下需要清空页面数据时会使用这种方式。

         找到index.js文件，在data中创建一个数组：

    // 定义一个数组
    list: [1,2,3]

        找到cate.wxml文件，显示数组：

<view class="line"></view>

<view wx:for="{{ list }}" wx:key="index">{{ item }}</view>

<button type="primary" bind:tap="updateList">修改数组类型数据</button>

        这段代码是一个在微信小程序中使用的模板语法，用于在页面中遍历展示一个列表数据 list 中的每个元素。

wx:for="{{ list }}"：这里使用了 wx:for 指令来进行列表渲染，表示要遍历名为 list 的数组数据。在每次迭代中，可以通过 {{ item }} 来访问当前遍历到的元素。

wx:key="index"：wx:key 用于指定列表中每个项的唯一标识符，通常使用 index 表示数组索引。这有助于微信小程序快速准确地识别列表中每个项的变化，提高性能并避免出现错误。

<view>{{ item }}</view>：在每次遍历时，会生成一个 <view> 组件用于显示列表中的元素内容，其中 {{ item }} 会被当前遍历到的元素数据替换，从而在页面中动态渲染该数据。

        找到index.js文件，给updateList进行定义：

  // 更新 list
  updateList(){

  }

1.  新增数组元素

方法一：push（）

        push（）是 JavaScript 中数组对象的一个方法，用于向数组的末尾添加一个或多个元素，并返回修改后数组的新长度。

        push（）方法会修改原始数组，将指定的元素添加到数组的末尾，然后返回更新后数组的新长度。如果需要在数组末尾添加多个元素，可以依次传入多个参数。

        这里我们可以采用push进行数组的添加。

        找到cate.js文件:

  // 更新 list
  updateList(){
    // 新增数组元素
    this.data.list.push(4)

  }

        我们会发现页面未进行刷新：

        在微信小程序中，直接对 this.data.list 进行修改并不会触发页面的数据更新和视图的刷新。

        因此，我们只需要使用setData（）将 this.data.list 的数据赋值给 list 即可：

  // 更新 list
  updateList(){
    // 新增数组元素
    this.data.list.push(4)
    this.setData({
      list: this.data.list
    })

        点击“修改数组类型数据”按钮：

方法二：concat()

        使用 concat() 方法可以将一个或多个元素连接到数组的末尾，并返回一个新的数组，而不是修改原始数组。

    const newList = this.data.list.concat(4)
    this.setData({
      list: newList
    })

        点击“修改数组类型数据”按钮：

方法三：ES6中的扩展运算符 ...

        ES6 中的扩展运算符 ... 来创建一个新数组newList，其中包含了原始数组 this.data.list 的所有元素以及新元素 4。这种方法不会修改原始数组，而是创建一个新的数组。

    const newList = [ ...this.data.list, 4 ]
    this.setData({
      list: newList
    })

        点击“修改数组类型数据”按钮：

2.  修改数组元素

样式一：数字

        使用了 setData（）方法来更新数组 list 中索引为 1 的元素为值 6

    // 修改数组元素
    this.setData({
      'list[1]': 6
    })

        点击“修改数组类型数据”按钮：

样式二：元素

        找到index.js文件，在data中另外创建一个数组：

    com: [{ id:1, name: 'tom'}]

         找到cate.wxml文件，显示数组：

<view>{{  com[0].name }}</view>

        找到index.js文件：

    // 修改数组元素
    this.setData({
      // 'list[1]': 6
      'com[0].name': 'jerry'
    })

        点击“修改数组类型数据”按钮：

3.  删除数组元素

方法一：splice（）

        splice（）是 JavaScript 数组对象的方法，用于向数组中添加或删除元素。它可以接受多个参数：

1. start：指定开始删除或添加元素的位置的索引。
2. deleteCount：指定要删除的元素个数。如果为 0，则表示不删除元素，只是添加新元素。
3. item1, item2, ...：可选参数，表示要添加到数组中的新元素。

    // 删除数组元素
    this.data.list.splice(1,1)
    this.setData({
      list: this.data.list
    })

        点击“修改数组类型数据”按钮：

方法二：filter（）    

        filter（）是 JavaScript 中数组对象的方法之一，它用于创建一个新数组，其中包含满足指定条件的原始数组中的元素。

        具体来说，filter（）方法接受一个回调函数作为参数，该回调函数会被应用于原始数组中的每个元素。回调函数返回一个布尔值，如果返回值为 true，则当前元素将包含在新数组中；如果返回值为false，则当前元素将被过滤掉，不包含在新数组中。

        回调函数通过 item => item !== 2 的箭头函数表示。它会遍历数组 list 中的每个元素，如果当前元素不等于 2，则将其添加到新数组 newList 中。最终，newList 中将仅包含原始数组中不等于 2 的元素。

    // 删除数组元素
    const newList = this.data.list.filter(item => item !== 2)
    this.setData({
      list: newList
    })

        点击“修改数组类型数据”按钮：

微信小程序开发系列（十九）·wxml语法·setData（）修改数据-CSDN博客

微信小程序开发系列（二十）·wxml语法·setData（）修改对象类型数据、ES6 提供的展开运算符、delete和rest的用法-CSDN博客

微信小程序开发_时光の尘的博客-CSDN博客