在近来的项目中,碰到了比较多处置惩罚数组的场景,比方要对数组内里某个元素的某一个字段举行抽取归类,或许推断数组当中的某个元素是不是符满足推断前提等。
网上关于运用ES5新的的API来替代for轮回的文章已异常多,它们有的细致议论了API的用法,有的细致分析各自的机能,另有的整顿了运用中的注意事项。因而,本文不再对这些API的细致运用体式格局举行赘述,仅仅从个人角度动身,整顿归结一些在项目实践中碰到的能够越发文雅处置惩罚数组遍历的例子。
1、运用Set
处置惩罚数组去重和元素剔除题目
Set
是es6新增的一种数据构造,它和数组异常相似,然则成员的值都是唯一的,没有反复的值。它供应了4个语义化的API:
add(value)
:增加某个值,返回Set构造自身。
delete(value)
:删除某个值,返回一个布尔值,示意删除是不是胜利。
has(value)
:返回一个布尔值,示意该值是不是为Set的成员。
clear()
:消灭一切成员,没有返回值。参考自@阮一峰 先生的《ECMAScript 6 入门》
那末我们能够用Set
来干吗呢?
第一个用法,数组去重。关于一个一维数组,我们能够先把它转化成Set
,再合营...
解构运算符从新转化为数组,到达去重的目标。请看例子:
const arr = [1, 1, 2, 2, 3, 4, 5, 5]
const newArr = [...new Set(arr)]
console.log(newArr)
// [1, 2, 3, 4, 5]
值得注意的是,这个要领不能对元素为“对象”的数组见效:
const arr = [{ name: 'Alice', age: 12 }, { name: 'Alice', age: 12 }, { name: 'Bob', age: 13 }]
const newArr = [...new Set(arr)]
console.log(newArr)
// [{ name: 'Alice', age: 12 }, { name: 'Alice', age: 12 }, { name: 'Bob', age: 13 }]
这是由于Set
推断元素是不是反复的方法相似于===
运算符,两个对象老是不相称的。
除了去重,Set
供应的delete()
要领也是异常有用。在以往的做法中,假如要删除数组中指定的元素,我们须要先猎取该元素地点下标,然后经由过程splice()
要领去删除对应下标的元素,在明白上轻易引发杂沓:
// 我想删除数组当中值为2的元素
const arr = [1, 2, 3]
const index = arr.indexOf(2)
if (index !== -1) {
arr.splice(index, 1)
}
console.log(arr)
// [1, 3]
运用Set
就清楚多了:
const arr = [1, 2, 3]
const set = new Set(arr)
set.delete(2)
arr = [...set]
console.log(arr)
// [1, 3]
2、 运用map()
要领和对象解构语法提取字段
要求背景接口返回的数据中,很能够会碰到下面这类数据格式:
studentInfo = [
{ name: 'Alice', age: 18, no: 2 },
{ name: 'Bob', age: 16, no: 5 },
{ name: 'Candy', age: 17, no: 3 },
{ name: 'Den', age: 18, no: 4 },
{ name: 'Eve', age: 16, no: 1 },
]
当我们要猎取姓名列表、岁数列表和编号列表的时刻,我们能够经由过程map()
再合营对象的解构语法方便快捷地举行处置惩罚:
const nameList = studentInfo.map(({ name }) => name)
const ageList = studentInfo.map(({ age }) => age)
const noList = studentInfo.map(({ no }) => no)
// nameList: [ 'Alice', 'Bob', 'Candy', 'Den', 'Eve' ]
// ageList: [ 18, 16, 17, 18, 16 ]
// noList: [ 2, 5, 3, 4, 1 ]
3、运用filter()
要领和对象解构语法过滤数组
接上上面的例子,假如我想猎取一个“岁数小于即是17岁”的新列表,应当怎么做呢?相似map()
要领,我们能够用filter()
要领举行过滤:
const newStudentInfo = studentInfo.filter(({ age }) => {
return age <= 17
})
/*
newStudentInfo: [
{ name: 'Bob', age: 16, no: 5 },
{ name: 'Candy', age: 17, no: 3 },
{ name: 'Eve', age: 16, no: 1 }
]
*/
4、借助includes()
要领求两个数组的差集
假定我们有以下两个数组:
var a = [1, 2, {s:3}, {s:4}, {s:5}]
var b = [{s:2}, {s:3}, {s:4}, 'a']
我们应当怎样找到它们的差集呢?传统的要领能够须要把它们以Object情势hash化,但实在我们能够经由过程.includes()
要领越发文雅方便地找出差集,代码以下:
var a = [1, 2, {s:3}, {s:4}, {s:5}].map(item => JSON.stringify(item))
var b = [{s:2}, {s:3}, {s:4}, 'a'].map(item => JSON.stringify(item))
var diff = a.concat(b)
.filter(v => !a.includes(v) || !b.includes(v))
.map(item => JSON.parse(item))
// diff: [1, 2, {s:5}, {s:2}, "a"]
至于为何要JSON.stringify()
,是由于要对照两个“对象元素”是不是相称,是没法直接以“对象”情势比较的(永久返回不相称)。
5、跋文
本文篇幅较短,难度也相对简朴,以上都是一些日常平凡实践中发明的技能,愿望能够对读者们有所启示。假如你也有一些比较文雅好玩的技能,无妨和我交换分享喔~