JavaScript中數組對象詳解
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); //顯示數組的長度10arr.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; //將數組長度恢復為10alert(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 的對象的成員。它們包括除 Global 和 Math 對象以外的所有 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。
例2var data=[1,2,3,4,5,6];var sum=0;data.forEach(function(v){//其中的v就是數組的值 123456sum+=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;}); // truearr.every(function(x) { return x < 3;}); // false
some只需要有一個符合的就行
例2 somevar arr = [1, 2, 3, 4, 5];arr.some(function(x) { return x === 3;}); // truearr.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如果不寫第一次傳遞的就是數組的前兩個值,計算結果是6arr; //[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|6max; // 9
reduceRight
和reduce一樣只不過reduceRight 變成了從右到左兩兩執行某些操作
max = arr.reduceRight(function(x, y) { console.log(x + '|' + y); return x > y ? x : y;});// 6|9// 9|3max; // 9
indexOf()
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置,indexOf(a,b)表示查找a元素,從b位置開始;lastindexOf表示從右向左找。當b為負數的時候表示從倒數第幾個元素開始找,請看例子。
var arr = [1, 2, 3, 2, 1];arr.indexOf(2); // 1arr.indexOf(99); // -1表示沒有這個元素arr.indexOf(1, 1); // 4arr.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上的大量數組操作方法數組和字符串的比較
數組 /字符串相同點 字符串是數組的一種不同點 字符串是不可變的數組,字符串沒有數組的方法來自:http://www.jianshu.com/p/fd8c73d2cf2c
相關文章:
1. python利用os模塊編寫文件復制功能——copy()函數用法2. php測試程序運行速度和頁面執行速度的代碼3. php網絡安全中命令執行漏洞的產生及本質探究4. 三個不常見的 HTML5 實用新特性簡介5. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁6. ajax請求添加自定義header參數代碼7. Python使用jupyter notebook查看ipynb文件過程解析8. 解決Python 進程池Pool中一些坑9. 解決python腳本中error: unrecognized arguments: True錯誤10. IntelliJ IDEA創建普通的Java 項目及創建 Java 文件并運行的教程
