javascript類型系統(tǒng) Array對(duì)象學(xué)習(xí)筆記

更新時(shí)間：2016年01月09日 11:33:42 作者：小火柴的藍(lán)色理想

這篇文章主要介紹了javascript類型系統(tǒng)之Array對(duì)象，整理關(guān)于Array對(duì)象的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下

數(shù)組是一組按序排列的值，相對(duì)地，對(duì)象的屬性名稱是無序的。從本質(zhì)上講，數(shù)組使用數(shù)字作為查找鍵，而對(duì)象擁有用戶自定義的屬性名。javascript沒有真正的關(guān)聯(lián)數(shù)組，但對(duì)象可用于實(shí)現(xiàn)關(guān)聯(lián)的功能

　　Array()僅僅是一種特殊類型的Object()，也就是說，Array()實(shí)例基本上是擁有一些額外功能的Object()實(shí)例。數(shù)組可以保存任何類型的值，這些值可以隨時(shí)更新或刪除，且數(shù)組的大小是動(dòng)態(tài)調(diào)整的

一、數(shù)組創(chuàng)建

　　與Javascript中的大多數(shù)對(duì)象一樣，可以使用new操作符連同Array()構(gòu)造函數(shù)，或者通過使用字面量語法來創(chuàng)建數(shù)組對(duì)象

【1】使用Array構(gòu)造函數(shù)(在使用Array構(gòu)造函數(shù)時(shí)，也可以省略New操作符)，可以將數(shù)組實(shí)例的值傳遞給構(gòu)造函數(shù)，以逗號(hào)分隔作為參數(shù)，Array()構(gòu)造函數(shù)可以接收4294967295(大約43億)個(gè)參數(shù)

　　如果只有一個(gè)參數(shù)：若傳遞的是數(shù)值，它將用來設(shè)置數(shù)組的長度；若傳遞的是其他類型的參數(shù)，則會(huì)創(chuàng)建包含那個(gè)值的只有一項(xiàng)的數(shù)組

var colors;
console.log(colors = new Array(),colors.length);//[] 0
console.log(colors = new Array('red','blue','green'),colors.length);//['red','blue','green'] 3
console.log(colors = new Array(20),colors.length);//[] 20
console.log(colors = new Array('red'),colors.length);//['red'] 1

var foo = new Array(1,2,3);
var bar = new Array(100);
console.log(foo[0],foo[2]);//1 3
console.log(bar[0],bar.length);//undefined 100

【2】使用數(shù)組字面量表示法

var colors = ['red','blue','green'];
var colors = [];



//Array構(gòu)造函數(shù)
var myArray1 = new Array('blue','green','orange','red');
console.log(myArray1);//['blue','green','orange','red']
//數(shù)組字面量表示法
var myArray2 = ['blue','green','orange','red'];
console.log(myArray2);//['blue','green','orange','red']



var colors = [1,2,]; 
//在IE8及以前中會(huì)包含一個(gè)三個(gè)項(xiàng)目,且每個(gè)項(xiàng)目為1、2和undefined的數(shù)組。在其他瀏覽器中為只包含1和2的數(shù)組
var colors = [,,,];
 //在IE8及以前會(huì)創(chuàng)建4項(xiàng)的數(shù)組，而在其他瀏覽器中會(huì)創(chuàng)建3項(xiàng)的數(shù)組

二、數(shù)組操作

　　在讀取和設(shè)置數(shù)組的值時(shí)，要使用方括號(hào)并提供相應(yīng)值的基于0的數(shù)字索引

　　數(shù)組的長度length屬性表示數(shù)組中值的數(shù)量，而數(shù)組的數(shù)字索引是從0開始的；且length屬性可讀可寫，通過設(shè)置數(shù)組的Length屬性，可以從數(shù)組的末尾移除項(xiàng)或向數(shù)組中添加新項(xiàng)。如果設(shè)置的長度高于數(shù)組中值的實(shí)際數(shù)量，將向數(shù)組中添加undefined值；若將長度值的數(shù)量設(shè)置為少于數(shù)組中的值的數(shù)量，可能會(huì)刪除數(shù)組中的值

