一、选择题
1、以下表达式哪一个可以产生0-7之间(含0,7)的随机数？
A Math.ceil(Math.random()*7)
B Math.floor(Math.random()*7)
C Math.floor(Math.random()*8)
D Math.ceil(Math.random()*8)
/*
A [1, 7] B [0, 6] C [0, 7] D [1, 8]
*/
Math.ceil向上取整，Mathfloor向下取整
2、以下代码输出的内容是：
const shape = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
};
console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NAN
A 20 和 62.83185307179586
B 20 和 NAN
C 20 和 63
D NAN 和 63
可以看到shape里面有成员变量radius、方法diameter、perimeter，而diameter会进行return，所以有返回值。而perimeter则无返回值，如果执行顺序相反则会影响diameter的返回结果。
3、关于ES6中Symbol说法错误的是
A Symbol是值类型而非引用类型
B Symbol('a') !== Symbol('a')
C Symbol.iterator能够使对象可迭代
D Symbol.hasInstance用于类的非静态方法
选D，经过查询，hasInstance是静态方法。
相关链接
4、RGBA颜色值中A的含义是：
A 透明度 B 深浅度 C 不透明度 D 过渡时间
/*
rgba => rgba(red, green, blue, alpha)
Alpha值代表颜色的透明度/不透明度
*/
以前在前端经常使用，却没发觉原来这个叫RGBA。
5、在JavaScript中的什么方法可以对数组元素进行排序 ( C )
A add() B join() C sort() D length()
6、在HTML页面中，下面有关得到document对象的描述错误的是 ( C )
A Document对象用于检查和修改HTML元素和文档中的文本
B Document对象用于检索浏览器窗口中的HTML文档的信息
C Document对象提供客户最近访问的URL的列表
D Document对象的location属性包含有关当前URL的信息
window 和 document 中都有一个 location 属性，都是 Location 对象他们两个的关系是：完全一模一样。
History对象表示窗口的浏览历史，由Window对象的history属性引用该窗口的History对象。
History对象相当于一个容器，它存储了客户端最近访问网页URL的列表信息。
二、填空题
1、一个没有经过任何css修饰的html文件，1rem等于多少px？
rem就是根据根元素设置的字体大小进行放大缩小调节。
默认浏览器设置的根元素字体大小是16px。
1rem = 16px。
2、input标签的onblur事件会在什么时候触发？
失去焦点的时候。
复习知识点：
onfocus 当input 获取到焦点时触发
onblur 失去焦点
onchange 当input失去焦点并且它的value值发生变化时触发
onkeydown按下按键时的事件触发
onkeyup 当按键抬起的时候触发的事件
onclick 点击事件
onselect 文本选中
oninput 正在输入
3、以下代码输出的分别是：
1、
var b;
(function a() {
let d = '2'
b();
b = function() {
console.log(d);
let d = 3
}
})();
/*
b is not a function
*/
2、
var b;
(function a() {
let d = '2'
b = function() {
console.log(d);
let d = 3
}
})();
b();
/*
Cannot access 'd' before initialization
*/
3、
var a = 3;
function b() {
console.log(a)
}
function c() {
var a = 3;
b();
}
c();
/*
3
*/
4、以下代码输出的分别是?
var a = 0;
(function() {
var a = { a : 0 };
var b = function() {
setTimeout(() => {
console.log(this.a)
})
}
b(); // 0
b.call(a); // 1
a.a = 1;
a = { a : 2 }
})()
此题
考了作用域，function的作用域默认是window，除非使用了箭头函数，那么箭头函数的this作用域则是其父级的。
考了event loop，显然setTimeout是宏服务，按照顺序在全部主代码走完后才会执行宏服务。
考了call改变了函数的作用域，可以看到把this的作用域更改为a属性。
此后对a的属性进行改变是可以影响到b的作用域，因为还是那个对象，对象引用的问题。
但是后面对a进行新对象赋值则会把原先a的对象引用改变，无法作用到已经call的对象。
5、以下代码的输出的分别是？
let a = 10;
let obj = {
a: 5,
say: function() {
console.log(this.a)
}
}
let func = obj.say
let func2 = obj.say.bind(obj)
func() // undefined
func2() // 5
此处使用let声明，将不会把变量存在window对象中，上面提到了function的this的作用域默认是window对象，显然没办法找到a对象，所以输出 undefined。
在使用了bind 绑定了obj对象，而obj对象里面有个a属性是5，则可以进行输出5。需要注意的是bind是绑定作用域和call、apply其实是差不多，但是call、apply是立即执行，而bind则是绑定并未执行函数，需要主动调用才能才行。
6、根据下面代码，写出对应输出的内容？
alert(a);
a();
var a = 3;
function a() {
alert(10)
}
alert(a)
a = 6;
a();
alert 会把整个function代码进行提示。
通过function定义函数，函数体会提前声明。
alert 10
alert 3
a is not a function
思考：
为什么 a 函数能够执行，主要是因为通过function定义函数，函数体会提前声明。而var也会变量提升呀？可是var变量提升只是声明了var a; 这样的变量，并未做赋值，赋值仍在本地也就是对应的代码行。所以在a=3的代码行之后，a就不是一个函数了。
三、问答题
1、实现不使用border画出1px高的线框，并且能够在不同浏览器的标准模式与怪异模式下保持一致
<div style="background-color:black;width:100%;height:1px;margin:0;padding:0;"></div>
2、清除浮动的方法及其应用场景
使用了浮动布局后父级元素的高度会塌缩，为了解决这个问题需要清除浮动。
在浮动布局元素下定义div使其样式为clear:both;则是全部浮动清除。
定义父级元素的样式为overflow：auto，使其成为BFC块。
父级div定义 height，笨办法。
使用after伪元素使其为clear:both;和第一种方法其实是一致的。
3、控制台输出的内容是什么，并说明原因？
(function test() {
setTimeout(function() {
console.log(4)
}, 0);
new Promise(function excutor(resolve) {
console.log(1)
for(var i = 0; i < 10000; i++) {
i == 9999 && resolve()
}
console.log(2)
}).then(function() {
console.log(5)
})
console.log(3)
})()
显然这题考的是event loop了。
此时脑海中想到代码的优先级。
主程序代码 = 同步服务（同步情况下，就是严格按照定义的先后顺序） > 微服务 > 宏服务
setTimeout是宏服务
promise的构造方法是同步服务，使用Promise过程中resolve或reject后，后面代码还会执行。（踩坑）
不过回想自己手撸promise也想到了resolve只是调用了方法并不会终止当前代码的执行。
then的代码是微服务。
答案是：
1
2
3
5
4
4、js引擎执行0.1+0.2==0.3返回false，为什么？请给出解决办法？
在JavaScript中，0.1 + 0.2 = 0.3000000000000000444089209850062616169452667236328125000000000000，0.1 + 0.2 - 0.3 = 5.551115123125783e-17
造成这个问题主要是因为十进制与二进制在转换中出现精度问题。
利用es6在Number对象新增的极小常量Number.EPSILON
使用这个常量设置一个误差范围，如果小于这个误差则返回相等。
5、CSS Modules 与 scoped 的不一样？
CSS 的作用域表现。
他们都可以在。当前vue文件中写的样式生成独一无二的名字。
Vue文件的scoped 属性是样式仅适用于当前组件的元素，从而使组件之间的样式不污染，原理是在样式和class加上hash值进行区分。
Vue文件的module 属性是直接替换换了类名。基于文件名和类名生成的标识符进行替换。
module性能更好。
四、编程题
1、js用归并排序实现数组sort方法
let data =[1,1,4,5,1,4,1,9,1,9,8,1,0]
console.log(mergeSort(data))
function mergeSort(data) {
if(data.length < 2) {
return data
}
let mid = Math.floor(data.length / 2)
let left = data.slice(0, mid)
let right = data.slice(mid)
return merge(mergeSort(left), mergeSort(right))
function merge(left, right) {
let result = []
while (left.length && right.length) {
if(left[0] <= right[0]) {
result.push(left.shift())
}else{
result.push(right.shift())
}
}
while (left.length) {
result.push(left.shift())
}
while (right.length) {
result.push(right.shift())
}
return result
}
}
2、给定一个数组nums，还有一个目标数target，实现一个函数twoSum，从数组中找出两个数字，使得其和为target。（返回结果为数组，包含两个数字在nums中的index）
/*
给定一个数组nums，还有一个目标数target，实现一个函数twoSum
从数组中找出两个数字，使得其和为target。（返回结果为数组
包含两个数字在nums中的index，要求时间复杂度尽量低）
*/
let nums = [2,3,4,5,1,7,6]
let target = 12
function twoSum(target) {
nums.forEach((element, index) => {
let first = element
let second = target - first
nums.forEach((element2, index2) => {
if(element2 == second) {
console.log([index, index2])
return
}
})
});
}
twoSum(target)