JavaScript引用類(lèi)型——“Array類(lèi)型”的注意要點(diǎn)

AlphaWatch 發(fā)布于2019-08-21 10:47 / 1912人閱讀

摘要：創(chuàng)建數(shù)組讀取和設(shè)置數(shù)組的值創(chuàng)建數(shù)組創(chuàng)建數(shù)組的基本方式有兩種使用構(gòu)造函數(shù)使用數(shù)組字面量表示法對(duì)于第一種方法，如果知道數(shù)組要保存多少個(gè)項(xiàng)目，也可以給構(gòu)造函數(shù)傳遞參數(shù)，比如要?jiǎng)?chuàng)建值為的數(shù)組操作符可以省略。也可以向構(gòu)造函數(shù)傳遞包含的項(xiàng)。

Array 類(lèi)型

除了Object 之外，Array 類(lèi)型也是相當(dāng)常用的類(lèi)型了。ECMAScript 數(shù)組的每一項(xiàng)可以保存任何類(lèi)型的數(shù)據(jù)。且數(shù)組大小也能夠動(dòng)態(tài)調(diào)整的。

創(chuàng)建數(shù)組、讀取和設(shè)置數(shù)組的值 創(chuàng)建數(shù)組

創(chuàng)建數(shù)組的基本方式有兩種：

使用Array 構(gòu)造函數(shù)：var colors = new Array()；

使用數(shù)組字面量表示法；

對(duì)于第一種方法，如果知道數(shù)組要保存多少個(gè)項(xiàng)目，也可以給構(gòu)造函數(shù)傳遞參數(shù)，比如要?jiǎng)?chuàng)建length 值為10 的數(shù)組：

var colors = Array(10);
//new 操作符可以省略。

也可以向Array 構(gòu)造函數(shù)傳遞包含的項(xiàng)。如：

var colors = Array("yellow","red","green");

對(duì)于第二種方法，數(shù)組字面量由方括號(hào)表示，用逗號(hào)隔開(kāi)。如：

var colors = [
    "red",
    "green",
    "blue"
]
console.log(colors); //["red", "green", "blue"]
var boys = [];
document.write(boys.length); //0

讀取和設(shè)置數(shù)組的值

使用方括號(hào)和基于0 的數(shù)字索引。如：

var colors = [
    "red",
    "blue",
    "yellow"
]
document.write(colors[1]); //"blue" 訪(fǎng)問(wèn)第二項(xiàng)
document.write(colors.length); //3 
colors[3] = "cc";
document.write(colors.length); //4 創(chuàng)建一個(gè)新的項(xiàng)
document.write(colors[3]); //"cc"

length屬性，數(shù)組的項(xiàng)數(shù)就保存在length 屬性中，這個(gè)屬性返回0 或更大的值。且該屬性可寫(xiě)的，可以從數(shù)組的末尾移除或增加項(xiàng)。如：

var colors = [
    "red",
    "blue"
]
colors[colors.length] = "yellow";
console.log(colors); // ["red", "blue", "yellow"] 在末尾增加了一項(xiàng)"yellow"
colors.length = 2;
console.log(colors); // ["red", "blue"] 在末尾減少了一項(xiàng)
colors.length = 3;
console.log(colors); //["red", "blue", undefined × 1] 在末尾增加了一項(xiàng)undefined

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

var colors = ["red"];
colors[colors.length] = "yellow";

《js 高級(jí)程序設(shè)計(jì)》提到：
數(shù)組最多可以包含4 294 967 295 個(gè)項(xiàng)。

檢測(cè)數(shù)組

使用instanceof操作符：if (value instanceof Array) {}；

使用ECMAScript 5 新增的Array.isArray()方法：if (Array.isArray(value))；

檢測(cè)數(shù)組instanceof操作符的問(wèn)題，在這里不深究。支持Array.isArray()方法的瀏覽器有IE9、FIrefox 4+、Safari 5+、Opera 10.5+和Chrome。

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

通常，用toString()方法會(huì)返回?cái)?shù)組中每個(gè)值的字符串形式拼接而成的以逗號(hào)分隔開(kāi)來(lái)的字符串；用valueOf()方法則仍然返回?cái)?shù)組。

var colors = ["red","yellow"];
var color1 = colors.toString();
document.write(typeof color1); //string 使用toString() 方法，返回的是用逗號(hào)分割的字符串；

