JavaScript內(nèi)置對象--Array

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

創(chuàng)建數(shù)組的基本方式有兩種：
1、使用 Array構(gòu)造函數(shù)
語法：new Array()
小括號( )說明：
（1）預(yù)先知道數(shù)組要保存的項(xiàng)目數(shù)量
（2）向Array構(gòu)造函數(shù)中傳遞數(shù)組應(yīng)包含的項(xiàng)

2、使用數(shù)組字面量表示法
由一對包含數(shù)組項(xiàng)的方括號[ ]表示，多個(gè)數(shù)組項(xiàng)之間以逗號隔開。

<script>
    var colors=new Array(3);
    console.log(colors);//[]
    
    var nums=new Array(1,3,6,9);
    console.log(nums);//[1,3,6,9]
    
    
    var cols=["red","yellow","green"];
    console.log(cols);//["red","yellow","green"]
    
    var infos=[6,"marry",true,{email:"marry@sohu.com"}];//數(shù)組中的每個(gè)值對類型沒有限制
    console.log(infos);//[6,"marry",true,Object]
</script>

二、數(shù)組元素的讀和寫

讀取和設(shè)置值時(shí)，使用方括號[ ]并提供相應(yīng)的索引
說明：索引是從0開始的正整數(shù)

var cols=["red","yellow","green"];
console.log(cols[1]);//yellow
console.log(cols[5]);//undefined

var colors=new Array(3);
colors[0]="#f00";
colors[1]="#0f0";
colors[2]="#00f";
console.log(colors);//["#f00","#0f0","00f"]

三、數(shù)組的length屬性

語法：array.length
功能：獲取數(shù)組array的長度
返回值：number

說明：
1、通過設(shè)置length可以從數(shù)組的末尾移除項(xiàng)或向數(shù)組中添加新項(xiàng)。
2、當(dāng)把一個(gè)值放在超出當(dāng)前數(shù)組大小的位置上時(shí)，數(shù)組就會重新計(jì)算其長度值，長度值等于最后一項(xiàng)的索引加1。

var arr=["a","b","c","d"];
console.log(arr.length);//4

arr.length=3;//把a(bǔ)rr這個(gè)數(shù)組的長度設(shè)為3
console.log(arr);//["a","b","c"]
console.log(arr[3]);//undefined


var arr1=["a","b","c","d"];
arr1[99]="z";//給數(shù)組的第100項(xiàng)賦值
console.log(arr1.length);//100  根據(jù)最后的索引確定

數(shù)組的遍歷：

var arr=["a","b","c","d"];
for(var i=0;i<arr.length;i++){
    console.log(i);//0 1 2 3 
    console.log(arr[i]);//a b c d
}

四、數(shù)組的方法

1.棧方法
①push()
語法：arrayObject.push(newele1,newele2,....,neweX)
功能：把它的參數(shù)順序添加到 arrayObject 的尾部。
返回值：把指定的值添加到數(shù)組后的新長度。

<script>
    var colors=new Array("red","green");
    colors.push("blue");
    console.log(colors);//Array[3]:0:"red" 1:"green" 2:"blue"
    
    colors.push("bule","yellow","black");
    console.log(colors);//["red","green","bule","yellow","black"]
    
    var len = colors.push("bule","yellow","black");
    console.log(len);//5
</script>

②unshift()
語法：arrayObject.unshift(newele1,newele2,....,neweX)
功能：把它的參數(shù)順序添加到 arrayObject 的開頭。
返回值：把指定的值添加到數(shù)組后的新長度。

var nums=[2,7,8,6];
var size=nums.unshift(99,66);
console.log(nums);//[99,66,2,7,8,6]

③pop()
語法：arrayObject.pop()
功能：刪除 arrayObject 的最后一個(gè)元素
返回值：被刪除的那個(gè)元素

var nums=[2,7,8,6];
var n=nums.pop();
console.log(n);//6
console.log(nums);//[2,7,8]

④shift()
語法：arrayObject.shift()
功能：刪除 arrayObject中的第一個(gè)元素
返回值：被刪除的那個(gè)元素

