JavaScript速记技巧向着更清晰的代码迈进及十本前端学习书籍分享[图]

一、JavaScript速记技巧：向着更清晰的代码迈进
无论是哪个编程语言的速记技巧，都有助于你编写更好、更清晰的代码。借助速记技巧，不仅可以提升代码可读性，还可以编写更少代码完成任务。下面是一些JavaScript的速记技巧。
1.声明变量
//Longhand
letx;
lety=20;
//Shorthand
letx,y=20;
2.给多个变量赋值
可以在一行代码中给多个变量同时赋值。
//Longhand
leta,b,c;
a=5;
b=8;
c=12;
//Shorthand
let[a,b,c]=[5,8,12];
3.三元运算符
使用三元运算符（条件），五行代码可以简化为一行。
//Longhand
letmarks=26;
letresult;
if(marks>=30){
result='Pass';
}else{
result='Fail';
}
//Shorthand
letresult=marks>=30?'Pass':'Fail';

4.分配默认值
我们可以使用OR(||)短路评估为变量指定一个默认值，以防期望值为空。
//Longhand
letimagePath;
letpath=getImagePath();
if(path!==null&&path!==undefined&&path!==''){
imagePath=path;
}else{
imagePath='default.jpg';
}
//Shorthand
letimagePath=getImagePath()||'default.jpg';
5.AND（&&）短路评估
如需只在变量为真的情况下调用一个函数，则可使用AND(&&)短路评估在一行内完成。
//Longhand
if(isLoggedin){
goToHomepage();
}
//Shorthand
isLoggedin&&goToHomepage();
速记写法这一行，只有在isLoggedin返回结果为真时，goToHomepage()才会执行。
6.交换两个变量
通常交换两个变量需要借助第三个变量。然而通过数组析构赋值，可以轻松交换两个变量。
//Longhand
functionadd(num1,num2){
returnnum1+num2;
}
//Shorthand
constadd=(num1,num2)=>num1+num2;
7.箭头函数
//Longhand
functionadd(num1,num2){
returnnum1+num2;
}
//Shorthand
constadd=(num1,num2)=>num1+num2;
8.模板文字
我们通常使用“+”运算符连接字符串值和变量。有了ES6模板，我们可以通过一种更简单的方式实现。
//Longhand
console.log('Yougotamissedcallfrom'+number+'at'+time);
//Shorthand
console.log(`Yougotamissedcallfrom${number}at${time}`);
9.多行字符串
对于多行字符串，我们通常使用“+”运算符和换行转义符（\n）进行连接。然而可以使用“`”简化代码。
//Longhand
console.log('JavaScript,oftenabbreviatedasJS,isa\n'+'programminglanguagethatconformstothe\n'+
'ECMAScriptspecification.JavaScriptishigh-level,\n'+
'oftenjust-in-timecompiled,andmulti-paradigm.');//Shorthand
console.log(`JavaScript,oftenabbreviatedasJS,isaprogramminglanguagethatconformstotheECMAScriptspecification.JavaScriptishigh-level,oftenjust-in-timecompiled,andmulti-paradigm.`);
10.多重条件检查
对于多值匹配，可以将所有的值放在数组中，并使用indexOf()或includes()方法。
//Longhand
if(value===1||value==='one'||value===2||value==='two'){
//Executesomecode
}
//Shorthand1
if([1,'one',2,'two'].indexOf(value)>=0){
//Executesomecode
}//Shorthand2
if([1,'one',2,'two'].includes(value)){
//Executesomecode
}
11.对象属性分配
如果变量名和对象键名相同，可以只在对象文字中设置变量名，不用同时设置键和值。JavaScript会自动将键名设置为变量名，并将该值赋为变量值。
letfirstname='Amitav';
letlastname='Mishra';//Longhand
letobj={firstname:firstname,lastname:lastname};
//Shorthand
letobj={firstname,lastname};
12.字符串类型转换为数字类型
有内置的方法，如parseInt和parseFloat，可用于将字符串转换为数字。更简单的方法是，在字符串值前加上一元运算符(+)。
//Longhand
lettotal=parseInt('453');
letaverage=parseFloat('42.6');
//Shorthand
lettotal=+'453';
letaverage=+'42.6';
13.多次重复同一字符串
若要将字符串重复指定的次数，可以使用for循环。但是使用repeat()方法可以在一行中完成。
//Longhand
letstr='';
for(leti=0;i<5;i++){
str+='Hello';
}
console.log(str);//HelloHelloHelloHelloHello
//Shorthand
'Hello'.repeat(5);
小贴士：想通过给某人发100次“对不起”进行道歉？试试repeat()方法。如果你想在每次重复时另起一行，只需加上\n。
14.指数幂
我们可以用Math.pow()方法求幂。然而用双星号(**)有一个更短的语法。
//Longhand
constpower=Math.pow(4,3);//64
//Shorthand
constpower=4**3;//64
15.按位双非运算符
按位双非运算符可以替代Math.floor()方法。
//Longhand
constfloor=Math.floor(6.8);//6
//Shorthand
constfloor=~~6.8;//6
按位双非运算符方法仅适用于32位整数，即(2**31)-1=2147483647。所以对于任何高于2147483647的数字，按位运算符(~~)都会给出错误的结果，所以在这种情况下建议使用Math.floor()。
16.找出数组的最大值和最小值
可以使用for循环遍历数组的每个值，从而找到最大值或最小值。也可以使用Array.reduce()方法来查找数组中的最大值和最小值。
但是使用扩展运算符则可在一行中完成。
//Shorthand
constarr=[2,8,15,4];
Math.max(...arr);//15
Math.min(...arr);//2
17.For循环
为遍历数组，通常使用的是传统的for循环，也可以使用for...of循环进行遍历。如需访问每个值的索引，可以使用for...in循环。
letarr=[10,20,30,40];//Longhand
for(leti=0;i<arr.length;i++){
console.log(arr[i]);
}//Shorthand
//forofloop
for(constvalofarr){
console.log(val);
}//forinloop
for(constindexinarr){
console.log(arr[index]);
}
使用for...in循环还可以遍历对象属性。
letobj={x:20,y:50};
for(constkeyinobj){
console.log(obj[key]);
}
18.数组合并
letarr1=[20,30];//Longhand
letarr2=arr1.concat([60,80]);
//[20,30,60,80]
//Shorthand
letarr2=[...arr1,60,80];
//[20,30,60,80]
19.多级对象的深度克隆
要深度克隆多级对象，可以遍历每个属性，并检查当前属性是否包含对象。如果是，则通过传递当前属性值(即嵌套对象)对同一函数进行递归调用。也可以使用JSON.stringify()和JSON.parse()在一行中实现。
letobj={x:20,y:{z:30}};
//Longhand
constmakeDeepClone=(obj)=>{
letnewObject={};
Object.keys(obj).map(key=>{
if(typeofobj[key]==='object'){
newObject[key]=makeDeepClone(obj[key]);
}else{
newObject[key]=obj[key];
}
});
returnnewObject;
}constcloneObj=makeDeepClone(obj);
//Shorthand
constcloneObj=JSON.parse(JSON.stringify(obj));
如果对象属性以函数作为值，则速记技巧（JSON.parse(JSON.stringify(obj))）无效。因为JSON.stringif作用于对象时，以函数作为值的属性会从对象中移除。所以这种情况下，还是要用普通写法。
20.从字符串中获取字符
letstr='jscurious.com';//Longhand
str.charAt(2);//c
//Shorthand
str[2];//c
希望本文能让你有所收获。
二、10本学习前端一定要看的书籍，让你效率提升
自学前端最苦的莫过于自己一个人摸索没有人带路，本人现在推荐几套适合自学前端的书籍，希望能帮到大家。
第一本，入门
《HeadfirstHTML&CSS》
最好的入门书。看两遍就对HTML&CSS有个大概印象了。
此时把w3cschool作为备查手册收藏起来
第二本《CSS权威指南（第三版）》
最权威的CSS书籍，除了阅读W3C的文档外的不二选择（就是翻译有点操蛋，遇到感到难理解的地方可能还是要求助于网络资源）。有时间（无论是现在还是将来）可以反复看，并当做字典随时查。
第三本《精通CSS》
广受前辈推荐的一本书。上一本书是字典的话，这本书相当于《中学生作文大全》，汇集了一些CSS的最佳实践。
第四本《图解CSS3：核心技术与案例实践》

这本书比较新，讲解的是最新的CSS3（前三本书停留在CSS2.1时代），CSS3也是必学的，不是什么可学可不学的最新技术。HTMLCSS值得看的书就这些（之后会有一本《CSS秘密花园》，尚在翻译中，也很值得期待），读书笔记（https://www.isanxia.com/dushubiji/）剩下的就是自己写还有看技术博客了。接下来是JavaScript，HTML和CSS都是没有逻辑的标记型语言，JS才是真正的编程语言，评价前端工程师的水平就看这个了。

第五本《JavaScriptDOM编程艺术》
最好的JS入门书籍，一目了然地告诉你如何用JS操作DOM（这是浏览器端编程的基本功），还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的，以至于部分内容有点过期，例如本书内经常提到“某某方法浏览器不一定支持，需要小心使用”，而这些历史遗留问题当今已经不存在了，阅读过程中无视就好。
第六本《JavaScript高级程序设计》
每个前端必看的书，此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。
俗称红宝书，也算入门书籍，虽然是大部头（七百多页），但至少通读一遍。
全部掌握了，你可以在网络社区里谈笑风生了，经过实践的锻炼后，面试个前端工程师的岗位应该都没问题了。
第七本《JavaScript语言精粹》
也是前端必看。薄薄一百来页，对JS的去粗取精。
第八本《你不知道的JavaScript》
这是一套丛书，目前为止仅翻译了第一卷。每本都挺薄，深入介绍了JS中的重要概念。
第九本《JavaScript设计模式》
“设计模式”是软件工程的重要课题，相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本，也有国人写的，挑一两本看看就好。
第十本《高性能网站建设指南》（及其续篇《高性能网站进阶》）
告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的，最好时刻了解你的同行们的经验。
看完以上十本算是前端入门了。到现在为止，配合搜索引擎，已经可以无障碍地做出静态网页、各种特效、用AJAX配合后台构建Web应用了。然后是各种框架、库、预处理语言的学习，而且现在JavaScript也可以用来写服务器了（Node.js），这样一来JS通吃前后端，前端工程师都欢欣鼓舞，这也是个学习热点。
下面是一些补充书籍，可以穿插着看。（至少看了两遍《JavaScript高级程序设计》再看下面的书）
《图解HTTP》和《HTTP权威指南》
每个Web程序员都应该熟悉HTTP协议里的内容。《图解HTTP》算是科普级别的书，《HTTP权威指南》则是大部头，需要点耐心才能看完。建议在了解AJAX后立刻开始学习HTTP协议。
《锋利的jQuery》
讲JS最著名的库——jQuery的，快速入门的书。光会原生JS不够，还要会用库。
《数据结构和算法的JavaScript描述》
作为程序员如果连基本的数据结构和排序、查找算法都不会实在丢脸。
《JavaScript编程精解》
巩固对JS的理解，很薄。
《JavaScript启示录》
同上，也很薄。
《JavaScript权威指南》
号称“圣经”，最权威的JS书本，买来当作字典备查吧，没事也可以翻翻。
然后就是向高级前端工程师发展了，这时候全靠上社区、看博客来开阔眼界追赶潮流了。以上就是我推荐大家的一些书籍希望能更好的帮助你们。