最近在学习小程序,官方的示例比较简单,学习过程中往往找到想要的答案比较困难,在这里对this.setData()修改或更新String、Number、Boolean、Array、Dictionary类型的值的相关操作做一个简单的总结。
String、Number、Boolean类型的值的修改
- this.setData()之修改String、Number、Boolean类型的值,这三种类型比较简单,直接把新值赋给变量即可。
// 分别声明String、Number、Boolean类型的变量
data: {
str: "",
num: 6,
bools: false,
}
修改以上三个变量的值,代码如下:
this.setData({
str: "this is a new value."
});
this.setData({
num: 0
});
this.setData({
bools: !this.data. isRefresh // 在这里也可以使用运算符
});
Array数组(增删改查)
- this.setData()之修改Array中的元素,这其中涉及数组的增删改查等操作。
// 声明数组
data: {
list1: [1, 2, 3],
list2: ['abc', 'def', 'asc'],
}
- 添加元素
- 使用“push()”函数添加一个元素到数组中,代码如下:
let len = this.data.list1.push('end'); // 添加一个或多个新元素到数组的末尾,并返回数组新的长度
- 使用“unshift()”函数添加一个元素到数组中,代码如下:
let len = this.data.list1.unshift('start'); // 添加一个或多个新元素到数组的开头,并返回数组新的长度
- 使用“concat()”函数,将两个或更多数组合并成一个,代码如下:
this.setData({
list1: this.data.list1.concat(this.data.list2), // 两个或更多数组合并成一个数组,并返回结果
});
console.log('newList: ' + this.data.list1); // 输出结果:1,2,3,abc,def,asc
- 删除元素
- 使用“pop()”函数,删除数组末尾的元素,代码如下:
let last = this.data.list1.pop(); // 删除数组末尾的元素,并返回最后一个元素
- 使用“shift()”函数,删除数组的第一个元素,并返回数组的第一个元素,代码如下:
let first = this.data.list1.shift(); // 删除数组的第一个元素,并返回数组的第一个元素
- 使用“splice()”函数,删除数组中指定下标和删除个数位置的元素;也可在删除的同时,在指定下标位置开始向数组添加一个或多个新元素,代码如下:
参数 | 描述 |
---|---|
index | 必需。整数,规定添加/删除元素的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的元素数量。如果设置为 0,则不会删除元素。 |
item1, ..., itemX | 可选。向数组添加的新元素。 |
var list3 = [1, 2, 3, 4, 5, 6];
let result1 = list3.splice(2, 1); // 结果为:删除元素:3,新数组:1,2,4,5,6
let result2 = list3.splice(2, 2, 'abc', 'abd', 'weq'); // 结果为:删除元素:3,4,新数组:1,2,abc,abd,weq,5,6
let result3 = list3.splice(2, 0, 'abc', 'abd', 'weq'); // 结果为:删除元素:,新数组:1,2,abc,abd,weq,3,4,5,6
注意:该方法会改变原始数组
- 修改元素
- 通过index索引直接将newValue赋值,代码如下:
var lists = [1, 2, 3, 4, 5];
lists[2] = 'aa'; // 结果为:1,2,aa,4,5
- 查询元素
- 通过index索引查询数组中的元素,代码如下:
var lists = [1, 2, 3, 4, 5, 6];
let result = lists[1]; // 查询index为1位置上的元素,结果为:2
- 使用“slice()”函数,查询选定的元素,代码如下:
var lists = [1, 2, 3, 4, 5, 6];
let result = list.slice(1, 3)'; // 结果为:2,3
- 数组转化为字符串
- 使用“toString()”函数,将数组转换为字符串,代码如下:
let str = this.data.list1.toString(); //
- 使用“join()”函数,将数组中的所有元素通过指定的分隔符连接成一个字符串,代码如下:
let str = this.data.list1.join('-'); // 将数组中的所有元素通过指定的分隔符连接成一个字符串,并返回生成的字符串
-
Array 操作的方法列表
这里只是一部分方法,更多方法请参照小程序数据类型
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果。 |
join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 颠倒数组中元素的顺序。 |
shift() | 删除并返回数组的第一个元素 |
slice() | 从某个已有的数组返回选定的元素 |
sort() | 对数组的元素进行排序 |
splice() | 删除元素,并向数组添加新元素。 |
toSource() | 返回该对象的源代码。 |
toString() | 把数组转换为字符串,并返回结果。 |
toLocaleString() | 把数组转换为本地数组,并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
valueOf() | 返回数组对象的原始值 |
Object对象操作(即Dictionary字典)
object 是一种无序的键值对
object 的 key 可以是字符串,也可以是符合变量定义规则的标识符
object 的 value 可以是任何类型
// 声明示例字典
var dict = {
name: 'alice',
};
- 添加(key, value)键值对
- 直接添加key和value到字典,代码如下:
dict.age = 12; // 结果为:{name: "alice", age: 12}
dict.['height'] = 170; // 结果为:{name: "alice", age: 12, height: 170}
- 修改(key, value)键值对
- 通过“.”或“['']”语法,直接修改key的value,代码如下:
dict.name = 'tom';
console.log('value: ' + dict.name); // 结果为:value: tom
dict['name'] = 'lily';
console.log('value: ' + dict['name']); // 结果为:value: lily
- 在比较复杂的情况下修改对象的值,代码如下:
// 声明数据
data: {
simpleList: [2, 3, 'ads'],
complexList: [{
values: []
}]
}
// 给values赋新值
this.setData({
simpleList: ['wqe', 'ee', 'bgf'],
'complexList[0].values': ['as', 'ds', 1, 2, 6] // 注意这种写法是放在字符串中的
});
- 查询(key, value)键值对
- 通过“.”语法,查询key对应的value值,代码如下:
let value = dict.name;
console.log('value: ' + value); // 结果为:value: alice
- 通过“['']”语法,查询key对应的value值,代码如下:
let value = dict['name'];
console.log('value: ' + value); // 结果为:value: alice