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

最近在学习小程序,官方的示例比较简单,学习过程中往往找到想要的答案比较困难,在这里对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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容

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