數組集結號

準備把數組相關的方法和內容總結一下。

Array類型:數組的每一項可以保存任何類型的數據。

數組包含的屬性和方法如下:

接下來我會一一總結。

1、創建數組的基本方式有三種:

1.1、使用Array構造函數

let arr1 = new Array()    // 創建一個空數組 []
let arr2 = new Array(3)  // 創建一個長度爲3的空數組 
let arr3 = new Array('blue','green','yellow') // 創建一個['blue','green','yellow']的數組

在使用Array構造函數時,也可以不用new

let arr1 = Array()    // 創建一個空數組 []
let arr2 = Array(3)  // 創建一個長度爲3的空數組 
let arr3 = Array('blue','green','yellow') // 創建一個['blue','green','yellow']的數組

1.2、使用數組字面量表示法

let arr4 = []    // 創建一個空數組 []
let arr5 = [,,,]  // 創建一個長度爲3或者4的空數組  注:在IE8及IE8以下長度爲4,其他瀏覽器爲長度爲3
let arr6 = ['blue','green','yellow'] // 創建一個['blue','green','yellow']的數組

1.3、使用Array.of()

Array.of方法用於將一組值,轉換爲數組。

Array.of(3, 11, 8) // [3,11,8]
Array.of() // 生成一個空數組 []
Array.of(3) // [3]      對比 Array(3) 創建一個長度爲3的空數組
Array.of(3).length // 1

這個方法的主要目的,是彌補數組構造函數Array()的不足。因爲參數個數的不同,會導致Array()的行爲有差異。

2、檢測數組:

2.1、使用instanceof操作符

[1,2,3] instanceof Array // true

instanceof適用於只有一個全局執行環境,如果網頁中包含多個框架,那就存在多個執行環境,從而存在不同版本的Array的構造函數。爲了解決這個問題,ES5新增了Array.isArray()。

2.2、使用Array.isArray()

這個方法的目的是最終確定某個值到底是不是數組,而不管它是在哪個環境創建的。

Array.isArray([1,2,3])// true

2.3、使用Object.prototype.toString

這個方法能夠準確地判斷一個值的數據類型,vue中的源碼中就是用這種方法來判斷數據類型的,也是我推薦並經常使用的。

let dataType = Object.prototype.toString.call([1,2,3])// [object Array]
dataType.slice(8,-1) //  Array

// 下面是vue源碼中做數據判斷的寫法
  /**
   * Get the raw type string of a value, e.g., [object Object].  獲取值的原始類型字符串,例如[object object]。
   */
var _toString = Object.prototype.toString;

function toRawType (value) {
  return _toString.call(value).slice(8, -1)
}

3、轉換方法:

3.1、使用toString()

使用這個方法使數組轉化爲以逗號分割的字符串

[1,2,3].toString() // "1,2,3"

3.2、使用valueOf()

使用這個方法返回的還是數組本身

let array1 = [1,2,3]
array1 === array1.valueOf() // true

3.3、使用join()

使用這個方法把數組轉化爲字符串,是我們經常用到的一種方法,join(string)只接收一個參數,即用作分隔符的字符串,如果不傳值或者傳入的是undefined,則使用逗號作爲分隔符。

[1,2,3].join() // "1,2,3"
[1,2,3].join(undefined) // "1,2,3"
[1,2,3].join("||") // "1||2||3"

如果數組中有一項的值是null或者是undefined,那麼該值就在join()、toLocaleString()、toString()方法返回的結果中以空字符串表示,valueOf()還是返回自身。

[null,undefined,3].join() // ",,3"
[null,undefined,3].toString() // ",,3"
[null,undefined,3].valueOf()  // [null, undefined, 3]

4、棧方法:

棧是一種LIFO(Last-In-First-Out,後進先出)的數據結構,也就是最新添加的項最早被移除。而棧中項的插入(也叫推入)和移除(叫做彈出),只發生在一個位置----棧的頂部。數組中的push()和pop(),實現了類似棧的行爲。

4.1、push()

push()方法可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回數組的長度並且會改變數組本身

let num = new Array();
let numLength = num.push(1,2,3,4,5,6,7,8,9) // 返回的是添加之後數組的長度,並且會改變數組本神
numLength // 9
num // [1, 2, 3, 4, 5, 6, 7, 8, 9]
let animals = ['dog']
animals.push('cat','bird')
animals  // ["dog", "cat", "bird"]

4.2、pop()

pop()方法沒有參數,用於從數組末尾移除最後一項,減少數組的length值,然後返回移除的項並且會改變數組本身

let num = [1, 2, 3, 4, 5, 6];
let numItem = num.pop();
numItem // 6
num // [1, 2, 3, 4, 5]

let animals = ["dog", "cat", "bird"]
let animalsItem = animals.pop();
animalsItem // bird
animals // ["dog", "cat"]

5、隊列方法:

隊列數據結構的訪問規則是FIFO(First-In-First-Out,先進先出),隊列在列表的末端添加項,從列表的前端移除項。push()是向數組末端添加項的方法,shift()是從數組前端取得項的方法,它能夠移除數組中的第一項並返回該項,同時將數組長度減1。結合使用shift()和push()方法,可以像使用隊列一樣使用數組。

5.1、shift()

shift()方法沒有參數,用於從數組前面移除第一項,減少數組的length值,然後返回移除的項並且會改變數組本身

let num = [1, 2, 3, 4, 5, 6];
let numItem = num.shift();
numItem // 1
num // [2, 3, 4, 5, 6]

let animals = ["dog", "cat", "bird"]
let animalsItem = animals.shift();
animalsItem // dog
animals // [cat", "bird"]

5.2、unshift()

unshift()與shift()用法相反
unshift()方法可以接收任意數量的參數,把它們整體添加到數組最前面,並返回數組的長度並且會改變數組本身

let num = [1, 2, 3, 4, 5, 6];
let numItem = num.unshift(7,8,9);
numItem // 9
num // [ 7, 8, 9, 1, 2, 3, 4, 5, 6]  這裏請注意是把7,8,9整個加在了1,2,3,4,5,6的前面,而不是循環遍歷加的。

let animals = ["dog", "cat", "bird"]
let animalsItem = animals.unshift('monkey','tiger');
animalsItem // 4
animals // ["monkey","tiger","dog","cat","bird"]  

6、重排序方法:

數組中的重排序方法是reverse()和sort()

6.1、reverse()

reverse()方法只是把數組的順序倒着排列一下,沒有做大小的排序,並且會改變原數組

let arr7 = [1,3,4,2,6,8,0]
arr7.reverse();
arr7 // [0, 8, 6, 2, 4, 3, 1]

6.2、sort()

因爲reverse()不夠靈活,所以纔有了sort()這種排序方式。
在默認情況下,sort()方法按照生序方法排列數組,默認排序方式是從小到大。注意:sort()會改變原數組。

let arr8 = [1,8,9,2,7,4,3,-2,-4,-1,0]
arr8.sort();
arr8 // [-1, -2, -4, 0, 1, 2, 3, 4, 7, 8, 9]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章