摘要：創(chuàng)建數(shù)組中創(chuàng)建數(shù)組的方式數(shù)組字面量一個(gè)數(shù)組。傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它，并且終止搜索。用新元素替換掉數(shù)組內(nèi)的元素，可以指定替換下標(biāo)范圍。

ES5提供的數(shù)組已經(jīng)很強(qiáng)大，但是ES6中繼續(xù)改進(jìn)了一些，主要是增加了新的數(shù)組方法，所以這章的知識(shí)非常少。

ES5中創(chuàng)建數(shù)組的方式：數(shù)組字面量、new一個(gè)數(shù)組。

const arr1 = [] //數(shù)組字面量
const arr2 = new Array() //new構(gòu)建

ES6創(chuàng)建數(shù)組：Array.of()、Array.from()

ES5中new一個(gè)人數(shù)組的時(shí)候，會(huì)存在一個(gè)令人困惑的情況。當(dāng)new一個(gè)數(shù)字的時(shí)候，生成的是一個(gè)長(zhǎng)度為該數(shù)字的數(shù)組，當(dāng)new一個(gè)字符串的時(shí)候，生成的是該字符串為元素的數(shù)組。

const a = new Array(2)
const b = new Array("2")
console.log(a, b) //[undefined, undefined] ["2"]

這樣一來(lái)，導(dǎo)致new Array的行為是不可預(yù)測(cè)的，Array.of()出現(xiàn)為的就是解決這個(gè)情況。

const c = Array.of(2)
const d = Array.of("2")
console.log(c, d) // [2] ["2"]

使用Array.of()創(chuàng)建的數(shù)組傳入的參數(shù)都是作為數(shù)組的元素，而不在是數(shù)組長(zhǎng)度，這樣就避免了使用上的歧義。

如果說(shuō)Array.of()是創(chuàng)建一個(gè)新數(shù)組，而Array.from()是將類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組。

下面的例子講的是將arguments轉(zhuǎn)換成數(shù)組。arguments是類(lèi)數(shù)組對(duì)象，他表示的是當(dāng)前函數(shù)的所有參數(shù)，如果函數(shù)沒(méi)有參數(shù)，那么arguments就為空。

function test(a, b) {
  let arr = Array.from(arguments)
  console.log(arr)
}
test(1, 2) //[1, 2]

映射轉(zhuǎn)換：Array.from(arg1, arg2)，我們可以給該方法提供2個(gè)參數(shù)，第二個(gè)參數(shù)作為第一個(gè)參數(shù)的轉(zhuǎn)換。看個(gè)簡(jiǎn)單例子你就懂了。

function test(a, b) {
  let arr = Array.from(arguments, value => value + 2)
  console.log(arr)
}
test(1, 2) //[3, 4]

Array.from還可以設(shè)置第三個(gè)參數(shù)，指定this。

Array.from()轉(zhuǎn)換可迭代對(duì)象：這個(gè)用法只需要一個(gè)例子，數(shù)組去重。

function test() {
  return Array.from(new Set(...arguments))
}
const s = test([1, "2", 3, 3, "2"])
console.log(s) // [1,"2",3]

ES6給數(shù)組添加了幾個(gè)新方法：find()、findIndex()、fill()、copyWithin()。

1、find()：傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它，并且終止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2、findIndex()：傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它的下標(biāo)，終止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3、fill()：用新元素替換掉數(shù)組內(nèi)的元素，可以指定替換下標(biāo)范圍。

arr.fill(value, start, end)

測(cè)試一下

const arr = [1, 2, 3]
console.log(arr.fill(4)) // [4, 4, 4] 不指定開(kāi)始和結(jié)束，全部替換

const arr1 = [1, 2, 3]
console.log(arr1.fill(4, 1)) // [1, 4, 4] 指定開(kāi)始位置，從開(kāi)始位置全部替換

const arr2 = [1, 2, 3]
console.log(arr2.fill(4, 0, 2)) // [4, 4, 3] 指定開(kāi)始和結(jié)束位置，替換當(dāng)前范圍的元素

4、copyWithin()：選擇數(shù)組的某個(gè)下標(biāo)，從該位置開(kāi)始復(fù)制數(shù)組元素，默認(rèn)從0開(kāi)始復(fù)制。也可以指定要復(fù)制的元素范圍。

arr.copyWithin(target, start, end)

測(cè)試一下

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 從下標(biāo)為3的元素開(kāi)始，復(fù)制數(shù)組，所以4, 5被替換成1, 2

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 從下標(biāo)為3的元素開(kāi)始，復(fù)制數(shù)組，指定復(fù)制的第一個(gè)元素下標(biāo)為1，所以4, 5被替換成2, 3

const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 從下標(biāo)為3的元素開(kāi)始，復(fù)制數(shù)組，指定復(fù)制的第一個(gè)元素下標(biāo)為1，結(jié)束位置為2，所以4被替換成2

其他還有定型數(shù)組、數(shù)組緩沖區(qū)的概念，你可以詳細(xì)查看書(shū)上教程。

掌握新的創(chuàng)建數(shù)組的方式，以及數(shù)組新增的幾個(gè)方法，就夠你使用了。定型數(shù)組和數(shù)組緩沖區(qū)一般人可以不用了解的太詳細(xì)。

=> 返回文章目錄