Javascript 數(shù)組操作草稿紙

// 常見數(shù)組操作

  const log = console.log.bind(console)

  let color = ['red', 'yellow', 'blue']
  log(color)

1.  判斷是否是數(shù)組 
  log(Array.isArray(color))
  log(Object.prototype.toString.call(color).slice(8, -1))

2. 拿到數(shù)組的值
  log(color.valueOf())

  const messages = ['1', '2', '3'];

  log(messages.toString(), color.toString())


  // push 方法從數(shù)組末尾添加元素舆蝴,返回新數(shù)組長度棠赛,這一點記住
  // pop 方法從數(shù)組末尾刪除元素口渔,返回被刪除的元素
  // unshift 方法從數(shù)組頭部添加元素浪南,返回新數(shù)組長度
  // shift 方法從數(shù)組頭部刪除元素凡简,返回被刪除的元素
  messages.forEach(i => {
    color.push(i)
  })

  log(color)


3.  reverse() 

  // reverse() 數(shù)組反轉(zhuǎn)
  log(color.reverse())


4. sort()
  // sort(fn) sort 方法可以傳參捶索,不傳參的時候數(shù)組默認(rèn)把所有元素先轉(zhuǎn)換為 String 再排序典奉,比較的是 ASCII 碼屿笼,這個有點坑,
  // 幸好 sort 支持高階函數(shù)骚灸,所以我們傳入一個自定義的排序函數(shù)就可以實現(xiàn)我們正常的排序了糟趾,比如對數(shù)字排序,我們可以這樣寫甚牲,
  // sort 方法會修改原數(shù)組义郑,這是需要注意的地方
  // 默認(rèn)比較類型是 String
  function compare(x, y) {
    return x - y
  }

  color.sort(compare)
  log(color); // ["1", "2", "3", "blue", "yellow", "red"]

5. concat()
  // concat() 傳入元素或者數(shù)組都可以
  log(color.concat(messages)) //["1", "2", "3", "blue", "yellow", "red", "1", "2", "3"]


6. slice()
  // slice() 常見截取數(shù)組的元素,返回的是一個新數(shù)組丈钙,不更改原數(shù)組非驮,對應(yīng) String 中的 subString()
  // 如果不給slice 傳入?yún)?shù),則默認(rèn)截取所有元素雏赦,所以我們可以很容易的復(fù)制一個數(shù)組
  // slice 可以傳入負(fù)數(shù)劫笙,表示從后往前截取
  let arrCopy = color.slice()
  log(arrCopy) // ["1", "2", "3", "blue", "yellow", "red"]

  let arr = color.slice(3, -1)
  log(arr) // ["blue", "yellow"]

7. join()
  // join() 把數(shù)組元素合并為一個字符串,如果不帶參數(shù)星岗,默認(rèn)用逗號分隔
  log(color.join())
  log(color.join('-'))


8.splice()
  // splice() 算是一個萬能的方法對于數(shù)組的操作填大,根據(jù)參數(shù)不同可以實現(xiàn)從某處起刪除多少個元素,
  // 第三個參數(shù)往后都是需要添加到末尾的元素伍茄,返回值是被刪除掉的元素組成的數(shù)組
  log(color.splice(2, 3, 'hhh', 'sumin', 'test'), color)  
  // (3) ["3", "blue", "yellow"] (6) ["1", "2", "hhh", "sumin", "test", "red"]


9. indexOf()
  // indexOf() && lastIndexOf()
  // 二者都是驗證數(shù)組中是否含有某個元素栋盹,返回匹配到的元素在數(shù)組中所在的位置,如果沒有敷矫,則返回 -1例获,
  // 不同的是 indexOf 是從前往后,lastIndexOf 則相反
  log(color.indexOf('sumin'), color.lastIndexOf('ez')) // 3 -1


10. every(fn)
  // every(fn) && some(fn)
  // every and some 都是針對數(shù)組每一項運(yùn)算結(jié)果判定曹仗,不同的是 every 要求必須所有的都為 true 才能返回 true榨汤,
  // some 則只要有一項為 true 則返回 true,并且剩余的元素不會再執(zhí)行檢測
  const num = [1, 2, 3, 4, 5, 4, 3, 2, 1]
  const every = num.every((item, index, array) => {
    return item > 2
  })
  log(every) // false

  const some = num.some((item, index, array) => {
    return item > 2
  })
  log(some) // true


