《深刻理解ES6》筆記—— 改進數組的功能（10）

ES5提供的數組已經很強大，可是ES6中繼續改進了一些，主要是增長了新的數組方法，因此這章的知識很是少。

建立數組

ES5中建立數組的方式：數組字面量、new一個數組。

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

ES6建立數組：Array.of()、Array.from()

Array.of()

ES5中new一我的數組的時候，會存在一個使人困惑的狀況。當new一個數字的時候，生成的是一個長度爲該數字的數組，當new一個字符串的時候，生成的是該字符串爲元素的數組。

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

這樣一來，致使new Array的行爲是不可預測的，Array.of()出現爲的就是解決這個狀況。

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

使用Array.of()建立的數組傳入的參數都是做爲數組的元素，而不在是數組長度，這樣就避免了使用上的歧義。

Array.from()

若是說Array.of()是建立一個新數組，而Array.from()是將類數組轉換成數組。

下面的例子講的是將arguments轉換成數組。arguments是類數組對象，他表示的是當前函數的全部參數，若是函數沒有參數，那麼arguments就爲空。

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

映射轉換：Array.from(arg1, arg2)，咱們能夠給該方法提供2個參數，第二個參數做爲第一個參數的轉換。看個簡單例子你就懂了。

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

Array.from還能夠設置第三個參數，指定this。

Array.from()轉換可迭代對象：這個用法只須要一個例子，數組去重。

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

給數組添加新方法

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

一、find()：傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，而且終止搜索。

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

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

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

三、fill()：用新元素替換掉數組內的元素，能夠指定替換下標範圍。

arr.fill(value, start, end)

測試一下

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

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] 指定開始和結束位置，替換當前範圍的元素

四、copyWithin()：選擇數組的某個下標，從該位置開始複製數組元素，默認從0開始複製。也能夠指定要複製的元素範圍。

arr.copyWithin(target, start, end)

測試一下

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 從下標爲3的元素開始，複製數組，因此4, 5被替換成1, 2

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 從下標爲3的元素開始，複製數組，指定複製的第一個元素下標爲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的元素開始，複製數組，指定複製的第一個元素下標爲1，結束位置爲2，因此4被替換成2

其餘新增方法

其餘還有定型數組、數組緩衝區的概念，你能夠詳細查看書上教程。

總結

掌握新的建立數組的方式，以及數組新增的幾個方法，就夠你使用了。定型數組和數組緩衝區通常人能夠不用瞭解的太詳細。

=> 返回文章目錄