你不知道的數(shù)組

beita 發(fā)布于2019-08-26 11:55 / 2794人閱讀

摘要：數(shù)組定義數(shù)組是按次序排列的一組值每個(gè)值都有編號(hào)，從開始可以在定義時(shí)賦值，也可以先定義后賦值任何類型的數(shù)據(jù)都可以存入數(shù)組數(shù)組的本質(zhì)本質(zhì)上，數(shù)組屬于一種特殊的對(duì)象，它的鍵名是按次序排列的一組整數(shù)數(shù)組成員的鍵名是固定的，因此不用為每個(gè)元素指定鍵名

數(shù)組定義

數(shù)組是按次序排列的一組值

每個(gè)值都有編號(hào)，從0開始

可以在定義時(shí)賦值，也可以先定義后賦值

任何類型的數(shù)據(jù)都可以存入數(shù)組

       
   const arr = [
       {a: 1},
       [1, 2, 3],
       function(){}
   ];

數(shù)組的本質(zhì)

本質(zhì)上，數(shù)組屬于一種特殊的對(duì)象，它的鍵名是按次序排列的一組整數(shù)（0,1,2...）

typeof [1, 2, 3] //"object"

數(shù)組成員的鍵名是固定的，因此不用為每個(gè)元素指定鍵名，而對(duì)象的每個(gè)成員都必須指定鍵名

const arr = ["a", "b", "c"];
Object.keys(arr) //["0", "1", "2"]

JavaScript語言規(guī)定，對(duì)象的鍵名一律為字符串

const arr=["a", "b", "c"];
arr["0"] //"a"
arr[0] //"a"

之所以可以用數(shù)值讀取，是因?yàn)榉亲址逆I名會(huì)被轉(zhuǎn)為字符串

注意：這一點(diǎn)在賦值時(shí)也成立！

let a = [];
a[1.00] = 6;
a[1] // 6

“1.00”轉(zhuǎn)成字符串是“1”

讀取數(shù)組成員的方法

object.key

object[key]

length屬性

該屬性是一個(gè)動(dòng)態(tài)的值，等于鍵名中的最大整數(shù)加1

該屬性是可寫的，如果人為設(shè)置一個(gè)小于當(dāng)前成員個(gè)數(shù)的值，該數(shù)組的成員就會(huì)自動(dòng)減少到length設(shè)置的值

   let arr = ["a", "b", "c"];
   arr.length // 3
   arr.length = 2;
   arr // ["a", "b"]

如果人為設(shè)置一個(gè)大于當(dāng)前成員個(gè)數(shù)時(shí)，新增的位置都是空位，讀取新增的位置都會(huì)返回undefined

   let arr = ["a"];
   arr.length = 3;
   arr[1] // undefined

數(shù)組本質(zhì)是一種對(duì)象，所以可以為數(shù)組添加屬性，但并不影響length屬性的值

   let arr = [];
   arr["p"] = "abc";
   arr.length // 0
   arr[2.1] = "abc";
   arr.length // 0
   arr["1"] = "a";
   arr.length // 2

in運(yùn)算符

檢查某個(gè)鍵名是否存在，適用于對(duì)象，也適用于數(shù)組

鍵名都是字符串，數(shù)值會(huì)自動(dòng)轉(zhuǎn)成字符串

   const arr = ["a", "b", "c"];
   2 in arr // true
   "2" in arr // true
   4 in arr // false

如果數(shù)組的某個(gè)位置是空位，in運(yùn)算符返回false

   let arr = [];
   arr[100] = "a";
   100 in arr // true
   1 in arr // false

for...in循環(huán)和數(shù)組的遍歷

可以遍歷對(duì)象，也可以遍歷數(shù)組（數(shù)組是一種特殊對(duì)象）

   const arr = [1, 2, 3];
   for(let i in arr) {
       console.log(arr[i]);
   }
   // 1
   // 2
   // 3

不僅會(huì)遍歷數(shù)組所有的數(shù)字鍵，還會(huì)遍歷非數(shù)字鍵

   let arr = [1, 2, 3];
   arr.foo = true;
   for(let key in arr) {
       console.log(key);
   }
   // 0
   // 1
   // 2
   // foo

數(shù)組的空位

當(dāng)數(shù)組的某個(gè)位置是空元素（兩個(gè)逗號(hào)之間沒有任何值），我們稱該數(shù)組存在空位

const a = [1, , 1];
a.length // 3

數(shù)組的空位不影響length屬性

如果最后一個(gè)元素后面有逗號(hào)，并不會(huì)產(chǎn)生空位

數(shù)組的空位是可以讀取的，返回undefined

使用delete刪除一個(gè)數(shù)組成員，會(huì)形成空位，但并不會(huì)影響length屬性

   let arr = [1, 2, 3];
   delete arr[1];
   arr[1] // undefined
   ar.length // 3

