怒肝 JavaScript 数据结构 — 数组篇(二)

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

大家好,我是杨成功。

上一篇我们认识了数据结构中的数组,并且总结了 JavaScript 中数组的基本操作,包括初始化数组,添加,修改,删除数组项等,还总结了 JavaScript 内置的数组操作函数。

这一篇我们介绍数组的迭代,以及ES6新增的数组能力。

数组迭代器

数组是一个由一组数据组成的集合,每个元素被称为数组项。如果我们想连续对每个数组项执行一些操作,那么就会用到数组的迭代,也叫遍历,for 循环是最基础的遍历。

假设现在有一个数组 cities 如下:

var cities = ['北京', '上海', '杭州', '深圳']
复制代码

我们要通过遍历数组,每个数组项前面加上 中国- 这个前缀,用基本的 for 循环实现如下:

for(var i = 0; i < cities.length; i++) {
    cities[i] = '中国-' + cities[i];
}
// cities = ['中国-北京', '中国-上海', '中国-杭州', '中国-深圳']
复制代码

这是最基础的实现,JavaScript 在此基础上实现了许多原生的迭代器函数。

比如上面的循环可以用 forEach 替代:

cities.forEach((item, i)=> {
    cities[i] = '中国-' + item;
})
// cities = ['中国-北京', '中国-上海', '中国-杭州', '中国-深圳']
复制代码

forEach 的参数是一个回调函数,有两个参数,第一个参数 item 表示当前数组项,第二个参数表示索引,遍历的每一项都会执行这个函数。下面几个迭代器的参数也是这个回调函数:

  • map
  • filter
  • find
  • findIndex
  • some
  • every

我们再用 map 实现上面的逻辑:

cities = cities.map(item=> '中国-' + item)
// cities:['中国-北京', '中国-上海', '中国-杭州', '中国-深圳']
复制代码

看到 forEach 与 map 的区别了吧。forEach 是直接遍历,纯粹的执行回调函数。而 map 是在回调函数中返回新值,最终在执行完毕后返回新的数组。

其他函数使用如下:

// 1. filter
let arr = cities.filter((item, i)=> i==2 || i==3) 
// arr:['上海', '杭州']

// 2. find
let row = cities.find(item=> item == '杭州') 
// row:'杭州'

// 3. findIndex
let index = cities.findIndex(item=> item == '杭州') 
// index:2
复制代码

someevery 函数用来检测数组是否满足某种条件,返回布尔值。

// 4. some:检测数组中是否有一项满足条件
let bool = cities.some(item=> item == '杭州') 
// bool:true

// 4. some:检测数组中是否所有项都满足条件
let bool = cities.every(item=> item == '杭州') 
// bool:false
复制代码

这里要提一个特殊的迭代函数 reduce,它的回调函数与上述的有些区别,但是功能很强大。

reduce 是一个函数累加器,可以把数组项中的值累加起来,常用与计算数值的总和,或者拼接字符串。

数组小结

通过两篇对 JavaScript 数组的回顾和整理,我们了解了这个最常用的数据结构——数组是怎么回事。这个也是后面学习其他数据结构和算法的基础。

下一章,我们将开始学习第二个数据结构:栈。

加入学习群

本文来源公众号:程序员成功。这是学习 JavaScript 数据结构与算法的第 1 篇,本系列会连续更新一个月,欢迎关注公众号,点击“加群”一起加入我和小伙伴们的学习队伍吧~

猜你喜欢

转载自juejin.im/post/7082405149129310244