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