var myArray = ['blue','green','orange','red'];
console.log(myArray.length);//4
myArray.length = 99;
console.log(myArray.length);//99
myArray.length = 1;
console.log(myArray[1]);//undefined
console.log(myArray);//['blue']

 

var colors = ['red','blue','green'];
colors.length = 2;
alert(colors[2]);//undefined
colors.length = 4;
alert(colors[3]);//undefined

　　當(dāng)把一個(gè)值放在超出數(shù)組大小的位置上時(shí)，數(shù)組就會(huì)重新計(jì)算其長度值，即長度值等于最后一項(xiàng)的索引加1，Javascript將會(huì)使用undefined值填充當(dāng)前索引之前的所有索引

var myArray = [];
myArray[50] = 'blue';
console.log(myArray.length);//51
var colors = ['red','blue','green'];
colors[99] = 'black';
console.log(colors.length);//100

[tips]利用length屬性可以方便地在數(shù)組末尾添加新項(xiàng)

colors[colors.length] = 'black';

三、繼承的方法

toString()

　　返回由數(shù)組中每個(gè)值的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串

valueof()

　　返回的還是數(shù)組

var colors = ['red','blue','green'];         
console.log(colors.valueOf());//['red','blue','green']
alert(colors.valueOf());//'red,blue,green' 
alert(colors.toString());//'red,blue,green'
alert(colors);//'red,blue,green'[注意]由于alert()要接收字符串參數(shù)，它會(huì)在后臺(tái)調(diào)用toString()方法，會(huì)得到與toString()方法相同的結(jié)果

toLocaleString()

　　調(diào)用該方法時(shí)，數(shù)組的每一項(xiàng)的值調(diào)用的是toLocaleString()方法

var person1 = {
  toLocaleString: function(){
    return 'Nikolaos';
  },
  toString: function(){
    return 'Nicholas';
  }
};
var person2 = {
  toLocaleString: function(){
    return 'Grigorios';
  },
  toString: function(){
    return 'Greg';
  }
};

var people = [person1,person2];
alert(people);//Nicholas,Greg
alert(people.toString());//Nicholas,Greg
alert(people.toLocaleString());//Nikolaos,Grigorios

四、實(shí)例方法

數(shù)組轉(zhuǎn)換
join()

　　數(shù)組繼承的toLocaleString()、toString()、valueOf()方法，在默認(rèn)情況下都會(huì)以逗號(hào)分隔的字符形式返回?cái)?shù)組項(xiàng)；而join()方法可以使用不同的分隔符來構(gòu)建這個(gè)字符串，join()方法只接收一個(gè)參數(shù)，用作分隔符的字符串，然后返回包含所有數(shù)組項(xiàng)的字符串。如果不給join()方法傳入任何值，或者傳入undefined，則使用逗號(hào)作為分隔符

var colors = ['red','green','blue'];
console.log(colors.join(','));//'red,green,blue'
console.log(colors.join('||'));//'red||green||blue'
console.log(colors.join());//'red,green,blue'
console.log(colors.join(undefined));//'red,green,blue'[注意]IE7-會(huì)使用undefined作為分隔符

　　[注意]如果數(shù)組中的某一項(xiàng)的值是null或者undefined，那么該值在join()、toLocaleString()、toString()和valueOf()方法返回的結(jié)果中以空字符串表示

數(shù)組檢測
　　自從ES3做出規(guī)定之后，就出現(xiàn)了確定某個(gè)對(duì)象是不是數(shù)組的經(jīng)典問題。一般的常見方法是使用instance操作符，但該方法有它的局限性；ES5專門新增了isArray()方法來檢測數(shù)組

var value = [123];
console.log(value instanceof Array);//true

　　instanceof操作符的問題在于它假定只有一個(gè)全局執(zhí)行環(huán)境，如果網(wǎng)頁中包含多個(gè)框架，那實(shí)際上就存在兩個(gè)以上不同的全局環(huán)境，從而存在兩個(gè)以上不同版本的Array構(gòu)造函數(shù)。如果從一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組，那么傳入的數(shù)組與在第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)

 //在不同框架中不能共享prototype屬性
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(value instanceof Array);//false
console.log(value.constructor == Array);//false

