JavaScript數組

這里先提一下for in 循環,因為之前在C++ 和 OC中用到過快速遍歷,但是發現JavaScript有所不同,所以要在這里提一下。
JS中的for/in 循環遍歷,語法:for(variable in object)variable通常是一個變量名,object是對象。for/in循環可以遍歷對象屬性成員,在遍歷這個對象的屬性成員的時候,屬性名將會賦值給這個變量。for/in并不會遍歷對象的所有屬性,只會歷可枚舉的屬性。現在來看看for/in遍歷數組,因為數組可以說是特殊的對象(<small>我的理解是屬性名是非負數的對象</small>),在for/in遍歷的過程中,數組中的索引將會賦值給這個變量。(<small>這跟我們使用的OC或者C++中的快速遍歷不太一樣,OC中是把數組中索引的值賦值給變量</small>)。
說到這里,就看看數組的循環遍歷吧,直接上例子

//---看點1  普通for循環
var mArray = [-1,0,1,2,3,4,5,6,7,8,9,null,,,123];
for(var i = 0; i<mArray.length; i++){
   console.log(mArray[i]);
}
// 通過循環會打印出:
//-1,0,1,2,3,4,5,6,7,8,9,null,undefined,undefined,123
/*
 *如果不想輸出undefined,我們可以在循環中做判斷。
 *下面來看看另外一種方法,個人覺得這個方法更加快速。
 *這里做個小優化,不必要每次循環都要獲取一次數組長度。
 */
var keys = Object.keys(mArray);
for(var key = 0, len = keys.length; key < len; key++)
{
    console.log(mArray[keys[key]]);
}
// 通過循環會打印出:
//-1,0,1,2,3,4,5,6,7,8,9,null,123
//-----------------------------------------------------------------
// ---看點2  來看看for in 
// for/in 循環的時候,索引所對應的值如果不存在(undefined),是不會遍歷的。
for(var index in mArray)
{
    console.log(mArray[index]);
}
// 通過循環會打印出:
//-1,0,1,2,3,4,5,6,7,8,9,null,123

簡單介紹要給數組中用到的方法

  • join()
    Array.join()方法將數組中所有的元素都轉化為字符串并連接在一起,返回一個最終生成的字符串,括號中的參數是一個字符串類型的連接符,默認為逗號。此方法是String.split()方法的逆向操作,后者將字符串分割成若干塊來創建一個數組。
var mArray = [1,2,{x:666,y:"hello"},["JavaScript","C++",],null,,,"結束"];
var arrayStr = mArray.join();//==>"1,2,[object Object],JavaScript,C++,,,,結束"
var arrayStr2 = mArray.join("-");//==>"1-2-[object Object]-JavaScript,C++----結束"
var mArrayB = new Array(10);
mArrayB.join("A$");//==> "A$A$A$A$A$A$A$A$A$"
  • reverse()
    Array.reverse()方法將數組中的元素顛倒順序,返回逆序的數組。(<small>此方法是在原來的數組中通過替換的方法重新排列,所以不生成新的數組</small>)
var a  = [1,2,3];
a.reverse().join(); //==> "3,2,1"
  • sort()
    Array.sort()方法將數組中的元素排序并返回排序后的數組。(<small>當不帶參數時候,數組元素是以字母表排序</small>)
var a = new Array("banana","cherry","apple");
a.sort();
a.join(); // ==>"apple,banana,cherry"
var b = [55,3,123,24,582,84]
b.sort();//==>123,24,3,55,582,84
/*此處的參數用一個函數來表示,表示按照從小到大的順序排列(返回值>0 a在b之后,<0:a在b之前)*/
b.sort(function(a,b){return a-b});//==>3,24,55,84,123,582
  • concat()
    Array.concat()方法創建并返回一個新數組,新的數組中包含原數組的元素和'concat()'的每個參數,需要注意的是,如果參數是個數組的話,連接的是數組的元素,而非數組(與Array.push()方法有所區別的),還需注意的是,concat()不會遞歸扁平化數組的數組,也不會修改調用的數組。