var colors=new Array("red","green","bule","yellow","black");
var m=colors.shift();
console.log(m);//red
console.log(colors);//["green","bule","yellow","black"]

2.轉(zhuǎn)換方法
①join()
語法：arrayObject.join(separator)
功能：用于把數(shù)組中的所有元素放入一個(gè)字符串。(把數(shù)組轉(zhuǎn)化為字符串)
返回值：字符串。

var nums=[2,4,5];
var str=nums.join();
console.log(typeof(str));//string
console.log(str);//2,4,5 默認(rèn)用,隔開

var words=["border","left","color"];
//希望轉(zhuǎn)為border-left-color
var wordstr=words.join("");
console.log(wordstr);//borderleftcolor

var wordstr1=words.join("-");
console.log(wordstr1);//border-left-color

3.重排序方法
①reverse()
語法：stringObject.reverse()
功能：用于顛倒數(shù)組中元素的順序。
返回值：數(shù)組

var nums=[2,4,5];
nums.reverse();
console.log(nums);//[5,4,2]

var strs=["a","b","c","d"];
//返回dcba這個(gè)字符串
var newstr=strs.reverse().join("");
console.log(newstr);//dcba

②sort()
語法：arrayObject.sort(sortby)
功能：用于對數(shù)組的元素進(jìn)行排序。
返回值：數(shù)組。

說明：
1、即使數(shù)組中的每一項(xiàng)都是數(shù)值，sort()方法比較的也是字符串。
2、sort()方法可以接收一個(gè)比較函數(shù)作為參數(shù)。

var words=["border","left","color"];
console.log(words.sort());//["border","color","left"] 按字母順序

var arr=[9,23,15,88,12];
console.log(arr.sort());
//[12,15,23,88,9] 會先轉(zhuǎn)為字符串，再按照第一個(gè)數(shù)字順序排序

//降序，return 參數(shù)1<參數(shù)2
arr.sort(function(a,b){return a<b});
console.log(arr);//[88,23,15,12,9]

//升序 return 參數(shù)1>參數(shù)2
arr.sort(function(a,b){return a>b});
console.log(arr);//[9,12,15,23,88]

4.操作方法
①concat()
語法：arrayObject.concat(arrayX,arrayX,......,arrayX)
功能：用于連接兩個(gè)或多個(gè)數(shù)組。
返回值：數(shù)組。

var arr1=["a","b","c"],
    arr2=["d","e",1,3],
    arr3;
arr3=arr1.concat(arr2);
console.log(arr3);//["a","b","c","d","e",1,3]

arr4=arr1.concat(arr2,["m",99,8]);
console.log(arr4);//["a","b","c","d","e",1,3,"m",99,8]

②slice()
語法：arrayObject.slice(start,end)
功能：從已有的數(shù)組中返回選定的元素。
參數(shù)：
start （必需）規(guī)定從何處開始選取，如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。
end（可選）規(guī)定從何處結(jié)束選取，該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。
返回值：數(shù)組

說明：
1、如果沒有指定end，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。
2、如果slice()方法的參數(shù)中有一個(gè)負(fù)數(shù)，則用數(shù)組長度加上該數(shù)來確定相應(yīng)的位置。

var colors=["red","green","blue","yellow","orange"];
var newColors=colors.slice(1);
console.log(newColors);//["green","blue","yellow","orange"]

var newColors1=colors.slice(1,3);
console.log(newColors1);//["green","blue"]

var newColors2=colors.slice(-2,4);  //3,4用數(shù)組長度加上負(fù)數(shù)
console.log(newColors2);//["yellow"]

完成以下代碼段，實(shí)現(xiàn)b數(shù)組對a數(shù)組的拷貝，方法越多越好

var a=[1,"yes",3],
    b;
//1.數(shù)組遍歷，push
b=new Array();
for(var i=0;i<a.length;i++){
    b.push(a[i])
}
console.log(b);

//2.concat()
b=[].concat(a);
console.log(b);