　但是，在不同框架中可以跨原型鏈調(diào)用toString()方法

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(Object.prototype.toString.call(value));//[object Array]

　　ES5新增了Array.isArray()方法，來最終確定某個(gè)值到底是不是數(shù)組，而不管它在哪個(gè)全局環(huán)境中創(chuàng)建的

Array.isArray()

var value = [123];
console.log(Array.isArray(value));//true
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(Array.isArray(value));//true

棧和隊(duì)列
push()

　　可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組末尾，并返回修改后數(shù)組的長度

pop()

　　從數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的length值，然后返回移除的項(xiàng)

shift()

　　移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng)，同時(shí)數(shù)組的長度減1(結(jié)合使用shift()和push()可以模擬隊(duì)列)

unshift()

　　在數(shù)組前端添加任意個(gè)項(xiàng)并返回新數(shù)組長度(結(jié)合使用unshift()和pop()從相反方向模擬隊(duì)列)

　　[注意]IE7-瀏覽器unshift()方法返回的總是undefined

var colors = [];
var count = colors.push('red','green');
console.log(colors,count);//['red','green'] 2
var count = colors.pop();
console.log(colors,count);//['red'] 'green'
var count = colors.unshift('white','black');
console.log(colors,count);//["white", "black", "red"] 3
var count = colors.shift();
console.log(colors,count);//["black", "red"] "white"

排序方法
reverse()

　　反轉(zhuǎn)數(shù)組的順序，返回經(jīng)過排序之后的數(shù)組；而原數(shù)組順序也發(fā)生改變

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

sort()

　　默認(rèn)情況下，按字符串升序排列數(shù)組項(xiàng)，sort方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法，然后比較得到的字符串排序，返回經(jīng)過排序之后的數(shù)組，而原數(shù)組順序也發(fā)生改變

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]

[注意]sort()方法可以接受一個(gè)比較函數(shù)作為參數(shù)，以便指定哪個(gè)值在哪個(gè)值的前面。比較函數(shù)接收兩個(gè)參數(shù)，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之前則返回一個(gè)負(fù)數(shù)，如果兩個(gè)參數(shù)相等則返回0，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之后則返回一個(gè)正數(shù)

[tips]比較函數(shù)

 function compare(value1,value2){
  if(value1 < value2){
    return -1;
  }else if(value1 > value2){
    return 1;
  }else{
    return 0;
  }
}
var array = ['5px',50,1,10];
//當(dāng)數(shù)字與字符串比較大小時(shí)，字符串'5px'會(huì)被轉(zhuǎn)換成NaN，這樣結(jié)果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]

對(duì)于數(shù)值類型或valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型，比較函數(shù)可以簡化為：

function compare(value1,value2){
  return value1 - value2;
}
var array = ['5px',50,1,10];
console.log(array.sort(compare));//["5px",1,10,50]
var array = [5,50,1,10];
console.log(array.sort(compare));//[1,5,10,50]

[tips]創(chuàng)建一個(gè)隨機(jī)數(shù)組

function compare(){
  return Math.random() - 0.5;
}
var array = [1,2,3,4,5];
console.log(array.sort(compare));//[2,1,5,4,3]

操作方法
concat()

　　基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組，先創(chuàng)建當(dāng)前數(shù)組一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組(concat()不影響原數(shù)組)

　　如果不給concat()方法傳遞參數(shù)時(shí)，它只是復(fù)制當(dāng)前的數(shù)組；如果參數(shù)是一個(gè)或多個(gè)數(shù)組，則該方法會(huì)將這些數(shù)組中的每一項(xiàng)都添加到結(jié)果數(shù)組中；如果傳遞的值不是數(shù)組，這些值就會(huì)被簡單地添加到結(jié)果數(shù)組的末尾

var numbers = [1,2];
console.log(numbers,numbers.concat());//[1,2] [1,2]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]

slice()

　　基于當(dāng)前數(shù)組中的一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組，接受一個(gè)或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置，最后返回新數(shù)組(slice()不影響原數(shù)組)

