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('、')) // 1、2、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

---

三：现有一个数组，全由数字组成，请写一个函数，求出数组中大于一百的值的和

题目解析

一、

Answer：A

数组通过拓展运算符展开，使得 f(-1, ...args, 2, ...[3]); 转化为 f(-1,0,1,2,3) 去调用 f 函数的时候，只取了前面两个值相加打印，即最后输出的为 -1 +0 为 -1

---

二、

Answer：B

首先一个空数组通过不断执行 push 操作，最后 a 数组为 ["",null,NaN,0,"0"] ，那么最后打印为 a.join('')，即各个元素之间没有间隔，直接连接在一起，这里涉及到一个 join 的小知识点（如果一个元素为 undefined 或 null ，它会被转换为空字符串。）最后这个公式最后输出的结果为 NaN00

---

三、

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 系列的 数组的扩展，我们到这里结束啦，谢谢各位对作者的支持！你们的关注和点赞，将会是我们前进的最强动力！谢谢大家！