ES 6 系列五:数组的扩展

·  阅读 526
ES 6 系列五:数组的扩展

"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
Answer

Answer:A

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


二:如下代码的输出结果是什么()

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

Answer:B

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


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

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改