小提示：如果在  for 循环中使用了 const  ，你会被报错。因为在循环的时候， i 会递增，被 "i++" 重新赋值，所以每次在 let 和 const 之间犹豫不决的时候，你就问自己这个问题：这个值会不会被重新赋值？如果会，就选择 let；如果不会，就选择 const。 更多

打个比方，你需要展示一系列产品，并且对数组进行分类、筛选、修改、更新等操作，又或者说你需要对数组做一些简单的计算，比如加法乘法等等。那么，要怎么操作才是上策呢？

可能你听到箭头函数就摇头，可能你不是一个喜欢花很多时间学新东西的人，可能你觉得这些都与你无关，相信我，你不是唯一一个这样想的人。接下来请先看我用 ES5（普通函数） 和 ES6（箭头函数）来实现这些操作。

注意： 箭头函数和普通函数不完全是一回事儿，不能随意相互替换改写，记住，关键词 this 在箭头函数和普通函数里是两个不同的东西。

本文涉及到的 JavaScript 方法列表：

1. 展开操作符
2. for…of 循环
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

如果你想成为一名更好的 Web 开发者，或者是开创自己的事业，或者是教他人编程，抑或是想要精进自身的编程能力，请关注我的周更系列，我会分享关于最新 Web 开发语言的技巧要点。

1. 展开操作符

展开操作符能用来将数组 (array) 内的元素展开 ，也可以用在对象常量 (object literals) 里。

使用展开操作符的好处有哪些？

• 是一个展示数组元素的简单、直接的方式
• 适用于数组 (array) 和对象常量 (object literals)
• 是一个传递参数的快速、直接的方式
• 只用写三个点…

举个例子: 不写循环来展示最喜欢的食物列表中的元素，通过展开操作符来实现：

2. for…of 循环

for...of 语句可以用来遍历数组，也可以用来改写元素，可以基本替换传统的 for-loop 循环。

使用 for…of 循环的好处有哪些？

• 是一个更新元素的简单方式
• 可以用来完成加法乘法等计算操作
• 可以和条件语句配合使用，比如 if，while，switch 等
• 写出简洁优雅的代码

举个例子： 你想展示工具箱里的工具，那么就可以使用 for...of 循环语句来轻松实现。

3. Includes() 方法

includes() 方法用于检查一个数组中是否含有某个字段，会返回 true 或者 false值。用来检验的字段要注意大小写，如果你得检验字段是 school，而数组中只有  SCHOOL，那么返回值就是 false。

使用 includes() 的好处有哪些？

• 是一个简易的搜索功能
• 是一个快速判断某字段是否存在的简洁方式
• 可以使用条件语句来进行修改、筛选等操作
• 写出可读性更强的代码

举个例子：假设你想不起你车库里存放着哪些车了，你需要一个系统来帮你判断你想要的车存不存在，那么 includes() 可以帮到你！

4. Some() 方法

some() 方法用来检验数组中是否存在某些元素，返回值为 true 或者 false ，和 includes() 方法的一些核心思想很相近，但是必须注意的是，传进 some()方法里的参数必须是函数，而不能是字符串。

使用 some() 的好处有哪些？

• 用来验证数组中是否有元素满足检验条件
• 以函数形式来做条件判定
• 陈述式代码
• 检验有无即可

举个例子： 打个比方，你是一家俱乐部的老板，你不想限制客人进店，但对于明显喝多了的客人你不想让他们进来（原谅我贫瘠的想象力）。下面看看如何用 ES5 和 ES6 写这个函数：

ES5:

ES6:

5. Every() 方法

用 every() 来遍历数组，挨个元素检查，最后返回  true 或者 false值，和 some() 的核心思想是一样的，不同点在于一旦有某个元素不满足检验条件，返回值即为  false 。

使用 every() 的好处有哪些？

• 用来验证数组中是否所有元素都满足检验条件
• 以函数形式来做条件判定
• 陈述式代码

举个例子： 上次你用 some() 方法，让一些年龄不满的学生混进来了，结果被人举报，警察找上了门。所以，这次你要用 every() 来做检验，保证每一个人都满足年龄要求，才能进俱乐部。

ES5

ES6

6. Filter() 方法

filter() 会将通过检验条件的所有元素放进一个新的数组。

使用 filter() 的好处有哪些？

• 不会改动原始数组
• 剔除掉不需要的元素
• 可读性更强的代码

举个例子： 你只想要价格等于 30 或者 30 以上的，其他的价格剔除掉...

ES5

ES6

7. Map() 方法

和  filter() 一样，map() 也会返回一个新的数组，但不同的是，map() 可以用来修改元素。

使用 map() 的好处有哪些？

• 不会改动原始数组
• 修改数组内元素
• 可读性更强的代码

举个例子： 你手头上有一些产品的价格，经理要求你把加 25% 税后的价格报给他，这个时候你就可以使用  map() 方法。

ES5

ES6

8. Reduce() 方法

reduce() 可以将一个数组变成一个数字，一个对象，一系列 promises 等。一个使用 reduce() 的简易场景就是将一系列数字相加求和，将一个数组“浓缩”成一个数值。

