## Array類型
ECMAScript數組的每一項可以保存任何類型的數據,也就是說,而且數組的大小是可以動態調整的,即可以隨著數據的添加自動增長以容納新增數據。
```
var colors = [1, 'tg', {}];
```
在上面的例子中,數組中保存了數值、字符串和對象。
**1、初始化數組實例**
創建數組的基本方式有多種:
**(1)使用Array構造函數**
當傳遞一個參數時,如果傳遞的參數是數值,則會按照該數值創建包含給定項數的數組;如果是其他類型的參數,則會創建包含那個值的數組(只有一項)。
```
var colors1 = new Array();
var colors2 = new Array(20);
var colors3 = new Array('a',1);
```
在上面的代碼中,第一行代碼創建了一個空數組;第二行代碼創建了一個length為20的屬性;第三行代碼創建了一個包含兩個數組項的數組。
可省略new,但不推薦
```
var colors = Array();
```
**(2)使用數組字面量**
使用數組字面量表示法,由一對包含數組項的方括號表示,多個數組項之間用逗號隔開。
```
var colors = []; // 空數組
var colors2 = [1,2]; // 包含兩個數組項的數組
```
數組的項數保存在其`length`屬性中,不小于0,可讀寫。可通過減小來移除數組項。所有數組項默認是undefined(在不設置的情況下)。
**2、檢測數組(Array.isArray())**
`Array.isArray()`判斷是否是數組,傳入一個數組作為參數。
```
var colors = [];
console.log(Array.isArray(colors)); // true
console.log(Array.isArray(1)); // false
```
**3、Array實例的方法**
**(1)valueof()**
`varlueOf()`方法返回數組本身
```
var arr = [1,'test'];
console.log(arr.valueOf()); // [1,"test"]
```
**(2)toStirng()**
將數組中每個值的字符串拼接成一個字符串,中間以逗號隔開
```
var arr = [1,'test'];
console.log(arr.toString()); // 1,test
```
**(3)push()**
用于在數組的末端添加一個或多個元素,并返回添加新元素后的數組長度,該方法會改變原數組。
```
var arr = [];
console.log(arr.push(3)); // 1
console.log(arr.push(true)); // 2
console.log(arr); // [3, true]
```
**(4)pop()**
用于刪除數組的最后一個元素,并返回該元素,該方法會改變原數組。
```
var arr = [1,'test'];
console.log(arr.pop()); // "test"
console.log(arr); // [1]
```
對空數組使用pop方法,不會報錯,而是返回undefined。
**(5)join()**
以參數作為分隔符,將所有數組成員組成一個字符串返回。如果不提供參數,默認用逗號分隔。
```
var arr = [1, 'test'];
console.log(arr.join());
console.log(arr.join('||'));
```
注意:如果數組成員是undefined或null或空位,會被轉成空字符串。
**(6)concat()**
用于多個數組的合并。它將新數組的成員,添加到原數組的尾部,然后返回一個新數組,原數組不變。
```
var arr = [1,'test'];
console.log(arr.concat([2],['a'])); // [1, "test", 2, "a"]
```
除了接受數組作為參數,concat也可以接受其他類型的值作為參數。它們會作為新的元素,添加數組尾部。
```
var arr = [1,'test'];
console.log(arr.concat('b',[2])); // [1, "test", "b", 2]
```
**(7)shift()**
用于刪除數組的第一個元素,并返回該元素,該方法會改變原數組。
```
var arr = [1,'test'];
console.log(arr.shift()); // 1
console.log(arr); // ["test"]
```
**(8)unshift()**
用于在數組的第一個位置添加元素,并返回添加新元素后的數組長度,該方法會改變原數組。
```
var arr = [1,'test'];
console.log(arr.unshift('a')); // 3
console.log(arr); // ["a", 1, "test"]
```
`unshift()`可添加多個元素:
```
var arr = [1,'test'];
console.log(arr.unshift('a','b')); // 4
```
**(9)reverse()**
`reverse()`用于顛倒數組中元素的順序,返回改變后的數組,該方法會改變原數組。
```
var arr = [1,'test'];
console.log(arr.reverse()); // ["test",1]
```
**(10)slice()**
`slice()`用于提取原數組的一部分,返回一個新數組,原數組不變。
第一個參數為起始位置(從0開始),如參數是負數,則表示倒數計算的位置。
第二個參數為終止位置(但該位置的元素本身不包括在內),如參數是負數,則表示倒數計算的位置。
如果省略第二個參數,則一直返回到原數組的最后一個成員。負數表示倒數第幾個。
如果參數值大于數組成員的個數,或者第二個參數小于第一個參數,則返回空數組。
```
var arr = ['a','b','c','d'];
console.log(arr.slice(1,3)); // ["b", "c"]
console.log(arr.slice(2)); // ["c", "d"]
console.log(arr.slice(-2,-1)); // ["c"]
console.log(arr.slice(2,1)); // []
```
**(11)splice()**
`splice()`用于刪除原數組的一部分成員,并可以在被刪除的位置添加入新的數組成員,返回值是被刪除的元素,該方法會改變原數組。
第一個參數是刪除的起始位置,如果是負數,就表示從倒數位置開始刪除
第二個參數是被刪除的元素個數。
如果后面還有更多的參數,則表示這些就是要被插入數組的新元素。
如只是單純地插入元素,splice方法的第二個參數可以設為0。
如果只提供第一個參數,等同于將原數組在指定位置拆分成兩個數組。
```
var arr = ['a','b','c','d'];
console.log(arr.splice(1,1)); // ["b"]
console.log(arr); // ["a", "c", "d"]
var arr = ['a','b','c','d'];
console.log(arr.splice(1,1,'f')); // ["b"]
console.log(arr); // ["a", "f", "c", "d"]
var arr = ['a','b','c','d'];
console.log(arr.splice(1,0,'h')); // []
console.log(arr); // ["a", "h", "b", "c", "d"]
```
**(12)sort()**
`sort()` 對數組成員進行排序,默認是按照字典順序排序。排序后,原數組將被改變。
如果想讓sort方法按照自定義方式排序,可以傳入一個函數作為參數,表示按照自定義方法進行排序。該函數本身又接受兩個參數,表示進行比較的兩個元素。如果返回值大于0,表示第一個元素排在第二個元素后面;其他情況下(小于或等于),都是第一個元素排在第二個元素前面。
```
var arr = ['5','8','9','2'];
console.log(arr.sort()); // ["1", "2", "4", "5"]
var newArr = arr.sort(function(a, b) {
returnb - a;
});
console.log(newArr); // ["5", "4", "2", "1"]
```
注意:sort方法不是按照大小排序,而是按照對應字符串的字典順序排序。也就是說,數值會被先轉成字符串,再按照字典順序進行比較。
**(13)map()**
`map()`對數組的所有成員依次調用一個函數,根據函數結果返回一個新數組。
接受一個函數作為參數。該函數調用時,map方法會將其傳入三個參數,分別是當前成員、當前位置和數組本身
```
var arr = [1,2,3];
var newArr = arr.map(function(v){
return v - 1;
});
console.log(newArr); // [0, 1, 2]
```
**(14)forEach()**
`forEach()`遍歷數組的所有成員,執行某種操作,參數是一個函數。它接受三個參數,分別是當前位置的值、當前位置的編號和整個數組。
```
var arr = ['a', 'b'];
arr.forEach(function(value,index){
console.log(index + ':' + value);
});
//
0 : "a"
1 : "b"
```
**(15)filter()**
`filter()`參數是一個函數,所有數組成員依次執行該函數,返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。
filter方法的參數函數可以接受三個參數,第一個參數是當前數組成員的值,這是必需的,后兩個參數是可選的,分別是當前數組成員的位置和整個數組。
```
var arr = [1,2,3];
var newArr = arr.filter(function(v){
return (v > 2);
});
console.log(newArr); // [3];
```
**(16)some()、every()**
`some()`用來判斷數組成員是否符合某種條件。接受一個函數作為參數,所有數組成員依次執行該函數,返回一個布爾值。
該函數接受三個參數,依次是當前位置的成員、當前位置的序號和整個數組。只要有一個數組成員的返回值是true,則整個some方法的返回值就是true,否則false。
```
var arr = [1,2,3];
var bool = arr.some(function(v){
return (v == 3);
});
console.log(bool); // true
```
`every()`用來判斷數組成員是否符合某種條件。接受一個函數作為參數,所有數組成員依次執行該函數,返回一個布爾值。
該函數接受三個參數,依次是當前位置的成員、當前位置的序號和整個數組。所有數組成員的返回值都是true,才返回true,否則false。
```
var arr = [1,2,3];
var bool = arr.every(function(v){
return (v == 3);
});
console.log(bool); // false
var bool2 = arr.every(function(v){
return (v > 0);
});
console.log(bool2); // true
```
some和every方法還可以接受第二個參數,用來綁定函數中的this關鍵字。
**(17)reduce()、reduceRight()**
`reduce()`依次處理數組的每個成員,最終累計為一個值。從左到右處理(從第一個成員到最后一個成員)
`reduceRight()`依次處理數組的每個成員,最終累計為一個值。從右到左(從最后一個成員到第一個成員)
兩個方法的第一個參數是一個函數,該函數可接收四個參數:
1. 累積變量,默認為數組的第一個成員
2. 當前變量,默認為數組的第二個成員
3. 當前位置(從0開始)
4. 原數組
對`reduce()`:
```
var arr = [1, 2, 3, 4, 5];
var total = arr.reduce(function(x, y){
console.log(x, y)
return x + y;
});
console.log(total);
// 1 2
// 3 3
// 6 4
// 10 5
//最后結果:15
```
對`reduceRight()`:
```
var arr = [1, 2, 3, 4, 5];
var total = arr.reduceRight(function(x, y){
console.log(x, y)
return x + y;
});
console.log(total);
// 5 4
// 9 3
// 12 2
// 14 1
// 15
```
兩個方法還可傳入第二個參數,表示累積變量的初始值:
**(18)indexOf()、lastIndexOf()**
`indexOf()`返回給定元素在數組中第一次出現的位置,如果沒有出現則返回-1。可以接受第二個參數,表示搜索的開始位置
`lastIndexOf()`返回給定元素在數組中最后一次出現的位置,如果沒有出現則返回-1。可以看作是從最后位置開始搜索。
```
var arr = ['a', 'b', 'a', 'c'];
console.log(arr.indexOf('a')); // 0
console.log(arr.indexOf('a',1)); // 2
console.log(arr.lastIndexOf('a')); // 2
```
- 前言
- JavaScript簡介
- 基本概念
- 語法
- 數據類型
- 運算符
- 表達式
- 語句
- 對象
- 數組
- 函數
- 引用類型(對象)
- Object對象
- Array對象
- Date對象
- RegExp對象
- 基本包裝類型(Boolean、Number、String)
- 單體內置對象(Global、Math)
- console對象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應用
- 客戶端存儲(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測設備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向對象的程序設計
- 概述
- this關鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯誤處理機制
- JavaScript開發技巧合集
- 編程風格
- 垃圾回收機制