1. 程式人生 > >JavaScript中數組對象詳解

JavaScript中數組對象詳解

稀疏數組 nsh isa 學習過程 bnf value 明顯 global sci

Array對象即數組對象用於在單個變量中存儲多個值,JS的數組是弱類型的,所以允許數組中含有不同類型的元素,數組元素甚至可以是對象或者其他數組。

  • 創建數組的語法

1、Array構造器

1、var list=new Array();
2、var list=new Array(size);
3、var list=new Array(element0,element1,...elementn);

2、字面量的方式

var Array[element0,element1,...elementn];

舉例子

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
var list[1,true,null,undefined,{x:1},[1,2,3]];
  • 數組的分類

1、二維數組,二維數組的本質是數組中的元素又是數組。

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

2、稀疏數組

稀疏數組是包含從0開始的不連續索引的數組。在稀疏數組中一般length屬性值比實際元素個數大(不常見)
舉例
var a=["a",,"b",,,,"c",,];

  • 數組對象屬性
屬性作用
length 屬性 表示數組的長度,即其中元素的個數
prototype 屬性 返回對象類型原型的引用
constructor 屬性 表示創建對象的函數

1、length 屬性

通過一些操作來講解length屬性
var arr=[1,2,3,4,5,6,7,8,9,10];//定義了一個包含10個數字的數組。
數組的長度屬性是可變的

alert(arr.length); //顯示數組的長度10
arr.length=15; //增大數組的長度,length屬性是可變的
alert(arr.length); //顯示數組的長度已經變為15

訪問數組元素

alert(arr[3]); //顯示第4個元素的值,為4

減小數組長度

arr.length=2; //將數組的長度減少到2,數組中的元素只剩下索引值小於2的元素
alert(arr[9]); //這時候顯示第10個元素已經變為"undefined"因為索引值大於等於2的元素都被拋棄了

恢復數組長度

arr.length=10; //將數組長度恢復為10
alert(arr[9]); //長度恢復之後已經拋棄的元素卻無法收回,顯示"undefined"

2、prototype 屬性

prototype 屬性返回對象類型原型的引用。prototype 屬性是object共有的。
objectName.prototype
objectName 參數是object對象的名稱。

說明:用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。

對於數組對象,用以下例子說明prototype 屬性的用途。
給數組對象添加返回數組中最大元素值的方法。要完成這一點,聲明一個函數,將它加入 Array.prototype, 並使用它。

function array_max( )
{
   var i, max = this[0];
   for (i = 1; i < this.length; i++)
   {
       if (max < this[i])
       max = this[i];
   }
   return max;
}

Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );

該代碼執行後,y 保存數組 x 中的最大值,或說 6。

3、constructor 屬性

constructor 屬性表示創建對象的函數。
object.constructor //object是對象或函數的名稱。
說明:constructor 屬性是所有具有prototype 的對象的成員。它們包括除 GlobalMath對象以外的所有JScript固有對象。constructor屬性保存了對構造特定對象實例的函數的引用。

例如:

x = new String("Hi");
if (x.constructor == String) // 進行處理(條件為真)。
//或
function MyFunc {
// 函數體。
}

y = new MyFunc;
if (y.constructor == MyFunc) // 進行處理(條件為真)。

對於數組來說:

y = new Array();
  • Array的對象方法

說明:部分是ECMAScript5的新特性(IE678不支持)

方法作用
concat() 連接兩個或者更多的數組,並返回結果
join() 將數組的元素組起一個字符串
pop() 刪除並返回數組的最後一個元素
push() 數組末尾添加一個或者多個元素,返回新的長度
reverse 顛倒數組中元素的順序
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組元素排序
splice() 刪除元素,並向數組添加新元素
toSource() 返回該對象的源代碼
toString() 把數組轉化為字符串並返回結果
toLocalString() 把數組轉化為本地元素並返回結果
unshift 向數組開頭添加一個或者更多的元素,並返回新的長度
valueof() 返回數組對象的原始值
forEach() 遍歷數組對象
map() 對數組做一些映射
filter() 過濾
every() 檢查判斷
some() 檢查判斷
reduce() 兩兩執行一定的操作
reduceRight() 從右到左執行操作
indexOf() 數組檢索查找某個元素
Array.isArray([]) 判斷是否是數組

