數組

數組(Array)

數組(Array)是按排列的一組值.每個值的位置都有編號(從0開始)

var arr = ['a', 'b', 'c'];

a、b、c就構成一個數組,兩端的方括號是數組的標志.a是0號位,b是1號位,c是2號位.

數組屬于一種特殊的對象.typeof運算符會返回數組的類型是object。

typeof [1, 2, 3] // "object"

數組的創建與修改


var food = new Array('fish','chicken','chips')
var food = Array('fish','chicken','chips') //new操作符可以省略
var food = ['fish','chicken','chips']
var arr1 = [1, 2, , 3] //1,2,undefined, 3

var a = arr1[0] // 訪問第1個元素 1
var b = arr1[2] // undefined
arr1[1] = 33   //設置元素
arr1[5] = 22   //此時 arr1 為1,33,undefined, 3,undefined,22

需要注意的是

var arr2 = [1, 2, 3,]  // IE8及以下是1,2,3,undefined 長度4
                       // chrome 為1,2,3 長度3  此寫法不推薦

JS的數組中可以保存任意類型的數據

var arr = [
    {a: 45},                //對象
  [1, 2, 3],                //數組
  function() {return true;} //函數
  ];

JS數組的大小是可以動態調整的,即可隨著數據的添加自動增長以容納新增數據

var arr = [0,1,2]
console.log(arr.length)  //3
arr[3] = 3
console.log(arr.length)  //4
arr[99] = 99
console.log(arr.length)  //100

Array方法

遍歷

var cars =['Saab','Volvo','BMW']
for(var i = 0; i< cars.length; i++){
console.log(cars[i]);
}

檢測

var arr = [1, 3, 4];
arr instanceof Array //true

連接

concat() 連接數組,不會改變現有的數組,僅返回被連接數組

var food1 = ['雞蛋','牛奶']
var food2 = ['米飯','面包']
var food3 = ['香腸','罐頭']
var food4 = food1.concat(food2,food3)
console.log(food4)//"雞蛋", "牛奶", "米飯", "面包", "香腸", "罐頭"

刪減

  • pop()

    刪除最后一個元素,把length減1,返回所刪除的元素的值(若數組已為空,則不改變數組,返回undefined)

    var arr = [2,4]
    arr1             // [2,4]
    arr.pop()        // 4
    arr              // [2]
    arr.pop()        // 2
    arr              //[]
    arr.pop()        //undefined
    arr              //[]
    
  • push()

    末尾添加一個或多個元素,并返回新的length

    var sports = ["soccer", "baseball"];
    var total = sports.push("football", "swimming");
    console.log(sports); // ["soccer", "baseball", "football", "swimming"]
                         // 原數組sports被改變
    console.log(total);  // 4
                         // 返回的是新的長度
    
  • shift()

    刪除第一個元素,返回刪除的元素的值(若數組已為空,則不改變數組,返回undefined)

    var food = ['rice', 'milk', 'egg']
    console.log(food)            //["rice", "milk", "egg"]
    var shifted = food.shift()
    console.log(food)            //["milk", "egg"]  原數組被改變
    console.log(shifted)         //"rice"   返回的是被刪除的元素的值
    
    var empty = []
    

shifted = empty.shift()
console.log(empty) //[]
console.log(shifted) //undefined


- unshift()

數組的開頭添加一個或多個元素,并返回新的length

