1. 程式人生 > >JavaScript引用型別Array例項分析

JavaScript引用型別Array例項分析

1、ECMAScript陣列的特點

  • ECMAScript陣列的每一項可以儲存任何型別的資料。

  • ECMAScript陣列的大小是可以動態調整的。

2、建立陣列

(1)使用Array建構函式(new操作符可省略)

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

(2)使用陣列字面量表示法

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

3、length屬性

ECMAScript陣列的length屬性不是隻讀的,通過設定這個屬性可以從陣列末尾移除項或向陣列中新增新項。

eg1:從陣列末尾移除項

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

eg2:如果將length設定為大於當前陣列長度的值,則新增的每一項都會取得undefined值

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

eg3:向陣列中新增新項

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

eg4:當一個值放在超出當前陣列大小的位置上時,陣列會重新計算其長度值,等於最後一項的索引加一。

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

4、檢測陣列

(1)instanceof操作符

if (value instanceof Array) {
  ...
}

問題:若網頁中包含多個框架,則實際上存在兩個以上不同的全域性執行環境,從而存在兩個以上不同版本的Array建構函式。若從一個框架向另一個框架傳入一個數組,那麼傳入的陣列在與第二個框架中原生建立的陣列分別具有各自不同的建構函式。

(2)Array.isArray()方法

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

用途:確定給定值是否是陣列,無論它是在哪個全域性執行環境中建立的。

5、轉換方法

(1)toString():返回每一項的字串形式拼接而成的一個以逗號分隔的字串,為了取得每一項的值,呼叫的是每一項的toString()方法。

(2)valueOf():返回的還是陣列

(3)toLocaleString():為了取得每一項的值,呼叫的是每一項的toLocaleString()方法,而不是toString()方法。

(4)join():使用指定的分隔符來構建字串

說明:alert()方法要接收字串引數,所以它會在後臺呼叫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";
  }//前端全棧開發交流圈:866109386
}//幫助1-3年前端人員,突破技術瓶頸,提升思維能力
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():接收任意數量的引數,逐個新增到末尾,返回修改後陣列的長度。

(2)pop():從陣列末尾移除最後一項,陣列的長度減一,返回移除的項。

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、佇列方法

(1)shift():移除陣列的第一項,陣列的長度減一,返回移除的項。

(2)unshift():在陣列前端新增任意數量的項,返回修改後陣列的長度。

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():翻轉陣列項的順序

(2)sort():按升序排列陣列項

sort()方法會呼叫每項的toString()方法,然後比較得到的字串。

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

sort()方法可以接收一個比較函式作為引數:比較函式接收兩個引數,若第一個引數應該位於第二個引數之前則返回一個負數;若兩個引數相等則返回0;若第一個引數應該位於第二個引數之後則返回一個正數。

function compare(item1, item2) {
  if (item1 < item2)
    return -1;
  else if (item1 > item2)
    return 1;
  else
    return 0;//前端全棧學習交流圈:866109386
}//幫助1-3年前端人員,突破技術瓶頸,提升思維能力。
var items=[0,1,3,15,18];
items.sort(compare);
alert(items);//0,1,3,15,18

對於數值型別或其valueOf()方法會返回數值型別的物件型別,可以簡寫比較函式。

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

9、操作方法

(1)concat():基於當前陣列中的所有項建立一個新陣列。先建立當前陣列的一個副本,然後將接收到的引數新增到這個副本的末尾,最後返回新構建的陣列。若沒有給concat()傳遞引數,則只是複製當前陣列並返回副本;若傳遞給concat()的是一或多個數組,則該方法會將這些陣列中的每一項都新增到結果陣列;若傳遞給concat()的不是陣列,則這些值都簡單地新增到結果陣列的末尾。

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

(2)slice():基於當前陣列的一或多項建立一個新陣列。接收一或兩個引數,即要返回項的開始和結束位置(不包括結束位置)。slice()方法不會影響原始陣列。若引數中有負數,則用陣列長度加上該負數來確定相應的位置。若結束位置小於開始位置,則返回空陣列。

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

splice():主要用途是向陣列的中部插入項,返回一個包含從原始陣列中刪除的項的陣列,若沒有刪除任何項,則返回空陣列。使用方式有3種:

1)刪除:可以刪除任意數量的項,只需指定2個引數:要刪除的第一項的位置和要刪除的項數。

2)插入:可以向指定位置插入任意數量的項,只需指定3個引數:起始位置、要刪除的項數和要插入任意數量的項。

3)替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個引數:起始位置、要刪除的項數和要插入任意數量的項。插入的項數不必和刪除的項數相等。

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():接收兩個引數——要查詢的項和可選的查詢起點位置的索引,從開頭開始查詢,沒找到則返回-1。

(2)lastIndexOf():接收兩個引數——要查詢的項和可選的查詢起點位置的索引,從末尾開始查詢,沒找到則返回-1。

在比較第一個引數與陣列中的每一項時,會使用全等操作符,也就是要求查詢的項必須嚴格相等。

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

11、迭代方法

ECMAScript陣列有5個迭代方法。每個方法接收兩個引數——要在每一項上執行的函式和可選的執行該函式的作用域物件(影響this的值)。傳入的函式接收三個引數——陣列項的值、該項在陣列中的位置和陣列物件本身。

(1)every():對陣列中的每一項執行給定函式,若該函式對每一項都返回true,則返回true。

(2)some():對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列。

(3)filter():對陣列中的每一項執行給定函式,若該函式對每一項都返回true,則返回true。

(4)foreach():對陣列中的每一項執行給定函式,無返回值。

(5)`map()``:對陣列中的每一項執行給定函式,若該函式對每一項都返回true,則返回true。

var nums = [1,2,3,4,1,2,3];
var every = nums.every(function(item, index, array) {
  return (item > 2);  //  前端全棧學習交流圈:866109386
});//幫助1-3年經驗前端人員,突破技術瓶頸,提升思維能力
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、歸併方法

迭代陣列的所有項,然後構建一個最終返回的值。接收兩個引數——一個在每一項上呼叫的函式和可選的作為歸併基礎的值。傳入的函式接收四個引數——前一個值、當前值、項的索引和陣列物件。函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上,因此第一個引數是陣列的第一項,第二個引數是陣列的第二項。

(1)reduce():從陣列的第一項開始,逐個遍歷到最後。

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

(2)reduceRight():接收兩個引數——一個在每一項上呼叫的函式和可選的作為歸併基礎的值。從陣列的最後一項開始,向前遍歷到第一項。

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