使用 reduce() 的好处有哪些？

• 进行计算操作
• 求值
• 重复值数量计数
• 按照属性对对象进行分组
• 按顺序执行 promises
• 快速计算

举个例子： 你想知道这一周花了多少钱，你可以使用 reduce() 求值。

ES5

ES6

原文链接：These JavaScript methods will boost your skills in just a few minutes，作者：Dler Ari

题图：2012 年，艺术家 Federico Uribe 使用电线在油画布上创作的作品“连接过去” 。

Andy Grove 原本是匈牙利难民，逃离了共产主义政权，后来学习工程学，以英特尔 CEO 的身份掀起了一场个人电脑普及的全球革命。在和帕金森病魔长期斗争后，Andy Grove 于 2016 年 3 月份病逝于硅谷。

Andy Grove 作为世界上最有权力的人之一，当他建议你小心谨慎的时候，你最好洗耳恭听。

其实不只是 Andy Grove，美国联邦调查局（FBI）局长也曾建议把电脑的摄像头遮盖起来，这位局长曾经悬赏黑客百万，寻求破解枪杀案主犯的 iPhone 手机的办法。

于是你暗自忖度：自己又不违法犯纪，有什么好担心的，正如英国国家监视系统所宣传的那样：“如果你坦坦荡荡，就没有什么好担心的。”

但是，就算是遵纪守法的公民也有担心的理由，也有理由保护自己的设备、文件、和所爱的人的沟通记录不受入侵。

“哪怕是世界上最诚实的人，只要给我六行他写的字，我就能找出办法将他处以绞刑。” —红衣主教 Richelieu，于 1641 年

我会在这篇文章中介绍当前最先进的加密技术，教你如何保护自己，帮助你在很短的时间内，完善自己的隐私设置。

普通人的隐私常识

先把话说在前头，文中我介绍的方法是 100% 免费、100% 合法的。只要你晚上睡觉有锁门的意识，你就应该有保护个人隐私的意识。

"时刻准备着。"—童军铭言

接下来，我们做好准备吧。

第一步，先明确几个定义。当我说“入侵者”，我指的是每一个未经你亲自授权，但试图获取你的信息的人，他可以是黑客，公司、或者政府。

当我说“私密的”、“安全的”，我指的相对意义上的私密和安全。只要环节中有人的参与，就不能说这个系统是 100% 的安全和私密。

只要你的手机、电脑和账户是保护起来的，里面的内容是保持加密状态的，那么再强大的入侵者也无法肆意妄为。

锦囊一：开启邮箱双重验证

邮箱是你电子生活的中枢系统，如果你的邮箱被入侵了，不仅你的邮件会被泄漏，你的各种社交账号、银行账号密码都可以通过邮箱重置。

想保护你的邮箱的话，最简单的方法就是开启双重验证功能。

简单的说，双重验证是在你登录邮箱的时候多一层保护，一般就是系统会发送一个验证码短信到你绑定的手机号上，验证通过后才能登陆。

双重验证可以有效的减少邮箱被盗的风险。

为 Gmail 设置双重验证，请点击这里。

现在就去做设置吧。

我是认真的。

等你设置好，我在这里等你。

锦囊二：为硬盘加密

Windows 和 MacOS 都有现成的硬盘加密机制，你只需要将功能开启就好。

锦囊三：开启手机密码验证

指纹加密可以起到一定作用，但只有指纹保护是不够的。

在美国宪法第五修正案（防止自证己罪）的保护下，你有权保护自己的密码不对外公开，但是指纹的话，法院完全可以下令让你自己用手指解锁手机。

而且，如果入侵者获取了你的指纹信息，你是几乎没有办法改指纹的。

一般来说，在 10 次密码验证失败后手机就会自动上锁，如果你的四位数密码出现在以下常见密码列表中，你最好修改密码。

1234  
9999
1111  
3333
0000  
5555
1212  
6666
7777  
1122
1004  
1313
2000  
8888
4444  
4321
2222  
2001
6969  
1010

提示: 如果图方便一定要使用指纹验证的话，那么在您被捕后一定要立马将手机关机，当有关部门要求您解锁手机时，则必须要通过密码验证。

锦囊四：不要重复使用密码

密码本来就是不安全的。

Mark Zuckerberg 的 LinkedIn 账号密码是 “dadada”，在今年年初的时候有黑客在网上公布了 1.17 亿个邮箱账号+密码组合，Zuckerberg 的账号和密码赫然在其中，于是，黑客轻而易举的用同样的邮箱和密码组合入侵了他的推特和 Pinterest 账号。

所以，千万不要重复使用密码。

如果多个密码管理起来觉得有难度，可以考虑使用密码管理器。

锦囊五：使用 Signal 发送私人讯息

电子前线基金会将 Signal 评为满分的即时通讯工具，Signal 广受欢迎，可以用来发简讯、群聊、传图片和视频，任何通讯 APP 应该有的功能 Signal 都具备，而且一切通讯都是经过加密处理的。

