1.多选题 (每题2分，共40分)

1. 下列说法错误的是( )

A、设置display:none后的元素只会导致浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排

C、设置元素opacity:0之后，也可以触发点击事件

D、visibility:hidden的元素无法触发其点击事件

解析：

display:none 会导致重排，重排必然导致重绘

2. css中哪些属性可以继承（）

A、font-size

B、color

C、font-family

D、border

解析：

选A、B、C

margin padding border display 不可以继承

3、要将下面代码中超链接文本呈现为红色，不可以使用的样式表是（）

<div><a href="http://www.w3.org/">**链接到W3C**</a></div>

A、a:link{color:red}

B、div a:link{color:red}

C、div > a:link{color:red}

D、div:first-child{color:red} 解析：

选 D

4、下边这代码输出的结果是：( )

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A、Case A

B、Case B

C、undefined

D、Do not know!

解析：

选D

此题考查的是关于new string();其中new是一个实例对象,要匹配的也是object, 所以输出结果为Do not know

5、下边这代码输出的结果是（）

console.log([0.2 - 0.1 == 0.1, 0.3 - 0.2 == 0.1]);

A、[true, true]

B、[false, false]

C、[true, false]

D、other

解析：

选C

这题考的是浮点数计算时精度丢失问题

0.1 -> 0.0001100110011001...(无限循环)

0.2 -> 0.0011001100110011...(无限循环)

解决方案

let sum = 0.1 + 0.2; alert( sum.toFixed(2) ); // 0.30

6、以下代码的执行结果是什么（）

var string = 'string';  
var number = 0;       
var bool = true;     
console.log(number || string);      
console.log(number && string); 
console.log(bool || number);
console.log(bool && number);

A. ‘string’, 0, true,0

B. ‘string’, true,0, 0

C. ‘string’, ‘string’,true, 0

D. ‘string’, 0, true,true

解析：

选A

7、["1", "2", "3"].map(parseInt) 返回的结果为（）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

选D

这题的答案是：[1,NaN,NaN]

该题用到了map与parseInt；parseInt() 函数的语法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN 实际上map里的callback函数接受的是三个参数分别为元素下标和数组回调函数的语法如下所示： function callbackfn(value, index, array1) 可使用最多三个参数来声明回调函数。

8、下边代码输出的结果是（）

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'jason';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye jason

B: Hello jason

C: Hello undefined

D: Hello World

解析：

选A

这题考的是js作用域中变量的提升， js的作用于中使用var定义变量都会被提升到所有代码的最前面，所以var name目前是undefined, 题目的typeof name === ‘undefined’的结果为true时，就会输出’Goodbye jason’

9、var arr = [];typeof arr 的结果是（）

A、array

B、function

C、object

D、undefined

解析：

选C

5种简单数据类型（也称基本数据类型）：

Undefined、Null、Boolean、Number、String

1种复杂数据类型：Object（基本上除了上述5种，其余都是Object）

10、以下代码执行后，console 的输出是（）

function Foo(){
console.log(this.location);
}
Foo();

A、当前窗口的 Location 对象

B、undefined

C、null

D、TypeError

解析：

选A

这题考的是this的用法

'use strict'条件下，会报TypeError

无'use strict'下，this指向window

11、如何判断一个js对象是否是Array,arr为要判断的对象，其中最准确的方法是？（）

A、typeof(arr)

B、arr instanceof Array

C、arr.toString==='[object Array]';

D、Object.prototype.toString.call(arr) === '[object Array]';

解析：

选D

A选项中的typeof(arr) 返回的是 Object

instanceof 在跨 frame 对象构建的场景下会失效

arr.toString 没有这种用法，正确的用法是 arr.toString() 返回的是数组的内容

12、以下运行结果（）

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10个10

C、10个9

D、无限循环

解析：

选B

setTimeout中的闭包函数是每1s执行一次

由于for循环的执行速度远小于1s，

所以当开始执行闭包函数的时候for循环已经结束了（i=10），

之后闭包函数执行十次（因为循环了10次），所以打印了10个10。

13、以下结果里，返回true的是（）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

选A

A选项，由于数组属于对象类型，所以空的数组转换成布尔型是true，前置！！，两次取反，返回true。A正确。

B选项，“===”同等于（包含数据类型），左右两端数据类型不同，因此返回false。

C选项，同上，由于左右两端数据类型不同，返回false。

D选项，字符的编码值为0的字符，因此返回false。

14、以下代码执行后，console 的输出是（）

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();)

A、抛出 ReferenceError

B、10

C、20

D、21

解析：

选A

let不存在变量提升，所以没有事先声明。

