共计 3122 个字符,预计需要花费 8 分钟才能阅读完成。
“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 系列的 数组的扩大,咱们到这里完结啦,谢谢各位对作者的反对!你们的关注和点赞,将会是咱们后退的最强能源!谢谢大家!