web面试宝典

paragraph

⑸ 2019Web前端面试题及答案汇总-Jquery篇

今天小编要跟大家分享的文章是关于2019Web前端面试题及答案汇总-Jquery篇。相信最近准备参加Web前端面试的小伙伴一定不在少数，为了帮助大家顺利的通过面试成为一名优秀的Web前端工程师，小编为大家准备了前端面试题系列，通过Web知识的整理以及经验的总结，希望能帮到更多的前端面试者。

Jquery相关


1、jQuery库中的$()是什么?


$()函数是jQuery()函数的别称。$()函数用于将任何对象包裹成jQuery对象，接着你就被允许调用定义在jQuery
对象上的多个不同方法。你可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。


2、如何找到所有HTMLselect标签的选中项?


$('[name=selectname]:selected')


3、$(this)和this关键字在jQuery中有何不同?


$(this)返回一个jQuery对象，你可以对它调用多个jQuery方法，比如用text()获取文本，用val()
获取值等等。


而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用jQuery方法，直到它被
$()函数包裹，例如$(this)。


4、jquery怎么移除标签onclick属性?


获得a标签的onclick属性:$("a").attr("onclick")


删除onclick属性：$("a").removeAttr("onclick")


设置onclick属性：$("a").attr("onclick","test();")


5、jquery中addClass、removeClass、toggleClass的使用。


$(selector).addClass(class)：为每个匹配的元素添加指定的类名


$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值;


$(selector).toggleClass(class)：如果存在(不存在)就删除(添加)一个类


$(selector).removeAttr(class);删除class这个属性;


6、JQuery有几种选择器?


(1)、基本选择器：#id，class,element,*;


(2)、层次选择器：parent>child，prev+next，prev~siblings


(3)、基本过滤器选择器：:first，:last，:not，:even，:odd，:eq，:gt，:lt


(4)、内容过滤器选择器：:contains，:empty，:has，:parent


(5)、可见性过滤器选择器：:hidden，:visible


(6)、属性过滤器选择器：[attribute]，[attribute=value]，[attribute!=value]
，[attribute^=value]，[attribute$=value]，[attribute*=value]


(7)、子元素过滤器选择器：:nth-child，:first-child，:last-child，:only-child


(8)、表单选择器：:input，:text，:password，:radio，:checkbox，:submit等;


(9)、表单过滤器选择器：:enabled，:disabled，:checked，:selected


7、jQuery中的Delegate()函数有什么作用?


delegate()会在以下两个情况下使用到：


1)、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：


$("ul").delegate("li","click",function(){$(this).hide();});


2)、当元素在当前页面中不可用时，可以使用delegate()


8、$(document).ready()方法和window.onload有什么区别?