主要對一些新特性進行講解
concat
concat作用是拼接數組,需要註意的是也可以把一個數組元素作為拼接的元素,如果這樣的話,數組會被拉平,再和其它的元素拼接起來成為新的數組,但是不會被拉平兩次,concat不會修改原數組。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice(a,b)a和b可以取負數,表示從a位置開始截取到b位置的一段數組,是一個左閉右開的區間,a和b可以取負數,如果是負數代表倒數第a/b個元素

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]

splice
splice刪除元素並向數組添加新元素
object.splice(a)從左邊開始刪除a個元素
object.splice(a,b)從a位置開始截取其中的b個元素
object.splice(a,b,c,d)從a位置開始截取b個元素,並將c和d或者更多的元素插入原數組
需要註意的是splice會修改原數組

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原數組被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];

foreach
foreach()函數從頭到尾把數組遍歷一遍。有三個參數分別是:數組元素,元素的索引,數組本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分別對應:數組元素,元素的索引,數組本身
    console.log(x + ‘|‘ + index + ‘|‘ + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

說明:如果只有一個參數那這個參數代表數組元素,也就是數組的值,請看例2。

2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是數組的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出來是21

map
map 對數組做一些映射,map() 方法返回一個由原數組中的每個元素調用一個指定方法後的返回值組成的新數組,它與forEach的區別是forEach為數組中的每個元素執行一次回調函數。

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

filter
filter 過濾掉某些元素,和map有點類似,Array的filter也接收一個函數。但是和map不同的是, filter把傳入的函數依次作用於每個元素,然後根據返回值是 true 還是false決定保留還是丟棄該元素,也就是過濾掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

every()與some()
every()與some()方法都是JS中數組的叠代方法。every()是對數組中的每一項運行給定函數,如果該函數對每一項返回true,則返回true。some()是對數組中每一項運行指定函數,如果該函數對任一項返回true,則返回true。
總結就是every()當每個元素都符合條件的時候返回true,而some()是任一項滿足條件就返回true

1 every()
var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
     return x < 10;
}); // true

arr.every(function(x) {
     return x < 3;
}); // false

some只需要有一個符合的就行

2 some
var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
     return x === 3;
}); // true

arr.some(function(x) {
     return x === 100;
}); // false

reduce()
Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上,這個函數必須接收兩個參數,reduce()把結果繼續和序列的下一個元素做累積計算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
     return x + y
}, 0); //參數 0是可選的,如果寫了參數0那第一次傳遞的兩個值就是0和1
如果不寫第一次傳遞的就是數組的前兩個值,計算結果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9

reduceRight
和reduce一樣只不過reduceRight 變成了從右到左兩兩執行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9

indexOf()
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置,indexOf(a,b)表示查找a元素,從b位置開始;lastindexOf表示從右向左找。當b為負數的時候表示從倒數第幾個元素開始找,請看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示沒有這個元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1從倒數第3個元素開始
arr.indexOf(2, -1); // -1查找2從倒數第1個元素開始
arr.lastIndexOf(2); // 3從右邊開始找第一次出現2的位置
arr.lastIndexOf(2, -2); // 3從右邊的倒數第二個開始找2出現的位置
arr.lastIndexOf(2, -3); // 1

isArray
isArray用來判斷是否是數組,但是isArray是Array構造器對象上的屬性,所以不能直接用isArray,必須要寫成Array.isArray([]),但是可以其它的判斷方法直接判斷

[]instanceof Array;//true
({}).toString.apply([])===‘[object Array]‘;//true
[].construcror===Array;//true

數組和一般對象的比較

數組 / 一般對象
相同點 都可以繼承,對象不一定是數組,都可以當做對象添加屬性
不同點 數組自動更新length按索引訪問數組比訪問一般對象屬性明顯迅速。數組對象繼承Array.prototype上的大量數組操作方法

數組和字符串的比較

數組 /字符串
相同點 字符串是數組的一種
不同點 字符串是不可變的數組,字符串沒有數組的方法

學習過程中遇到什麽問題或者想獲取學習資源的話,歡迎加入學習交流群
343599877,我們一起學前端!

JavaScript中數組對象詳解