var color2 = colors.valueOf();
document.write(typeof color2); //object
console.log(color2) //使用valueOf() 方法，返回的仍然是數(shù)組;

另外，還可以使用toLocaleString()方法，如：

var person = {
    toLocaleString:function(){
        return "Oliver";
    },
    toString:function(){
        return "Troy";
    }
};
var age = {
    toLocaleString:function(){
        return "adult";
    },
    toString:function(){
        return "children";
    }
};
var people = [person,age];
document.write(people.toString()); //Troy,children 返回每個(gè)數(shù)組里面的每個(gè)對(duì)象的toString 返回的值
document.write(people.toLocaleString()); //Oliver,adult 返回每個(gè)數(shù)組里面的每個(gè)對(duì)象的toLocaleString 返回的值
document.write(people.valueOf()); //Troy,children
document.write(people.join(" is a ")); //Troy is a children 改變兩個(gè)數(shù)組鏈接起來(lái)的分隔符

可以使用join()方法來(lái)控制數(shù)組的連接符。

棧方法和隊(duì)列方法 棧方法（表現(xiàn)的像棧一樣）

ECMAScript 數(shù)組可以表現(xiàn)的像棧一樣。棧是一種LIFO（Last-In-First—Out，后進(jìn)先出），只發(fā)生在一個(gè)位置——棧的頂部。

有兩個(gè)方法push()和pop()方法。具體的來(lái)說(shuō)，push()方法可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組的末尾，并返回修改后的數(shù)組的長(zhǎng)度；pop()方法則可以從數(shù)組的末尾移除最后一項(xiàng)，減少數(shù)組的length 值，并返回移除的項(xiàng)。如：

添加項(xiàng)：

var array = [1,2,3,4];

console.log(array); //[1, 2, 3, 4] 目前該array 有4項(xiàng)

var count = array.push("str","34"); //末尾增加了一項(xiàng)"str"和一項(xiàng)"34"
console.log(count); //6 這時(shí)返回的長(zhǎng)度增加2
console.log(array); //[1, 2, 3, 4, "str", "34"]
console.log(array.length); //6

減少項(xiàng)：

var array = [1,2,3,4];

console.log(array); //[1, 2, 3, 4] 目前該array 有4項(xiàng)

var count = array.pop();
console.log(count); //4 減少了一個(gè)"4"
console.log(array); //[1, 2, 3]

隊(duì)列方法

隊(duì)列數(shù)據(jù)結(jié)構(gòu)的訪(fǎng)問(wèn)規(guī)則是FIFO（First-In-First-Out），結(jié)合使用shift()和push()方法，可以像使用隊(duì)列一樣使用數(shù)組。shift()可以移除數(shù)組中的第一個(gè)項(xiàng)，并返回該項(xiàng)。如：

var array = [];
var count = array.push("1","2");
document.write(count);
document.write(array); //[1,2]

count = array.push("3");
document.write(count);
document.write(array); //[1,2,3]

var item = array.shift();
document.write(item); //1
document.write(array); //[2,3]

另外，還有一個(gè)叫unshift()方法，同時(shí)使用unshift()和pop()方法，可以從相反的方向來(lái)模擬隊(duì)列，即在前端添加項(xiàng)，末端移除項(xiàng)。如：

var array = [];
var count = array.unshift(1,2,3);
document.write(count); //3
document.write(array); //[1,2,3]

count = array.unshift(0);
document.write(count); //4
document.write(array); //[0,1,2,3]

item = array.pop();
document.write(item); //3
document.write(array); //[0,1,2]

需要注意的是：

shift()返回的是前端刪除的項(xiàng)的值；

unshift()返回的是前端增加后數(shù)組的長(zhǎng)度；

pop()返回的是末端刪除的項(xiàng)的值；

push()返回的是末端增加后數(shù)組的長(zhǎng)度。

總的來(lái)說(shuō)就是“刪除返回項(xiàng)的值，增加則返回長(zhǎng)度”

重排序方法

有兩個(gè)重排序方法：reverse()和sort()。

sort()方法按照升序排列數(shù)組項(xiàng)，如：

var array = [4321,3,43,"56",6543,32,65,765];
array.sort(); //3,32,43,4321,56,65,6543,765

亂七八糟，只比較了第一位數(shù)。