//3.slice()
b=a.slice(0);
console.log(b);

③splice()刪除
語法：arrayObject.splice(index,count)
功能：刪除從 index 處開始的零個(gè)或多個(gè)元素。
返回值：含有被刪除的元素的數(shù)組。

說明：
count是要?jiǎng)h除的項(xiàng)目數(shù)量，如果設(shè)置為 0，則不會刪除項(xiàng)目。
如果不設(shè)置，則刪除從index開始的所有值。

var arr=["a","b","c","d","e","f"];
var delArr=arr.splice(2,2);
console.log(arr);//["a","b","e","f"]
console.log(delArr);//["c","d"]

var delArr=arr.splice(2);
console.log(arr);//["a","b"]
console.log(delArr);//["c","d","e","f"]

var delArr=arr.splice(2,0);
console.log(arr);//["a","b","c","d","e","f"]
console.log(delArr);//[]

④splice()插入
語法：arrayObject.splice(index,0,item1,.....,itemX)
功能：在指定位置插入值
參數(shù)：
Index：起始位置
0：要?jiǎng)h除的項(xiàng)數(shù)
item1…itemX：要插入的項(xiàng)
返回值：數(shù)組

var arr=["a","b","c","d","e","f"];
var insertArr=arr.splice(3,0,"m","n");
console.log(arr);//["a","b","c","m","n","d","e","f"]
console.log(insertArr);//[] 插入操作時(shí)返回空

⑤splice()替換
語法：arrayObject.splice(index,count,item1,.....,itemX)
功能：在指定位置插入值，且同時(shí)刪除任意數(shù)量的項(xiàng)
參數(shù)：
Index：起始位置
count：要?jiǎng)h除的項(xiàng)數(shù)
item1…itemX：要插入的項(xiàng)
返回值：從原始數(shù)組中刪除的項(xiàng)（如果沒有刪除任何項(xiàng)，則返回空數(shù)組）

var arr=["a","b","c","d","e","f"];
var replaceArr=arr.splice(1,2,"x","y","z"); //從索引為1的 刪除2個(gè) 再插入"x","y","z"
console.log(arr); //["a","x","y","z","d","e","f"]
console.log(replaceArr);//["b","c"]

5.添加方法
①indexOf()
語法：arrayObject.indexOf(searchvalue，startIndex)
功能：從數(shù)組的開頭（位置0）開始向后查找。
參數(shù)：
searchvalue：必需，要查找的項(xiàng)；
startIndex：可選，起點(diǎn)位置的索引。
返回值：number，查找的項(xiàng)在數(shù)組中的位置，沒有找到的情況下返回-1。

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.indexOf(7);
console.log(pos);//1

var pos=nums.indexOf(99);
console.log(pos);//-1

var pos=nums.indexOf(7,3);//從索引為3開始檢測7的位置
console.log(pos);//3

var pos=nums.indexOf("7");
console.log(pos);//-1

②lastIndexOf()
語法：arrayObject.lastIndexOf(searchvalue，startIndex)
功能：從數(shù)組的末尾開始向前查找。
參數(shù)：
searchvalue：必需，要查找的項(xiàng)；
startIndex：可選，起點(diǎn)位置的索引。
返回值：number，查找的項(xiàng)在數(shù)組中的位置，沒有找到的情況下返回-1。

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.lastIndexOf(1);
console.log(pos);//5


//封裝一個(gè)方法實(shí)現(xiàn)indexOf的功能
function arrayIndexOf(arr,value){
    //檢測value在arr中出現(xiàn)的位置
    for(var i=0;i<arr.length;i++){
        if(arr[i]===value){
            return i;
        }
    }
    return -1;
}
var pos2=arrayIndexOf(nums,8);
console.log(pos2);//4

說明
1、在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會使用全等操作符，即要求查找的項(xiàng)必須嚴(yán)格相等。
2、數(shù)組的位置方法是ECMAScript5為數(shù)組實(shí)例新增的，所以支持的瀏覽器只有：IE9+、Firefox2+、Safari3+、Opera9.5和Chrome