javascript引用類型之Array 類型

lsxiao 發(fā)布于2019-08-23 14:25 / 450人閱讀

摘要：如果你從一個框架向另一個框架傳入一個數(shù)組，那么傳入的數(shù)組與在第二個框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)。

數(shù)組在javascript中是很常用的數(shù)據(jù)類型

創(chuàng)建數(shù)組的幾種方式

使用new操作符來創(chuàng)建數(shù)組

var arr = new Array() // []創(chuàng)建了一個長度為0的空數(shù)組
var arr1 = new Array(2) // [empty × 2]創(chuàng)建了一個長度為2的空數(shù)組
var arr2 = new Array("a", "b", "c") // ["a", "b", "c"]創(chuàng)建了一個長度為3的數(shù)組 
##new操作符是可以省略的## 
var arr = Array()

使用數(shù)組字面【數(shù)組字面量由一對包含數(shù)組項的方括號表示，多個數(shù)組項之間以逗號隔開】表示法來創(chuàng)建數(shù)組

var arr = ["a", "b", "c"] // ["a", "b", "c"]
var arr1 = [] // []

讀取和設(shè)置數(shù)組的值【要使用方括號并提供相應(yīng)值的基于 0 的數(shù)字索引】

console.log(arr[0]) // 讀取arr數(shù)組的第1項的值，值為a
arr[1] = "b1" // 修改arr數(shù)組的第2項的值為b1
arr[3] = "d" // 給arr數(shù)組新增第4項，值為d

數(shù)組的length屬性，返回數(shù)組的項數(shù)。通過設(shè)置這個屬性，可以從數(shù)組的末尾移除項或向數(shù)組中添加新項

console.log(arr.length) // 4
console.log(arr) // ["a", "b1", "c", "d"]
arr.length = 3
console.log(arr) // ["a", "b1", "c"]
arr.length = 4
console.log(arr) // ["a", "b1", "c", empty]
console.log(arr[3]) // undefined 因為這個數(shù)組不存在位置3
arr[arr.length] = "d" // 利用 length 屬性也可以方便地在數(shù)組末尾添加新項
console.log(arr) // ["a", "b1", "c", empty, "d"]
arr[99] = "unknown"
console.log(arr) // ["a", "b", "c", empty, "d", empty × 94, "unknown"]

檢測數(shù)組確定某個對象是不是數(shù)組

對于一個網(wǎng)頁，或者【一個全局作用域】而言，使用 instanceof 操作符就能得到滿意的結(jié)果

if (arr instanceof Array) {
  console.log("abc")
}

如果網(wǎng)頁中包含多個框架【如有多個iframe】，那實際上就存在兩個以上不同的全局執(zhí)行環(huán)境，從而存在兩個以上不同版本的 Array
構(gòu)造函數(shù)。如果你從一個框架向另一個框架傳入一個數(shù)組，那么傳入的數(shù)組與在第二個框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)。這種情況下就需要使用Array.isArray()方法。這個方法的目的是最終確定某個值到底是不是數(shù)組，而不管它是在哪個全局執(zhí)行環(huán)境中創(chuàng)建的

var iframe = document.createElement("iframe");
document.body.appendChild(iframe) // 產(chǎn)生第二個全局執(zhí)行環(huán)境
xArray = window.frames[window.frames.length-1].Array; // 第二個全局執(zhí)行環(huán)境的構(gòu)造函數(shù) ? Array() { [native code] }
Array; // 第一個全局環(huán)境中的構(gòu)造函數(shù)? Array() { [native code] }
window.frames[0].Array === Array; // false

var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false
Array.isArray(arr); // true

轉(zhuǎn)換方法

所有對象都具有 toLocaleString()、toString()和 valueOf()方法 toLocaleString()方法;
數(shù)組的 toString()方法會返回由數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串;
valueOf()返回的還是數(shù)組;
由于 alert()要接收字符串參數(shù)，所以它會在后臺調(diào)用 toString()方法，由此會得到與直接調(diào)用 toString()方法相同的結(jié)果;
toLocaleString()方法


