A. Web前端工程师该如何写出高质量的JavaScript代码
今天小编要跟大家分享的文章是关于Web前端工程师该如何写出高质量的JavaScript代码。很多正在从事web前端工作的小伙伴们都想知道怎样写出高质量的JavaScript。因为想写好一个JavaScript确实并不是一份简单的事情，所以我们来聊聊零基础要写好JavaScript代码的一些细节。关注好这些细节，你也能写出高质量的JavaScript代码了。
所谓的高质量的JavaScript代码，其实指的就是可维护性高，可读性高，可拓展性高的代码，不仅开发的过程中写得舒服，而且后期维护也很轻松的代码质量。让我们一起从细节来把握我们的JavaScript质量。一、可维护性高的代码在我们开发过程中，当出现bug的时候，我们立刻去修复，这时候解决代码bug的思路是最清晰的。否则，你去做了别的代码任务或者这个bug出现了一段时间，你再去处理，你就忘了你写的思路是什么了，那这时候去处理这些代码你就需要想两个问题了：
1.花时间去学习和理解这个代码问题
2.花时间了解bug的解决方案
同时，你如果是在企业中做的大型项目，都是团队开发，开发和维护可能都不是同一个人（发现bug和修复bug的都不是作者）。
所以，必须降低大量的理解代码的时间，无论是你自己写的代码，还是团队中其他人的代码。
这关系到整个项目的发展和开发团队每个人的生活幸福啊，毕竟我们应该多花时间去研究更多好的代码想法，而不是时间都浪费在维护遗留代码里面。
所以，可维护性高的代码很重要，一般可维护性高的代码都有以下这些原则：
1._可读性高（例如好的命名，解析性强的注释）
2._一致性强（命名风格，编码风格，代码规范）
3._可预测性（明显看出运行效果）
4._风格统一（看上去就知道是不是同一个人写完的）
5._有记录（有清晰的注释开发记录）二、全局变量的问题什么是全局变量的问题，就是在你的javascript程序和网页中的所有代码都共享这些变量，他们都住在同一个命名空间里面（全局作用域），所以当程序在执行过程中两个不同部分定义同名但不同作用的全局变量的时候，命名冲突的情况就很常见了（许多小白遇到了就抓不着头脑了：咦，这个命名没问题啊，为什么报错了？）。
而且，网页里面包含有其他不是开发作者写的代码而产生的全局命名问题也是比较常见的。比如说：
1.第三方javascript库
2.甲方（或开发团队自己封装的代码）的脚步代码
3.第三方用户跟踪或分析代码
4.不同类型的UI组件
.....
这些带来的情况就很常见了，比如说，第三方脚本定义了一个变量，叫做userId，接着，你的函数里面也写了个userId的全局变量。这个时候的结果就是，后面的覆盖掉前面的变量，第三方脚本直接就无效了，这种情况是很难调试出来的。
所以，尽可能的少使用全局变量很重要，例如命名空间模式或者函数立即执行，不过要想让全局变量减少，最重要的还是多用var来声明变量。三、忘记var的副作用隐式全局变量和显式定义的全局变量是有点差异的。
具体如下：
·___ü_ar创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
·___挥型ü_ar创建的隐式全局变量（无视是否在函数中创建）是能被删除的。
所以隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。
属性是可以通过delete操作符删除的，而变量是不能的，具体的代码我这里就不说了。四、访问全局对象在浏览器中，全局对象可以通过window属性在代码任何地方访问（除非说你做了一些很超乎想象的事情，比如说声明了一个名为window的局部变量）。
但是在其他环境下，这个方便的属性可能被叫做其他什么东西（甚至在程序中不可用）。
如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：
五、for循环在使用for循环的时候，可以遍历拿到数组或者数组类似对象的值，比如说arguments和HTMLCollection对象，一般我们的写法都是这样的：
这种循环的方式并不是很好，每次执行循环的时候都需要获取一次数组的长度，这个时候我们代码的执行效率就特别低了，特别是当myArray不是数组的时候，而是一个HTMLCollection对象的时候。六、不扩展内置原型
扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。
增加内置的构造函数原型（如Object(),Array(),或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。
使用你代码的其他开发人员很可能更期望使用内置的JavaScript方法来持续不断地工作，而不是你另加的方法。
另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。七、避免隐式类型转换JavaScript的变量在比较的时候会隐式类型转换。
这就是为什么一些诸如：false==0或“”==0返回的结果是true。
为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。
八、编码规范建立和遵循编码规范是很重要的，这让你的代码保持一致性，一目了然，更易于阅读和理解。
一个新的开发者加入这个团队可以通读规范，能马上理解其它团队成员书写的代码，更快上手进行开发。九、缩进代码开发，标准的缩进是最基本的，没有缩进的代码基本就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。十、注释注释这个，其实是应该只要是写了代码，都要有注释的，让别人一看你的代码就能快速理解你的代码。
在平时我们开发的时候，你很花时间去研究一个程序怎么实现，你会很清楚的知道这个代码是干嘛用的。但是，你一周之后回来再看这段代码，你就会烧掉很多脑细胞了。
当然，注释也不能走极端路线：有的人就说不是要理解没一段代码吗，那每个单独变量或是单独一行就给一段注释。这样就很没有意义了。
一般来说，注释都是记录在函数的部分，它们的参数和返回值，或是一些不寻常的技术和方法。通过注释可以给你代码的未来阅读者以诸多提示；
阅读你代码的人需要的是（不要读太多的东西）注释和函数名来理解你的代码意义。十一、花括号{}花括号（也称大括号，下同）应该多使用，即使在它们为可选的时候。技术上来说，在in或是for中如果执行语句仅一条时，花括号是不需要写也能执行理想效果的，但是你最好还是用花括号，因为这会让你的代码更有持续性和易于更新，并且更加好理解。
以上就是小编今天为大家分享的关于Web前端工程师该如何写出高质量的JavaScript代码的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
B. Web前端面试题汇总之JavaScript篇
今天小编要跟大家分享的文章是关于web前端面试题汇总之JavaScript篇。正在从事web前端学习和准备找工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
1，介绍js的基本数据类型。
Undefined、Null、Boolean、Number、String
2，介绍js有哪些内置对象?
Object是JavaScript中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number和String
其他对象：Function、Arguments、Math、Date、RegExp、Error
3，说几条写JavaScript的基本规范?，
1.不要在同一行声明多个变量。
2.请使用===/!==来比较true/false或者数值
3.使用对象字面量替代newArray这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染。
4，JavaScript原型，原型链?有什么特点?
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype=instance.__proto__
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，
就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到Object内建对象。
functionFunc(){}
Func.prototype.name="Sean";
Func.prototype.getInfo=function(){returnthis.name;}
varperson=newFunc();
//现在可以参考
varperson=Object.create(oldObject);
console.log(person.getInfo());
//它拥有了Func的属性和方法//"Sean"console.log(Func.prototype);
//Func{name="Sean",getInfo=function()}复制代码
5，JavaScript有几种类型的值?，你能画一下他们的内存图吗?
栈：原始数据类型(Undefined，Null，Boolean，Number、String)
堆：引用数据类型(对象、数组和函数)
两种类型的区别是：存储位置不同;
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储;
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能;引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
在栈中的地址，取得地址后从堆中获得实体
6，Javascript如何实现继承?
1、构造继承
2、原型继承
3、实例继承
4、拷贝继承
原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
functionParent(){this.name='wang'}functionChild(){this.age=28;}
Child.prototype=newParent();//继承了Parent，通过原型vardemo=newChild();
alert(demo.age);alert(demo.name);//得到被继承的属性复制代码
7，Javascript作用链域?
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
8，谈谈This对象的理解。
this总是指向函数的直接调用者(而非间接调用者);
如果有new关键字，this指向new出来的那个对象;
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window;
this就是指的是当前对象
9，null，undefined的区别?
null表示一个对象被定义了，值为“空值”;
undefined表示不存在这个值。
typeofundefined//"undefined"
undefined:是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回
undefined;
例如变量被声明了，但没有赋值时，就等于undefined
typeofnull//"object"
null:是一个对象(空对象,没有任何属性和方法);
例如作为函数的参数，表示该函数的参数不是对象;
注意：
在验证null时，一定要使用===，因为==无法分别null和undefined
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
(1)变量被声明了，但没有赋值时，就等于undefined。
(2)调用函数时，应该提供的参数没有提供，该参数等于undefined。
(3)对象没有赋值的属性，该属性的值为undefined。
(4)函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
(1)作为函数的参数，表示该函数的参数不是对象。
(2)作为对象原型链的终点。
10，["1","2","3"].map(parseInt)答案是多少?
[1,NaN,NaN]因为parseInt需要两个参数(val,radix)，
其中radix表示解析时用的基数。
map传了3个(element,index,array)，对应的radix不合法导致解析失败。
以上就是小编今天为大家分享的关于web前端面试题汇总之JavaScript篇的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
C. 2020年Web前端面试题汇总(一)
今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。
1.说几条写JavaScript的基本规范?
1)不要在同一行声明多个变量;
2)请使用===/!==来比较true/false或者数值;
3)使用对象字面量替代newObject这种形式;
4)减少使用全局函数,全局变量;
5)switch语句必须带有default分支;
6)if语句必须使用大括号;
7)for-in循环中的变量;
应该使用var关键字明确限定作用域;
从而避免作用域全局污染。
2.说说平衡二叉树?
平衡二叉搜索树(Self-balancingbinarysearchtree)
又被称为AVL树。
具有以下性质：
1)它是一棵空树或它的左右两个子树
的高度差的绝对值不超过1，
并且左右两个子树都是一棵平衡二叉树。
2)平衡二叉树必定是二叉搜索树，反之则不一定。
3)平衡二叉树的常用实现方法有红黑树、AVL、
替罪羊树、Treap、伸展树等。
最小二叉平衡树的节点的公式如下：
F(n)=F(n-1)+F(n-2)+1备注：1是根节点，
F(n-1)是左子树的节点数量，
F(n-2)是右子树的节点数量。
3.清除浮动和解决垂直外边距重叠的解决方案?
问题描述:
1)父元素没有设置宽高，尺寸由子元素撑起;
子元素一旦浮动，父元素高度会发生塌陷。
2)子元素设置margin-top会作用的父元素的margin-top;
此时会造成垂直外边距重叠。
.clearfix::after,.clearfix::before{
content:''
display:table;
clear:both;
}
4.sessionStorage、localStorage和cookie?
相同点:
都用于浏览器端存储的缓存数据;
不同点:
1)存储内容是否发送到服务器端
当设置了Cookie后，数据会发送到服务器端，
造成一定的宽带浪费;xxxstorage则会将数据保存
到本地，不会造成宽带浪费;
2)数据存储大小不同
Cookie数据不能超过4K，适用于会话标识;
xxxstorage数据存储可以达到5M;
3)数据存储的有效期限不同
cookie只在设置了Cookid过期时间
之前一直有效，即使关闭窗口或者浏览器;
sessionStorage,仅在关闭浏览器之前有效;
localStorage,数据存储永久有效;
4)作用域不同
cookie和localStorage是在同源同窗口中
都是共享的;
sessionStorage不在不同的浏览器窗口
中共享，即使是同一个页面;
5.判断一个单词是否是回文?
回文是指把相同的词汇或句子，
在下文中调换位置或颠倒过来，
产生首尾回环的情景，
叫做回文，也叫回环。
比如cacac，redivider。
letcheckPalindrom=(str)=>{
returnstr===
str.split('').reverse().join('');
}
6.不借助临时变量，进行两个整数的交换?
输入a=3,b=1,
输出a=1,b=3
letswap=(a,b)=>{
b=b-a;
a=a+b;
b=a-b;
return[a,b];
}
7.请写出至少5个html5新增的标签，并说明其语义和应用场景?
section：定义文档中的一个章节;
nav：定义只包含导航链接的章节;
header：定义页面或章节的头部;
它经常包含logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部;
它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容，
如果被删除，剩下的内容仍然很合理。
8.get和post请求在缓存方面的区别?
get请求类似于查找的过程，用户获取数据，
可以不用每次都与数据库连接，所以可以使用缓存。
post不同，post做的一般是修改和删除的工作，
所以必须与数据库交互，所以不能使用缓存。
因此get请求适合于请求缓存。
9.如何解决异步回调地狱?
promise、generator、async/await
10.图片的懒加载和预加载?
预加载：提前加载图片，
当用户需要查看时可直接
从本地缓存中渲染。
懒加载：懒加载的主要目的
是作为服务器前端的优化，
减少请求数或延迟请求数。
两种技术的本质：
两者的行为是相反的，
一个是提前加载，
一个是迟缓甚至不加载。
懒加载对服务器前端有一定
的缓解压力作用，
预加载则会增加服务器前端压力。
11.bind，apply，call的区别?
通过apply和call改变函数的this指向，
这两个函数的第一个参数都是一样的，
表示要改变指向的那个对象，
第二个参数，apply是数组，
而call则是arg1,arg2...这种形式。
通过bind改变this作用域
会返回一个新的函数，
这个函数不会马上执行。
12.js怎么控制一次加载一张图片，加载完后再加载下一张?
方法一:
varobj=newImage();
obj.src="#/21.jpg";
obj.onload=function(){
document.getElementById("pic")
.innnerHTML="
}
D. 一个前端 Javascript的问题，有点迷，好像没有问这种问题了，但是问了好多人都模糊其词
这个涉及“变量声明的提升”的知识
JavaScript程序在执行之前，有一个预读阶段。在预读阶段，程序会识别所有的变量定义。
如果使用一个变量，但是这个变量没有定义过，会报错：
console.log(a); //报错，a is not define
如果使用一个变量，这个变量先使用然后再定义，这个变量会输出undefined：
console.log(a); //undefined
var a = 10;
变量在预读阶段，提升的只是定义，不是它的值。所以JS规定，这种没有值的变量，值默认是undefined。
需要注意的是，变量声明的提升，会把变量提升到当前作用域的最开始位置。
E. 前端运算符有哪些
算术运算符 加减乘除 自增i++ 自减i-- %求余
赋值运算符 a+=c 相当于 a+c
逻辑运算符 与&& 或|| 非!
比较运算符 大于等于小于 不等于！=
F. 【Web前端基础】算术运算符的优先级顺序
算术运算的优先级顺序：先乘除，后加减。如有括号，先算括号内的算式，后算括号外的算式。如有小括号、中括号、大括号，先算小括号内的，再算中括号内的，再算大括号内的。
G. 在面试前端开发的时候遇到一个面试题，求解 var a =10; (function(){ console.log(a); var a=100; })
vara=10;
(function(){
console.log(a);
vara=100;
})();
结果：输出undefined
解释：
function中有var a = 100;
声明会提升到function最开头，但赋值发生在最后。
上面的代码等价于：
vara=10;
(function(){
vara;
console.log(a);
a=100;
})();
打印a的时候，a并没有在function内赋值，所以是undefined
H. web前端中原生js如何获取后端php传递来json
json有2种结构，一种是中括号括起来的，是数组，可以直接用 下标获取值
还有一种是大括号括起来的，是对象，对象的结构是 key：value，key：value。。形势的，
这种取值的方法是 对象名。key
如果是数组，你可以直接 对象[对象.length]="你要加入的值"
如果是对象 你可以 对象.你要加的key = "你要加入的值"
I. 前端拿到的接口最后有一个大括号代表什么
比如dedecms
{channel}{/channel}
像这样成对出现的标签，都是开发这套程序的开发者为了方便使用，给用户留下的使用接口。后台程序会通过这个标签，调用指定的算法和程序文件去做出响应。
差不多就是这个意思。
J. html中的{....}这两个大括号，是干什么用的
据我所知，在html语言里是没有{}这符号的，但在css里却是必须用到，表示一个整体的选择符，{}里面写的是css的各钟属性