比較函數(shù)接收兩個(gè)參數(shù)，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)之前，則返回一個(gè)復(fù)數(shù)，如果兩個(gè)參數(shù)相等則返回0，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)后面，則返回一個(gè)正數(shù)。通常返回第二個(gè)參數(shù)減掉第一個(gè)參數(shù)的值就可以了（在數(shù)值類(lèi)型或其valueOf()方法返回?cái)?shù)值類(lèi)型的對(duì)象類(lèi)型的情況下）。如：

var array = [3,1,6,"10"];
array.sort(compare);

function compare(value1,value2){
    return value1 - value2; //如果value1 - value2 是正數(shù)，則說(shuō)明value1 大于value2，value1 應(yīng)該排在后面。為升序排列；
};

document.write(array); //[1,3,6,10]

如果想要降序排列，則修改一下compare函數(shù)成value2 - value1 就可以了。如：

var array = [3,1,6,"10"];
array.sort(compare);

function compare(value1,value2){
    return value2 - value1; //如果value2 - value1 是正數(shù)，則說(shuō)明value2 大于value1，value1 應(yīng)該排在后面。為降序排列；
};

document.write(array); //[10,6,3,1]

但是如果是任意類(lèi)型，則不能使用這種方法。而應(yīng)當(dāng)對(duì)參數(shù)進(jìn)行比較。如：

var array = ["Oliver","Troy",{name:"troy"},"Alice"];
array = array.sort(compare);
document.write(array); //Alice,Oliver,Troy,[object Object]

function compare(x,y){
    if(x > y){
        return 1;
    }else if(x < y){
        return -1;
    }else{
        return 0;
    }
}

或者：

var array = ["Oliver","Troy",{name:"troy"},"Alice"];
array = array.sort(compare);
document.write(array); //Alice,Oliver,Troy,[object Object]

function compare(x,y){
    if(x < y){
        return 1;
    }else if(x > y){
        return -1;
    }else{
        return 0;
    }
}

如果只是想翻轉(zhuǎn)原來(lái)數(shù)組的順序，使用reverse()方法就行了，如：

var array = [3,1,6,"10"];
array.reverse();
document.write(array); //10,6,1,3

操作方法

concat()方法，主要作用就是復(fù)制當(dāng)前的數(shù)組并返回副本。如：（不影響原始數(shù)組）

var array = ["abc",123,{name:"Oliver"}];
var newArray = array.concat("abc",[123,32,{age:18}]);
document.write(newArray); // abc,123,[object Object],abc,123,32,[object Object]

slice()方法，主要作用是基于當(dāng)前數(shù)組中的一個(gè)或多個(gè)項(xiàng)創(chuàng)建的一個(gè)新數(shù)組。如：（不影響原始數(shù)組）

var array = ["a","b","c","d"];
var newArray = array.slice(2);
document.write(newArray); //c,d
newArray = array.slice(1,2);
document.write(newArray); //b

如果只有一個(gè)參數(shù)，返回從該參數(shù)指定位置到數(shù)組末尾的所有項(xiàng);如果有兩個(gè)參數(shù)，返回起始位置和結(jié)束位置之間的項(xiàng)，但不包括結(jié)束位置的項(xiàng)。如果，參數(shù)中有負(fù)數(shù)，則用數(shù)組長(zhǎng)度加上該數(shù)來(lái)確定相應(yīng)的位置。

splice()的主要用法：

刪除，2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)和要?jiǎng)h除的項(xiàng)數(shù)；

插入，3個(gè)參數(shù)：起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）和要插入的項(xiàng)；

替換，3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)；

該方法始終都會(huì)返回一個(gè)數(shù)組。舉個(gè)例子：

刪除：

var cars = ["寶馬","奔馳","沃爾沃"];
var deleteCar = cars.splice(1, 2);
console.log(deleteCar); //["奔馳", "沃爾沃"]

插入：

var cars = ["寶馬","奔馳","沃爾沃"];
var addCar = cars.splice(1, 0, "特斯拉","保時(shí)捷");
console.log(cars); //["寶馬", "特斯拉", "保時(shí)捷", "奔馳", "沃爾沃"]

替換：

