JS 字符串/数组/对象常用操作

字符串

判断是否存在某字符

判断是否存在字符有很多方法，这里对常用的进行介绍：

  • includes：判断某字符是否存在，返回对应bool值，举例：
"abc".includes("a")
// true
"abc".includes("d")
// false
  • indexOf：和includes不同的是存在的返回索引，不存在的返回-1，举例：
"abc".indexOf("a")
// 0
"abc".indexOf("d")
// -1
  • lastIndexOf：和indexOf不同的是，如果存在多个，则返回最后一个的索引（前者返回第一个的），举例：
"abca".indexOf("a")
// 返回第一个索引，0
"abca".lastIndexOf("a")
// 返回最后一个索引，3
"abca".lastIndexOf("d")
// 不存在也是-1
查询字符

索引字符的方法也挺多，可以根据需求选择，这里介绍常用的几个：

  • charAt：根据下标索引查询，返回对应的字符，举例：
"abc".charAt(2)
// 返回第二个字符，"c"
"abc".charAt()
// 默认返回第一个字符，"a"
"abc".charAt(3432)
// 不存在返回空字符串，""
  • search：根据字符返回对应的索引，支持正则，多个数据则值返回第一个的索引，举例：
"abc123abc".search(/abc/)
// 0
  • match：和search类似，但在多个数据时能全返回，还有返回的内容有点不同，举例：
"abc123abc".match(/abc/)
// 索引返回一个对象，第一个值是对应的字符，后面是索引等，["abc", index: 0, input: "abc123abc", groups: undefined]
"abc123abc".match(/abc/)[0]
// 获取索引的字符，"abc"
"abc123abc".match(/abc/g)
// 索引多个，["abc", "abc"]
替换字符

可以使用replace方法替换，举例：

"abc123abc".replace("123", "456")
// "abc456abc"
"abc123abc".replace("abc", "456")
// 不用正则加g默认只替换第一个，"456123abc"
"abc123abc".replace(/\d/g, "0")
// 支持正则替换，这里替换所有数字，"abc000abc"
判断开头/结尾

可以使用startsWith/endsWith方法判断，举例：

"abc".startsWith('a')
// true
"abc".endsWith('b')
// false
大小写转换

可以使用toUpperCase/toLowerCase方法转换，举例：

"abc".toUpperCase()
// "ABC"
"ABC".toLowerCase()
// "abc"
数值转换

可以使用parseInt/parseFloat将数值内容的字符串转成原本的数值，举例：

parseFloat("123")
// 123
截取字符串

可以使用substring/substr截取，举例：

"12345".substr(1, 2)
// 截取第二个到第三个字符，"23"
"12345".substring(1, 3)
// 从第二个字符截取到第四个字符（不包括第四个），"23"
"12345".substr(1)
// 截取第二个及以后的字符，"2345"
去除两边空字符

可以使用trim去除，举例：

"   dasd  ".trim()
// "dasd"
字符串/数组互转

字符串转数组可以通过split拆分实现，数组转字符串可以通过join拼接实现，举例：

"12345".split('')
// ["1", "2", "3", "4", "5"]
[1,2,3,4,5].join("")
// "12345"
重复复制

可以使用repeat方法复制，举例：

"abc".repeat(3)
// "abcabcabc"
拼接字符串

常见的就是用+号拼接，这里介绍模板字符串的拼接，通过${变量名}进行拼接，举例：

x = "aaa"
`${x}bbb`
// 拼接x和bbb字符，"aaabbb"