Signal 免费、开源，在 iOS 和安卓系统都可以下载。我本人在短短五分钟内就完成了下载、设置到和亲友放心聊天的一系列步骤。

第一步：安装 Signal

第二步：邀请朋友安装 Signal

第三步：发送消息

恭喜你！现在你可以和亲朋好友自由聊天啦，而且内容都经过加密，不用担心有人监听。

Signal 也可以用来打语音电话。

锦囊六：浏览器的隐私模式不能完全保护你的隐私

就算你开启了 Chrome 浏览器的“隐身模式”或者是火狐浏览器的“私密阅览”，还是有人能够监听你的网络活动的：

• 网络服务提供商
• 负责你所在学校、工作场所或任何所在网络的系统管理员
• 谷歌等浏览器提供商

Internet Explorer, Safari, Opera 等其他浏览器并不会更私密。

如果你想换一个比较私密（不会有 100% 私密的系统）的浏览器，可以使用 Tor。

锦囊七：使用 Tor 浏览器

免费开源的 Tor，即"洋葱路由器"（The Onion Router），名字来源于其像洋葱一样的特性，多层掩盖浏览活动，使用简单方便。

第一步：下载 Orbot

第二步：下载 Orfox 浏览器

第三步：打开 Orbot

第四步：打开 Orfox

第五步：验证有效性

打开 check.torproject.org，看看加密是否生效。 恭喜你！现在你可以自由浏览，不用担心有人在监控你的网络活动。

锦囊八：私密搜索

如果 Tor 使用起来不太方便，你可以尝试 DuckDuckGo，一个不跟踪搜索数据的搜索引擎。

DuckDuckGo 虽然没有一支在人数上媲美谷歌搜索引擎的工程师团队，但有需要的话，DuckDuckGo 可以帮你加密获取谷歌搜索结果，只需在 DuckDuckGo 搜索框中输入在要搜索的关键词，并在关键词前加上 !google 即可。

计算机安全专家 Bruce Schneier 的一本书《数据和歌利亚：一场争夺数据和控制世界的无烟之战》我非常推荐，我在阅读的过程中学到了很多东西，现在已经是第二遍在听这本书了。

原文链接：How to encrypt your entire life in less than an hour，作者：Quincy Larson

我曾经在“如何在十个月内成功完成转型并拿下第一份程序员工作“一文中，分享了自己的旅程：我从一名毫无相关经验的英语教师成功转型，进入位于马德里的一家初创公司做前端。

在这篇文章中，我想更加深入地跟大家分享自己在学习中用到的各种资料和工具。

我会带着大家分析我上过的课程，介绍各自的优缺点以及上课时我做过的项目。我会把转型期间的几个里程碑事件拿出来详细讲讲，比如如何上手 GitHub，如何打造作品集，以及保持学习动力的方法。

学什么，在哪学？

我坐在电脑前盯着一张太阳的照片，我当时想尖叫，想哭又想笑。这不仅仅是一张太阳的照片而已，这是一张我从美国国家航空航天局（NASA）数据库中扒下来的照片！在漫长的尝试后，我终于学会了如何操作 NASA 的 API 了。我感觉像个顶尖黑客高手，感觉自己马上就能够控制红绿灯了！

实际上呢，我并没有能够控制红绿灯，我到现在也没做到。但我也没想到的是仅仅在几天后，我收到了第一份工作录用函。

所以，我是如何从零开始，在前端开发领域中找到自己的第一份工作的，要学什么，在哪儿学？

其实在刚开始学习前端时，我很为此焦虑，我的时间那么宝贵，我一定要把时间花在最好的资源上面。在推特上我也经常被问到这个问题，因为初学者总是最关心学什么，在哪学。

但我接下来要说的可能会让人大跌眼镜， 我想说其实在职业转型的整个过程中，这个问题是最不重要的，学什么、在哪儿学，并没有初学者想的那么关键。

不管你决定用什么资源、上什么课程，只要你有恒心有毅力，保持学习的动力，你一定会学到东西而且把它学好。

当然，课程绝对有优劣之分，找到掌握必要技能的方法和路径也至关重要。

但是，如果你半途而废，有再好的课程、再完整的学习路径也无济于事。所以，真正重要的是你找到能让你保持学习动力的方法，而不是决定上什么课程。什么才是最适合你的，这个答案因人而异。

我的建议是，在你一头扎进学习的海洋之前，花点时间了解自己的学习风格，找到适合自己的方法。在下决定之前，不妨多尝试几种不同的课程和学习风格。

我上过的课程

在十个月紧张的学习过程中，我浏览了无数的资源，我从当下的学习需求出发，选择能让我保持兴趣的资源，我在不同的课程之间进进出出，取我所需，我评价自己进度的唯一标准是我究竟学到了什么。

我只选择能让我自由选择学习时间的资源，因为我当时还是全职工作状态，而且我的财务状况也不允许我参加昂贵的训练营或者课程，我只能选择免费或打折的学习资源。在我拿到第一份工作邀请函的时候，我在课程等资源上的花费总计不到一百欧元。

我会把我用到的所有资源都列在一个表单里，并在文末分享链接。

