數組(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]
** 這兩種方法都會使原數組發生改變 **
參考資料:
- MDN
- W3school
- 阮一峰. JavaScript 標準參考教程(alpha)
- Nicholas C.Zakas. JavaScript高級程序設計[M]. 第1版. 人民郵電出版社, 2012.
此文是作者學習中記錄的筆記
限于作者當前水平,出現錯誤在所難免,望讀者指正
本文版權歸作者所有,轉載務必說明作者及本文地址