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閱讀 227,401評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,011評論 3贊 413
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,263評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,543評論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,323評論 6贊 404
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,874評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 42,968評論 3贊 439
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,095評論 0贊 286
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,605評論 1贊 331
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,551評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,720評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,242評論 5贊 355
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 43,961評論 3贊 345
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,358評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,612評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,330評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,690評論 2贊 370