YouTube 先行

Jake Wright 的“12 分钟内学会 HTML”教程视频是我最早的 Web 开发启蒙，然后就是他的“12 分钟内学会 CSS”。我在看完后创建了自己的第一个网页，总共下来花了很少的时间，很激励人。这套视频课程虽然很基础，甚至有点儿过时，但是对于零基础的小白来说再合适不过。

Traversy Media 和 LevelUpTuts 出品的教学视频我也经常看。

Colt Steele 的 The Web Developer Bootcamp （全栈 Web 开发训练营）课程

这是 Udemy 上最受欢迎的 Web 开发课程之一，而且经常打折。Colt 的教学水平很不错，适合小白，会带着零基础的你慢慢的打基础，到最后你会完成一系列好看的项目作品，以供展示。

这套课程涉猎范围很广，但如果你只对前端开发感兴趣，可能这套课程会有点超纲。课程采用的“照着写代码”的教学风格对初学者是有好处的，但对于初学者也要学习的解决问题的思维，这套课程却不怎么鼓励培养。

我制作了 RGB 颜色游戏和 Patatap Clone 两个项目，后来在面试的时候，这两个项目变成了很好的话题点。另外，能在学习早期就做出两个网页 App 也极大地鼓舞了我。

freeCodeCamp.org

对每个准备上手 Web 开发的朋友，我都首推 freeCodeCamp 作为入门资源。在简单的注册后，任何人都可以立即开始写代码，准备和设置时间成本为零。你很快就会进入状态，迫不及待想要点亮那一个个绿色的勾号。

freeCodeCamp 课程体系覆盖了所有现代 Web 开发的知识点，它的背后是一个活跃的社区，而且资源完全免费！最重要的是，这个组织和它的使命是非常伟大的。

最好的部分是它的项目题。你必须从头开始构建项目，这会花一些时间，但这是你提升技能所需要的练习。当你遇到问题的时候，尽管没有直接的指导，freeCodeCamp 活跃的社区会帮你找到答案。

我为我最爱的“明星”（氢型，非红毯型）制作了一个致敬网页，还制作了个人作品集和用 React 编写的语录自动生成器。

Wes Bos 的 JavaScript 30 课程

Wes 是我最喜欢的讲师之一，每次听 Wes 讲课，我都知道我是在获取关于所讲话题最新、最深度的分析和信息。我强烈推荐他的课程。

我主要是上了他的 JavaScript 30 免费课程，毫不夸张地说，这个课程实在是太实用了。我写的每一个项目作业都变成了我日后的代码参考，我会反复的回来看我当时是怎么用代码实现各种操作的，这些课程代码项目陪我走过了技术面试，面试，以及我正式开工的最开始几个星期。就一门课程来说，这已经是我心目中的最高标准了。

我写的项目有时钟，电子鼓和搜索器。

Lynda.com

在网站免费试用期内，我选择了一些课程，很喜欢 Christina Truong 的教学，她的课程覆盖高级 CSS、工作流工具、网站上线等方面，我获益不少。Ray Villalobos 的课程也帮助我提升了 Git 方面的技能。

Lynda.com 的课程质量不错，但是在 Web 开发方面的课程目录并不是很全很专，内容连贯性方面也略逊于其他的专门平台。

Treehouse

说到专门平台，就不得不提到 Treehouse。我只是在免费期间浏览试用了一下，很喜欢Treehouse 课程的细分和深度。

Michael Hartl 的命令行（Learn Enough Command Line to Be Dangerous）课程

简单、简明的课程，让命令行神秘不再，让我很快就上手基本的命令行操作。

Cassidy Williams 的 JavaScript and React for Developers  课程

Cassidy 知识广博，教学风格轻松愉快，她的课程具有足够的难度，逼迫着我去钻研更深层次的概念。我是在十个月的学习期结尾、快要开始求职的时候开始上这门课程的。

在这门课程中，我学会了如何使用 API 来调用并展示返还数据，我写了一个 GitHub 用户搜索 App，是我编程学习生涯中的高点，然后我还写了文章开头提到的那个 NASA 多媒体库搜索 App。

由于收到了面试的通知，我不得不暂停 NASA 多媒体库搜索 App 的开发，去完成面试布置的一个挑战作业，而这个挑战作业覆盖的内容跟我在课程内学过的东西基本一样。

我完成了挑战作业，成功拿下了 offer。

Udacity 的 Front-End Web Developer Nanodegree (FEND) 前端开发微专业

在我开始学习前端开发几个月后，我拿到了 Udacity 前端开发课程的谷歌奖学金，不久后，我通过了第二阶段的选拔，很幸运的拿到了 Udacity 前端开发微专业（FEND）项目奖学金。

我得强调一下，就算你没有拿到奖学金，或者没有资金去上这个微专业的课程，也完全不会影响你成功的几率。虽然我在这个课程中获益良多，但这不是我成功的决定性因素，我在完成 FEND 的几个月前就已经拿下工作了。