```
var arr = ["a", "b", "c"];
console.log(arr.toString()); // a,b,c
alert(arr.toString()); // a,b,c
console.log(arr.valueOf()); // ["a", "b", "c"]
alert(arr.valueOf()); // a,b,c
console.log(arr); // ["a", "b", "c"]
alert(arr); // a,b,c 
```

join()方法，則可以使用不同的分隔符來構(gòu)建這個字符串

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

var arr = ["a", "b", "c"]
arr.join(","); // "a,b,c"
arr.join(); // "a,b,c" 不傳參數(shù)會默認(rèn)以,分割
arr.join("||"); // "a||b||c"

棧方法

ECMAScript 數(shù)組也提供了一種讓數(shù)組的行為類似于其他數(shù)據(jù)結(jié)構(gòu)的方法。具體說來，數(shù)組可以表現(xiàn)得就像棧一樣，后者是一種可以限制插入和刪除項的數(shù)據(jù)結(jié)構(gòu)。棧是一種 LIFO（Last-In-First-Out，后進(jìn)先出）的數(shù)據(jù)結(jié)構(gòu)，也就是最新添加的項最早被移除。而棧中項的插入（叫做推入）和移除（叫做彈出），只發(fā)生在一個位置——棧的頂部。ECMAScript 為數(shù)組專門提供了 push()和 pop()方法，以便實現(xiàn)類似棧的行為。

```
var arr = []
arr.push("a", "b"); // 返回修改后數(shù)組的長度  2
arr.push("c"); // 返回修改后數(shù)組的長度  3
arr.pop(); // 返回移除的數(shù)組的最后一項 "c"
arr.length; // 2
```

隊列方法

棧數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是 LIFO（后進(jìn)先出），而隊列數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是 FIFO（First-In-First-Out，先進(jìn)先出）。隊列在列表的末端添加項，從列表的前端移除項。由于 push()是向數(shù)組末端添加項的方法，因此要模擬隊列只需一個從數(shù)組前端取得項的方法。實現(xiàn)這一操作的數(shù)組方法就是 shift()，它能夠移除數(shù)組中的第一個項并返回該項，同時將數(shù)組長度減 1。結(jié)合使用 shift()和 push()方法，可以像使用隊列一樣使用數(shù)組。

var arr = ["a", "b", "c"]
arr.push("d", "e"); // 返回數(shù)組的長度5
arr.shift(); // 返回數(shù)組的第一項，并將數(shù)組長度減1 "a"
arr.length; // 4

ECMAScript 還為數(shù)組提供了一個 unshift()方法。顧名思義，unshift()與 shift()的用途相反：它能在數(shù)組前端添加任意個項并返回新數(shù)組的長度。因此，同時使用 unshift()和 pop()方法，可以從相反的方向來模擬隊列，即在數(shù)組的前端添加項，從數(shù)組末端移除項

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

重排序方法

數(shù)組中已經(jīng)存在兩個可以直接用來重排序的方法：reverse()和 sort()

var arr = [1, 2, 3]
arr.reverse(); // [3, 2, 1]
console.log(arr) // reverse()方法會改變原數(shù)組?[3, 2, 1]

sort()方法

sort()方法按升序排列數(shù)組項——即最小的值位于最前面，最大的值排在最后面。為了實現(xiàn)排序，sort()方法會調(diào)用每個數(shù)組項的 toString()轉(zhuǎn)型方法，然后比較得到的字符串，以確定如何排序。即使數(shù)組中的每一項都是數(shù)值，sort()方法比較的也是字符串。

var arr = [0, 1, 5, 10, 15]
arr.sort(); // [0, 1, 10, 15, 5]

這里有一個疑問？不是說sort()方法是按升序排列數(shù)組項么，怎么得到的結(jié)果不是我們想要的結(jié)果呢？？？？因為數(shù)值 5 雖然小于 10，但在進(jìn)行字符串比較時，"10"則位于"5"的前面，于是數(shù)組的順序就被修改了。
為了解決這個問題。因此 sort()方法可以接收一個比較函數(shù)作為參數(shù)，以便我們指定哪個值位于哪個值的前面。比較函數(shù)接收兩個參數(shù)

