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

作者: dawsonenjoy | 来源:发表于2019-12-10 22:04 被阅读0次

字符串

判断是否存在某字符

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

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"]
// 字符串被转成了数组

对象

增

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

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+ 特性整理