數(shù)組的各種方法

會改變自身的方法

  • array.pop()
    刪除一個(gè)數(shù)組中的最后一個(gè)元素,并且返回這個(gè)元素

  • array.push(element1, ...elementN)
    添加一個(gè)或多個(gè)元素到數(shù)組的末尾,并返回?cái)?shù)組新的長度

  • array.reverse()
    前后顛倒數(shù)組中元素的位置,第一個(gè)元素會成為最后一個(gè)

  • array.shift()
    刪除數(shù)組的第一個(gè)元素,并返回這個(gè)元素

  • array.unshift(element1, ...elementN)
    在數(shù)組的開頭插入一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長度

  • array.sort([function(a, b)])
    對數(shù)組的元素做原地的排序,并返回這個(gè)數(shù)組,按升序排列的。sort默認(rèn)把元素轉(zhuǎn)成字符串后按照字符串的unicode碼位點(diǎn)排序,所以很多時(shí)候排序結(jié)果不是我們所期望的。但是我們可以自己傳一個(gè)函數(shù)作為參數(shù),手動(dòng)排序

如果指明了`compareFunction`,那么數(shù)組會按照調(diào)用該函數(shù)的返回值進(jìn)行排序。比較函數(shù)`compareFunction`接收兩個(gè)參數(shù)`a`和`b`,`a`和`b`是兩個(gè)將要被比較的元素:

*   **`compareFunction(a,b)`返回的值小于`0`**:那么`a`就小于`b`,也就是說`a`排在了`b`的前面
*   **`compareFunction(a,b)`返回的值大于`0`**: 那么`a`就大于`b`,也就是說`a`排在了`b`的后面
*   **`compareFunction(a,b)`返回的值等于`0`**:那么`a`就等于`b`,也就是說`a`和`b`的位置保持不變

不僅可以升序降序還可以隨機(jī)排序

var randomArray = [9,0,23,8,3,5]; 
function randomSort(a, b){ 
  return Math.random() - 0.5; 
} 
console.log(randomArray.sort(randomSort));

數(shù)組的sort()

  • array.splice(start, deleteCount[, item1[, item2...])
    在任意的位置給數(shù)組添加或刪除任意個(gè)元素(拼接),返回被刪除的元素組成的數(shù)組,沒有則返回空數(shù)組

  • array.copyWithin(target, start = 0, end = this.length)
    在當(dāng)前數(shù)組內(nèi)部,將指定位置的成員復(fù)制到其他位置(會覆蓋原有成員),然后返回當(dāng)前數(shù)組。也就是說,使用這個(gè)方法,會修改當(dāng)前數(shù)組。
    target(必需):從該位置開始替換數(shù)據(jù)。如果為負(fù)值,表示倒數(shù)。
    start(可選):從該位置開始讀取數(shù)據(jù),默認(rèn)為 0。如果為負(fù)值,表示倒數(shù)。
    end(可選):到該位置前停止讀取數(shù)據(jù),默認(rèn)等于數(shù)組長度。如果為負(fù)值,表示倒數(shù)。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面代碼表示將從 3 號位直到數(shù)組結(jié)束的成員(4 和 5),復(fù)制到從 0 號位開始的位置,結(jié)果覆蓋了原來的 1 和 2。

// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號位,-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

不會改變自身的方法

  • array.concat(value1, value2.....)
    將傳入的數(shù)組或非數(shù)組值與原數(shù)組合并,組成一個(gè)新的數(shù)組并返回。假設(shè)value1中如果有對象的話,新返回的數(shù)組中的對象和value1中是同一個(gè)引用。

  • array.join([separator = ','])
    將數(shù)組中的所有元素連接成一個(gè)字符串(默認(rèn)用逗號作為分隔符,如果separator是一個(gè)空字符串,那么數(shù)組中的所有元素將被直接連接)
    如果元素是undefined或者null,則會轉(zhuǎn)化成空字符串

  • array.slice([begin = 0 [, end = this.length - 1]])
    把數(shù)組中一部分的淺復(fù)制(shallow copy)存入一個(gè)新的數(shù)組對象中,并返回這個(gè)新的數(shù)組
    不修改原數(shù)組,只會返回一個(gè)包含了原數(shù)組中提取的部分元素的一個(gè)新數(shù)組

  • array.toString()
    返回一個(gè)字符串,該字符串由數(shù)組中的每個(gè)元素的toString()返回值經(jīng)調(diào)用join()方法連接(由逗號隔開)組成。

var arr = ['abc', 2, {a: 'test'}]
 console.log(arr.toString())        //'abc,2,[object Object]'
  • array.indexOf(searchElement[, fromIndex = 0])
    返回指定元素能在數(shù)組中找到的第一個(gè)索引值,否則返回-1
    fromIndex可以為負(fù),表示從倒數(shù)第n個(gè)開始(此時(shí)仍然從前向后查詢數(shù)組)
    使用“嚴(yán)格相等”(===)進(jìn)行匹配
          var obj = {a: 'test'}
          var arr = ['a', 'b', {a: 'test'}]
          console.log(arr.indexOf(obj))     //-1  因?yàn)槭菄?yán)格相等

          var arr2 = [1, 'b', {a: 'test'}]
          console.log(arr2.indexOf('1'))      //-1

  • array.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
    返回指定元素在數(shù)組中的最后一個(gè)的索引,如果不存在則返回-1, 從數(shù)組的后面向前查找

遍歷方法

  • array.forEach((v, i, a) => {})
    讓數(shù)組的每一項(xiàng)都執(zhí)行一次給定的函數(shù),ES5中操作數(shù)組的一種方法
    v表示當(dāng)前項(xiàng)的值,i表示當(dāng)前索引,a表示數(shù)組本身
    forEach遍歷的范圍在第一次調(diào)用 callback前就會確定。調(diào)用forEach后添加到數(shù)組中的項(xiàng)不會被 callback訪問到。如果已經(jīng)存在的值被改變,則傳遞給 callback的值是 forEach遍歷到他們那一刻的值。已刪除的項(xiàng)不會被遍歷到。

  • array entries(),keys() 和 values()
    ES6 提供三個(gè)新的方法——entries(),keys()和values()——用于遍歷數(shù)組。它們都返回一個(gè)遍歷器對象,可以用for...of循環(huán)進(jìn)行遍歷,唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of循環(huán),可以手動(dòng)調(diào)用遍歷器對象的next方法,進(jìn)行遍歷。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
  • array.every(callback(v, i, a){})
    callback只會為那些已經(jīng)被賦值的索引調(diào)用,不會為那些被刪除或從來沒有被賦值的索引調(diào)用
    和forEach函數(shù)類似
    注意:array.every()返回一個(gè)布爾值,即對每個(gè)元素的callback函數(shù)結(jié)果作邏輯“&”操作

  • array.some()
    使用方法同上,
    注意:對每個(gè)元素的callback函數(shù)結(jié)果作邏輯“||”操作

  • array.filter((v, i, a) => {})
    使用指定的函數(shù)測試所有元素,并創(chuàng)建一個(gè)包含所有測試通過的元素的新數(shù)組
    callback函數(shù)返回一個(gè)布爾值,true即通過測

  • array.find((v, i, a) =>{})
    返回?cái)?shù)組中滿足測試條件的第一個(gè)元素,如果沒有滿足條件的元素,則返回undefined

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
  • array.findIndex((v, i, a) =>{})
    數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似,返回第一個(gè)符合條件的數(shù)組成員的位置,如果所有成員都不符合條件,則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

