小程序-数据类型操作那些事

最近在学习小程序，官方的示例比较简单，学习过程中往往找到想要的答案比较困难，在这里对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'],
}

• 添加元素

1. 使用“push()”函数添加一个元素到数组中，代码如下：

let len = this.data.list1.push('end'); // 添加一个或多个新元素到数组的末尾，并返回数组新的长度

2. 使用“unshift()”函数添加一个元素到数组中，代码如下：

let len = this.data.list1.unshift('start'); // 添加一个或多个新元素到数组的开头，并返回数组新的长度

3. 使用“concat()”函数，将两个或更多数组合并成一个，代码如下：

this.setData({
  list1: this.data.list1.concat(this.data.list2), // 两个或更多数组合并成一个数组，并返回结果
});
console.log('newList: ' + this.data.list1); // 输出结果：1,2,3,abc,def,asc

• 删除元素

1. 使用“pop()”函数，删除数组末尾的元素，代码如下：

let last = this.data.list1.pop(); // 删除数组末尾的元素，并返回最后一个元素

2. 使用“shift()”函数，删除数组的第一个元素，并返回数组的第一个元素，代码如下：

let first = this.data.list1.shift(); // 删除数组的第一个元素，并返回数组的第一个元素

3. 使用“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

注意：该方法会改变原始数组

• 修改元素

1. 通过index索引直接将newValue赋值，代码如下：

var lists = [1, 2, 3, 4, 5];
lists[2] = 'aa'; // 结果为：1,2,aa,4,5

• 查询元素

1. 通过index索引查询数组中的元素，代码如下：

var lists = [1, 2, 3, 4, 5, 6];
let result = lists[1]; // 查询index为1位置上的元素，结果为：2

2. 使用“slice()”函数，查询选定的元素，代码如下：

var lists = [1, 2, 3, 4, 5, 6];
let result = list.slice(1, 3)'; // 结果为：2,3

• 数组转化为字符串

1. 使用“toString()”函数，将数组转换为字符串，代码如下：

let str = this.data.list1.toString(); // 

2. 使用“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）键值对

1. 直接添加key和value到字典，代码如下：

dict.age = 12; // 结果为：{name: "alice", age: 12}
dict.['height'] = 170; // 结果为：{name: "alice", age: 12, height: 170}

• 修改（key, value）键值对

1. 通过“.”或“['']”语法，直接修改key的value，代码如下：

dict.name = 'tom';
console.log('value: ' + dict.name); // 结果为：value: tom
dict['name'] = 'lily';
console.log('value: ' + dict['name']); // 结果为：value: lily

2. 在比较复杂的情况下修改对象的值，代码如下：

// 声明数据
data: {
  simpleList: [2, 3, 'ads'],
  complexList: [{
    values: [] 
  }]
}

// 给values赋新值
this.setData({
  simpleList: ['wqe', 'ee', 'bgf'],
  'complexList[0].values': ['as', 'ds', 1, 2, 6] // 注意这种写法是放在字符串中的
});

• 查询（key, value）键值对

1. 通过“.”语法，查询key对应的value值，代码如下：

let value = dict.name;
console.log('value: ' + value); // 结果为：value: alice

2. 通过“['']”语法，查询key对应的value值，代码如下：

let value = dict['name'];
console.log('value: ' + value); // 结果为：value: alice