你不知道的數(shù)組

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

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

數(shù)組定義

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

每個值都有編號，從0開始

可以在定義時賦值，也可以先定義后賦值

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

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

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

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

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

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

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

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

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

之所以可以用數(shù)值讀取，是因為非字符串的鍵名會被轉為字符串

注意：這一點在賦值時也成立！

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

“1.00”轉成字符串是“1”

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

object.key

object[key]

length屬性

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

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

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

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

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

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

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

in運算符

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

鍵名都是字符串，數(shù)值會自動轉成字符串

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

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

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

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

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

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

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

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

數(shù)組的空位

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

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

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

如果最后一個元素后面有逗號，并不會產(chǎn)生空位

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

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

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

length屬性不過濾空位

如果是空位，使用數(shù)組的forEach方法、for...in結構、Object.keys方法進行遍歷，空位都會被跳過

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，遍歷時不會被跳過

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ù)組沒有這個元素，不會被遍歷到，但是undefined表示數(shù)組有這個元素，它的值是undefined，所以會被遍歷到

map()

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

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

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

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

map還可以接受第二個參數(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ù)在這個位置不會執(zhí)行，會跳過數(shù)組的空位，但是不會跳過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()

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

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

類似數(shù)組的對象

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

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ù)組的對象的根本特征是具有l(wèi)ength屬性，但是這個length屬性不是動態(tài)值，不會隨著成員的變化而變化

let obj = {

length: 0,

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

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

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

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ù)組的方法放到對象上

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)用

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

轉載請注明本文地址：http://systransis.cn/yun/107832.html

你不知道的Virtual DOM（四）：key的作用

摘要：最后里面沒有第四個元素了，才會把蘋果從移除。四總結本文基于上一個版本的代碼，加入了對唯一標識的支持，很好的提高了更新數(shù)組元素的效率。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React和Vue，都不約而同的借助Virtual DOM技術提高頁面的渲染...

DirtyMind 2019-08-23 11:34 評論0 收藏0
你不知道的JavaScript

摘要：第二章值的數(shù)組不需要預設數(shù)組大小，可以直接向數(shù)組添加任何類型的值，如果形成了稀疏數(shù)組，那么未賦值的部分將會是。某些不是數(shù)組的對象，如果其有屬性，就是類數(shù)組，例如元素列表，，通常用這個將其轉化為數(shù)組，而為我們提供了一種新途徑。從名字上看可能會覺得JS應該和Java是有很緊密的聯(lián)系的吧，實際上它們是兩種完全不同的語言，JS是ECMAScript的瀏覽器規(guī)范，是一種弱類型的語言，不同于Ja...

2i18ns 2019-08-22 15:21 評論0 收藏0
你不知道的Virtual DOM（一）：Virtual Dom介紹

摘要：不同的框架對這三個屬性的命名會有點差別，但表達的意思是一致的。它們分別是標簽名屬性和子元素對象。我們先來看下頁面的更新一般會經(jīng)過幾個階段。元素有可能是數(shù)組的形式，需要將數(shù)組解構一層。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React和Vue，都不約...

lavor 2019-08-23 11:27 評論0 收藏0
js 你不知道的 Array

摘要：刪除數(shù)組的第一個元素，返回值是刪除的元素對數(shù)組中的元素進行排序添加或刪除數(shù)組中的一個或多個元素。循環(huán)迭代方法對數(shù)組中的每一個元素調(diào)用參數(shù)中指定的過濾函數(shù)，并將對于過濾函數(shù)返回值為的那些數(shù)組元素集合為新的數(shù)組返回。一、在類數(shù)組對象上復用通用的數(shù)組方法類數(shù)組有：arguments, NodeList, 字符串什么是類數(shù)組？兩個條件具有 length 屬性 length 屬性大于...

yintaolaowanzi 2019-08-21 10:40 評論0 收藏0
你不知道的JavaScript ：值

摘要：你不知道的系列第二章值值數(shù)組里面的數(shù)組可以容納任何類型的值。數(shù)字中，沒有真正意義上的整數(shù)，目前只有數(shù)字類型。較小的數(shù)值二進制浮點數(shù)最大的問題從數(shù)學的角度來說，此處應該是，但是二進制浮點數(shù)中與并不是十分準確，他們相加等于，所以結果為。你不知道的JavaScript系列---第二章：值值 2.1 數(shù)組 JavaScript里面的數(shù)組可以容納任何類型的值。稀疏數(shù)組（含有空白或空缺單...

0x584a 2019-08-22 17:14 評論0 收藏0
你不知道的jQuery

摘要：不要恨我這個標題黨，且看下面的分享。字符串函數(shù)數(shù)組字符串函數(shù)數(shù)組為所匹配到的表單元素賦值。函數(shù)返回值作為當前元素要設置的值。你好如果是沒有屬性的對象，則返回，否則返回，這里的屬性包括從繼承下來的屬性。說明返回的不是數(shù)組，這我們早就知道。不要恨我這個標題黨，且看下面的分享。最近做業(yè)務發(fā)現(xiàn)jquery的一些方法有其他的用法，可以幫助我解決一些問題，下面我就說說吧。大家共同進步，歡迎大家斧...

Jochen 2019-08-29 11:23 評論0 收藏0