(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。


(2)、$(document).ready()方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。


9、如何用jQuery禁用浏览器的前进后退按钮?


实现代码如下：



$(document).ready(function(){

window.history.forward(1);

//ORwindow.history.forward(-1);

});



10、jquery中$.get()提交和$.post()提交有区别吗?


相同点：都是异步请求的方式来获取服务端的数据;


异同点：


1、请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post()方法使用POST方法来进行异步请求的。


2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。


3、数据传输大小不同：get方式传输的数据大小不能超过2KB而POST要大的多


4、安全问题：GET方式请求的数据会被浏览器缓存起来，因此有安全问题。


11、写出一个简单的$.ajax()的请求方式?

$.ajax({

url:'http://www..com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend：function(){},

success:function(){},

error:function(){},

complete:function(){}

});

ja

以上就是小编今天为大家分享的关于2019Web前端面试题及答案汇总-a
Jquery篇的文章，希望本篇文章中的面试题能够对正准备参加Web前端面试的小伙伴们有所帮助。想要了解更多Web前端方面的知识记得关注北大青鸟Web前端培训官网。最后祝愿小伙伴们面试成功成为一名优秀的Web前端工程师。

⑹ web前端工程师面试自我介绍_web前端工程师面试自我介绍怎么说

自我介绍 ，就是自己将自己介绍给他人或众人的一种介绍方式。那么web前端工程师 面试 时自我介绍应该怎么说？以下是我为您整理的web前端工程师 面试自我介绍 内容，希望能帮到你。

我喜欢 篮球 和 乒乓球 ，曾担任大学校篮球队队员。在篮球队中深刻体会到在大家共同努力下击败对手的成就感!

对于计算机有着狂热的喜爱，虽掌握软件众多，但对编程情有独钟!在每一次解决了问题后都有一种成就感!我喜欢这种感觉，让我能沉迷于我的代码的世界中!

爱好 程序设计，喜欢开发自已的小型产品，追求技术上的满足感;稳固的架构，健壮的代码，团结的合作，是我的不懈追求。

有良好的编程习惯，以及程序错误控制和解决能力，我爱程序员这个岗位，当每天敲着代码，听着音乐，是很快乐的

用心工作，用心生活!我可能不是最好的，最合适的，我觉得我是最有潜力的!2016,一起加油!

good morning, my name is jack, it is really a great honor to have this opportunity for a interview, i would like to answer whatever you may raise, and i hope i can make a good performance today, eventually enroll in this prestigious university in september. now i will introce myself briefly,i am 21 years old,born in heilongjiang province ,northeast of china,and i am curruently a senior student at beijing xx uni.my major is packaging engineering.and i will receive my bachelor degree after my graation in june.in the past 4 years,i spend most of my time on study,i have passed cet4/6 with an ease. and i have acquired basic knowledge

of packaging and publishing both in theory and in practice. besides, i have attend several packaging exhibition hold in beijing, this is our advantage study here, i have taken a tour to some big factory and company. through these i have a deeply understanding of domestic packaging instry. compared to developed countries such as us, unfortunately, although we have made extraordinary progress since 1978,our packaging instry are still underdeveloped, mess, unstable, the situation of employees in this field are awkard. but i have full confidence in a bright future if only our economy can keep the growth pace still. i guess you maybe interested in the reason itch to law, and what is my plan ring graate study life, i would like to tell you that pursue law is one of my lifelong goal,i like my major packaging and i won't give up,if i can pursue my master degree here i will combine law with my former ecation. i will work hard in thesefields ,patent ,trademark, right, on the base of my years study in department of p&p, my character? i cannot describe it well, but i know i am optimistic and confident. sometimes i prefer to stay alone, reading, listening to music, but i am not lonely, i like to chat with my classmates, almost talk everything ,my favorite pastime is valleyball,playing cards or surf online. through college life,i learn how to balance between study and entertainment. by the way, i was a actor of our amazing drama club. i had a few glorious memory on stage. that is my pride.

my name is zhao wanjun. wanjun is my given name. wan means sweet and jun means person, so my name means a sweet-tempered girl. i actually am! but you can call me june, for your convenience, j-u-n-e, IT's similar to my chinese name jun. i am from enping, a small cITy in the southwest of guangdong province, near hongkong and macao. maybe you have never been there before, IT's well known for the hot springs there.

in 2014, i got the highest score in the college entrance examinations in my cITy and entered zhongshan universITy. my major is computer science. my gpa ranks in the top 40% among all students, but i have stronger c++ programming skills than many others. also, i was the first one to learn java in my class.

i was chosen by a teacher of mine to participate in his project. the project was about a lan chat room, and i developed the instant messaging system in IT. i was the only female student in this project team.

besides study and the project, i worked in the student union for two years, first year as a member, next year promoted to be the general secretary. my colleagues describe me as a reliable and considerate person.

ibm is top on my job hunting list for of the reasons you hear every day. i look forward to joining a famous company as IT means good training, good pay, and good people to work wITh, just like you gentlemen!

technical support engineer is my ideal job because i have both a technical background and the abilITy to deal wITh clients. also, traveling isn’t a problem although i am a woman.

⑺ 常见的web前端面试题及答案分享

1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。

2、box-sizing常用的属性有哪些?分别有什么作用?

答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3、Doctype作用?标准模式与兼容模式各有什么区别?

答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

(6)表单控件，calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。

以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!

⑻ 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="";


}


加载中

⑼ web前端面试十大总结，不了解一下吗

在互联网时代，浏览器几乎主宰着一切，而前端开发人员决定着浏览器的内容展现形式和信息的提供，是不可或缺的一部分。前端开发实际上具有很明显的时代特征，它在很大程度上决定着大众的信息摄入，以及用户读取信息的有效方式。那么今天小编为大家总结了一些web前端的面试题，希望对大家有帮助哦！

一：字体高亮函数


题目：请你完成highlight函数，可以把模版字符串中的插入内容替换掉，并且插入文档以后显示红色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的页面显示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


请你完成highlight函数的编写。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：数组去重


题目：编写一个函数unique(arr)，返回一个去除数组内重复的元素的数组。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


题目：完成一个extractStr函数，可以把一个字符串中所有的:到.的子串解析出来并且存放到一个数组当中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之间不包含:和.。也即是说，如果::abc..，则返回['abc']。


