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

最近在学习小程序,官方的示例比较简单,学习过程中往往找到想要的答案比较困难,在这里对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'); // 添加一个或多个新元素到数组的末尾,并返回数组新的长度
  1. 使用“unshift()”函数添加一个元素到数组中,代码如下:
let len = this.data.list1.unshift('start'); // 添加一个或多个新元素到数组的开头,并返回数组新的长度
  1. 使用“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(); // 删除数组末尾的元素,并返回最后一个元素
  1. 使用“shift()”函数,删除数组的第一个元素,并返回数组的第一个元素,代码如下:
let first = this.data.list1.shift(); // 删除数组的第一个元素,并返回数组的第一个元素
  1. 使用“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
  1. 使用“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(); // 
  1. 使用“join()”函数,将数组中的所有元素通过指定的分隔符连接成一个字符串,代码如下:
let str = this.data.list1.join('-'); // 将数组中的所有元素通过指定的分隔符连接成一个字符串,并返回生成的字符串
方法 描述
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
  1. 在比较复杂的情况下修改对象的值,代码如下:
// 声明数据
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
  1. 通过“['']”语法,查询key对应的value值,代码如下:
let value = dict['name'];
console.log('value: ' + value); // 结果为:value: alice
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,207评论 0 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,981评论 19 139
  • 跑步三个月,不算老手,但贵在坚持,基本每天都会跑上一两圈,即便下雨天,也会在雨停歇后跑一下。除却当中因为膝盖痛和腰...
    禾叶兄弟阅读 580评论 0 3
  • 红烛滴进铜锁的纹络 在胡桃夹里,建一人之国 看漫江灯火 摆弄云雾起落 听白沙打磨的海螺 你的低语,缝进耳廓 今夕何...
    白风鬟阅读 387评论 0 0