乐趣区

关于javascript:ES6-系列五数组的扩展

jiezi

“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 系列的 数组的扩大，咱们到这里完结啦，谢谢各位对作者的反对！你们的关注和点赞，将会是咱们后退的最强能源！谢谢大家！

退出移动版