var a =[1,2,3];
a.concat(4,5);          //==>[1,2,3,4,5]
a.concat([4,5]);        //==>[1,2,3,4,5]
a.concat([4,5],[6,7]);  //==>[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]);  //==>[1,2,3,4,5,[6,7]]
  • slice()
    Array.slice()方法返回指定數組的一個片段或子數組。它的兩個參數分別指定了片段的開始和結束的位置。
var a = [1,2,3,4,5];
a.slice(0,3);   // 返回[1,2,3]
a.slice(3);     // 返回[4,5]
a.slice(1-1);   // 返回[2,3,4]
a.slice(-3,-2);  // 返回[3]
  • splice()
    Array.splice()方法是在數組中插入或刪除元素的通用方法。不同于slice()concat(),splice()會修改調用的數組。
/*
 *splice() 參數及返回值介紹
 *第一個參數:指定摻入或刪除的起始位置
 *第二個參數:指定了應該從數組中刪除的元素的個數。如果省略,則會從起始位置到結尾的元素都刪除.
 *第三個往后的參數:是指從第一個參數指定的位置開始插入到數組中的元素
 *返回:返回一個由刪除元素組成的數組。
 *(注意:調用函數也會被修改) 
 */
// 來看看 用此方法來刪除元素
var a = [1,2,3,4,5,6,7,8];
a.splice(4); // 返回[5,6,7,8]  a=[1,2,3,4];
a.splice(1,2)// 返回[2,3], a=[1,4];
a.splice(1,1)// 返回[4],a=[1];
// ---------------------------------------------------------
// 再來看看 用此方法來添加元素
var b = [1,2,3,4,5];
b.splice(2,0,"A","L"); //返回[]; b = [1,2,"A","L",3,4,5];
// ---------------------------------------------------------
// 再來看看 用此方法刪除和添加元素
var c = [1,2,3,4,5];
//c.splice(2,2,[1,2],"a"); //返回[3,4]; c = [1,2,[1,2],"a",5];
var s = c.splice(2,2,[1,2],"a");
  • push()pop()
    這兩個方法允許數組當做棧來使用。這兩個方法都修改了元是數組。
    push():在數組的尾部添加一個或多個元素,并返回數組新的長度。
    pop():刪除數組的最后一個元素,減少數組長度并返回它刪除的值。
var stack = [];      // stack:[]
stack.push(1,2);     // stack:[1,2]          返回:2
stack.push(3,[4,5]); // stack:[1,2,3,[4,5]]  返回:4
stack.pop();         // stack:[1,2,3]        返回:[4,5]
stack.pop();         // stack:[1,2]          返回:3
  • unshift()和shift()
    unshift()shift()方法的行為非常類似于push()pop(),但是不一樣的是前者是在數組的頭部進行操作,而后者是在數組的尾部進行操作。
    unshift():在數組的頭部添加一個或者多個元素,并將已存在的元素往后移動,最后返回數組新的長度。
    shift():刪除數組的第一個元素并將其返回,刪除元素的之后的元素都往前移動。
var a =[];            // a:[]
a.unshift(1);         // a:[1]           返回:1
a.unshift(2,[3,4])    // a:[2,[3,4],1]   返回:3
a.shift();            // a:[[3,4],1]     返回:2
a.shift();            // a:[1]           返回:[3,4]

ECMAScript 5中的數組方法

  • forEach()
    此方法從頭到尾遍歷數組,為每個元素調用指定的函數。
    第一個參數:傳遞的函數作為第一個參數,此函數會使用三個參數:數組元素、元素的索引、數組本身。要注意的是,此函數無法再所有元素都傳遞給調用的函數之前終止遍歷。也就是說,沒有像for循環中使用的相應的break語句。