var cars = ["寶馬","奔馳","沃爾沃"];
var replaceCar = cars.splice(1, 1, "保時(shí)捷");
console.log(replaceCar); //["奔馳"] 刪除了奔馳
console.log(cars); //["寶馬", "保時(shí)捷", "沃爾沃"] 用保時(shí)捷替換了奔馳

位置方法

indexOf()方法和lastIndexOf()方法。一個(gè)是從數(shù)組的開(kāi)頭（位置0）開(kāi)始向后查找；另一個(gè)則是從數(shù)組的末尾開(kāi)始向前查找。有兩個(gè)參數(shù)：要查找的項(xiàng)和表示查找起點(diǎn)的位置索引。在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會(huì)使用全等操作符。如：

var numbers = [1,2,3,4,5,3];
document.write(numbers.indexOf(4)); //3
document.write(numbers.indexOf(4,5)); //-1 從第5索引開(kāi)始查找，找不到就返回-1

document.write(numbers.lastIndexOf(3)); //5
document.write(numbers.lastIndexOf(3,0)); //-1 從第0索引開(kāi)始反向查找，找不到就返回-1

document.write(numbers.indexOf(3)); //2 這里有兩個(gè)3 但是當(dāng)搜索到第一個(gè)時(shí)就會(huì)停止搜索

Mark?。。。。?！

Mark！?。。。?！

Mark?。。。。?！

var oliver = {name:"oliver"};
var person = [{name:"oliver"}];

var people = [oliver];

document.write(person.indexOf({name:"oliver"})); //-1
document.write(person.indexOf(oliver)); //-1

document.write(people.indexOf({name:"oliver"})); //-1
document.write(people.indexOf(oliver)); //0 必須變量搜索變量

迭代方法和歸并方法 迭代方法

有5 個(gè)迭代方法，每個(gè)方法接收兩個(gè)參數(shù)：要在每一項(xiàng)上運(yùn)行的函數(shù)和作用域?qū)ο螅蛇x）；傳入這些方法中的函數(shù)則接收三個(gè)參數(shù)：數(shù)組項(xiàng)的值（item）、索引位置（index）、數(shù)組對(duì)象本身（array）。

every()：每一項(xiàng)運(yùn)行該函數(shù)，如果都返回true，則返回true；（返回Noolean）（主要是驗(yàn)證）

some()：每一項(xiàng)運(yùn)行該函數(shù)，如果其中任一項(xiàng)返回true，則返回true；（返回Boolean）（主要是驗(yàn)證）

filter()：每一項(xiàng)運(yùn)行該函數(shù)，對(duì)于那些返回true的項(xiàng)，組成一個(gè)數(shù)組；（返回Array）（主要是驗(yàn)證）

map()：每一項(xiàng)運(yùn)行該函數(shù)，返回的結(jié)果組成一個(gè)數(shù)組；（返回Array）(對(duì)數(shù)組操作)

forEach()：每一項(xiàng)運(yùn)行該函數(shù)，沒(méi)有返回值；（不返回）（對(duì)數(shù)組操作）(本質(zhì)上與for 語(yǔ)句類(lèi)似)

下面是例子：

every()：

var numbers = [1,3,2,5,4];
var result = numbers.every(function(item, index, array){
    return item > 0;
});
document.write(result); //都大于零，返回true

some()：

var numbers = [1,5,4,32];
var result = numbers.some(function(item, index, Array){
    return item > 31;
});
document.write(result); //true 數(shù)組中至少有一項(xiàng)滿(mǎn)足條件，返回true

filter()：

var array = [123,"Oliver","Troy",true];
var newArray = array.filter(function(item, index, array){
    return typeof item == "string";
});
console.log(newArray); //["Oliver", "Troy"] 把滿(mǎn)足條件的部分返回一個(gè)數(shù)組

map()：

var array = [123,"Oliver","Troy",true];
var newArray = array.map(function(item, index, array){
    return item += " (Oliver)";
});
console.log(newArray); //["123 (Oliver)", "Oliver (Oliver)", "Troy (Oliver)", "true (Oliver)"]

forEach()：

    var array = [123,"Oliver","Troy",true];