(本题来源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify题目：


请你给字符串都添加上原型方法spacify，可以让一个字符串的每个字母都多出一个空格的间隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本题来源：#/interview-questions)答案：String.prototype.spacify
=function(){


returnthis.split('').join('')


}


五：safeGet


题目：有时候我们需要访问一个对象较深的层次，但是如果这个对象某个属性不存在的话就会报错，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


data.a.b.c//=>scriptoj


data.a.b.c.d//=>报错，代码停止执行


console.log('ScriptOJ')//=>不会被执行


请你完成一个safeGet函数，可以安全的获取无限多层次的数据，一旦数据不存在不会报错，会返回undefined，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


safeGet(data,'a.b.c')//=>scriptoj


safeGet(data,'a.b.c.d')//=>返回undefined


safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined


console.log('ScriptOJ')//=>打印ScriptOJ


答案：


constsafeGet=(o,path)=>{


try{


returnpath.split('.').rece((o,k)=>o[k],o)


}catch(e){


returnvoid666


}


}


六：判断两个矩形是否重叠


题目：用一个对象的数据来表示一个矩形的位置和大小：


{


x:100,


y:100,


width:150,


height:250


}


它表示一个宽为150高为250的矩形在页面上的(100,100)的位置。


请你完成一个函数isOverlap可以接受两个矩形作为参数，判断这两个矩形在页面上是否重叠。例如：


constrect1={x:100,y:100,width:100,height:100}


constrect2={x:150,y:150,width:100,height:100}


isOverlap(rect1,rect2)//=>true


答案：


//原理：#/find-two-rectangles-overlap/


constisOverlap=(rect1,rect2)=>{


constl1={x:rect1.x,y:rect1.y}


constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}


constl2={x:rect2.x,y:rect2.y}


constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}


if(


l1.x>r2.x||


l2.x>r1.x||


l1.y>r2.y||


l2.y>r1.y


)returnfalse


returntrue


}


七：按下标插入


题目：现在有一个数组存放字符串数据：


['item1','item2','item3','item4','item5']


有另外一个数组存放一组对象：


[


{content:'section1',index:0},


{content:'section2',index:2}


]


它每个对象表示的是会往原来的数组的index坐标插入content数据(index不会重复)：


01234


item1itme2item3item4item5


^^


||


section1section2


最后结果是：['section1','item1','item2','section2','item3','item4',
'item5']


请你完成injectSections函数，可以达到上述的功能：


injectSections(


['item1','item2','item3','item4','item5'],


[


{content:'section1',index:0},


{content:'section2',index:2}


]


)//=>['section1','item1','item2','section2','item3','item4',
'item5']


答案：


constinjectSections=(items,sections)=>{


/*需要插入坐标对应数据存放到map里面*/


constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))


/*新建一个数组，然后往里面push原来数组的数据*/


returnitems.rece((ret,item,index)=>{


/*push的时候先检查map里面有没有，有的话先pushmap里面的数据*/


if(sectionsMap.has(index))ret.push(sectionsMap.get(index))


/*再push原来的数据*/


ret.push(item)


returnret


},[])


}


八：数组拍平(二)


题目：编写一个JavaScriptgenerator函数，接受一个仅包含数字的多维数组
，返回一个迭代器，可以遍历得到它拍平以后的结果。例如：


constnumbers=flatten2([1,[[2],3,4],5])


numbers.next().value//=>1


numbers.next().value//=>2


numbers.next().value//=>3


numbers.next().value//=>4


numbers.next().value//=>5


答案：


function*flatten2(arr){


for(leti=0;i

constitem=arr[i]


/*yield*的使用可以大大简化程序编写*/


Array.isArray(item)?yield*flatten2(item):yielditem;


}


}


/*用flatten2来完成flatten也是很方便的*/


//constflatten=(arr)=>[...flatten2(arr)]


九：判断两个Set是否相同


题目：完成isSameSet函数，它接受了两个Set对象作为参数，请你返回true/false来表明这两个set
的内容是否完全一致，例如：


consta={}


constb=1


constc='ScriptOJ'


constset1=newSet([a,b,c])


constset2=newSet([a,c,b])


isSameSet(set1,set2)//=>true


答案：


//codefrom#/js-example.html


/*这道题不能简单地使用sort，使用sort并不靠谱。因为Set里面的内容可能有很多种类


*字符串、对象、数字，不同类型之间是不可对比的，所以排序结果并不会一致


*


*最好的方式是按照数学上集合相等的定义：


*A=B当且仅当A是B的子集并且B是A的子集。


*


*这种判断方式还可以用在对象、map等其他数据类型的判断当中。


*/


constisSameSet=(s1,s2)=>{


/*获取一个集合所有的值，判断另外一个集合是否全部包含该这些值*/


constisSame=(a,b)=>{


constvalues=[...a]


for(letvalofvalues){


/*及时跳出循环，可以降低算法复杂度*/


if(!b.has(val))returnfalse


}


returntrue


}


/*a包含b，b包含a，那么两个集合相同*/


returnisSame(s1,s2)&&isSame(s2,s1)


}


/*By陈小俊*/


//constisSameSet=(set1,set2)=>