其实在拿到奖学金的时候我心里很清楚，对于职业转型我是很认真的。哪怕没拿到奖学金，我也打算在学习资源上投入更多金钱，比如购买 Treehouse 课程或者 Udacity 的按月订阅服务等。

Udacity 的 FEND 课程标准非常高，授课老师都是行内精英，有着坚实的知识基础和实打实的行业经验。课程项目有难度，有趣味性，而且导师会对学生的项目做出非常有价值的梳理和指导。

毋庸置疑的是，课程最吸引我的一点是它背后这个活跃、积极的社区。在选择资源的时候，社区文化应该是首要考虑的要素，因为你会发现，你在同学身上学到的东西远比你在老师身上学到的东西多。

我在 FEND 课程里完成了很多很好的项目，像素艺术只是其中的一个，也称得上是我在当时完成过最复杂的项目了。在不断拓展这个项目的功能的过程中，我得到了充分的锻炼，让我像真正的工程师一样思考问题。

跟踪学习进度

如果你想要更加清晰的看到这十个月的时间里我到底做了什么，你可以访问我的 GitHub 项目 My-Learning-Tracker，我把我上过的所有课程和相关链接都放上去了。如果你想要创建自己的学习进度跟踪项目，你也可以复刻 (fork) 这个项目到你自己的GitHub 库里。

超越课程：成功的基石

教程再好，没有其他方面的资源相助，只是上课也是远远不够的。你应该给课程以外的资源同样程度的重视。

以下，我列举一些对我转型很有帮助的资源。

保持动力

动力是首要条件。没有动力，就没有一切。我有三个锦囊帮助我渡过难关，保持动力。

第一、明确的目标。我有一个目标：就是在一年内加入初创公司，成为一名前端开发工程师。有一个明确的目标让我在自我怀疑和缺乏动力时能够保持专注，走出低谷。

第二、亲友团的支持。当时，我和我的爱人还有我一个很好的朋友都在学习，身边有人能够感同身受，一起经历着一样的事情，能够一起想办法，互相督促，互相鼓励，是很有帮助的。

第三、网络社区的支持。我从社区里的人身上学到了很多东西，而且收获了许多鼓励和支持。

保持动力绝非易事，关键在于寻找不断成长的感觉，不管项目大小都要坚持写代码，而且要把握适合自己的学习方法，不要走过去失败的老路。

社交网络

推特让我能够接触到很多专业人士和跟我一样的初学者，是我非常推荐的工具。推特帮助我掌握最新的行业信息和学习资料，帮助我拓展圈子，最后还帮到我找到工作。

我的推特活动以 freeCodeCamp、#100DaysOfCode 和 #CodeNewbie 为中心，在我编程学习路上的每一步，这些活跃的推特社区都给了我持续的支持。其中，Alexander Kallaway 的 #100DaysOfCode 背后的想法非常简单，但是非常有效：每天坚持编程一小时，并且把每天的进度都挂到网上，监督自己，激励他人。

对于那些曾经鼓励过我、监督过我的社区朋友们，在这里我要特别感谢你们，感谢你们陪我走过这段旅程。

GitHub

GitHub 是每一个入门编程的人必定很快就接触到的，对于小白来说，这是一块陌生的、甚至有点让人害怕的领地，充斥着开源、协作项目等字样，感觉跟新手完全不沾边，但相信我，GitHub 和你息息相关。

GitHub 就是你工作的基石，作为程序员，你会经常用到 Git 和 Git 服务器，其实用多几次后你就会发现 Git 很好上手。对于我来说，在过了最开始的懵懂期后，GitHub 成为我编程学习的中心点，我所有的代码都在 GitHub 上，自然而然的 GitHub 就变成了我的作品集，我利用 GitHub Pages 做了一个网页用来放置我的项目作品。除此以外，我用 GitHub 跟踪我的学习进度，用它来跟其他人协作写项目。

GitHub 对我来说尤其重要，因为像我这样没有任何相关经验的小白，GitHub 是我展示技能的唯一渠道，绝大多数的雇主都会先看 GitHub 仓库，因为在上面可以很清晰地看到我能做什么、学过什么。我会确保我的 GitHub 仓库里有着丰富的项目经验和详细的文字说明。

在学习路上有一件让我自豪的事也跟 GitHub 有关。我在上 Udacity 课程的时候，发现很多同学都害怕 GitHub，所以我就做了一个简易教程叫 Contribute-To-This-Project，帮助我的同学一步步学习如何操作 GitHub。教，是最好的学，不管你掌握的知识有多少，你总能帮助别人学点什么。

建立个人作品集

一个活跃的 GitHub 库也是不够的，你还需要作品集来充分展示自己的编程技能。建立网站本身也是一个很好的锻炼机会，就算你目前没有项目，你也应该先建站，然后在你写项目的过程中逐渐地把作品添加进去。

我很早就建站作为个人作品集的想法，我当时觉得自己离真正有能力建立网站还有很大距离，所以我先是在一张纸上画下了心目中想要的网站的样子。实际上呢，我很快就开始着手建站了，开始的早是件好事，因为初稿总不是完美的。