array.forEach(function(item, index, array){
    if (typeof item == "number"){
        document.write((item + 877) + "
");
    }else if (typeof item == "string"){
        document.write("This is a string: " + item + "
")
    }else{
        document.write(item + "ly")
    }
});

/*
1000
This is a string: Oliver
This is a string: Troy
truely
*/

歸并方法（ECMAScript 5 新增）

兩個(gè)方法：reduce()和reduceRight()，這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值。前者是從數(shù)組的第一項(xiàng)開(kāi)始，后者是從數(shù)組的最后一項(xiàng)開(kāi)始。他們有兩個(gè)參數(shù)：一個(gè)在每一項(xiàng)上調(diào)用的函數(shù)和最為歸并基礎(chǔ)的初始值。函數(shù)則包括4 個(gè)參數(shù)：前一個(gè)值（prev）、當(dāng)前值（cur）、項(xiàng)的索引（index）、數(shù)組本身（array）。如：

var numbers = [1,3,2,4,5,7,6];
var result = numbers.reduce(function(prev, cur, index, array){
    return prev + cur;
});
console.log(result); //28

又如：

var array = [321,false,"Oliver",21];
var newArray = array.reduce(function(prev, cur, index, array){
    return prev + cur;
});
console.log(newArray); //321Oliver21
newArray = array.reduceRight(function(prev, cur, index, array){
    return prev + cur;
});
console.log(newArray); //21Oliverfalse321 這里出現(xiàn)了false 是因?yàn)? 操作符的原因
console.log(21+"oliver"+false+321); //false 被轉(zhuǎn)換成字符串
console.log(321+false+"oliver"+21); //false 被轉(zhuǎn)換成數(shù)值
console.log(321+(false+"oliver"+21)); //false 被轉(zhuǎn)換字符串，括號(hào)的原因

（今天內(nèi)容還真是有點(diǎn)多，看007去了，回來(lái)再?gòu)?fù)習(xí)）

GPU云服務(wù)器云服務(wù)器數(shù)組Array類(lèi)型引用類(lèi)型的變量 js引用類(lèi)型的存儲(chǔ) js引用的數(shù)據(jù)類(lèi)型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86198.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AlphaWatch

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

繼電器的工作原理

閱讀 2480·2021-11-16 11:44
嵌入式系統(tǒng)基礎(chǔ)知識(shí)總結(jié)

閱讀 2019·2021-10-12 10:12
云主機(jī)怎么連接-云主機(jī)怎么使用？

閱讀 2309·2021-09-22 15:22
racknerd，便宜vps補(bǔ)貨，$9.49/年，1核/768M內(nèi)存/12G SSD/2T流量/1G

閱讀 3076·2021-08-11 11:17
前端每日實(shí)戰(zhàn)：150# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)集體舞動(dòng)畫(huà)

閱讀 1574·2019-08-29 16:53
帶你徹底了解CSS浮動(dòng)（文字整理版）

閱讀 2718·2019-08-29 14:09
js插件講解_javascript原生日歷插件講解

閱讀 3536·2019-08-29 14:03
說(shuō)說(shuō)動(dòng)畫(huà)卡頓的解決方案

閱讀 3409·2019-08-29 11:09

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript引用類(lèi)型——“Array類(lèi)型”的注意要點(diǎn)

相關(guān)文章

***Javascript變量的注意要點(diǎn)***

***Javascript引用類(lèi)型——“Object類(lèi)型”的注意要點(diǎn)***

***JavaScript引用類(lèi)型——“單體內(nèi)置對(duì)象”的注意要點(diǎn)***

***JavaScript* 代碼優(yōu)化和部署——“可維護(hù)性”的注意*要點(diǎn)***

***JavaScript引用類(lèi)型——“Date類(lèi)型”的注意要點(diǎn)***

發(fā)表評(píng)論

0條評(píng)論

AlphaWatch

男|高級(jí)講師

TA的文章

繼電器的工作原理

嵌入式系統(tǒng)基礎(chǔ)知識(shí)總結(jié)

云主機(jī)怎么連接-云主機(jī)怎么使用？

racknerd，便宜vps補(bǔ)貨，$9.49/年，1核/768M內(nèi)存/12G SSD/2T流量/1G

前端每日實(shí)戰(zhàn)：150# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)集體舞動(dòng)畫(huà)

帶你徹底了解CSS浮動(dòng)（文字整理版）

js插件講解_javascript原生日歷插件講解

說(shuō)說(shuō)動(dòng)畫(huà)卡頓的解決方案

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript引用類(lèi)型——“Array類(lèi)型”的注意要點(diǎn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！