你不知道的數組

beita 發布于2019-08-26 11:55 / 2799人閱讀

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

數組定義

數組是按次序排列的一組值

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

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

任何類型的數據都可以存入數組

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

數組的本質

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

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

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

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

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

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

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

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

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

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

讀取數組成員的方法

object.key

object[key]

length屬性

該屬性是一個動態的值，等于鍵名中的最大整數加1

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

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

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

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

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

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

in運算符

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

鍵名都是字符串，數值會自動轉成字符串

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

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

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

for...in循環和數組的遍歷

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

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

不僅會遍歷數組所有的數字鍵，還會遍歷非數字鍵

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

數組的空位

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

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

數組的空位不影響length屬性

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

數組的空位是可以讀取的，返回undefined

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

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

length屬性不過濾空位

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

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

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

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"]

也就是說，空位是數組沒有這個元素，不會被遍歷到，但是undefined表示數組有這個元素，它的值是undefined，所以會被遍歷到

map()

將數組的所有成員依次傳入參數函數，然后把每一次的執行結果組成一個新數組返回

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

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

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

map還可以接受第二個參數，用來綁定回調函數內部的this變量

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

如果數組有空位，map方法的回調函數在這個位置不會執行，會跳過數組的空位，但是不會跳過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()

對數組的所有成員依次執行參數函數，但是不返回值，只用來操作數據

forEach的用法與map方法一致，參數是一個函數，該函數同樣接受三個參數：當前值、當前位置、整個數組

forEach方法也可以接受第二個參數，綁定參數函數的this變量

forEach方法也會跳過數組的空位，但是不會跳過undefined和null

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

類似數組的對象

如果一個對象的所有鍵名都是正整數或零，并且有length屬性，那么這個對象就很像數組，稱為“類似數組的對象”

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

類似數組的對象的根本特征是具有length屬性，但是這個length屬性不是動態值，不會隨著成員的變化而變化

let obj = {

length: 0,

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

類似數組的對象不具備數組特有的方法

典型的“類似數組的對象” 1、arguments對象

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

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

2、大多數DOM元素集

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

3、字符串

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

類數組變成真正的數組 slice方法

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

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

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

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

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

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107832.html

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

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

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

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

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

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

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

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

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

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

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

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

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