```js
var arr = [1, 2];
arr.unshift(0)      //3
arr                 //[0, 1, 2]
arr.unshift(-2, -1) //   5
arr                 //[-2, -1, 0, 1, 2]
arr.unshift( [-3] ) //6
arr                 //[[-3], -2, -1, 0, 1, 2]
  • splice()

    添加/刪除元素,然后返回被刪除的元素

    array.splice(start, deleteCount, item1,item2...)
    
    
    • start?
      從數組的哪一位開始修改內容。如果超出了數組的長度,則從數組末尾開始添加內容;
      如果是負值,則表示從數組末位開始向左計數

    • deleteCount
      表示要移除的數組元素的個數,為整數
      如果 deleteCount 是 0,則不移除元素。這種情況下,至少應添加一個新元素.
      如果 deleteCount 大于start 之后的元素的總數,則從 start 后面的元素都將被刪除(含第 start 位)。

    • itemN
      要添加進數組的元素。如果不指定,則 splice() 只刪除數組元素。

    • 返回值
      由被刪除的元素組成的一個數組。如果只刪除了一個元素,則返回只包含一個元素的數組。如果沒有刪除元素,則返回空數組。

    var food = ['雞蛋','牛奶','米飯','面包','香腸']
    
    //從第 2 位開始刪除 0 個元素,插入 '罐頭'
    var removed = food.splice(2, 0,'罐頭')
    food       //["雞蛋", "牛奶", "罐頭", "米飯", "面包", "香腸"]
    removed    //[] 什么也沒刪除 返回的是空數組
    
    //從第 3 位開始刪除 1 個元素
    removed = food.splice(3, 1)
    food      //["雞蛋", "牛奶", "罐頭", "面包", "香腸"]
    removed   //["米飯"]
    
    //從第 2 位開始刪除 1 個元素,然后插入 '面條'
    //刪除一個 插入一個 實際上相當于替換
    removed = food.splice(2, 1, '面條');
    food      //["雞蛋", "牛奶", "面條", "面包", "香腸"]
    removed   //["罐頭"]
    
    //從第 0 位開始刪除 2 個元素,然后插入 "包子", "餃子" 和 "烤肉"
    removed = food.splice(0, 2, "包子", "餃子", "烤肉")
    food      //["包子", "餃子", "烤肉", "面條", "面包", "香腸"]
    removed   //["雞蛋", "牛奶"]
    
    //從第 3 位開始刪除 后面所有元素
    removed = food.splice(3, Number.MAX_VALUE);
    food      //["包子", "餃子", "烤肉"]
    removed   //["面條", "面包", "香腸"]
    
    //在從后面數第二個元素 刪除一個元素' 插入'烤鴨','燒雞'
    removed = food.splice(-2,1,'烤鴨','燒雞')
    food      //["包子", "烤鴨", "燒雞", "烤肉"]
    removed   //餃子
    

    ** 以上五種方法都會對原數組進行修改 **

  • slice()

    從已有的數組中選取元素存入到新數組中,返回新數組(不會改變原數組)

    arrayObject.slice(start,end)
    

    從star開始(包括star)在end結束(不包括end)

    var food = ['雞蛋','牛奶','米飯','面包','香腸']
    var breakfast = food.slice(0,1)
    food      //['雞蛋','牛奶','米飯','面包','香腸']
    breakfast //['雞蛋','牛奶']
    
    

轉換

  • join()

把所有元素放入一個字符串,通過傳入的參數連接各元素,不改變原數組
如果傳入的參數是空字符串,那么數組中的所有元素將被直接連接。
如果省略傳入的參數,默認用逗號連接

  • toString()

把數組轉換為字符串,并返回結果,不改變原數組

var acter1 = ['特朗普','克林頓','桑德斯']
var acter2 = acter1.toString()
var acter3 = acter1.join('++')
acter1          //["特朗普", "克林頓", "桑德斯"]
acter2          //"特朗普,克林頓,桑德斯"
acter3          //"特朗普++克林頓++桑德斯"
typeof acter1   //"object"
typeof acter2   //"string"
typeof acter3   //"string"
  • split
    把一個字符串分割成字符串數組
stringObject.split(separator,howmany)
- separator
必需,字符串或正則表達式,從該參數指定的地方分割stringObject.
如果把空字符串 ("") 用作 separator,那么 stringObject 中的**每個字符之間**都會被分割。
- howmany
可選,該參數指定返回的數組的最大長度。如果設置了該參數,返回的子串不會多于這個參數指定的數組。
如果沒有設置該參數,整個字符串都會被分割,不考慮它的長度。
- 返回值
返回一個由字符串元素組成的數組。
該數組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創建的。
** 返回的數組中的字串不包括 separator 自身 **
但是,如果 separator 是包含子表達式的正則表達式,那么返回的數組中包括與這些子表達式匹配的字串(但不包括與整個正則表達式匹配的文本)

var str1 = 'a-b,ds-d,-,asd,ds-ad,';
var str2 = str1.split(',');
var str3 = str1.split('-');
console.log(str1); //"a-b,ds-d,-,asd,ds-ad,"
                   //split()方法不改變原字符串
console.log(str2); //["a-b", "ds-d", "-", "asd", "ds-ad", ""]
console.log(str3); //["a", "b,ds", "d,", ",asd,ds", "ad,"]
console.log(typeof str3[2]); //分割后形成的新數組的元素是字符串    

** String.split() 執行的操作與 Array.join 執行的操作是相反的 **

排序

  • reverse()
    方法用于顛倒數組中元素的順序

  • sort()
    方法用于對數組的元素進行排序

    arr.sort([compareFunction])
    
  • compareFunction
    可選.用來指定按某種順序進行排列的函數。
    如果省略,元素按照轉換為的字符串的諸個字符的Unicode位點進行排序
    如果指明了 compareFunction ,那么數組會按照調用該函數的返回值排序

    • 記 a 和 b 是兩個將要被比較的元素:
    • compareFunction(a, b) 小于 0 ,那么 a 會被排列到 b 之前;
    • compareFunction(a, b) 等于 0 , a 和 b 的相對位置不變。
      備注: ECMAScript 標準并不保證這一行為,而且也不是所有瀏覽器都會遵守(例如 Mozilla 在 2003 年之前的版本);
    • 如果 compareFunction(a, b) 大于 0 , b 會被排列到 a 之前。
    • compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結果,否則排序的結果將是不確定的。
  • 返回值
    對數組的引用。
    請注意,數組在原數組上進行排序,不生成副本

var fruit = ['cherries', 'apples', 'bananas'];
    fruit.sort(); // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 2, 21];
    scores.sort(); // [1, 10, 2, 21]


var things = ['word', 'Word', '1 Word', '2 Words'];
    things.sort(); // ['1 Word', '2 Words', 'Word', 'word']
  • 比較函數格式如下:
function compare(a, b) {
  if (a小于b) {
    return -1;
  }
  if (a大于b) {
    return 1;
  }
  //a等于 b
  return 0;
}

希望比較數字而非字符串,比較函數可以簡單的以 a 減 b,如下的函數將會將數組升序排列

function compareNumbers(a, b) {
  return a - b;
}
sort 方法可以使用 函數表達式 方便地書寫:

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

** 這兩種方法都會使原數組發生改變 **


參考資料:

  1. MDN
  2. W3school
  3. 阮一峰. JavaScript 標準參考教程(alpha)
  4. Nicholas C.Zakas. JavaScript高級程序設計[M]. 第1版. 人民郵電出版社, 2012.

此文是作者學習中記錄的筆記
限于作者當前水平,出現錯誤在所難免,望讀者指正
本文版權歸作者所有,轉載務必說明作者及本文地址

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

推薦閱讀更多精彩內容

  • 數組(Array) 數組(Array)是按序排列的一組值.每個值的位置都有編號(從0開始) a、b、c就構成一個數...
    韓佳寧閱讀 359評論 0 0
  • 由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數組的方法,因此做了一份關于JavaS...
    2bc5f46e925b閱讀 1,995評論 0 16
  • Javascript有很多數組的方法,有的人有W3C的API,還可以去MDN上去找,但是我覺得API上說的不全,M...
    頑皮的雪狐七七閱讀 4,164評論 0 6
  • .寫一個函數,返回從min到max之間的 隨機整數,包括min不包括max function randomness...
    邢烽朔閱讀 326評論 0 1
  • 荷盡已無擎雨蓋,菊殘猶有傲霜枝。 一年好景君須記,最是橙黃橘綠時。
    缺疏閱讀 304評論 0 0