ES6 系列五：數組的擴展

"Code tailor"，爲前端開發者提供技術相關資訊以及系列基礎文章，微信關注「小和山的菜鳥們」公衆號，及時獲取最新文章。

前言

在開始學習以前，咱們想要告訴您的是，本文章是對阮一峯《ECMAScript6 入門》一書中 "數組的擴展" 章節的總結，若是您已掌握下面知識事項，則可跳過此環節直接進入題目練習

• 擴展運算符及其應用
• 數組經常使用的新增方法

若是您對某些部分有些遺忘，👇🏻 已經爲您準備好了！

學習連接

數組的擴展學習

彙總總結

擴展運算符

擴展運算符（spread）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

//該運算符主要用於函數調用
function add(x, y) {
  return x + y
}

const numbers = [4, 38]
add(...numbers) // 42

擴展運算符的應用

1. 複製數組

// ES5
const a1 = [1, 2]
const a2 = a1.concat()

a2[0] = 2
a1 // [1, 2]

// ES6
const a1 = [1, 2]
// 寫法一
const a2 = [...a1]
// 寫法二
const [...a2] = a1

2. 合併數組

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']

// ES5 的合併數組
arr1.concat(arr2, arr3)
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

3. 字符串

擴展運算符還能夠將字符串轉爲真正的數組。

;[...'hello']
// [ "h", "e", "l", "l", "o" ]

經常使用方法

• Array.from()： 用於將相似數組的對象和可遍歷的對象轉爲真正的數組

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
}

let arr2 = Array.from(arrayLike) // ['a', 'b', 'c']

Array.from 還能夠接受第二個參數，做用相似於數組的 map 方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike, (x) => x * x)
// 等同於
Array.from(arrayLike).map((x) => x * x)

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

• join()： 將數組的元素組起一個字符串，以 separator 爲分隔符，省略的話則用默認用逗號爲分隔符，該方法只接收一個參數：即分隔符。

var arr = [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr.join('、')) // 一、二、3

• push()： 能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。
• pop()： 數組末尾移除最後一項，減小數組的 length 值，而後返回移除的項。

var arr = ['Kang', 'Ming', 'Wang']

var count = arr.push('Li')
console.log(count) // 4
console.log(arr) // ["Kang", "Ming", "Wang", "Li"]

var item = arr.pop()
console.log(item) // Li
console.log(arr) // ["Kang", "Ming", "Wang"]

• map()： 方法建立一個新數組，其結果是該數組中的每一個元素是調用一次提供的函數後的返回值。

const array1 = [1, 4, 9, 16]

// pass a function to map
const map1 = array1.map((x) => x * 2)

console.log(map1)
// expected output: Array [2, 8, 18, 32

• filter()： 「過濾」功能，數組中的每一項運行給定函數，返回知足過濾條件組成的數組。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']

const result = words.filter((word) => word.length > 6)

console.log(result)
//["exuberant", "destruction", "present"]

• reduce()： 方法對數組中的每一個元素執行一個由您提供的 reducer 函數(升序執行)，將其結果彙總爲單個返回值。

const array1 = [1, 2, 3, 4]
const reducer = (accumulator, currentValue) => accumulator + currentValue

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer))
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5))
// expected output: 15

reducer 函數接收 4 個參數:

• accumulator (acc) (累計器)
• current Value (cur) (當前值)
• current Index (idx) (當前索引)
• source Array (src) (源數組)

您的 reducer 函數的返回值分配給累計器，該返回值在數組的每一個迭代中被記住，並最後成爲最終的單個結果值。

題目自測

一：以下代碼的輸出結果是什麼（）

function f(x = 0, y = 0) {
  console.log(x + y)
}
const args = [0, 1]
f(-1, ...args, 2, ...[3])

• A: -1
• B: 0
• C: 2
• D: 5

---

二：以下代碼的輸出結果是什麼（）

const a = []
a.push()
a.push('')
a.push(null)
a.push(NaN)
a.push(0)
a.push('0')
console.log(a.join(''))

• A: undefined
• B: NaN00
• C: undefinedNaN00
• D: nullNaN00

---

三：現有一個數組，全由數字組成，請寫一個函數，求出數組中大於一百的值的和

題目解析

1、

Answer：A

數組經過拓展運算符展開，使得 f(-1, ...args, 2, ...[3]); 轉化爲 f(-1,0,1,2,3) 去調用 f 函數的時候，只取了前面兩個值相加打印，即最後輸出的爲 -1 +0 爲 -1

---

2、

Answer：B

首先一個空數組經過不斷執行 push 操做，最後 a 數組爲 ["",null,NaN,0,"0"] ，那麼最後打印爲 a.join('')，即各個元素之間沒有間隔，直接鏈接在一塊兒，這裏涉及到一個 join 的小知識點（若是一個元素爲 undefined 或 null ，它會被轉換爲空字符串。）最後這個公式最後輸出的結果爲 NaN00

---

3、

const array = [68,90,389,192,102,56]
const arrTest = (arr) => {
  let array1= arr.filter((item)=>item>100)//篩選出全部大於100的值
  return array1.reduce((item, sum) => sum + item)//將大於100的值進行累加
}

console.log(arrTest(array));//683
}

ES 6 系列的 數組的擴展，咱們到這裏結束啦，謝謝各位對做者的支持！大家的關注和點贊，將會是咱們前進的最強動力！謝謝你們！