1. 程式人生 > >初學JavaScript之——JavaScript陣列

初學JavaScript之——JavaScript陣列

這裡先提一下for in 迴圈,因為之前在C++ 和 OC中用到過快速遍歷,但是發現JavaScript有所不同,所以要在這裡提一下。
JS中的for/in 迴圈遍歷,語法:for(variable in object)variable通常是一個變數名,object是物件。for/in迴圈可以遍歷物件屬性成員,在遍歷這個物件的屬性成員的時候,屬性名將會賦值給這個變數。for/in並不會遍歷物件的所有屬性,只會歷可列舉的屬性。現在來看看for/in遍歷陣列,因為陣列可以說是特殊的物件(我的理解是屬性名是非負數的物件),在for/in遍歷的過程中,陣列中的索引將會賦值給這個變數。(這跟我們使用的OC或者C++中的快速遍歷不太一樣,OC中是把陣列中索引的值賦值給變數

)。
說到這裡,就看看陣列的迴圈遍歷吧,直接上例子

//---看點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()方法將陣列中的元素顛倒順序,返回逆序的陣列。(此方法是在原來的陣列中通過替換的方法重新排列,所以不生成新的陣列
var a  = [1,2,3];
a.reverse().join(); //==> "3,2,1"
  • sort()
    Array.sort()方法將陣列中的元素排序並返回排序後的陣列。(當不帶引數時候,陣列元素是以字母表排序
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——JavaScript陣列

這裡先提一下for in 迴圈,因為之前在C++ 和 OC中用到過快速遍歷,但是發現JavaScript有所不同,所以要在這裡提一下。 JS中的for/in 迴圈遍歷,語法:for(variable

JavaScript ------ JavaScript與html的結合方式

JavaScript與html的結合方式 想要將其他程式碼融入到Html中,都是以標籤的形式。 1、 JS程式碼存放在標籤對<script> js code...</script>中。 2、當有多個html頁面使用到相同的JS指令碼時,可以將j

理解JavaScriptJavaScript執行順序

如果說,JavaScript引擎的工作機制比較深奧是因為它屬於底層行為,那麼JavaScript程式碼執行順序就比較形象了,因為我們可以直觀感覺到這種執行順序,當然JavaScript程式碼的執行順序是比較複雜的,所以在深入JavaScript語言之前也有必要對

初學JavaScript陣列練習筆記

"陣列遍歷==============".description(); Array.prototype.name = "Array"; var arr3 = [1,2,3,4,5,6,7,8,9,0]; for(var i in arr3) { arr3

初學JavaScript利用計時器做出的簡單時鐘

transform width nsf ner date eight ora form posit //由於剛學HTML時間不久,JavaScript也是剛剛接觸,有很多繁瑣代碼,希望多多體諒,後續會慢慢改進的<!DOCTYPE html> <html&

初學JavaScript顏色小遊戲

20px inf time select 改變顏色 interval one 準備 顏色 /*老師布置的的顏色小遊戲的作業,根據問題顯示的文字找出對應的顏色判斷小遊戲,可能有很多需要改進的代碼,後面會多多改進的,謝謝2018-07-15 12:45:59*/<!DO

JavaScript系列】JavaScript陣列

 一  概述      JavaScript陣列同後端語言一樣,具有它自己的資料結構,歸根結底,這種資料結構,本質就是一種集合。      在後端語言中(如java,.net等),陣列是這樣定義的:陣列是用來儲存相同資料型別的

javascript陣列和物件的資料結構轉換

最近學到物件和陣列的相關知識,將遇到的兩道較複雜的練習題貼出來  var scoreObject = { "Tony": { "Math": 95, "English": 79, "Music": 68 }, "S

javascript九種陣列去重的方法

       陣列去重,第一反應就是for迴圈,如果一個for迴圈解決不了,那就多來幾個。。。哈哈,心血來潮查了下陣列去重的方法,是我見識短淺。以下,我將介紹九種js中陣列去重的方法: 利用 ES6 Set去重 利用splice()去重 利用indexOf()去重  

Web前端學習筆記——JavaScript陣列、函式、作用域

陣列 為什麼要學習陣列 之前學習的資料型別,只能儲存一個值(比如:Number/String。我們想儲存班級中所有學生的姓名,此時該如何儲存? 陣列的概念 所謂陣列,就是將多個元素(通常是同一型別)按一定順序排列放到一個集合中,那麼這個集合我們就稱之為陣列

javascript陣列

無論哪一種語言都離不開陣列,javascript也不例外。陣列是值的有序集合,這些值稱為元素。陣列有序不是說值的內容大小排序,是位置有序。位置可以用數字表示,稱為索引。由於javascript是軟型別的,所以陣列也是無型別的。這個意思呢就是陣列中可以放任意型別的值,可以是S

JavaScriptES6中解構原理及注意事項(陣列和物件)

//ES6中的解構原理(常用型別):   //陣列解構: //陣列的元素是按次序排列的,變數的取值由它的位置決定; let [a,b,c] = [1,2,3]; console.log(a,b,c) //結果為: 1,2,3;   //物件解構變數同名(

JavaScript陣列切換圖片

程式碼示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>陣列切換圖片</title> <sty

JavaScript陣列五大迭代方法總結

如果去問一個不太瞭解JavaScript陣列的開發人員,JavaScript的陣列有多少種迭代方法,你可能得到的答案為,for/while/do-while...等等,這個是迴圈中的方法,和我們陣列的迭

從零開始學 Web JavaScript(四)陣列

大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、陣列 1、陣列

JavaScript 陣列常用方法總結

陣列中的常用方法總結:能改變原陣列的方法有:push,  pop,  shift,  unshift,  sort,  reverse,   splice不能改變原陣列的方法有:concat,  join,  split,  toString,  slice改變原陣列方法:1

JavaScript陣列排序

    陣列中已經存在兩個重排序方法:reverse()和sort()。     我們先來看下比較簡單的reverse()方法: reverse()將陣列項的順序進行反轉。 var numList1=[1,2,3,4,5,6]; numList1.reverse();

JavaScript陣列API、棧和佇列、氣泡排序

API:已經實現的方法,我們開發人員可以直接呼叫,不需要知道原始碼。 將陣列轉化為字串 //1. var str = arr.toString(); 返回陣列中的元素用逗號分隔。 var arr = ["s","t","r

JavaScript學習陣列實現圖片輪播

js程式碼: <script type="text/javascript"> //定義num為0 var num=0; //定義一個數組,其中元素為要實現輪播的圖片

好程式設計師web前端培訓JavaScript陣列去重方法

開發十年,就只剩下這套架構體系了! >>>