11.  filter(fn)
  // filter(fn) 過濾方法 可以傳入高階函數(shù) 怎茫,返回滿足條件的元素組成的新數(shù)組收壕,不改變原數(shù)組
  const filter = num.filter((item, index, array) => {
    return item > 2
  })
  log(filter) // [3, 4, 5, 4, 3]


12.map()
  // map() 對數(shù)組的每一項進(jìn)行計算等處理妓灌,返回處理結(jié)果組成的數(shù)組,其他和 forEach 類似蜜宪,只不過 forEach 沒有返回值虫埂,
  // 這里注意與數(shù)據(jù)類型 Map 進(jìn)行區(qū)分,不要混為一談
  const map = num.map((item, index, array) => {
    return item > 2
  })
  log(map) // [false, false, true, true, true, true, true, false, false]


  // 順帶了解一下 ES6 的數(shù)據(jù)類型 Map圃验,
  // 注意: JavaScript 中規(guī)定 Map 的數(shù)據(jù)結(jié)構(gòu)必須是字符串鍵值對掉伏,
  // 類似 Java 中的 Map,新增的數(shù)據(jù)類型 Map 是為了優(yōu)化查詢速度的
  const m = new Map([['a', 12], ['b', 34], ['c', 67]])
  log(m.get('a')) // 12


13.forEach() 
  // forEach() 遍歷數(shù)組,與 for 循環(huán)類似澳窑,不過區(qū)別在于 forEach 無法做到按指定的順序遍歷斧散,對于稀疏數(shù)組使用 for 循環(huán)效率更好

14. reduce(fn)
  // reduce(fn) 累加求和
  // 參數(shù)  [ 前一個元素 | 當(dāng)前元素,從1開始 | 后一個元素的序列摊聋,從1開始計數(shù) | 表示該數(shù)組 ]
  // 對于 reduce 的很多用法還不是很熟悉鸡捐,需要多加研究
  const reduce = num.reduce((pre, cur, index, array) => {
    return pre + cur
  })
  log(reduce) // 25

  //每一次迭代之后的結(jié)果分別為
  // [3, 3, 4, 5, 4, 3, 2, 1]
  // [6, 4, 5, 4, 3, 2, 1]
  // [10, 5, 4, 3, 2, 1]
  // [15, 4, 3, 2, 1]
  // [19, 3, 2, 1]
  // [22, 2, 1]
  // [24, 1]
  // 25
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市麻裁,隨后出現(xiàn)的幾起案子箍镜,更是在濱河造成了極大的恐慌,老刑警劉巖悲立,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹿寨,死亡現(xiàn)場離奇詭異,居然都是意外死亡薪夕,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進(jìn)店門赫悄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來原献,“玉大人,你說我怎么就攤上這事埂淮」糜纾” “怎么了?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵倔撞,是天一觀的道長讲仰。 經(jīng)常有香客問我,道長痪蝇,這世上最難降的妖魔是什么鄙陡? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮躏啰,結(jié)果婚禮上趁矾,老公的妹妹穿的比我還像新娘。我一直安慰自己给僵,他們只是感情好毫捣,可當(dāng)我...
    茶點故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蔓同。 火紅的嫁衣襯著肌膚如雪饶辙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天斑粱,我揣著相機(jī)與錄音畸悬,去河邊找鬼。 笑死珊佣,一個胖子當(dāng)著我的面吹牛蹋宦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播咒锻,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼冷冗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了惑艇?” 一聲冷哼從身側(cè)響起蒿辙,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎滨巴,沒想到半個月后思灌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡恭取,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年泰偿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜈垮。...
    茶點故事閱讀 38,687評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡耗跛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出攒发,到底是詐尸還是另有隱情调塌,我是刑警寧澤,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布惠猿,位于F島的核電站羔砾,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏偶妖。R本人自食惡果不足惜姜凄,卻給世界環(huán)境...
    茶點故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望餐屎。 院中可真熱鬧檀葛,春花似錦、人聲如沸腹缩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至润讥,卻和暖如春转锈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背楚殿。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工撮慨, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人脆粥。 一個月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓砌溺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親变隔。 傳聞我的和親對象是個殘疾皇子规伐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,576評論 2 349

推薦閱讀更多精彩內(nèi)容