在当时，这是我做过的最复杂的从零开始的项目，推动我去深入学习，对我帮助极大。我花了无数的时间翻阅 MDN 文档和 Stack Overflow 论坛，一边做网站，一边不断搜索实现一些我不懂的操作的方法。我曾经花了若干小时去排查问题，最后发现就是一个小小的拼写错误，但在这个过程中，我学习如何面对挫折。

学习编程的精髓其实就在这里。这些技能是我每天工作中都会用到的：如何搜索，如何排查，如何解决问题，如何面对挫折，都是程序员的必修课。

网站建好的时候我特别激动 —— 这是我的创造！—— 这网站完完全全就是按照我想要的样子建好的！但是，我很快就意识到，作为一个作品集，这个网站完全不达标。所以第二天，我深呼了一口气，开始推翻重来。这次我决定建立一个简单的网站，强调功能性，能够跨越不同设备正常显示，用来展示作品和一点点的个人信息，并不需要做的花里胡哨。

这正好引出了下面我要说的。

独立开发

独立自己开发项目让很多初学者望而却步，但我的经验告诉我，就算项目没有做的很好，也对编程学习很有帮助。我独立编写的两个作品为我打下了坚实的编程基础，过程中虽然遇到很多挫折和问题，在我刚开始工作的时候这些挫折中收获的经验变成了无价之宝。

我绝不否认教程和例子实践的价值，但我想强调独立开发的价值：自己写项目的时候，我被推动者去思考添加新的功能，如何优化，如何突破自己。

做什么项目不重要，重要的是你的收获。举个例子，我做了一个很简单的温度换算器，虽然不是什么很炫的项目，但是我的的确确得从零开始，把所有点都落实清楚，当我完成这个换算器并测试正常时，那种自豪感油然而生。

播客、文章、对话、活动

初学者的学习之路漫漫，有大块的主动学习时间也是不够的，因此，我把平时的碎片时间也调用起来，创造更多机会去获取信息，更深入的去了解程序员的世界。

阅读文章、看视频、听播客，都是我利用碎片时间的方式，让我在语法语义之外对编程概念有更深入的理解。

线下活动也是很好的资源，我在住的小城市组织了一个线下编程小组活动，如果你有类似的机会千万不要害怕。相信我，没有人会在活动上拦住你，逼着你向他们证明自己的资历。

我最喜欢的学习资源（部分）：

• 播客：Command Line Heroes — Red Hat Podcast
• 播客：Base.cs — Computer science podcast with Vaidehi Joshi
• 播客：Syntax.fm — Wes Bos and Scott Tolinski podcast
• 播客：CodeNewbie — Saron Yitbarek podcast
• 文章：FreeCodeCamp Medium publication
• 文章：Hacker Noon articles
• CSS 文章：Smashing Magazine — CSS articles
• CSS 文章：CSS-Tricks
• 邮箱订阅：JavaScript Weekly and Frontend Focus
• 油管视频系列：Crash Course: Computer Science
• 油管视频：CS50 — YouTube videos of CS Harvard lectures
• 其他相关油管播主，我把我最喜欢的几个列出来放在这里

祝你好运！

学习之路紧张充实，避免“透支”非常重要。因此，我很重视休息、饮食、锻炼。当我在无法负荷的边缘时，我会给自己放个半天或者一天的假。

在这十个月的时间里，我放弃了很多，也投入了很多，但这过程中的每一分每一秒都很值，我对我的新职业 —— 前端工程师 —— 很满意。为转型付出的努力，我丝毫不后悔。

请谨记，每一个人学习的过程和遇到的问题都不尽相同，请不要对自己太苛刻，只要保持前进的方向就可以了。

原文链接：The tools and resources that landed me a front-end developer job，作者：Syk Houdeib

高阶函数可以接收函数作为参数，同时也可以返回一个新的函数。

高阶函数之所以高阶，是因为高阶函数的参数和返回值对象可以是函数，这超越了普通函数处理的数据类型，例如字符串（strings）、数字（numbers）、布尔值（booleans）等。

JavaScript 中，函数的应用场景很丰富：

• 作为变量存储
• 在数组中使用
• 作为对象属性（即方法）
• 作为参数传递
• 作为其他函数的返回值

理解高阶函数的关键在于，函数即数据。

数据是函数运作的基本

数据：字符串（Strings）

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');

console.log(result); // 'Hi, User!'

数据：数字（Numbers）

double = (x) => x * 2;
result = double(4);

console.log(result); // 8

数据：布尔值（Booleans）

getClearance = (allowed) => allowed ?  'Access granted' :  'Access denied';

result1 = getClearance(true);
result2 = getClearance(false);

console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

数据：对象（Objects）

getFirstName = (obj) => obj.firstName;

result = getFirstName({  
	firstName: 'Yazeed'
});

console.log(result); // 'Yazeed'

数据：数组（Arrays）

len = (array) => array.length;
result = len([1, 2, 3]);

console.log(result); // 3

在所有的主流语言中，以上这五种数据类型被称为 “头等对象”。

为什么是“头等”呢？因为这五种数据类型既可以作为参数传递，又可以存储在变量或者数组中，还可以作为变量用于计算，是数据的基本形式。

