1. 程式人生 > 其它 >JS陣列詳解

JS陣列詳解

建立陣列的五種方式

字面量建立

直接寫出包含陣列元素的陣列,陣列元素可以是任意型別的值,也可以是一個表示式

let arr1 = [] // 空陣列
let arr2 = [1, 'abc', [1, 2, 3], { name: 'zs' }, true] // 包含5個元素的陣列
let arr3 = [, ,] // 長度為3的陣列,包含3個undefined元素
let base = 1024
let arr4 = [base + 1, base + 2] // 包含2個表示式的陣列

對可迭代物件使用擴充套件操作符

擴充套件操作符適用於任何可迭代物件(可迭代物件是可以用 for of 迴圈遍歷的,如陣列,集合物件,字串)

arr = [1, 2, 3]
a = [...arr, 4, 5, 6] // 擴充套件陣列
a // [1, 2, 3, 4, 5, 6]

str = 'hello world'
arr = [...str] // 展開字串
arr // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

cel = new Set(str) // 字串轉集合
cel = new Set(arr) // 陣列轉集合
cel // {'h', 'e', 'l', 'o', ' ', 'w', 'r', 'd'}----集合不含有重複元素
arr = [...cel] // 擴充套件集合
arr // ['h', 'e', 'l', 'o', ' ', 'w', 'r', 'd']

Array()建構函式

arr = new Array()
arr // [] length為0的空陣列

arr1 = new Array(10)
arr1 // [empty × 10] length為10的陣列。10個元素都為undefined

Array.of()工廠方法

Array.of()所有的引數都陣列元素來建立陣列

a = Array.of(2)
a // [2]
a = Array.of(1, 2, 3)
a // [1,2,3]

Array.from()工廠方法

Array.from()第一個引數必傳,為一個可迭代物件或一個類陣列物件
第二個引數非必傳,為一個函式,這個函式遍歷每一個元素,返回遍歷後的陣列(相當於這個函式加工陣列元素)
如果傳了第二個引數,函式的返回值作為建立的新陣列

i = 'aaaaaa'
// 'aaaaaa'
p = Array.from(i)
// ['a', 'a', 'a', 'a', 'a', 'a']
i = [1, 2, 3, 4, , , '']
// [1, 2, 3, 4, empty × 2, '']
p = Array.from(i, (j) => {
  return j + '*'
})
// ['1*', '2*', '3*', '4*', 'undefined*', 'undefined*', '*']
p = Array.from(i, (j) => {
  return j + '*'
})
// ['1*', '2*', '3*', '4*', 'undefined*', 'undefined*', '*']
p = Array.from(i, (j) => {
  return j + 1
})
// [2, 3, 4, 5, NaN, NaN, '1']
p = Array.from(i, (j) => {
  return j * 2
})
// [2, 4, 6, 8, NaN, NaN, 0]

陣列的讀寫

arr[n]=xxx 陣列寫入元素,索引為 n,元素值為 xxx
arr[n] 陣列讀索引為 n 的元素

let arr=['hello','world']
arr
// ['hello', 'world']
let res=arr[1] // ------讀書組
res
// 'world'
let res=arr[0]
res
// 'hello'
arr[0]='你好' // ------寫陣列
arr
// ['你好', 'world']

陣列是一種特殊的物件,訪問陣列的方括號與訪問物件屬性的方括號是類似的,JavaScript 會將數值陣列索引轉換為字串
物件陣列方法寫如的屬性,只能用陣列方法讀。陣列的物件方法寫入的屬性可以使用陣列方法讀,也可以使用點語法讀

obj={}
obj[1]='one'
obj.name='zs'
obj[1] // one
obj['1'] // one
obj.1 // error 報錯語法錯誤
obj.'1' // error 報錯語法錯誤
obj.name    // 'zs'
obj['name'] // 'zs'

陣列長度

每個陣列都有 length 屬性,正是 length 屬性讓陣列有別於常規的 JavaScript 物件,JavaScript 會自動維護 length 屬性
假如陣列長度為 i,當我們設定一個索引為 i+n 的元素,該陣列的 length 屬性為自動變為 i+n
假如陣列長度為 i,當設定 length=i-n 時,i-n 索引之後的元素會被刪除

陣列操作會自動更新 length 屬性
delete 操作符刪除陣列元素,陣列的 length 屬性不會變,delete a[2]刪除索引為 2 的元素,索引為 2 的元素變為 undefined,a.length 不變

isArray()判斷一個值是不是陣列

a = Array.isArray([])
// true
a = Array.isArray({})
// false

類陣列物件

只要物件有一個 length 屬性,而且 length 是一個非負整數,那麼可以完全視為一個數組
js 中很多 BOM,DOM 方法都返回類陣列物件
類陣列物件不會繼承 Array.prototype

判斷物件是不是類陣列物件

function idArrayLike(o) {
  if (
    o &&
    typeof o === 'object' &&
    Number.isFinite(o.length) &&
    o.length >= 0 &&
    Number.isInteger(o.length) &&
    o.length < 4294967295
  ) {
    return true
  } else {
    return false
  }
}

類陣列物件不會繼承 Array.prototype,所以無法直接呼叫上面的陣列方法,可以使用 function.call()改變 Array.prototype 的 this 指向,指向類陣列物件,從而呼叫陣列方法

let a = { '0': 'a', '1': 'b', '2': 'c', length: 3 }
let b = Array.prototype.map.call(a, (i) => {
  return i.toUpperCase()
})
console.log(b)

上面的程式碼,其中 a 是一個類陣列,第二行改變陣列的 map 方法的 this 指向,指向類陣列 a

作為陣列的字串

JavaScript 的字串類似於只讀陣列
訪問字串中個別字元發方法

let s = 'test'
let a = s.charAt(0)
let b = s[1]
console.log(a, b) // t e

運算元組的方法

見我的另一篇部落格 https://www.cnblogs.com/guoyanchao/p/16086903.html