绘本馆网站建设,宿松网站建设,网站建设的五类成员,广告设计公司vi设计目录
1. 新增数组元素
方法一#xff1a;push#xff08;#xff09;
方法二#xff1a;concat()
方法三#xff1a;ES6中的扩展运算符 ...
2. 修改数组元素
样式一#xff1a;数字
样式二#xff1a;元素
3. 删除数组元素
方法一#xff1a;splice#x… 目录
1. 新增数组元素
方法一push
方法二concat()
方法三ES6中的扩展运算符 ...
2. 修改数组元素
样式一数字
样式二元素
3. 删除数组元素
方法一splice
方法二filter 在微信小程序中setData方法用于将数据从逻辑层发送到视图层以实现页面数据的更新和视图的刷新。通过 setData方法可以更新页面上展示的数据让用户看到最新的信息。 当调用 setData方法时需要传入一个对象该对象包含需要更新的数据。例如
this.setData({key1: value1,key2: value2,// 可以包含多个需要更新的键值对
});在这里key1key2等表示要更新的属性名value1value2分别为对应的属性值。当调用 setData 后相关属性的数据会被更新并触发页面视图的重新渲染以展示最新的数据。 如果想清空当前页面所有数据可以直接在 setData中不传入任何属性也就是空对象 {}。这样可以达到清空页面数据的效果
this.setData({});调用 setData{ }会清空当前页面的所有数据通常在特定场景下需要清空页面数据时会使用这种方式。 找到index.js文件在data中创建一个数组 // 定义一个数组list: [1,2,3] 找到cate.wxml文件显示数组
view classline/viewview wx:for{{ list }} wx:keyindex{{ item }}/viewbutton typeprimary bind:tapupdateList修改数组类型数据/button 这段代码是一个在微信小程序中使用的模板语法用于在页面中遍历展示一个列表数据 list 中的每个元素。 wx:for{{ list }}这里使用了 wx:for 指令来进行列表渲染表示要遍历名为 list 的数组数据。在每次迭代中可以通过 {{ item }} 来访问当前遍历到的元素。 wx:keyindexwx:key 用于指定列表中每个项的唯一标识符通常使用 index 表示数组索引。这有助于微信小程序快速准确地识别列表中每个项的变化提高性能并避免出现错误。 view{{ item }}/view在每次遍历时会生成一个 view 组件用于显示列表中的元素内容其中 {{ item }} 会被当前遍历到的元素数据替换从而在页面中动态渲染该数据。 找到index.js文件给updateList进行定义 // 更新 listupdateList(){} 1. 新增数组元素
方法一push push是 JavaScript 中数组对象的一个方法用于向数组的末尾添加一个或多个元素并返回修改后数组的新长度。 push方法会修改原始数组将指定的元素添加到数组的末尾然后返回更新后数组的新长度。如果需要在数组末尾添加多个元素可以依次传入多个参数。 这里我们可以采用push进行数组的添加。 找到cate.js文件: // 更新 listupdateList(){// 新增数组元素this.data.list.push(4)} 我们会发现页面未进行刷新 在微信小程序中直接对 this.data.list 进行修改并不会触发页面的数据更新和视图的刷新。 因此我们只需要使用setData将 this.data.list 的数据赋值给 list 即可 // 更新 listupdateList(){// 新增数组元素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]: 6com[0].name: jerry}) 点击“修改数组类型数据”按钮 3. 删除数组元素
方法一splice splice是 JavaScript 数组对象的方法用于向数组中添加或删除元素。它可以接受多个参数 start指定开始删除或添加元素的位置的索引。deleteCount指定要删除的元素个数。如果为 0则表示不删除元素只是添加新元素。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博客