　　如果沒有參數(shù)，則返回原數(shù)組；如果只有一個(gè)參數(shù)時(shí)，slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)；若有兩個(gè)參數(shù)時(shí)，該方法返回起始位置和結(jié)束位置之間的項(xiàng)，但不包括結(jié)束位置的項(xiàng)；若參數(shù)為負(fù)數(shù)時(shí)，則用數(shù)組長度加負(fù)數(shù)作為參數(shù)；若結(jié)束位置小于開始位置，則返回空數(shù)組

var numbers = [1,2,3,4,5];
console.log(numbers.slice());//[1,2,3,4,5]
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(2,1));//[]

splice()

　　原數(shù)組變?yōu)樾薷暮蟮臄?shù)組，而splice()返回從原數(shù)組中刪除的項(xiàng)組成的數(shù)組，若無刪除項(xiàng)則返回空數(shù)組。若第一個(gè)參數(shù)為負(fù)數(shù)時(shí)，則用數(shù)組長度加負(fù)數(shù)作為參數(shù)；若第二個(gè)參數(shù)為負(fù)數(shù)時(shí)，則用0作為參數(shù)

　　[1]刪除:兩個(gè)參數(shù)為要?jiǎng)h除的第一項(xiàng)的位置、要?jiǎng)h除的項(xiàng)數(shù)

　　[2]插入:三個(gè)參數(shù)為起始位置、0(要?jiǎng)h除的基數(shù))、要插入的項(xiàng)

　　[3]替換:三個(gè)參數(shù)為起始位置、要?jiǎng)h除的項(xiàng)數(shù)、要插入的項(xiàng)

 var numbers = [1,2,3,4,5];
console.log(numbers.splice(),numbers);//[] [1, 2, 3, 4, 5]
console.log(numbers.splice(0,2),numbers);//[1,2] [3,4,5]
var numbers = [1,2,3,4,5];
console.log(numbers.splice(1,0,11,12),numbers);//[] [1,11,12,2,3,4,5]
var numbers = [1,2,3,4,5];
console.log(numbers.splice(1,3,11,12),numbers);//[2,3,4] [1,11,12,5] 
var numbers = [1,2,3,4,5];
console.log(numbers.splice(-4,3,11,12),numbers);//-4+5=1 -> [2,3,4] [1,11,12,5] 
var numbers = [1,2,3,4,5];
console.log(numbers.splice(-4,-3,11,12),numbers);//-4+5=1 -> [] [1,11,12,2,3,4,5]

位置方法
　　ES5為數(shù)組實(shí)例添加了兩個(gè)位置方法indexOf()、lastIndexOf()。這兩個(gè)方法都接收兩個(gè)參數(shù)：要查找的項(xiàng)、表示查找起點(diǎn)位置的索引(可選)。返回第一個(gè)滿足條件的查找項(xiàng)在數(shù)組中的位置，如果沒有找到則返回-1(位置方法不會(huì)影響原數(shù)組)

　　[注意]方法在比較參數(shù)時(shí)，使用的是全等操作符

indexOf() 　　　　從前向后查找
lastIndexOf() 　　從后向前查找

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));//3
console.log(numbers.lastIndexOf(4));//5
console.log(numbers.indexOf(4,4));//5
console.log(numbers.lastIndexOf(4,4));//3

 

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因?yàn)閜erson和people[0]雖然值相同，但是是兩個(gè)引用
alert(morePeople.indexOf(person));//0，因?yàn)閜erson和morepeople[0]是同一個(gè)引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因?yàn)椴皇峭粋€(gè)引用

[tips]返回滿足條件的項(xiàng)的所有索引值

function allIndexOf(array,value){
  var result = [];
  var pos = array.indexOf(value);
  if(pos === -1){
    return -1;
  }
  while(pos > -1){
    result.push(pos);
    pos = array.indexOf(value,pos+1);
  }
  return result;
}
var array = [1,2,3,3,2,1];
console.log(allIndexOf(array,1));//[0,5]

以上就是本文的詳細(xì)內(nèi)容，希望對(duì)大家的學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: