JS 字符串/數(shù)組/對(duì)象常用操作

字符串

判斷是否存在某字符

判斷是否存在字符有很多方法剩彬，這里對(duì)常用的進(jìn)行介紹：

  • includes：判斷某字符是否存在，返回對(duì)應(yīng)bool值，舉例：
"abc".includes("a")
// true
"abc".includes("d")
// false
  • indexOf：和includes不同的是存在的返回索引，不存在的返回-1道批，舉例：
"abc".indexOf("a")
// 0
"abc".indexOf("d")
// -1
  • lastIndexOf：和indexOf不同的是，如果存在多個(gè)朴读，則返回最后一個(gè)的索引（前者返回第一個(gè)的）屹徘，舉例：
"abca".indexOf("a")
// 返回第一個(gè)索引，0
"abca".lastIndexOf("a")
// 返回最后一個(gè)索引衅金，3
"abca".lastIndexOf("d")
// 不存在也是-1
查詢字符

索引字符的方法也挺多，可以根據(jù)需求選擇簿煌，這里介紹常用的幾個(gè)：

  • charAt：根據(jù)下標(biāo)索引查詢氮唯，返回對(duì)應(yīng)的字符，舉例：
"abc".charAt(2)
// 返回第二個(gè)字符姨伟，"c"
"abc".charAt()
// 默認(rèn)返回第一個(gè)字符惩琉，"a"
"abc".charAt(3432)
// 不存在返回空字符串，""
  • search：根據(jù)字符返回對(duì)應(yīng)的索引夺荒，支持正則瞒渠，多個(gè)數(shù)據(jù)則值返回第一個(gè)的索引，舉例：
"abc123abc".search(/abc/)
// 0
  • match：和search類似技扼，但在多個(gè)數(shù)據(jù)時(shí)能全返回伍玖，還有返回的內(nèi)容有點(diǎn)不同，舉例：
"abc123abc".match(/abc/)
// 索引返回一個(gè)對(duì)象剿吻，第一個(gè)值是對(duì)應(yīng)的字符窍箍，后面是索引等，["abc", index: 0, input: "abc123abc", groups: undefined]
"abc123abc".match(/abc/)[0]
// 獲取索引的字符丽旅，"abc"
"abc123abc".match(/abc/g)
// 索引多個(gè)椰棘，["abc", "abc"]
替換字符

可以使用replace方法替換，舉例：

"abc123abc".replace("123", "456")
// "abc456abc"
"abc123abc".replace("abc", "456")
// 不用正則加g默認(rèn)只替換第一個(gè)榄笙，"456123abc"
"abc123abc".replace(/\d/g, "0")
// 支持正則替換邪狞，這里替換所有數(shù)字，"abc000abc"
判斷開(kāi)頭/結(jié)尾

可以使用startsWith/endsWith方法判斷茅撞，舉例：

"abc".startsWith('a')
// true
"abc".endsWith('b')
// false
大小寫(xiě)轉(zhuǎn)換

可以使用toUpperCase/toLowerCase方法轉(zhuǎn)換帆卓，舉例：

"abc".toUpperCase()
// "ABC"
"ABC".toLowerCase()
// "abc"
數(shù)值轉(zhuǎn)換

可以使用parseInt/parseFloat將數(shù)值內(nèi)容的字符串轉(zhuǎn)成原本的數(shù)值巨朦，舉例：

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

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

"12345".substr(1, 2)
// 截取第二個(gè)到第三個(gè)字符鳞疲，"23"
"12345".substring(1, 3)
// 從第二個(gè)字符截取到第四個(gè)字符（不包括第四個(gè)）罪郊，"23"
"12345".substr(1)
// 截取第二個(gè)及以后的字符，"2345"
去除兩邊空字符

可以使用trim去除尚洽，舉例：

"   dasd  ".trim()
// "dasd"
字符串/數(shù)組互轉(zhuǎn)

字符串轉(zhuǎn)數(shù)組可以通過(guò)split拆分實(shí)現(xiàn)悔橄，數(shù)組轉(zhuǎn)字符串可以通過(guò)join拼接實(shí)現(xiàn)，舉例：

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

可以使用repeat方法復(fù)制腺毫，舉例：

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

常見(jiàn)的就是用+號(hào)拼接癣疟，這里介紹模板字符串的拼接，通過(guò)${變量名}進(jìn)行拼接潮酒，舉例：

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

