摘要:數組是值得有序集合。數組元素甚至可以是對象或其它數組。不同數組自動更新。數組對象繼承上的大量數組操作方法字符串和數組字符串可以理解為類數組,但它不是數組博客地址不完全入門之數組歡迎交流指正
數組是值得有序集合。每個值叫做元素,每個元素在數組中都有數字位置編號,也就是索引。
JS中的數組是弱類型的,數組中可以含有不同類型的元素。
數組元素甚至可以是對象或其它數組。
var arr = [1,true,null,undefined,{x:1},[1,2,3]];
創建數組 1.字面量注意,數組可以用逗號留空的方式創建,如:
var commasArr1 = [1,,2]; //1,undefined,2 var commasArr2 = [,,];//undefined * 2
數組大小限制
2.new Arraysize form 0 to 2^23 - 1
var arr = new Array(); var arrWithLength = new Array(100); //undefined * 100 var arrLikesLiteral = new Array(true,false,null,1,2,"hi"); //等價于[true,false,null,1,2,"hi"];數組元素讀寫
var arr = [1,2,3,4,5]; arr[1]; //2 arr.length; //5 arr[5] = 6; arr.length; //6 delete arr[0]; //表現上只是改寫為undefined,但是和直接賦值不同 arr[0]; //undefined arr.length; //6數組元素增刪
動態的,無需指定大小,數組的length會根據數組動態變化
var arr = []; arr[0] = 1; arr[1] = 2; arr.push(3); arr; //[1,2,3] arr[arr.length] = 4; //equal to arr.push(4); arr; //[1,2,3,4] arr.unshift(0); arr; //[0,1,2,3,4]; delete arr[2]; arr; //[0,1,undefined,3,4] arr.length; //5 2 in arr; //判斷索引存不存在 false
注:用delete變成的undefined和直接用arr[2] = undefined,是不同的
后者 2 in arr; //true;
arr.length -= 1; arr; //[0,1,undefined,3],4 is removed arr.pop(); //3 returned by pop arr;//[0,1,undefined],3 is removed arr.shift(); //0 returned by shift arr; //[1,undefined]數組迭代
var i = 0,n = 10; var arr = [1,2,3,4,5]; for(; i < n; i++){ console.log(arr[i]); //1,2,3,4,5 } for(i in arr){ console.log(arr[i]); //1,2,3,4,5 }
注:如果用 for-in 的方式來循環數組的話,那么在原型鏈上的屬性也會被迭代出來,如:
Array.prototype.x = "inherited"; for(i in arr){ console.log(arr[i]); //1,2,3,4,5,inherited }
此時可以用hasOwnProperty()方法來判斷是否是數組元素
for(i in arr){ if(arr.hasOwnProperty(i)){ console.log(arr[i]);//1,2,3,4,5 } }
注:for-in循環是不保證順序的!
二維數組var arr = [[0,1],[2,3],[4,5]]; var i = 0, j = 0; var row; for(; i < arr.length; i++){ row = arr[i]; console.log("row" + i); for(j = 0; j < row.length; j++){ console.log(row[j]); } }稀疏數組
稀疏數組并不含有從0開始的連續索引。一般length屬性值比實際元素個數大。
var arr1 = [undefined]; var arr2 = new Array(1); 0 in arr1; //true 0 in arr2; //false arr1.length = 100; arr1[99] = 123; 99 in arr1; //true 98 in arr1; //false var arr = [,,]; 0 in arr; //false數組方法
數組的原型 [] => Array.prototype
1.Array.prototype.join將數組轉為字符串
var arr = [1,2,3]; arr.join(); //"1,2,3" arr.join("_");//"1_2_3" function repeatString(str,n){ return new Array(n+1).join(str); } repeatString("a",3); //"aaa" repeatString("Hi",5); //"HiHiHiHiHi"2.Array.prototype.reverse
將數組逆序(原數組變)
var arr = [1,2,3]; arr.reverse(); //[3,2,1] arr; //[3,2,1] 原數組被修改!3.Array.prototype.sort
排序(默認是按照字母排序,原數組變)
var arr = ["a","d","c","b"]; arr.sort(); //["a","b","c","d"] arr = [13,24,51,3]; arr.sort(); //[13,24,3,51] 轉換成字符串,按開頭數字排序 arr; //[13,24,3,51] 原數組被修改! /* 數字排序 */ arr.sort(function(a,b){ return a - b; }) //[3, 13, 24, 51] /* 對象排序 */ arr = [{age:25},{age:39},{age:99}]; arr.sort(function(a,b){ return a.age - b.age; }) arr.forEach(function(item){ console.log("age",item.age); }) //age 25 age 39 age 994.Array.prototype.concat
數組合并(原數組不變)
var arr = [1,2,3]; arr.concat(4,5); //[1,2,3,4,5] arr; //[1,2,3] 原數組未被修改! arr.concat([10,11],13); //[1,2,3,10,11,13] arr.concat([1,[2,3]]); //[1,2,3,1[2,3]]
注:當合并的為數組時,會拉平成元素,但合并的數組中還有數組的話,不能拉平數組中的數組
5.Array.prototype.slice返回部分數組(原數組不變)
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] 負數索引,從后往前數,最后一個為-1 arr.slice(-4,-3); //[2]6.Array.prototype.splice
數組拼接(原數組變)
var arr = [1,2,3,4,5]; /* 一個參數:索引 */ arr.splice(2); //returns [3,4,5] arr; //[1,2] arr = [1,2,3,4,5]; /* 兩個參數:索引 | 個數 */ arr.splice(2,2); //returns [3,4] arr; //[1,2,5]; arr = [1,2,3,4,5]; /* 多個參數:索引 | 個數 | 待插入元素 */ arr.splice(1,1,"a","b"); //returns [2] arr; //[1,"a","b",3,4,5]7.Array.prototype.forEach
數組遍歷
var arr = [1,2,3,4,5]; arr.forEach(function(x, index, a){ console.log(x + "|" + index + "|" + (a === arr)); })8.Array.prototype.map
數組映射(原數組不變)
var arr = [1,2,3]; arr.map(function(x){ return x + 10; }); //[11,12,13] arr; //[1,2,3]9.Array.prototype.filter
數組過濾(原數組不變)
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]10.Array.prototype.every & some
數組判斷
var arr = [1,2,3,4,5]; arr.every(function(x){ return x < 10; }); //true arr.every(function(x){ return x < 3; }); //false arr.some(function(x){ return x === 3; }); //true arr.some(function(x){ return x === 100; }); //false11.Array.prototype.reduce & reduceRight
var arr = [1,2,3]; var sum = arr.reduce(function(x, y){ return x + y; },0); //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
注:計算邏輯,當有第二個可選參數時,也就是上面的0,第一次計算 0+1,第二次將上一次結果1和數組中第二個元素相加,第三次將上次結果和下一個元素相加;若沒有第二個參數,則第一次取前兩個,所得結果和下一個元素進行下一次運算
max = arr.reduceRight(function(x, y){ console.log(x + "|" +y); return x > y?x:y; }); // 6 | 9 // 9 | 3 max; //9
注:從右向左傳參
12.Array.prototype.indexOf & lastIndexOf數組檢索
var arr = [1,2,3,2,1]; //查找元素2 arr.indexOf(2); //1 //查找元素99 arr.indexOf(99); //-1 //查找元素1,從第二個元素開始 arr.indexOf(1,1); //4 //查找元素1,從倒數第三個元素開始 arr.indexOf(1,-3); //4 //查找元素2,從最后一個元素開始 arr.indexOf(2,-1); //-1 //查找元素2,從右向左找 arr.lastIndexOf(2); //3 //查找元素2,從右向左找,從倒數第二個元素開始 arr.lastIndexOf(2,-2); //3 //查找元素2,從右向左找,從倒數第三個元素開始 arr.lastIndexOf(2,-3); //1
注:不知道看到上面這8個示例是不是暈了,理一理:
①兩個方法都可以接收兩個參數,第一個為要查找的元素(必選),第二個為開始位置索引(可選)
②所得結果為元素的索引(也稱下標),正數即索引(無論怎么找,都是從左向右,從0開始!),-1即未找到
③方法的第二個參數:若為正數,從前往后索引(0開始);若為負數,從后往前索引(-1開始)
判斷是否為數組
Array.isArray([]); //true //另外幾種 [] instanceof Array; //true ({}).toString.apply([]) === "[object Array]"; //true [].constructor === Array; //true (這種不可靠,如繼承)數組小結 數組 VS 一般對象
相同:都可以繼承。數組是對象,對象不一定是數組。都可以當做對象添加刪除屬性。
不同:數組自動更新length。按索引訪問數組常常比訪問一般對象屬性明顯迅速。
數組對象繼承Array.prototype上的大量數組操作方法
字符串可以理解為類數組,但它不是數組
var str = "hello world"; str.charAt(0); //"h" str[1]; //e Array.prototype.join.call(str,"_"); //"h_e_l_l_o_ _w_o_r_l_d"
博客地址:js不完全入門之數組
歡迎交流指正~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80113.html
摘要:與綁定數據綁定一個常見需求是操作元素的列表和它的內聯樣式。兩者只能選其一對象語法我們可以傳給一個對象,以動態地切換。注意不支持語法。相比之下,簡單得多元素始終被編譯并保留,只是簡單地基于切換。這意味著將分別重復運行于每個循環中。 vue Class 與 Style 綁定 數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性,我們可以用 v-bind 處理...
閱讀 3561·2023-04-26 02:10
閱讀 1299·2021-11-22 15:25
閱讀 1668·2021-09-22 10:02
閱讀 907·2021-09-06 15:02
閱讀 3469·2019-08-30 15:55
閱讀 600·2019-08-30 13:58
閱讀 2775·2019-08-30 12:53
閱讀 3042·2019-08-29 12:38