初學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
理解JavaScript之JavaScript執行順序
如果說,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
JavaScript之ES6中解構原理及注意事項(陣列和物件)
//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陣列去重方法
開發十年,就只剩下這套架構體系了! >>>