var data = [1,2,3,4,5];
//可以通過forEach()計算數組的和
var sum = 0;
data.forEach(function(value){sum+=value;});
document.write(sum +"<br>");
// 為每個數組元素的值自加1
data.forEach(function(value,index,array){array[index]+=1});
document.write(data +"<br>");
  • map()
    此方法調用的數組的每個元素傳遞給指定的函數,并返回一個數組,它包含該函數的返回值。此方法不修改調用的數組,它具有相同的長度,相同的缺失元素。
var a = [1,2,3,4,null,,,8];
var b = a.map(function(value){return value});
// b = [1,2,3,4,null,,,8]
var c = a.map(function(value){return value * value});
// c = [1,4,9,16,0,,,64]
  • filter()
    此方法返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的,函數的返回值是bool類型。注意filter()會跳過稀疏數組中缺少的元素,它的返回數組總是稠密的。
var a = [1,2,3,4,5,null,,8];
var b = a.filter(function(value,index,array){return value>3;});
// b = [4,5,8];
var c = a.filter(function(value,index,array){return index%2 == 0});
// c = [1,3,5];
/*我們也可以通過此函數將稀疏函數轉化成稠密函數
 */
var d = a.filter(function(){return true});
// d = [1,2,3,4,5,null,8];
  • every()some()
    這兩個函數是數組的邏輯判定:它們對數組元素應用指定的函數進行判定,返回一個Bool類型。
    every():當所有元素都滿足函數的條件判斷時候,才會返回ture。
    some():只要有元素滿足函數的條件判斷受,就會返回true。
    注意的是,這兩個方法一旦確認要返回什么值時候,就會停止遍歷。
var a= [1,2,3,4,5,6];
a.every(function(value,index,array){return value > index}); // ==> true
a.every(function(value){return value > 5});       // ==> false
a.some(function(value){return value % 2 === 0}); // ==> true
a.some(isNaN)                  // ==> false  a中不包含非負數元素
  • reduce()reduceRight()
    這兩個方法使用指定的函數將數組元素進行組合,生成單個值。這兩個方法唯一的區別就是,redeuce()是從前到后(從左到右)執行,而reduceRight()是從后到前(從右到左)執行。
    第一個參數:執行化簡單操作的函數(函數中兩個參數,將兩個參數通過某種算法合成一個值)
    第二個參數(可選):是一個傳遞給函數的初始值。
    注意:這兩個函數不僅僅只是數學計算,還有更多用途。
var a = [1,2,3];
var sum = a.reduce(function(a,b){return a + b}); // ==> 6
var sum2 = a.reduce(function(a,b){return a + b},100); // ==> 106
// (1^2)^3
var value = a.reduce(function(v,a){return Math.pow(v,a)});  // ==> 1
// (3^2)^1
var value2 = a.reduceRight(function(v,a){return Math.pow(v,a)}) //==>9
document.write(value2);
  • indexOf()lastIndexOf()
    這兩個函數很常用,用于搜索整個數組中具有給定值的元素,并返回索引,indexOf()返回的是找到的第一個元素的索引,lastIndexOf()返回的是找到的最后一個元素的索引。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 數組對于一個編程語言而言可謂舉足輕重,當然 JavaScript 也對其相當重視,下面我就將自己接觸到的數組有關的...
    ghwaphon閱讀 773評論 0 2
  • 數組的定義 數組是按序號排列的一組值,每個值的位置都有編號(從0開始)。數組本質上是一種特殊的對象。它的鍵名是按(...
    Allin_Lin閱讀 572評論 0 0
  • Javascript數組基本操作 Javascript中的數組是一種特殊的對象,用來表示偏移量的索引是該對象的屬性...
    haveSnap閱讀 297評論 0 0
  • 數組有四種定義的方式 使用構造函數: var a = new Array(); var b = new Array...
    DRBIN閱讀 242評論 0 0
  • 我不是時代的領跑者 更不是時尚的弄潮兒 我追逐著命運 命運也拖累著我 在文明的縫隙中茍活 …… 這不是我 這不是我...
    chenxu閱讀 301評論 1 1