注意模板字符串的外面是使用反引號(hào)`而不是單引號(hào)

數(shù)組

增

常用的方法：

  • push：往數(shù)組的最后增加內(nèi)容，支持傳一個(gè)或多個(gè)急黎，舉例：
a = [1,2,3]
a.push(4)
// 加入1個(gè)4扎狱，變成：[1, 2, 3, 4]
a.push(5,6,7)
// 加入3個(gè)數(shù)，變成：[1, 2, 3, 4, 5, 6, 7]
  • unshift：往數(shù)組第一個(gè)位置插入內(nèi)容勃教，舉例：
a = [1,2,3]
a.unshift(0)
// [0, 1, 2, 3]
  • splice：該方法是一個(gè)增刪改查都支持的萬(wàn)能方法淤击，參數(shù)說(shuō)明：第一個(gè)參數(shù)為起始位置，第二個(gè)為從起始位置開(kāi)始截取的數(shù)量故源，第三個(gè)往后都為可選污抬，為從起始位置開(kāi)始插入的值，舉例：
// 對(duì)數(shù)組a = [111, 222, 333, 444, 555]分別進(jìn)行下面操作（每次執(zhí)行前保證數(shù)組為[111, 222, 333, 444, 555]）：
a.splice(2, 2)
// 從第三個(gè)元素開(kāi)始截取2個(gè)彈出绳军，結(jié)果為[333, 444]印机，數(shù)組變成：[111, 222, 555]
a.splice(2, 2, "aaa")
// 從第三個(gè)元素開(kāi)始截取2個(gè)彈出后，在第三個(gè)元素位置插入一個(gè)"aaa"门驾，結(jié)果為[333, 444]射赛，數(shù)組變成：[111, 222, "aaa", 555]
a.splice(2, 0, "aaa", "bbb")
// 從第三個(gè)元素開(kāi)始截取0個(gè)數(shù)據(jù)彈出，并在該位置插入"aaa"和"bbb"猎唁，結(jié)果為[]咒劲，數(shù)組變成：[111, 222, "aaa", "bbb", 333, 444, 555]

可以看到該方法將會(huì)對(duì)數(shù)組進(jìn)行截取和插入操作，并返回截取的數(shù)組內(nèi)容

改

可以直接根據(jù)索引來(lái)修改數(shù)組內(nèi)容：

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

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

查

數(shù)組查詢的方法有很多诫隅，可以根據(jù)需求的不同選擇特定的方法腐魂，下面介紹幾個(gè)常用的索引方法使用場(chǎng)景：

  • indexof：根據(jù)值來(lái)索引下標(biāo)，存在則返回對(duì)應(yīng)索引逐纬，不存在返回-1蛔屹，舉例：
a = [1,2,3]
a.indexOf(2)
// 返回索引1
a.indexOf(0)
// 不存在，返回-1
  • includes：索引某個(gè)值是否存在于數(shù)組豁生，返回一個(gè)bool值兔毒，舉例：
a = [1,2,3]
a.includes(2)
// true
a.includes(0)
// false
  • find：返回第一個(gè)符合條件的值漫贞，舉例：
a = [1,2,3]
a.find(item => item > 2)
// 返回第一個(gè)大于2的值，3
  • findIndex：返回第一個(gè)符合條件的值的索引育叁，舉例：
a = [1,2,3]
a.findIndex(item => item > 2)
// 返回第一個(gè)大于2的值的索引迅脐，2
  • slice：根據(jù)索引返回要查詢的值，可以索引多個(gè)豪嗽，并且可以倒序索引谴蔑，可以理解為去掉增刪改操作的splice方法，舉例：
a = [1,2,3]
a.slice(1,3)
// 返回第二個(gè)到第三個(gè)（返回第一個(gè)索引到第二個(gè)索引減一的數(shù)據(jù)）龟梦，[2, 3]
a
// 可以看到a并沒(méi)有改變隐锭，[1, 2, 3]
a.slice(-1)
// 索引最后一個(gè)，[3]
  • splice：前面介紹過(guò)了计贰，這里不贅述
刪
  • pop：刪除并返回最后一個(gè)值钦睡，舉例：
a = [1,2,3]
a.pop()
// 彈出最后一個(gè)，3
a
// 可以看到最后一個(gè)沒(méi)了躁倒，[1, 2]
  • shift：刪除并返回第一個(gè)值荞怒，舉例：
a = [1,2,3]
a.shift()
// 1
a
// [2, 3]
  • 修改length屬性：舉例：
a = [1,2,3]
a.length = 2
// 只留前兩個(gè)，2
a
// [1, 2]
  • delete關(guān)鍵字：被其刪除的內(nèi)容都將從內(nèi)存中被清掉秧秉，舉例：
a = [1,2,3]
delete a[0]
// 刪掉第0個(gè)挣输，true
a
// 第0個(gè)變成空的了，[empty, 2, 3]
delete a
// true
a
// 可以看到a這個(gè)數(shù)組已經(jīng)沒(méi)了
// VM548:1 Uncaught ReferenceError: a is not defined
//    at <anonymous>:1:1
拼接

concat方法可以將數(shù)組拼接在一起福贞，舉例：

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

join方法可以將數(shù)組按照規(guī)定拼成一個(gè)字符，舉例：

a = [1,2,3]
a.join("-")
// 用符號(hào)'-'將數(shù)組內(nèi)容拼在一起停士，"1-2-3"
排序

sort()方法可以完成數(shù)組排序功能挖帘，舉例：

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

要注意的是排序方法默認(rèn)是按字符順序排序的，如果希望按數(shù)字大小排序則需要定義排序規(guī)則恋技，舉例：

a = [1,2,3,5,10,4]
a.sort()
// 注意默認(rèn)不是按數(shù)字排序拇舀，10被排在了前面，[1, 10, 2, 3, 4, 5]
a.sort((a, b) => a-b)
// 按從小到大排序（a是下一個(gè)數(shù)蜻底，b是當(dāng)前數(shù)骄崩，所以a-b就是按下一個(gè)數(shù)大于當(dāng)前數(shù)方式來(lái)排序），[1, 2, 3, 4, 5, 10]
逆序

reverse()方法可以實(shí)現(xiàn)數(shù)組逆序（注意這里的逆序是把數(shù)組反過(guò)來(lái)薄辅，而不是從大到小的意思）要拂，舉例：

a = [1,2,3,5,4]
// [1, 2, 3, 5, 4]
a.reverse()
// 可以看到倒過(guò)來(lái)了，[4, 5, 3, 2, 1]
遍歷

可以使用for (item in xxx)遍歷站楚，舉例：

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

也可以使用forEach方法脱惰，使用該方法還有第二個(gè)參數(shù)，為遍歷的索引窿春，舉例：

a = [1,2,3,4,5]
a.forEach((item, index) => {console.log(item, index)})
// 循環(huán)輸出：1 0拉一、2 1采盒、...
篩選

filter方法，舉例：

a = [1,2,3,4,5]
a.filter(item => item%2==0)
// 返回所有偶數(shù)蔚润，結(jié)果為[2, 4]
統(tǒng)一操作

map方法磅氨，舉例：

a = [1,2,3,4,5]
a.map(function(item){return item>=3})
// 統(tǒng)一操作判斷每個(gè)數(shù)據(jù)是否大于等于3，[false, false, true, true, true]
設(shè)置統(tǒng)一值

可以使用fill方法嫡纠，舉例：

a = [1,2,3,4,5]
a.fill(100)
// 統(tǒng)一設(shè)置為100烦租， [100, 100, 100, 100, 100]

一般在需要生成固定長(zhǎng)度且值統(tǒng)一的場(chǎng)景下用，舉例：

new Array(10).fill(1)
// 生成10個(gè)值都為1的數(shù)組货徙， [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
連續(xù)運(yùn)算

如階乘左权、累加等操作，可以使用reduce方法痴颊，舉例：

a = [1,2,3,4,5]
a.reduce(function(tmp, item, index) {
    return tmp + item;
    // 返回結(jié)果為當(dāng)前數(shù)和下一個(gè)數(shù)的求和
})
// 這里實(shí)現(xiàn)了累加赏迟，最后的結(jié)果為15
總體判斷

可以使用some/every方法對(duì)數(shù)組進(jìn)行條件判斷，舉例：

a = [1,2,3]
a.some(item=>item>1)
// 數(shù)組存在大于1的則返回true蠢棱，結(jié)果：true
a.every(item=>item>1)
// 數(shù)組里全部大于1則返回true锌杀，結(jié)果：false
迭代對(duì)象轉(zhuǎn)數(shù)組

使用數(shù)組對(duì)象Array下的from方法可以將一個(gè)可迭代對(duì)象轉(zhuǎn)成數(shù)組進(jìn)行操作，舉例：

s = "sdasdasf"
Array.from(s)
// ["s", "d", "a", "s", "d", "a", "s", "f"]
// 字符串被轉(zhuǎn)成了數(shù)組
更多數(shù)組方法參考

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

對(duì)象

增

直接插入鍵值即可泻仙，舉例：

a = {}
a['x'] = 1
a
// {x: 1}
a.y = 2
// 通過(guò)這種方式也可以糕再，但是前者的鍵名可控，這種不可控
a
{x: 1, y: 2}
改

直接根據(jù)鍵修改值即可玉转，舉例：

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

直接根據(jù)鍵索引即可突想，舉例：

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

使用delete關(guān)鍵字刪除即可，舉例：

a = {x: 1, y: 2}
delete a.x
// true
a
// {y: 2}
判斷是否存在否個(gè)鍵

可以通過(guò)in關(guān)鍵字判斷究抓，舉例：

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

可以通過(guò)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)
// 將所有鍵值以數(shù)組形式返回，["x", 1], ["y", 2]
Object.entries(a).forEach((item) => {console.log(item)})
// ["x", 1]
// ["y", 2]
解析/轉(zhuǎn)JSON格式

可以使用JSON.parse/JSON.stringify方法橘茉，舉例：

a = {x: 1, y:2}
JSON.stringify(a)
// 轉(zhuǎn)json工腋，"{"x":1,"y":2}"
深拷貝對(duì)象

最常用的就是通過(guò)轉(zhuǎn)json拷貝后再轉(zhuǎn)回對(duì)象，舉例：

a = {x: 1, y:2}
b = JSON.parse(JSON.stringify(a))
// 深拷貝對(duì)象畅卓，{x: 1, y: 2}
a.x = 3
a
// {x: 3, y: 2}
b
// 可以看出b沒(méi)有一起發(fā)生改變擅腰，{x: 1, y: 2}

深拷貝/淺拷貝參考：https://www.cnblogs.com/penghuwan/p/7359026.html

數(shù)組/對(duì)象解構(gòu)/ES6新增方法

這里已經(jīng)介紹了一部分，剩余的可以參考我的另一篇文章：ES6+ 特性整理

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末髓介，一起剝皮案震驚了整個(gè)濱河市惕鼓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌唐础，老刑警劉巖箱歧，帶你破解...
    沈念sama閱讀 216,651評(píng)論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件矾飞，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡呀邢，警方通過(guò)查閱死者的電腦和手機(jī)洒沦，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)价淌，“玉大人申眼，你說(shuō)我怎么就攤上這事〔跻拢” “怎么了括尸？”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,931評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)病毡。 經(jīng)常有香客問(wèn)我濒翻，道長(zhǎng)，這世上最難降的妖魔是什么啦膜？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,218評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任有送，我火速辦了婚禮，結(jié)果婚禮上僧家，老公的妹妹穿的比我還像新娘雀摘。我一直安慰自己，他們只是感情好八拱，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布阵赠。 她就那樣靜靜地躺著，像睡著了一般肌稻。 火紅的嫁衣襯著肌膚如雪豌注。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 51,198評(píng)論 1贊 299
  • 城市分裂傳說(shuō)
    那天灯萍，我揣著相機(jī)與錄音，去河邊找鬼每聪。 笑死旦棉，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的药薯。 我是一名探鬼主播绑洛，決...
    沈念sama閱讀 40,084評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼童本！你這毒婦竟也來(lái)了真屯？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 38,926評(píng)論 0贊 274
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤穷娱，失蹤者是張志新（化名）和其女友劉穎绑蔫，沒(méi)想到半個(gè)月后运沦，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1贊 311
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡配深，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年携添，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片篓叶。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡烈掠，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出缸托，到底是詐尸還是另有隱情左敌，我是刑警寧澤，帶...
    沈念sama閱讀 35,430評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布俐镐，位于F島的核電站矫限，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏京革。R本人自食惡果不足惜奇唤，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3贊 326
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望匹摇。 院中可真熱鬧咬扇，春花似錦、人聲如沸廊勃。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,676評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)坡垫。三九已至梭灿，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間冰悠，已是汗流浹背堡妒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,829評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉卓，地道東北人皮迟。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像桑寨，于是被迫代替她去往敵國(guó)和親伏尼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2贊 354