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

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

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

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

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

ES5中new一個人數(shù)組的時候，會存在一個令人困惑的情況。當new一個數(shù)字的時候，生成的是一個長度為該數(shù)字的數(shù)組，當new一個字符串的時候，生成的是該字符串為元素的數(shù)組。

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

這樣一來，導致new Array的行為是不可預測的，Array.of()出現(xiàn)為的就是解決這個情況。

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

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

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

下面的例子講的是將arguments轉(zhuǎn)換成數(shù)組。arguments是類數(shù)組對象，他表示的是當前函數(shù)的所有參數(shù)，如果函數(shù)沒有參數(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個參數(shù)，第二個參數(shù)作為第一個參數(shù)的轉(zhuǎn)換?？磦€簡單例子你就懂了。

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

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

Array.from()轉(zhuǎn)換可迭代對象：這個用法只需要一個例子，數(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ù)組添加了幾個新方法：find()、findIndex()、fill()、copyWithin()。

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

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

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

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

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

arr.fill(value, start, end)

測試一下

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

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

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

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

arr.copyWithin(target, start, end)

測試一下

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

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

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

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

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

=> 返回文章目錄