以给博客园头部导航条链接添加图标为例, 接下来看看如何分别使用对象、数组、Map 优化它的。

前置

1.接下来给头部导航条添的图标包含:

  • 博客园首页
  • 新随笔
  • 博客首页
  • 联系
  • 订阅
  • 管理

2.这里封装了一个返回 svg 的 function, 下文的 iconInSvg(icon) 即是调用了这个方法。

function iconInSvg(icon) {
return `
<svg class="icon" aria-hidden="true">
<use xlink:href="${icon}"></use>
</svg> `
}

用if罗列

博客园可以在 管理 -> 选项 界面禁用一些链接, 所以在添加 svg 图标之前需要判断链接是否存在。

import { cnblog, home, pens, contact, rss, admin } from '../constants/icons'
import { iconInSvg } from '@tools' function setNavIcons() {
// 博客园首页
if ($('#blog_nav_sitehome').length !== 0) {
$('#blog_nav_sitehome').prepend(iconInSvg(cnblog))
}
// 博客首页
if ($('#blog_nav_myhome').length !== 0) {
$('#blog_nav_myhome').prepend(iconInSvg(home))
}
// 新随笔
if ($('#blog_nav_newpost').length !== 0) {
$('#blog_nav_newpost').prepend(iconInSvg(pens))
}
// 联系
if ($('#blog_nav_contact').length !== 0) {
$('#blog_nav_contact').prepend(iconInSvg(contact))
}
// 订阅
if ($('#blog_nav_rss').length !== 0) {
$('#blog_nav_rss').prepend(iconInSvg(rss))
}
// 管理
if ($('#blog_nav_admin').length !== 0) {
$('#blog_nav_admin').prepend(iconInSvg(admin))
}
} export default setNavIcons

可以发现代码有大量重复,思考如何优化代码。将选择器和图标抽离,以 key value 的形式一一对应,然后进行遍历,执行相同的逻辑:先判断再插入图标。

使用对象

const items = {
'#blog_nav_sitehome': cnblog,
'#blog_nav_myhome': home,
'#blog_nav_newpost': pens,
'#blog_nav_contact': contact,
'#blog_nav_rss': rss,
'#blog_nav_admin': admin,
} for (let selector in items) {
if ($(selector).length !== 0) {
$(selector).prepend(iconInSvg(items[selector]))
}
}
  • js的对象本质上是键值对的集合(Hash结构),如果给对象设置为一个不为字符串的 key,会自动转为字符串
  • 这里直接设置 key 为字符串,需要使用[]来取其值

使用数组

针对给头部导航条添加图标的场景,使用对象重写这段代码应该是最方便的解法了。接下来使用数组对象的形式将它重写,并进行对比。

const items = [
{ selector: '#blog_nav_sitehome', icon: cnblog },
{ selector: '#blog_nav_myhome', icon: home },
{ selector: '#blog_nav_newpost', icon: pens },
{ selector: '#blog_nav_contact', icon: contact },
{ selector: '#blog_nav_rss', icon: rss },
{ selector: '#blog_nav_admin', icon: admin },
] for (let { selector, icon } of items) {
if ($(selector).length !== 0) {
$(selector).prepend(iconInSvg(icon))
}
}
  • 数组对象的形式描述的更加清晰
  • 在这种数据结构下,通过结构赋值能够快速取到值
  • 循环体内的代码更易读

相比后面的 Map 数据结构,在这个场景下我更喜欢用数组对象的形式。

试试 Map

由于 js 对象的 key 本质上只能使用字符串,这就带来一定的局限性。Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。接下来使用 Map 重写这段代码。

const items = new Map([
['#blog_nav_sitehome', cnblog],
['#blog_nav_myhome', home],
['#blog_nav_newpost', pens],
['#blog_nav_contact', contact],
['#blog_nav_rss', rss],
['#blog_nav_admin', admin],
]) for (let [selector, icon] of items.entries()) {
if ($(selector).length !== 0) {
$(selector).prepend(iconInSvg(icon))
}
}

这个小项目虽然使用了 babel 来处理 es6,但 Map 无法像class那样被转化,class 是语法糖。Map 真是个好东西,如果你不需要兼容IE9以下的话。

总结

各有好处。需要注意的是,for of的效率没有带索引的遍历方式高,当你需要遍历大量数据时,最好换用其它方式遍历数据。如有错误,欢迎指正!

