JavaScript引用類型Array的示例分析

小編給大家分享一下JavaScript引用類型Array的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

1、ECMAScript數(shù)組的特點(diǎn)

（1）ECMAScript數(shù)組的每一項(xiàng)可以保存任何類型的數(shù)據(jù)。

（2）ECMAScript數(shù)組的大小是可以動(dòng)態(tài)調(diào)整的。

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

（1）使用Array構(gòu)造函數(shù)（new操作符可省略）

var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("teacher", 3, true);

（2）使用數(shù)組字面量表示法

var arr1 = [];
var arr2 = ["teacher", 3, true];

3、length屬性

ECMAScript數(shù)組的length屬性不是只讀的，通過(guò)設(shè)置這個(gè)屬性可以從數(shù)組末尾移除項(xiàng)或向數(shù)組中添加新項(xiàng)。

eg1：從數(shù)組末尾移除項(xiàng)

var arr = ["teacher", 3, true];
arr.length = 1;
alert(arr[2]);//undefined

eg2：如果將length設(shè)置為大于當(dāng)前數(shù)組長(zhǎng)度的值，則新增的每一項(xiàng)都會(huì)取得undefined值

var arr = ["teacher", 3, true];
arr.length = 4;
alert(arr[3]);//undefined

eg3：向數(shù)組中添加新項(xiàng)

var arr = ["teacher", 3, true];
arr[arr.length] = "doctor";

eg4：當(dāng)一個(gè)值放在超出當(dāng)前數(shù)組大小的位置上時(shí)，數(shù)組會(huì)重新計(jì)算其長(zhǎng)度值，等于最后一項(xiàng)的索引加一。

var arr = ["teacher", 3, true];
arr[9] = "doctor";
alert(arr.length);//10

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

（1）instanceof操作符

if (value instanceof Array) {
  ...
}

適用范圍：一個(gè)網(wǎng)頁(yè)或一個(gè)全局作用域

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

（2）Array.isArray()方法

if (Array.isArray(value)) {
  ...
}

用途：確定給定值是否是數(shù)組，無(wú)論它是在哪個(gè)全局執(zhí)行環(huán)境中創(chuàng)建的。

5、轉(zhuǎn)換方法

（1）toString()：返回每一項(xiàng)的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串，為了取得每一項(xiàng)的值，調(diào)用的是每一項(xiàng)的toString()方法。

（2）valueOf()：返回的還是數(shù)組

（3）toLocaleString()：為了取得每一項(xiàng)的值，調(diào)用的是每一項(xiàng)的toLocaleString()方法，而不是toString()方法。

（4）join()：使用指定的分隔符來(lái)構(gòu)建字符串

說(shuō)明：alert()方法要接收字符串參數(shù)，所以它會(huì)在后臺(tái)調(diào)用toString()方法。

eg1：

var friends = ["Alice","Bruce","Cindy"];
alert(friends.toString());//Alice,Bruce,Cindy
alert(friends.valueOf());//Alice,Bruce,Cindy
alert(friends.toLocaleString());//Alice,Bruce,Cindy
alert(friends);//Alice,Bruce,Cindy
alert(friends.join());//Alice,Bruce,Cindy
alert(friends.join("|"));//Alice|Bruce|Cindy

eg2：

var person1 = {
  toLocaleString: function() {
    return "Alice";
  },
  toString: function() {
    return "Bruce";
  }
}
var person2 = {
  toLocaleString: function() {
    return "Cindy";
  },
  toString: function() {
    return "David";
  }
}
var person = [person1, person2];
alert(person);//Alice,Bruce
alert(person.toString());//Alice,Bruce
alert(person.toLocaleString());//Cindy,David

6、棧方法

（1）push()：接收任意數(shù)量的參數(shù)，逐個(gè)添加到末尾，返回修改后數(shù)組的長(zhǎng)度。

（2）pop()：從數(shù)組末尾移除最后一項(xiàng)，數(shù)組的長(zhǎng)度減一，返回移除的項(xiàng)。

var friends = new Array();
var len = friends.push("Alice","Bruce");
alert(len);//2
var friend = friends.pop();
alert(friend );//"Bruce"
alert(friends.length);//1

7、隊(duì)列方法

（1）shift()：移除數(shù)組的第一項(xiàng)，數(shù)組的長(zhǎng)度減一，返回移除的項(xiàng)。

（2）unshift()：在數(shù)組前端添加任意數(shù)量的項(xiàng)，返回修改后數(shù)組的長(zhǎng)度。

var friends = new Array();
var len = friends.unshift("Alice","Bruce");
alert(len);//2
var friend = friends.shift();
alert(friend );//"Alice"
alert(friends.length);//1

8、重排序方法

（1）reverse()：翻轉(zhuǎn)數(shù)組項(xiàng)的順序

（2）sort()：按升序排列數(shù)組項(xiàng)

sort()方法會(huì)調(diào)用每項(xiàng)的toString()方法，然后比較得到的字符串。

var items=[0,1,3,15,18];
items.sort();
alert(items);//0,1,15,18,3

sort()方法可以接收一個(gè)比較函數(shù)作為參數(shù)：比較函數(shù)接收兩個(gè)參數(shù)，若第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之前則返回一個(gè)負(fù)數(shù)；若兩個(gè)參數(shù)相等則返回0；若第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之后則返回一個(gè)正數(shù)。

function compare(item1, item2) {
  if (item1 < item2)
    return -1;
  else if (item1 > item2)
    return 1;
  else
    return 0;
}
var items=[0,1,3,15,18];
items.sort(compare);
alert(items);//0,1,3,15,18

對(duì)于數(shù)值類型或其valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型，可以簡(jiǎn)寫(xiě)比較函數(shù)。