這兩個(gè)方法都可以接受第二個(gè)參數(shù),用來綁定回調(diào)函數(shù)的this對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

indexOf方法無法識別數(shù)組的NaN成員,但是findIndex方法可以借助Object.is方法做到。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
  • array.map((v, i, a) => {})
    返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組
    map 不修改調(diào)用它的原數(shù)組本身(當(dāng)然可以在 callback 執(zhí)行時(shí)改變原數(shù)組)

  • array.reduce(callback[, initialValue])
    該方法接收一個(gè)函數(shù)作為累加器(accumulator),數(shù)組中的每個(gè)值(從左到右)開始合并,最終為一個(gè)值
    callback參數(shù):
    previousValue:上一次調(diào)用回調(diào)返回的值,或者是提供的初始值(initialValue)
    currentValue: 數(shù)組中當(dāng)前被處理的元素
    index: index
    array: 調(diào)用的數(shù)組
    如果 initialValue 在調(diào)用 reduce 時(shí)被提供,那么第一個(gè) previousValue 等于 initialValue ,并且currentValue 等于數(shù)組中的第一個(gè)值;如果initialValue 未被提供,那么previousValue 等于數(shù)組中的第一個(gè)值,currentValue等于數(shù)組中的第二個(gè)值。

[0, 1, 2, 3, 4, 5].reduce((p, v, i , a) => {
  return p + v
})
// 數(shù)組扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
  return a.concat(b)
})
  • array.includes(v,[ fromIndex = 0] )
    返回一個(gè)布爾值,表示某個(gè)數(shù)組是否包含給定的值,與字符串的includes方法類似。該方法的第二個(gè)參數(shù)表示搜索的起始位置,默認(rèn)為0。如果第二個(gè)參數(shù)為負(fù)數(shù),則表示倒數(shù)的位置,如果這時(shí)它大于數(shù)組長度(比如第二個(gè)參數(shù)為-4,但數(shù)組長度為3),則會重置為從0開始。
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

非數(shù)組轉(zhuǎn)換為數(shù)組

Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組
Array.of方法用于將一組值,轉(zhuǎn)換為數(shù)組。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

slice,substring,substr的區(qū)別

首先,他們都接收兩個(gè)參數(shù),slice和substring接收的是起始位置和結(jié)束位置(不包括結(jié)束位置),而substr接收的則是起始位置和所要返回的字符串長度。直接看下面例子:

var test = 'hello world';

alert(test.slice(4,7));             //o w
alert(test.substring(4,7));         //o w
alert(test.substr(4,7));            //o world

上面的操作都不會改變test字符串,而是返回新值。
substring是以兩個(gè)參數(shù)中較小一個(gè)作為起始位置,較大的參數(shù)作為結(jié)束位置。

接著,當(dāng)接收的參數(shù)是負(fù)數(shù)時(shí),slice會將它字符串的長度與對應(yīng)的負(fù)數(shù)相加,結(jié)果作為參數(shù);substr則僅僅是將第一個(gè)參數(shù)與字符串長度相加后的結(jié)果作為第一個(gè)參數(shù);substring則干脆將負(fù)參數(shù)都直接轉(zhuǎn)換為0。
slice,substr和substring的區(qū)別
split分割字符串為數(shù)組。但是如果分割的參數(shù)字符串中沒有,返回值還是個(gè)數(shù)組,只有一個(gè)值為字符串本身。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,345評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,494評論 3 416
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,283評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,953評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,714評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,410評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,940評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,776評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,210評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,654評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評論 2 373

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