注意模板字符串的外面是使用反引号`而不是单引号

数组

增

常用的方法：

  • push：往数组的最后增加内容，支持传一个或多个，举例：
a = [1,2,3]
a.push(4)
// 加入1个4，变成：[1, 2, 3, 4]
a.push(5,6,7)
// 加入3个数，变成：[1, 2, 3, 4, 5, 6, 7]
  • unshift：往数组第一个位置插入内容，举例：
a = [1,2,3]
a.unshift(0)
// [0, 1, 2, 3]
  • splice：该方法是一个增删改查都支持的万能方法，参数说明：第一个参数为起始位置，第二个为从起始位置开始截取的数量，第三个往后都为可选，为从起始位置开始插入的值，举例：
// 对数组a = [111, 222, 333, 444, 555]分别进行下面操作（每次执行前保证数组为[111, 222, 333, 444, 555]）：
a.splice(2, 2)
// 从第三个元素开始截取2个弹出，结果为[333, 444]，数组变成：[111, 222, 555]
a.splice(2, 2, "aaa")
// 从第三个元素开始截取2个弹出后，在第三个元素位置插入一个"aaa"，结果为[333, 444]，数组变成：[111, 222, "aaa", 555]
a.splice(2, 0, "aaa", "bbb")
// 从第三个元素开始截取0个数据弹出，并在该位置插入"aaa"和"bbb"，结果为[]，数组变成：[111, 222, "aaa", "bbb", 333, 444, 555]

可以看到该方法将会对数组进行截取和插入操作，并返回截取的数组内容

改

可以直接根据索引来修改数组内容：

a = [1,2,3]
a[1] = 5
// a变成：[1, 5, 3]

也可以用前面介绍的splice方法

查

数组查询的方法有很多，可以根据需求的不同选择特定的方法，下面介绍几个常用的索引方法使用场景：

  • indexof：根据值来索引下标，存在则返回对应索引，不存在返回-1，举例：
a = [1,2,3]
a.indexOf(2)
// 返回索引1
a.indexOf(0)
// 不存在，返回-1
  • includes：索引某个值是否存在于数组，返回一个bool值，举例：
a = [1,2,3]
a.includes(2)
// true
a.includes(0)
// false
  • find：返回第一个符合条件的值，举例：
a = [1,2,3]
a.find(item => item > 2)
// 返回第一个大于2的值，3
  • findIndex：返回第一个符合条件的值的索引，举例：
a = [1,2,3]
a.findIndex(item => item > 2)
// 返回第一个大于2的值的索引，2
  • slice：根据索引返回要查询的值，可以索引多个，并且可以倒序索引，可以理解为去掉增删改操作的splice方法，举例：
a = [1,2,3]
a.slice(1,3)
// 返回第二个到第三个（返回第一个索引到第二个索引减一的数据），[2, 3]
a
// 可以看到a并没有改变，[1, 2, 3]
a.slice(-1)
// 索引最后一个，[3]
  • splice：前面介绍过了，这里不赘述
删
  • pop：删除并返回最后一个值，举例：
a = [1,2,3]
a.pop()
// 弹出最后一个，3
a
// 可以看到最后一个没了，[1, 2]
  • shift：删除并返回第一个值，举例：
a = [1,2,3]
a.shift()
// 1
a
// [2, 3]
  • 修改length属性：举例：
a = [1,2,3]
a.length = 2
// 只留前两个，2
a
// [1, 2]
  • delete关键字：被其删除的内容都将从内存中被清掉，举例：
a = [1,2,3]
delete a[0]
// 删掉第0个，true
a
// 第0个变成空的了，[empty, 2, 3]
delete a
// true
a
// 可以看到a这个数组已经没了
// VM548:1 Uncaught ReferenceError: a is not defined
//    at <anonymous>:1:1
拼接

concat方法可以将数组拼接在一起，举例：

a = [1,2,3]
b = [4,5,6]
a.concat(b)
// [1, 2, 3, 4, 5, 6]
合并成字符

join方法可以将数组按照规定拼成一个字符，举例：

a = [1,2,3]
a.join("-")
// 用符号'-'将数组内容拼在一起，"1-2-3"
排序

sort()方法可以完成数组排序功能，举例：

a = [1,2,3,5,4]
a.sort()
// [1, 2, 3, 4, 5]

要注意的是排序方法默认是按字符顺序排序的，如果希望按数字大小排序则需要定义排序规则，举例：

a = [1,2,3,5,10,4]
a.sort()
// 注意默认不是按数字排序，10被排在了前面，[1, 10, 2, 3, 4, 5]
a.sort((a, b) => a-b)
// 按从小到大排序（a是下一个数，b是当前数，所以a-b就是按下一个数大于当前数方式来排序），[1, 2, 3, 4, 5, 10]
逆序

reverse()方法可以实现数组逆序（注意这里的逆序是把数组反过来，而不是从大到小的意思），举例：

a = [1,2,3,5,4]
// [1, 2, 3, 5, 4]
a.reverse()
// 可以看到倒过来了，[4, 5, 3, 2, 1]
遍历

可以使用for (item in xxx)遍历，举例：

a = [1,2,3]
for (let x in a){console.log(x)}

也可以使用forEach方法，使用该方法还有第二个参数，为遍历的索引，举例：

a = [1,2,3,4,5]
a.forEach((item, index) => {console.log(item, index)})
// 循环输出：1 0、2 1、...
筛选

filter方法，举例：

a = [1,2,3,4,5]
a.filter(item => item%2==0)
// 返回所有偶数，结果为[2, 4]
统一操作

map方法，举例：

a = [1,2,3,4,5]
a.map(function(item){return item>=3})
// 统一操作判断每个数据是否大于等于3，[false, false, true, true, true]
设置统一值

可以使用fill方法，举例：

a = [1,2,3,4,5]
a.fill(100)
// 统一设置为100， [100, 100, 100, 100, 100]

一般在需要生成固定长度且值统一的场景下用，举例：

new Array(10).fill(1)
// 生成10个值都为1的数组， [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
连续运算

如阶乘、累加等操作，可以使用reduce方法，举例：

a = [1,2,3,4,5]
a.reduce(function(tmp, item, index) {
    return tmp + item;
    // 返回结果为当前数和下一个数的求和
})
// 这里实现了累加，最后的结果为15
总体判断

可以使用some/every方法对数组进行条件判断，举例：

a = [1,2,3]
a.some(item=>item>1)
// 数组存在大于1的则返回true，结果：true
a.every(item=>item>1)
// 数组里全部大于1则返回true，结果：false
迭代对象转数组

使用数组对象Array下的from方法可以将一个可迭代对象转成数组进行操作，举例：

s = "sdasdasf"
Array.from(s)
// ["s", "d", "a", "s", "d", "a", "s", "f"]
// 字符串被转成了数组
更多数组方法参考

https://blog.csdn.net/ChauncyWu/article/details/82960898

对象

增

直接插入键值即可，举例：

a = {}
a['x'] = 1
a
// {x: 1}
a.y = 2
// 通过这种方式也可以，但是前者的键名可控，这种不可控
a
{x: 1, y: 2}
改

直接根据键修改值即可，举例：

a = {x:1}
a['x'] = 2
// 2
a
// {x: 2}
a.x = 3
// 两种方式都行
a
// {x: 3}
查

直接根据键索引即可，举例：

a = {x: 1, y: 2}
a['x']
// 1
a.y
// 2
删

使用delete关键字删除即可，举例：

a = {x: 1, y: 2}
delete a.x
// true
a
// {y: 2}
判断是否存在否个键

可以通过in关键字判断，举例：

a = {x: 1}
'x' in a
// true
'y' in a
// false
遍历

可以通过for (key in obj)遍历，举例：

a = {x: 1, y:2}
for (let key in a) { console.log(key, a[key]) }
获取所有键/值

可以使用Object.keys()/Object.values()方法，举例：

a = {x: 1, y:2}
Object.keys(a)
// 获取所有键，["x", "y"]
Object.values(a)
// 获取所有值，[1, 2]
Object.entries(a)
// 将所有键值以数组形式返回，["x", 1], ["y", 2]
Object.entries(a).forEach((item) => {console.log(item)})
// ["x", 1]
// ["y", 2]
解析/转JSON格式

可以使用JSON.parse/JSON.stringify方法，举例：

a = {x: 1, y:2}
JSON.stringify(a)
// 转json，"{"x":1,"y":2}"
深拷贝对象

最常用的就是通过转json拷贝后再转回对象，举例：

a = {x: 1, y:2}
b = JSON.parse(JSON.stringify(a))
// 深拷贝对象，{x: 1, y: 2}
a.x = 3
a
// {x: 3, y: 2}
b
// 可以看出b没有一起发生改变，{x: 1, y: 2}

深拷贝/浅拷贝参考：https://www.cnblogs.com/penghuwan/p/7359026.html

数组/对象解构/ES6新增方法

这里已经介绍了一部分，剩余的可以参考我的另一篇文章：ES6+ 特性整理

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345