function compare(item1, item2) {
  return item1 - item2;
}

9、操作方法

（1）concat()：基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組。先創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組。若沒(méi)有給concat()傳遞參數(shù)，則只是復(fù)制當(dāng)前數(shù)組并返回副本；若傳遞給concat()的是一或多個(gè)數(shù)組，則該方法會(huì)將這些數(shù)組中的每一項(xiàng)都添加到結(jié)果數(shù)組；若傳遞給concat()的不是數(shù)組，則這些值都簡(jiǎn)單地添加到結(jié)果數(shù)組的末尾。

var friends = ["Alice", "Bruce"];
var newFriends = friends.concat("Cindy", ["David", "Emy"]);
alert(newFriends);//Alice,Bruce,Cindy,David,Emy

（2）slice()：基于當(dāng)前數(shù)組的一或多項(xiàng)創(chuàng)建一個(gè)新數(shù)組。接收一或兩個(gè)參數(shù)，即要返回項(xiàng)的開(kāi)始和結(jié)束位置（不包括結(jié)束位置）。slice()方法不會(huì)影響原始數(shù)組。若參數(shù)中有負(fù)數(shù)，則用數(shù)組長(zhǎng)度加上該負(fù)數(shù)來(lái)確定相應(yīng)的位置。若結(jié)束位置小于開(kāi)始位置，則返回空數(shù)組。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.slice(1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 2);
alert(friends2);//Bruce

（3）splice()：主要用途是向數(shù)組的中部插入項(xiàng)，返回一個(gè)包含從原始數(shù)組中刪除的項(xiàng)的數(shù)組，若沒(méi)有刪除任何項(xiàng)，則返回空數(shù)組。使用方式有3種：

1）刪除：可以刪除任意數(shù)量的項(xiàng)，只需指定2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。

2）插入：可以向指定位置插入任意數(shù)量的項(xiàng)，只需指定3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入任意數(shù)量的項(xiàng)。

3）替換：可以向指定位置插入任意數(shù)量的項(xiàng)，且同時(shí)刪除任意數(shù)量的項(xiàng)，只需指定3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入任意數(shù)量的項(xiàng)。插入的項(xiàng)數(shù)不必和刪除的項(xiàng)數(shù)相等。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.splice(0, 1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 0, "David", "Emy");
alert(friends2);//Bruce,David,Emy,Cindy
var friends3 = friends.slice(1, 1, "Fancy", "Gary");
alert(friends3);//Bruce,Fancy,Gary,Emy,Cindy

10、位置方法

（1）indexOf()：接收兩個(gè)參數(shù)——要查找的項(xiàng)和可選的查找起點(diǎn)位置的索引，從開(kāi)頭開(kāi)始查找，沒(méi)找到則返回-1。

（2）lastIndexOf()：接收兩個(gè)參數(shù)——要查找的項(xiàng)和可選的查找起點(diǎn)位置的索引，從末尾開(kāi)始查找，沒(méi)找到則返回-1。

在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會(huì)使用全等操作符，也就是要求查找的項(xiàng)必須嚴(yán)格相等。

var person = {name : "Alice"};
var people1 = [{name : "Alice"}, person];
alert(people1.indexOf(person));//1，不是0

11、迭代方法

ECMAScript數(shù)組有5個(gè)迭代方法。每個(gè)方法接收兩個(gè)參數(shù)——要在每一項(xiàng)上運(yùn)行的函數(shù)和可選的運(yùn)行該函數(shù)的作用域?qū)ο螅ㄓ绊憈his的值）。傳入的函數(shù)接收三個(gè)參數(shù)——數(shù)組項(xiàng)的值、該項(xiàng)在數(shù)組中的位置和數(shù)組對(duì)象本身。

（1）every()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，若該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true。

（2）some()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組。

（3）filter()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，若該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true。

（4）foreach()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，無(wú)返回值。

（5）map()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，若該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true。

var nums = [1,2,3,4,1,2,3];
var every = nums.every(function(item, index, array) {
  return (item > 2);
});
alert(every);//false
var some = nums.some(function(item, index, array) {
  return (item > 2);
});
alert(some);//true
var filter = nums.filter(function(item, index, array) {
  return (item > 2);
});
alert(filter);//[3,4,3]
var map = nums.map(function(item, index, array) {
  return (item * 2);
});
alert(map);//[2,4,6,8,2,4,6]
nums.foreach(function(item, index, array) {
  ...
});

12、歸并方法

迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值。接收兩個(gè)參數(shù)——一個(gè)在每一項(xiàng)上調(diào)用的函數(shù)和可選的作為歸并基礎(chǔ)的值。傳入的函數(shù)接收四個(gè)參數(shù)——前一個(gè)值、當(dāng)前值、項(xiàng)的索引和數(shù)組對(duì)象。函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)。第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上，因此第一個(gè)參數(shù)是數(shù)組的第一項(xiàng)，第二個(gè)參數(shù)是數(shù)組的第二項(xiàng)。

（1）reduce()：從數(shù)組的第一項(xiàng)開(kāi)始，逐個(gè)遍歷到最后。

var items = [1,2,3,4];
var sum = items.reduce(function(prev, cur, index, array) {
  return prev + cur;
});
alert(sum);//10

（2）reduceRight()：接收兩個(gè)參數(shù)——一個(gè)在每一項(xiàng)上調(diào)用的函數(shù)和可選的作為歸并基礎(chǔ)的值。從數(shù)組的最后一項(xiàng)開(kāi)始，向前遍歷到第一項(xiàng)。

var items = [1,2,3,4];
var sum = items.reduceRight(function(prev, cur, index, array) {
  return prev + cur;
});
alert(sum);//10

以上是“JavaScript引用類型Array的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！