尴尬,通篇使用 if的更多相关文章

  1. 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?

    腾讯优测是专业的移动自动化测试平台,提供多维度的自动化测试服务,让测试更简单! 近期有报道称,澳大利亚悉尼市新某大学的一名男生在课堂上看电影,不料耳机没有插好,变成了现场直播... 如果你认为耳机没插 ...

  2. 【C语言学习趣事】_32_平胸的尴尬,嫁不出去的姑娘

    为什么写这篇文章呢? 为什么要弄这么个题目呢? 首先解释为什么用这个题目.这一切都要从那天在QQ群中的讨论说起,那天在群中,一个哥们问了一个关于(void)0 的问题.然后大家说到了 (void)0和 ...

  3. 移动设备页面高度不足时min-height 的尴尬处理

    移动设备页面高度不足时min-height 的尴尬处理 在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...

  4. 截图技巧——鼠标按着不懂,同时点击截图快捷键(QQ为ctrl+alt+a)即可避免按下快捷键鼠标按下等操作消失截不到的尴尬。

    截图技巧--鼠标按着不懂,同时点击截图快捷键(QQ为ctrl+alt+a)即可避免按下快捷键鼠标按下等操作消失截不到的尴尬.

  5. Computer Vision的尴尬---by林达华

    Computer Vision的尴尬---by林达华 Computer Vision是AI的一个非常活跃的领域,每年大会小会不断,发表的文章数以千计(单是CVPR每年就录取300多,各种二流会议每年的 ...

  6. 用SHELL与列表处理了件尴尬事

    与列表语法 command-1 && command-2 && command-3 && command-4 && ...command ...

  7. Ajax与CustomErrors的尴尬

    在ASP.NET程序中,为了给用户显示友好的错误信息,通常在web.config中进行如下的设置: <customErrors mode="RemoteOnly" defau ...

  8. ZZNU 1992: 情人节的尴尬

    题目描述 情人节这不刚过去没多久吗,我得给大家爆个料.这个事关于小飞飞的,小飞飞呢,要给她女票买礼物,但是呢有个比较尴尬的事情,小飞飞有些钱在某宝里,有些钱在某东里,众所周知,这俩可是死对头,想相互转 ...

  9. ZOJ2006 一道很尴尬的string操作题

    ZOJ2006(最小表示法) 题目大意:输出第一个字符串的最小字典序字串的下标! 然后我居然想试一试string的erase的能力,暴力一下,然后20msAC了,尴尬的数据.......... #in ...

随机推荐

  1. 【前端】这可能是你看过最全的css居中解决方案了~

    1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex) html部分代码: ...

  2. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  3. Windows环境下docker的安装与配置

    Docker是一种容器技术,可以在操作系统中隔离出若干个独立的程序运行环境,这些环境既可以共享宿主机的资源,另一方面他们之间相互独立,互不影响,也不会对宿主机的环境产生影响.与虚拟化技术不同的是,Do ...

  4. Elasticsearch构建全文搜索系统

    目录 前言 一.安装 1.安装elasticsearch 2.启动集群cluster 3.安装管理界面elasticsearch-head 4.安装分词插件elasticsearch-analysis ...

  5. Spring Cloud 理论篇

    show me the code and talk to me,做的出来更要说的明白 github同步收录 我是布尔bl,你的支持是我分享的动力! 微服务 在 jsp 时代,应用前后端耦合,前后端 a ...

  6. MySQL记录操作(增删改)

    概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用DELETE实现数据 ...

  7. Kona JDK 在腾讯大数据领域内的实践与发展

    导语 | 近日,云+社区技术沙龙“腾讯开源技术”圆满落幕.本次沙龙邀请了多位腾讯技术专家,深度揭秘了腾讯开源项目TencentOS tiny.TubeMQ.Kona JDK.TARS以及Medical ...

  8. layui的form表单的checkbox全选与全不选问题

    <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <m ...

  9. js函数的三种成创建方式以及它们各自的不同

    js有三种创建函数的方式: 1.function语句(也叫函数声明) function sum(a, b) { return a + b; } sum(1, 2); // 3 2. 函数直接量,又叫函 ...

  10. 题解 NOIP2018【赛道修建】—— 洛谷

    这道题有一点点树上dp的意思(大佬轻喷 我刚拿到这道题的时候毫无头绪,只知道这道题要二分答案 为什么是二分答案??? 题目: 目前赛道修建的方案尚未确定.你的任务是设计一 种赛道修建的方案,使得修建的 ...