let块级作用域，所以不会去访问外部的x。

既不会访问外部，又没有事先声明，输出x便会报错

15、以下js操作Array的方法中不能添加元素的是：（）

A、push

B、pop

C、unshift

D、splice

解析：

选B

数组.pop(): 删除数组的最后一项，该表达式返回最后一项的数据

16、获取 input 节点的错误方法是( )

<form class="file" name="upload">
<input id="file" name="file" />
</form>

A、document.querySelectorAll('file')[0]

B、document.getElementById('file')[0]

C、document.getElementsByTagName('file')[0]

D、document.getElementsByClassName('file')

解析：

选A、B、C、D

A选项：应该是 document.querySelectorAll('#file')[0]

B选项：应该是 document.getElementById('file')

C选项：应该是 document.getElementsByTagName('input')[0]

D选项：input标签中就没有class属性

17、以下哪些选项可以将集合A转化为数组（）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o => o)

解析：

选A、B、C、D

A选项：可以把对象转换成真正的数组

B选项：slice( )方法可从已有的数组中返回选定的元素

C选项：展开运算符，把A集合的元素展开后，用数组[]承载，返回新的数组

D选项：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

18、js数组的方法中，哪些方法不能改变自身数组（）

A、splice

B、concat

C、sort

D、pop

解析：

选B

splice删除数据会改变数组

concat连接数组但是不改变院数组

sort排序会改变数组

pop出栈返回最后一个最后一个元素，改变数组

19、下列代码得到的结果是（）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

A、false true true

B、true true false

C、true false true

D、true true true

解析：

选B

Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0 


console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);
 
//第一个 
([])布尔转换成true 

//第二个 
==相等比较时，允许类型转换
其他类型值和布尔值==比较时，先将布尔值强制转换为对应数字，再进行比较
[]==false
[]==0
[]和数字相等比较时转数字0
0==0
true 

//第三个 
{}==false
{}==0
NaN==0
false

20、下面运行结果正确的是（）

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

选D

这题考的是__proto__和prototype的区别

Object实际上是一个构造函数（typeof Object的结果为"function"）

使用字面量创建对象和new Object创建对象是一样的，

所以a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)与a.__proto__是一样的，所以第二个结果为true

而实例对象是没有prototype属性的，只有函数才有

所以a.prototype其实是undefined，第一个结果为false

2. 问答题（共40分）

2.1常规题（每题5分，共30分）

1.v-if和v-for哪个优先级更高？有哪些优化策略？

2.Vue 不同组件间是如何通信？列出可行的方案

3.Vue 响应式原理是如何实现的？

4.说说 vue的渲染过程？

5.谈谈你对JS的事件循环理解，执行机制？

6.一个页面从输入url到页面显示，这个过程发生了什么？

2.2扩展题（每题2分，共10分）

1.Vue3.0 为什么要用 proxy做响应式？

2.http和https有什么区别？

3.react和vue最大的差异有哪些？

4.谈谈你对微前端的了解?

5.请说一下 webpack 打包原理？

3.编程题（共20分）

1. 请输出打印结果（5分）

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')  
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

答：

 //node 12输出内容
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

2.实现数组去重方法unique()，已知[1,2,2,3,2,1],去重后得到 [1,2,3]（5分）

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.from(new Set(arr))
}

3.有效的括号（10分）

给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。有效字符串需满足：

左括号必须用相同类型的右括号闭合。
左括号必须以正确的顺序闭合。示例 1：

输入： s = "()"
输出： true

示例 2：

输入： s = "()[[]]{}"
输出： true

示例 3：

输入： s = "()[[]]}"
输出： false

答：

/**
 * @param {string} s
 * @return {boolean}
 */
 // 通过 字典对象匹配规则
 // 时间复杂度O(N),空间复杂度O(N)
 var obj = {
    "(":")",
    "{":"}",
    "[":"]",
} 
var isValid = function(s) {
     let stack = []
          for (let i = 0; i < s.length; i++) {
         key = s[i]
         if(key in obj) {
            stack.push(key)
         }else {
         let pop = stack.pop()
            if (key != obj[pop]) {
                return false
            }
         }
     }
     return !stack.length
};

前端技术测试题

1.多选题 (每题2分，共40分)

2. 问答题（共40分）

2.1常规题（每题5分，共30分）

2.2扩展题（每题2分，共10分）

3.编程题 （共20分）

1. 请输出打印结果 （5分）

2.实现数组去重方法unique()，已知[1,2,2,3,2,1],去重后得到 [1,2,3]（5分）

3.有效的括号 （10分）

3.编程题（共20分）

1. 请输出打印结果（5分）

3.有效的括号（10分）