函数也是数据

函数作为参数

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);

console.log(result); // [2, 4]

请观察 filter 函数是如何使用 isEven 函数来判断要保留哪些内容的。这里的 isEven 是一个函数，作为参数传入了 filter 函数中。

filter 函数每次在做判断的时候都会调用 isEven 函数，用 isEven 函数返回的布尔值来决定当前数值的去留。

函数作为返回值

add = (x) => (y) => x + y;

add 函数需要两个参数，但不需要它们俩同时传入，第一次传参传入 x 就会返还一个新函数，这个函数需要传入 y 参数。

能够这样操作的基础在于 JavaScript 语言允许函数本身作为返回值存在，就像函数可以返回字符串（strings）、数字（numbers）、布尔值（booleans）等，JS 函数还可以返回另一个函数。

当然，我们也可以使用“双重调用”的方式，一次性提供 x 和 y 两个参数：

result = add(10)(20);

console.log(result); // 30

或者分两次调用，先传参数 x，再传参数 y：

add10 = add(10);
result = add10(20);

console.log(result); // 30

在上面这个例子中， add10 函数是第一次调用 add 函数的返回值，可以尝试用 console.log 把结果打出来观察一下。

add10 函数会接收 y 参数，然后返回 x + y 值。一旦 y 值到位，函数会立马进行运算并返回结果。

可重复利用性

高阶函数的魅力在于它的可重复利用性，如果不是高阶函数，map、filter、reduce 等强大的数组函数就不可能存在。

假设我们有一组用户，如下所示，然后我们要对该数组进行操作。

users = [
  {
    name: 'Yazeed',
    age: 25
  },
  {
    name: 'Sam',
    age: 30
  },
  {
    name: 'Bill',
    age: 20
  }
];

Map

没有高阶函数的话，我们必须回到 for 循环的怀抱才能实现 map 函数的操作。

getName = (user) => user.name;
usernames = [];

for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);

  usernames.push(name);
}

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

用 map 函数就简单多啦！

usernames = users.map(getName);

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在没有高阶函数的情况下，必须要用 for 循环来实现 filter 函数的功能。

startsWithB = (string) => string.toLowerCase().startsWith('b');

namesStartingWithB = [];

for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

用 filter 函数就简单多啦！

namesStartingWithB = users.filter((user) => startsWithB(user.name));

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

reduce 函数也是的……没有高阶函数的话，很多高端操作都是无法实现的！😁

total = 0;

for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}

console.log(total);
// 75

那这样是不是简单多啦？

totalAge = users.reduce((total, user) => user.age + total, 0);

console.log(totalAge);
// 75

总结

• 字符串（strings）、数字（numbers）、布尔值（booleans）、数组（arrays）、对象（objects）可以作为变量（variables）、数组（arrays）、属性（properties）或者方法（methods）存储起来。
• JavaScript 语言中，函数也是像数据一样同等对待的。
• 因此函数可以作为另外一个函数的参数或者返回值使用，这样的做法叫高阶函数。
• map、filter、 reduce 等函数就是高阶函数的最佳代表，它们让数组的处理（改变、搜索、相加等）变得简单不少！

如果你想和我继续交流，可以在我的推特找到我。下次见！

原文链接：A quick intro to Higher-Order Functions in JavaScript，作者：Yazeed Bzadough

这份谷歌的风格指南并不提供硬性的要求，它不会教你如何写 JS，它只会针对如何写出连贯漂亮的 JS 提出风格方面的建议。JS 是很灵活的语言，允许很多编写风格的并存。

谷歌和爱彼邻都有发布自己的 JS 风格指南，在目前同类指南中是最受瞩目的两份。如果你工作中涉及到大量的 JS 编写，我强烈建议你花点时间研究一下这两份指南。

我从谷歌的风格指南中提取了 13 点在我看来最有意思且最有实际意义的建议，罗列如下，仅供参考。

无论是行内争议较大的一些问题，比如，缩进是用制表符还是用空格，如何使用分号，还是比较细枝末节的方面，谷歌 JS 风格指南都给出了自己很明确的回应。毋庸置疑，这份指南大大改变我写 JS 的习惯。

针对每一点，我都会先大致总结一下规则，然后附上指南的原文节选，来辅助对规则细节的理解。如果可能的话，我还会加上符合该条规则的代码范例来阐述，以及不合规的代码反例来加以对比。

缩进用空格，不要用制表符

除了行终止符，ASCII 水平空格字符（0x20）是源文件中出现过的唯一代表空白的字符，说明制表符不能用来缩进。

指南还推荐使用两个（不是四个）空格来完成缩进。

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

必须用分号

每个语句都要用分号来结尾，禁止依靠自动分号插入。

我是无法理解为什么有人要质疑分号结尾的必要性，但就像缩进是用制表符还是空格，要不要在语句结尾加上分号也变得越来越有争议性。在这份指南中，谷歌给出了非常明确的回应，即必须使用分号。

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

暂时还先别使用 ES6 的模块（modules）