//[...set1].every((o)=>set2.has(o))&&


//[...set2].every((o)=>set1.has(o))


十：记忆化斐波那契函数(Memoization)


题目：斐波那契数列指的是类似于以下的数列：


1,1,2,3,5,8,13,....


也就是，第n个数由数列的前两个相加而来：f(n)=f(n-1)+f(n-2)


请你完成fibonacci函数，接受n作为参数，可以获取数列中第n个数，例如：


fibonacci(1)//=>1


fibonacci(2)//=>1


fibonacci(3)//=>2


...


测试程序会从按顺序依次获取斐波那契数列中的数，请注意程序不要超时，也不要添加额外的全局变量。


本题来源：《JavaScript语言精髓》


答案：


constfibonacci=((memo=[0,1])=>{


constfib=(n)=>{


letresult=memo[n]


if(typeofresult!=="number"){


result=fib(n-1)+fib(n-2)


memo[n]=result


}


returnresult


}


returnfib


})()
最后就是反应能力，临场出现意外什么的了，这就看你自己了，万一自己一不留神说错话了，大神给你指出来，请记得谢谢一定要谦虚！在这里小编也希望每一位web培训班毕业的学员都能顺利找到称心的工作！


免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容
在互联网时代，浏览器几乎主宰着一切，而前端开发人员决定着浏览器的内容展现形式和信息的提供，是不可或缺的一部分。前端开发实际上具有很明显的时代特征，它在很大程度上决定着大众的信息摄入，以及用户读取信息的有效方式。那么今天小编为大家总结了一些web前端的面试题，希望对大家有帮助哦！

一：字体高亮函数


题目：请你完成highlight函数，可以把模版字符串中的插入内容替换掉，并且插入文档以后显示红色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的页面显示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


请你完成highlight函数的编写。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：数组去重


题目：编写一个函数unique(arr)，返回一个去除数组内重复的元素的数组。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


题目：完成一个extractStr函数，可以把一个字符串中所有的:到.的子串解析出来并且存放到一个数组当中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之间不包含:和.。也即是说，如果::abc..，则返回['abc']。


(本题来源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify题目：


请你给字符串都添加上原型方法spacify，可以让一个字符串的每个字母

⑽ 资深HR揭秘：Web前端面试技巧有哪些

Web前端面试技巧

Web前端工程师的面试前的准备:

1. 自我介绍

准备不同时间版本的1 分钟、3 分钟的自我介绍.反复练习,并脱稿,但不是背诵.因为背的话自我介绍就显得十分的生硬,一定要用自然的语言将自我介绍说出来.这样可以给面试官留下很好的第一印象.

2. 预演

搜索一些你应聘的公司和职位,在宿舍里、家里,先自己预演下,可能会被问及的各种问题和答案.即使你不能猜中所有问题--当然HR也不会面面俱到、一直不停的提问,最关键词的只有那么几个.思考问题的过程会让你减轻紧张而且在面试时心里有底.

3. 积极自我暗示

在群面的时候,我们可能会因为别人的发言而绕乱了自己的思路.这时候千万不要乱,适当的做深呼吸调整一下自己,做到沉着冷静,整理好自己的思路,努力回忆自己所学和所掌握的知识,给自己积极的心理暗示,一句话:相信自己能行!你是最棒的.

4. 面试简历一定要准备充分

面试你的人可能不止1 个.预先料到这点.并准备好会显得你做事正规、细致.没有比当被要求提供多一份简历而你却没有.更能表明你缺乏准备的事了.你说呢?

5. 完整而认真的填写公司要求的表格

尽管你认为它们用处不大、尽管你带了简历来,很多公司都会要求你填一张表.你愿意并且有始有终地填完这张表,会传达出你做事正规、做事善始善终.

面试过程:

1. 给面试官留下深刻的印象

最初和最后的五分钟是面试中最关键的,在这段时间里决定了你留给人的第一印象和临别印象以及主考人是否欣赏你.最初的五分钟内应当主动沟通,离开的时候,要确定你已经被记住了.要让人产生好感,富于热情.人们都喜欢聘请容易相处且为公司自豪的人.要正规稳重,也要表现你的精力和兴趣.

2. 学会自我营销

营销自己十分重要,将你所有的优势推销出去,包括你的技术资格,一般能力和性格优点,雇主只在乎两点:你的资历凭证、你的个人性格.你能在以往业绩的基础上工作并适应公司文化吗?谈一下你性格中的积极方面并结合例子告诉对方你在具体工作中会怎么做.

展示你勤奋工作追求团体目标的能力,大多数主考人都希望找一位有创造力、性格良好、能够融入到团体之中的人.你要必须通过强调自己给对方带来的好处来说服对方你两者皆优.