length屬性不過濾空位

如果是空位，使用數(shù)組的forEach方法、for...in結(jié)構(gòu)、Object.keys方法進(jìn)行遍歷，空位都會(huì)被跳過

const a = [, , ,];
a.forEach(function (con, key) {
    console.log(key + "." + con);
})
// 不輸出任何內(nèi)容

for(let key in a) {
    console.log(key);
}
// 不輸出任何內(nèi)容

Object.keys(a)
// []

如果是undefined，遍歷時(shí)不會(huì)被跳過

const a = [undefined, undefined, undefined];
a.forEach(function (con, key) {
    console.log(key + "." + con);
});
// 0.undefined
// 1.undefined
// 2.undefined

for(let key in a) {
    console.log(key);
}
// 0
// 1
// 2

Object.keys(a)
// ["0", "1", "2"]

也就是說，空位是數(shù)組沒有這個(gè)元素，不會(huì)被遍歷到，但是undefined表示數(shù)組有這個(gè)元素，它的值是undefined，所以會(huì)被遍歷到

map()

將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù)，然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回

let numbers = [1, 2, 3];
numbers.map(n => n+1); // [2, 3, 4]
console.log(numbers); // [1, 2, 3]

map方法接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)調(diào)用時(shí)，map方法向它傳入三個(gè)參數(shù)：當(dāng)前成員、當(dāng)前位置、數(shù)組本身

[1, 2, 3].map((elem, index, arr) => elem * index );
// [0, 2, 6]

map還可以接受第二個(gè)參數(shù)，用來綁定回調(diào)函數(shù)內(nèi)部的this變量

const arr = ["a", "b", "c"];
[1, 2].map(function(e) {
    return this[e];
}, arr);
// ["b", "c"]

如果數(shù)組有空位，map方法的回調(diào)函數(shù)在這個(gè)位置不會(huì)執(zhí)行，會(huì)跳過數(shù)組的空位，但是不會(huì)跳過undefined和null

let f = (n) => "a";
[1, undefined, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]

forEach()

對(duì)數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)，但是不返回值，只用來操作數(shù)據(jù)forEach的用法與map方法一致，參數(shù)是一個(gè)函數(shù)，該函數(shù)同樣接受三個(gè)參數(shù)：當(dāng)前值、當(dāng)前位置、整個(gè)數(shù)組
forEach方法也可以接受第二個(gè)參數(shù)，綁定參數(shù)函數(shù)的this變量
forEach方法也會(huì)跳過數(shù)組的空位，但是不會(huì)跳過undefined和null

如果數(shù)組的遍歷是為了得到返回值，就使用map()，不然就使用forEach()方法

類似數(shù)組的對(duì)象

如果一個(gè)對(duì)象的所有鍵名都是正整數(shù)或零，并且有l(wèi)ength屬性，那么這個(gè)對(duì)象就很像數(shù)組，稱為“類似數(shù)組的對(duì)象”

const obj = {
    0: "a",
    1: "b",
    2: "c",
    length: 3,
}
obj[0] // "a"
obj[1] // "b"
obj.length // 3
obj.push("d") // TypeError: obj.push is not a function

類似數(shù)組的對(duì)象的根本特征是具有l(wèi)ength屬性，但是這個(gè)length屬性不是動(dòng)態(tài)值，不會(huì)隨著成員的變化而變化

let obj = {

length: 0,

};
obj[3] = "d";
obj.length // 0
obj.foo = "hhh";
obj // {3: "d", length: 0, foo: "hhh"}

類似數(shù)組的對(duì)象不具備數(shù)組特有的方法

典型的“類似數(shù)組的對(duì)象” 1、arguments對(duì)象

function args() { return arguments }
const arrayLike = args("a", "b");

arrayLike[0] // "a"
arrayLike.length // 2
arrayLike instanceof Array // false

2、大多數(shù)DOM元素集

const elts = document.getElementsByTagName("p");
elts.length // 3
elts instanceof Array // false

3、字符串

"abc"[1] // "b"
"abc".length // 3
"abc" instanceof Array // false

類數(shù)組變成真正的數(shù)組 slice方法

let arr = Array.proptotype.slice.call(arryLike);

類數(shù)組使用數(shù)組的方法 通過call()把數(shù)組的方法放到對(duì)象上

function print(value, index) {
    console.log(index + ":" + value);
}
Array.prototype.forEach.call(arrayLike, print);

// 等同于for循環(huán)
function example() {
    for(let i=0; i< arguments.length; i++) {
        console.log(i + "." + arguments[i])"
    }
}

通過call()，把forEach()方法放到arrayLike上面調(diào)用