前端面试题-3

短命女 2021-12-22 13:53 537阅读 0赞

一、基础  
1.var a = "2015",请对变量a进行操作生成倒序排序的字符串“5，2，1，0”。

var a = "2015";
    var arr = Array.from(a).map(el => Number(el))
    arr.sort((a,b) => b-a)
    var res = arr.join(",")
    console.log(res) //5, 2, 1, 0

2.console.log(0.1+0.2 === 0.3)

这和javascript的精度有关系，可以算是一个语言上的bug。

// false

3.console.log(0 || "1" && 2)

这道题考查逻辑运算符。

// 2

4.从字符串var a = "2015年是最重要的一年"中截取出“重要”有哪些方法？

此题考查字符串截取的相关方法

var a = "2015年是最重要的一年"
    var res = a.slice(7,9) // [start, end],类似的subtring([start, stop])
    console.log(res) // 重要

或

var a = "2015年是最重要的一年"
    var res = a.substr(7,2) // [start, length]
    console.log(res) // 重要

5.apply和call的用途是什么？有什么区别？

用途：

call和apply都能够改变函数执行时的上下文，将一个对象的方法交给另一个对象来执行，并且是立即执行。（同时，调用它们的对象必须是一个函数Function。）

区别：  
call的函数签名如下：

Function.call(obj[,param1[,param2[,...[,paramN]]]])

apply的函数签名如下：

Function.apply(obj[,argArray])

其中，Function为调用的函数对象，obj为目标对象，当不传时，默认为window。call的参数可任意多个，用逗号隔开；apply的第二参数为一个参数数组或类数组。

6.div\[foo\], div\[foo="bar"\], div\[foo\*="bar"\]这三个css选择表达式分别表示什么意思？

div\[foo\]：所有div中有一个属性"foo"

div\[foo="bar"\]：所有div中有一个等于"bar"的属性"foo"

div\[foo\*="bar"\]：所有div中有一个包含"bar"子字符串的属性"foo"

7.你都知道哪些HTML5和CSS3的知识，简述。

略

二、Javascript中级笔试题  
1.下面输出结果是什么？  
console.log(2 in \[1,2\])

因为\[1,2\]的属性只有“0”和“1”。in操作符语法： prop in object。 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true

// false

console.log(typeof \[8,5,2\])

// "object"

2.下面的输出结果是什么？  
if(!("a" in window))\{  
var a = 1  
\}  
console.log(a)

// undefined

此题考查的是变量提升。

3.下面的输出结果是什么？  
(function()\{  
var a = b = 3  
\})()  
console.log(a, b)

报错：a is not defined.

4.下面的输出结果是什么？  
var a = \[1,2\], b = \[3\], c = 6  
function test(a1, b1, c1)\{  
a1 = \[\]  
b1\[0\] = 4  
c1 = 7  
\}  
test(a, b, c)  
console.log(a, b, c)

// [1,2], [4], 6

这个题考查的是数据类型,数组是引用数据类型,本质是一个对象通过一个地址值被引用,test()没有改变数组a的属性(索引值),也没有改变a引用的对象地址值,所以a不变,输出还是\[1,2\]

b的索引值发生了改变,相当于改变了它的属性值,所以输出的b变成了\[4\]

c是一个Number类型的值,在test()中的操作,实际是把c的值复制了一份拿去操作,不影响本身的值,所以还是6

5.请写出简单的匹配email地址的正则表达式，例如匹配newbi@shuyun.com

^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

可以参考：[https://blog.csdn.net/make164492212/article/details/51656638][https_blog.csdn.net_make164492212_article_details_51656638]

三、JavaScript高级笔试  
1.下面两段代码输出结果是什么？  
var scope = "global"  
function checkScope()\{  
var scope = "local"  
function f()\{  
return scope  
\}  
return f()  
\}  
checkScope()

// "local"

var scope = "global"  
function checkScope()\{  
var scope = "local"  
function f()\{  
return scope  
\}  
return f  
\}  
checkScope()()

// "local"

此题第一个考查作用域，第二个结合了闭包

2.请先说明javascript通过new创建对象的过程中都做了什么？然后参考如下代码解释当调用a.x和a.y()时a对象的x和y属性都是如何被找到的？  
function A() \{  
this.x = 1  
\}

A.prototype = \{  
x: 2,  
y: function() \{  
return this.x  
\}  
\}

var a = new A()

new创建对象的过程：

1.先创建一个原生对象，假定为obj = \{\}或obj = new Object,。

2.获得构造函数Person的prototype对象，并将其赋给obj的\[\[Prototype\]\]属性。在firefox中它表现为\_\_proto\_\_

3.call构造函数的内部方法，把其中的this赋值为新创建的对象obj，并传入所需参数。即绑定this。

4.执行构造函数，并返回创建的对象。

注意：正常来讲构造函数中是不用写return语句的，因为它会默认返回新创建的对象。但是，如果在构造函数中写了return语句，如果return的是一个对象，那么函数就会覆盖掉新创建的对象，而返回此对象；如果return的是基本类型如字符串、数字、布尔值等，那么函数会忽略掉return语句，还是返回新创建的对象。

a.x的值为1，调用时先查找构造函数本身的成员变量，如果有直接获取，否则查找其原型链上该属性。

a.y()的运行结果为1，调用过程同上。

3.画图描述原型链是如何构成的？（越详细越好）

![939316-20190219150252228-1287338608.png][]

4.下面输出结果是什么，为什么？  
var begin = Date.now(), timeIsUp = false

setTimeout(function()\{  
console.log(1)  
\}, 1)

while(!timeIsUp)\{  
if(Date.now() - begin > 100)\{  
timeIsUp = true  
console.log(2)  
\}  
\}

// 2 1

这里考查了js的事件机制。

5.你所理解的作用域？作用域是如何构成的（能画出来构建过程为佳），结合代码。  
var global = 1  
function parent()\{  
var local = 1.1  
function child()\{  
console.log(global, child, window)  
\}  
child()  
\}  
parent()

略

四、逻辑题  
1.现有三种不同重量的标准砝码1克，3克，9克各一只。请问可以称处多少不同物品的重量？  
（在进行称量时，要称的东西与已知的标准砝码可以任意的放在天平的两盘中。每个物品只能用一次。为什么是1、3、9这三个砝码，如果是1，3，9，27，可以称处多少不同重量？或者是1，4，16会怎样？）

此题考查的是**梅齐利亚克砝码问题**。 [https://blog.csdn.net/hcwzq/article/details/6817097][https_blog.csdn.net_hcwzq_article_details_6817097]

五、综合题  
1.自己出一道觉得能代表个人水平的面试题

2.列举几个前端性能优化的方式及方法

3.关于前端发展的现状及困境，未来前端的发展方向几点谈谈自己的理解及看法

转载于:https://www.cnblogs.com/zyl-Tara/p/10400627.html

[https_blog.csdn.net_make164492212_article_details_51656638]: https://blog.csdn.net/make164492212/article/details/51656638
[939316-20190219150252228-1287338608.png]: /images/20211220/6448d4326c604fab8aa2f7535c57624e.png
[https_blog.csdn.net_hcwzq_article_details_6817097]: https://blog.csdn.net/hcwzq/article/details/6817097