// 數(shù)組項升序排列
function compare(value1, value2) { 
 if (value1 < value2) { 
 return -1; 
 } else if (value1 > value2) { 
 return 1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]
values.sort(compare); // [0, 1, 5, 10, 15]
// 數(shù)組項降序排列，只要交換比較函數(shù)返回的值即可
function compare(value1, value2) { 
 if (value1 < value2) { 
 return 1; 
 } else if (value1 > value2) { 
 return -1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]; 
values.sort(compare); // 15,10,5,1,0

對于數(shù)值類型或者其 valueOf()方法會返回數(shù)值類型的對象類型，可以使用一個更簡單的比較函數(shù)。這個函數(shù)只要用第二個值減第一個值即可。

function compare(value1, value2){ 
 return value2 - value1; 
}
var arr = [0, 5,10 ,2,3]
arr.sort(compare); // [10, 5, 3, 2, 0]
var arr = ["0", "5","10" ,"2","3"]
arr.sort(compare); // ?["10", "5", "3", "2", "0"]

對象數(shù)組進(jìn)行排序

function fuc(perpertyName)  {
  return function (object1, object2) {
    var value1 = object1[perpertyName]
    var value2 = object2[perpertyName]
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
}
let arr = [{id: 1, name: 2}, {id: 4, name: 1}, {id: 2, name: 3}]
let newArr = arr.sort(fuc("name"))
console.log(newArr)

操作方法

concat()方法
concat()會返回一個新數(shù)組，concat()不會改變原數(shù)組,

var arr = ["a", "b", "c"]
var arr0 = arr.concat(); // 這里concat不傳參數(shù)，它只是復(fù)制當(dāng)前數(shù)組并返回副本
console.log(arr === arr0); // false
arr.concat("d"); // ["a", "b", "c", "d"]
console.log(arr); // ["a", "b", "c"]
var arr1 = arr.concat("d");
console.log(arr1); // ["a", "b", "c", "d"]
arr1.concat("f", "g", arr); // ["a", "b", "c", "d", "f", "g", "a", "b", "c"]

slice()方法
slice()，它能夠基于當(dāng)前數(shù)組中的一或多個項創(chuàng)建一個新數(shù)組。slice()方法可以接受一或兩個參數(shù)，即要返回項的起始和結(jié)束位置。在只有一個參數(shù)的情況下，slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項。如果有兩個參數(shù)，該方法返回起始和結(jié)束位置之間的項——但不包括結(jié)束位置的項。注意，slice()方法不會影響原始數(shù)組。

var arr = ["a", "b", "c"]
var arr1 = arr.slice(1)
console.log(arr); // ["a", "b", "c"]
console.log(arr1); // ["b", "c"]
var arr2 = arr.slice(1, 2)
console.log(arr2) // ["b"]
var arr3 = arr.slice(1, 5)
console.log(arr3) // ["b", "c"]
//如果 slice()方法的參數(shù)中有一個負(fù)數(shù)，則用數(shù)組長度加上該數(shù)來確定相應(yīng)的位置,如果結(jié)束位置小于起始位置，則返回空數(shù)組。

splice()方法
splice()方法始終都會返回一個數(shù)組，該數(shù)組中包含從原始數(shù)組中刪除的項（如果沒有刪除任何項，則返回一個空數(shù)組） splice()方法會改變原數(shù)組

// 刪除 可以刪除任意數(shù)量的項，只需指定 2 個參數(shù)：要刪除的第一項的位置和要刪除的項數(shù)
var arr = ["a", "b", "c"]
arr.splice(0, 2); // 返回刪除的項組成的數(shù)組["a", "b"]
console.log(arr) // ["c"] 此處看到原數(shù)組已經(jīng) 被改變了
// 插入 可以向指定位置插入任意數(shù)量的項，只需提供 3 個參數(shù)：起始位置、0（要刪除的項數(shù)）和要插入的項。如果要插入多個項，可以再傳入第四、第五，以至任意多個項
var arr = ["a", "b", "c"]
arr.splice(1, 0 , "a1", "a2", "a3") // []
console.log(arr) // ["a", "a1", "a2", "a3", "b", "c"]
// 替換 可以向指定位置插入任意數(shù)量的項，且同時刪除任意數(shù)量的項，只需指定 3 個參數(shù)：起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項。插入的項數(shù)不必與刪除的項數(shù)相等。
var arr = ["a", "b", "c"]
arr.splice(1, 2, "b1", "c1") // ["b", "c"]
console.log(arr); //?["a", "b1", "c1"]

位置方法

indexOf()和 lastIndexOf()。這兩個方法都接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引。這兩個方法都返回要查找的項在數(shù)組中的位置，或者在沒找到的情況下返回-1

indexOf()方法從數(shù)組的開頭（位置 0）開始向后查找,indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.indexOf(4) // 4在Numbers數(shù)組的3位置
numbers.indexOf(4, 4) // 返回5 ，查找4在numbers數(shù)組中首次出現(xiàn)的位置，查找的起點位置是4
var person = { name: "Nicholas" }; 
var people = [{ name: "Nicholas" }]; 
var morePeople = [person];
console.log(people.indexOf(person)); // -1
console.log(morePeople.indexOf(person)); // 0

lastIndexOf()方法則從數(shù)組的末尾開始向前查找,lastIndexOf() 方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.lastIndexOf(4); // 5
numbers.lastIndexOf(4, 4) // 返回3 ，查找4在numbers數(shù)組中最后一次出現(xiàn)的位置，查找的起點位置是4，從后向前找

迭代方法

every()方法、some()方法、filter()方法、forEach()方法、map()方法。以上方法都不會修改數(shù)組中的包含的值

every()方法對數(shù)組中的每一項運(yùn)行給定函數(shù)，如果該函數(shù)對每一項都返回 true，則返回 true

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
});
console.log(everyResult) // false

some()方法對數(shù)組中的每一項運(yùn)行給定函數(shù)，如果該函數(shù)對任一項返回 true，則返回 true

var numbers = [1,2,3,4,5,4,3,2,1]; 
var someResult = numbers.some(function(item, index, array){ 
 return (item > 2); 
});
console.log(someResult) // true

filter()方法對數(shù)組中的每一項運(yùn)行給定函數(shù)，返回該函數(shù)會返回 true 的項組成的數(shù)組

var numbers = [1,2,3,4,5,4,3,2,1]; 
var filterResult = numbers.filter(function(item, index, array){ 
 return (item > 2); 
});
console.log(filterResult) // [3, 4, 5, 4, 3]

map()方法對數(shù)組中的每一項運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){ 
 return item * 2; 
});
console.log(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

forEach()方法對數(shù)組中的每一項運(yùn)行給定函數(shù)。這個方法沒有返回值，本質(zhì)上與使用 for 循環(huán)迭代數(shù)組一樣

var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){ 
 //執(zhí)行某些操作 
});

歸并方法

這兩個方法都會迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。其中，reduce()方法從數(shù)組的第一項開始，逐個遍歷到最后。而 reduceRight()則從數(shù)組的最后一項開始，向前遍歷到第一項。這兩個方法都接收兩個參數(shù)：一個在每一項上調(diào)用的函數(shù)和（可選的）作為歸并基礎(chǔ)的初始值,傳給reduce()和reduceRight()的函數(shù)接收 4 個參數(shù)：前一個值、當(dāng)前值、項的索引和數(shù)組對象。這個函數(shù)返回的任何值都會作為第一個參數(shù)自動傳給下一項。第一次迭代發(fā)生在數(shù)組的第二項上，因此第一個參數(shù)是數(shù)組的第一項，第二個參數(shù)就是數(shù)組的第二項

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum) // 15 
var sum1 = values.reduceRight(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum1) // 15