暂时还先别用 ES6 的模块（例如  export 和 import 命令），它们的语义还没完全确定下来。在 ES6 模块语义和用法完全确定下来后，我们会重新考量此条规则。

// 暂时先别这么写:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

不鼓励（不禁止）水平对齐

虽然水平对齐并没有被禁用，但一般来说，谷歌是不鼓励这种做法的。在代码中如果已经做过水平对齐处理，谷歌也不鼓励保持水平对齐的做法。

在代码中加入多余的空格，以和上下行的同类变量保持对齐的做法就是所说的"水平对齐“。

// bad
{
  tiny:   42,  
  longer: 435, 
};
// good
{
  tiny: 42, 
  longer: 435,
};

别再用 var 了

所有的本地变量都应该使用 const 或者 let 来引出声明。除非该变量需要被重新赋值，不然都默认用 const 来声明。禁止再使用 var。

在 StackOverflow 和其他地方，我还是会看到 var 出现在各种代码范例中，不知道是因为积习太难改，还是因为有人坚持认为 var 还有存在的理由……

// bad
var example = 42;
// good
let example = 42;

箭头函数是首选

箭头函数的句法更简洁，也解决了 this 关键词使用中的一些老大难问题。特别是在写嵌套函数的时候，箭头函数的优势相较传统的 function 表达式更突出，是首选。

我个人更喜欢箭头函数只是因为觉得它更简洁、更美观，碰巧写箭头函数确实能解决一些重要的实际问题。

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

使用模版字符串，而不要将普通字符串叠加

在处理复杂的字符串叠加，尤其是多行字符串的叠加时，模版字符串（使用反引号`来界定）是更优的选择，可以实现跨多行的效果。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

长字符串不要使用反斜杠来分隔每行

请不要在基本字符串或者模版字符串的每行后用反斜杠（/）表示结尾，虽然 ES5 不会对这样的操作报错，但这样做会让你在排查错误的时候很头疼，因为斜杠后的多余空格会报错，而且很难看出。

爱彼邻（Airbnb）和谷歌在这一点上的推荐做法是有分歧的（详情参见爱彼邻的文档）。

谷歌建议用 + 运算符将多行字符串相连（如下所示），爱彼邻建议什么都不做，让长字符串自由覆盖。

// bad (sorry, this doesn't show up well on mobile)
const longString = 'This is a very long string that \
    far exceeds the 80 column limit. It unfortunately \
    contains long stretches of spaces due to how the \
    continued lines are indented.';
// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +
    'strings are cleaner.';

“for… of” 是写 for 循环的首选方式

在 ES6 体系下，JS 支持三种写 for 循环的方式，但 for-of 是最优选。

其实我也觉得这条规则有点奇怪，但是我还是选择把它纳入，因为考虑到谷歌会明确规定写 for 循环的最优方式，还是很有看头的。

我个人觉得，for…in 更适合对象的循环，for…of 更适合数组的循环，要视情况而定。

谷歌的建议也不一定和我的想法相悖，但针对这个问题谷歌有明确的表态，让我觉得有必要列出来思考一下。

别使用eval()

除了在代码加载器中，平时不要使用 eval，也不要使用 Function(...string) 构造函数，这些特性都是有潜在的危险的，而且在 CSP 环境中根本不起作用。

MDN上的 eval() 页 有一个章节的标题就是“避免使用 eval !"。

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
let result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a

常量命名应该全大写，并且用下划线分隔单词

常量应该遵循 CONSTANT_CASE 命名规则：全大写，单词用下划线分割。

如果你确定一个变量的值不会发生改变，你应该用常量的命名规则来命名该变量，让你在浏览代码的时候更直观。

如果该常量仅定义并作用在某个函数内，那么这个常量的命名应该遵守 camelCase 规则，而不该全大写。

// bad
const number = 5;
// good
const NUMBER = 5;

每次只声明一个变量

每个声明语句里只包含一个变量，像 let a = 1, b = 2; 这样的写法是不合规、不推荐的。

// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;

用单引号，不用双引号

普通字符串文字，用单引号 （'）而不是双引号（"）来标记字符串的结尾 。

小贴士：如果字符串中含有单引号，用模版字符串来避免单引号转义失效的情况。

// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

写在最后

这 13 点规则并不是所谓的的金规玉律，我在文章开头说过的，这里再强调一下。谷歌是科技巨擘之一，这些推荐处理方法只是他们的一家之言。

虽说如此，这一家之言是很有分量的，谷歌雇用了大量的顶尖工程师，资质深厚的他们写过大量的优质代码，他们的建议值得一看。

如果你想写出符合谷歌源文件级别标准的代码，你可以完全遵循谷歌这套风格指南中的所有规则。如果你对其中的个别规则或者所有规则有异议——很多人都有异议——那你大可不必理会这些建议。

我个人觉得在很多写法问题的建议处理上，爱彼邻的版本会比谷歌更合理一些。但万变不离其宗，无论你个人认为怎么样写才是优雅简洁的，在写代码的时候还是要遵循一定的规则，尽量做到前后风格一致。

原文链接：https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b，作者：Daniel Simmons