一、類數(shù)組/ 偽數(shù)組

1. 類/偽數(shù)組: 并不是真正意義的數(shù)組，有長度的屬性，但無法使用Array原型上的方法

let divs = document.getElementsByTagName('div')
console.log(divs)
// HTMLCollection []

let divs2 = document.getElementsByClassName("xxx")
console.log(divs2)
// HTMLCollection []

let div3 = document.querySelectorAll('.xx')
console.log(div3)
// NodeList []

2. 判斷是否是數(shù)組的方法, 檢測是否是Array的實(shí)例

let div3 = document.querySelectorAll('.xx')
console.log(div3 instanceof Array)
// false
div3.push(123)
// Uncaught TypeError: div3.push is not a function
因?yàn)閐iv3 不是 真正的數(shù)組

3. 如何把偽數(shù)組轉(zhuǎn)換為真正的數(shù)組

1. ES5 的 slice 方法

let div3 = document.querySelectorAll('.xx')
// 偽數(shù)組轉(zhuǎn)換為真正數(shù)組
let arr = Array.prototype.slice.call(div3)
console.log(arr)
// []

2. arguments
   是一個(gè)對應(yīng)于傳遞給函數(shù)的參數(shù)的類/偽數(shù)組對象

function foo() {
	console.log(arguments)
	// 檢測是否為真正數(shù)組
	console.log(arguments instanceof Array)
} 
foo(1, 'imooc', true)
// Arguments(3) [1, 'imooc', true, callee: ?, Symbol(Symbol.iterator): ?]
// false

3. ES6的Array.from()方法

let arrayLike = {
	0: 'es6',
	1: 'es7',
	2: 'es8',
	length: 3
}
let arr = Array.from(arrayLike)
arr.push('es9')
console.log(arr)
// (4) ['es6', 'es7', 'es8', 'es9']

二、創(chuàng)建數(shù)組實(shí)例

1. new Array 參數(shù)個(gè)數(shù)不同，所表達(dá)含義不同

let arr = new Array(1,2)
console.log(arr)
// (2) [1, 2]
let arr1 = new Array(3)
console.log(arr1)
// (3) [空屬性 × 3]

PS： 通過new Array的時(shí)候，參數(shù)為多個(gè)時(shí)，參數(shù)表示的是數(shù)組的值；參數(shù)為一個(gè)時(shí)，參數(shù)表示是數(shù)組的長度

2. Array of 所傳入的參數(shù)就是數(shù)組的值

let arr = Array.of(123,'123',null, [1,2], {name: 'xiao'})
console.log(arr)
// (5) [123, '123', null, Array(2), {…}]
console.log(Array.of(1))
// [1]

三、替換數(shù)組的值

1. copyWithin() 復(fù)制替換數(shù)組里面的內(nèi)容

參數(shù)：copyWithin(target, start, end)
target: 從哪個(gè)索引開始替換
strat: 元素復(fù)制的起始位置， 包含
end: 停止復(fù)制的索引位置， 不包含

let arr =  [1,2,3, 4, 5]
console.log(arr.copyWithin(0, 2,3))
// 第一步復(fù)制數(shù)組中索引2 - 3(不包含)之間的數(shù)字， [3]
// 把[3] 從 索引 0 開始替換 [1,2,3,4,5]  => [3,2,3,4,5]

let arr =  [1,2,3, 4, 5]
console.log(arr.copyWithin(0, 1))
// 第一步從索引1開始復(fù)制，直到結(jié)束  [2,3,4,5]
// 把[2,3,4,5] 從 0 開始替換 [1,2,3,4,5] => [2,3,4,5,5]

2. fill() 傳值替換數(shù)組的值

參數(shù)：
value：必需。填充的值
strat: 可選。開始填充位置， 包含
end: 可選。停止填充位置 (默認(rèn)為 array.length) , 不包含文章來源地址http://www.zghlxwxcb.cn/news/detail-663434.html

let arr = new Array(3).fill(7)
console.log(arr)
// (3) [7, 7, 7]
// 當(dāng)strat和end 不傳時(shí)，填充數(shù)組的每一個(gè)值

let arr = [1,2,3,4,5]
arr.fill('xiaoxiao', 0, 2)
console.log(arr)
// ['xiaoxiao', 'xiaoxiao', 3, 4, 5]
// 把索引0- 2（不包含）的值，替換成"xiaoxiao"

四、 查找數(shù)組中的值是否存在

1. ES5 indexOf 無法找到NaN 的值, ES6 includes 可以

let arr = [1,2,3, NaN]
console.log(arr.indexOf(NaN))
console.log(NaN == NaN)
console.log(arr.includes(NaN))
// -1
// false
// true

到了這里，關(guān)于【ES6】—數(shù)組的擴(kuò)展的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！