一、选择题
1. 浏览器端的存储技术有哪些()
A.cookie B.localStorage C.session D.userData
答案:A B D
分析:cookie通常用于存储用户等登录信息,能够存储的数据是有限的,而且在指定域名下所有的请求都会带上。
localStoage是H5新增用于本地存储,能够存储更多的数据,通常是5M
session服务器端与客户端建立的会话,不属于浏览器端存储技术
userData是IE专有的存储方案,可以用来存储一些数据
2. (function() { return typeof arguments; })(); 代码将会返回()
A.object B.array C.arguments D.undefined
答案:A
分析:arguments 是类数组,正常情况下typeof []会返回"object",所以typeof arguments也会返回"object"
3. function fn() { return fn; } new fn() instanceof fn; 上面的代码会输出()
A.true B.false
答案:false
分析:fn作为构造函数,如果内部没有显示的声明return语句,默认会返回一个fn的实例对象,也就是new fn() instanceof fn会返回true,
但是这里有return fn;这条语句,那么new fn()就会返回fn,所以结果为false
4. 下列哪个属性不会让div脱离文档流(normal flow)()
A.position: absolute B.position: fixed C.position: relative D.float: float
答案:C
分析:position: relative相对于自己定位,不会脱离文档流
5. 正则表达式/^d**[^d]*[w]{6}$/,下面的字符串哪个能正确匹配?()
A.***abcABCD_89 B.abc*abcABCDEF
C.123*abcABCD_89 D.123*ABCabcd-89
答案:A,C
分析:
^ 表示匹配字符必须以后面规则开始
d* 表示零个或者多个数字
* 表示只匹配字符*
[^d]* 表示匹配零个或者多个非数字字符
[w] 表示匹配字母数字下划线字符相当于[0-9a-zA-Z_]
{6} 表示要要进行匹配的字符数要大于等于6
答案A,* 属于初次匹配内容,其他的是剩下规则匹配
6. (function() { var a = b = 5; })(); console.log(b); console.log(a); 代码输出结果:()
A.5, 5 B.undeinfed, undefined C.5, undefined D.程序抛错
答案:D
分析:程序执行完之后会先打印5,然后抛错,因为var a = b = 5;相当于b = 5; var a = 5;在非严格模式下,全局环境不声明直接
赋值相当于给window对象赋值,所以相当于window.b = 5; 然而a的作用域是匿名自执行函数内,所以在全局作用域下面是访问不到的
二、简单题
7. 下面的代码输出顺序?
console.log(‘one‘);
setTimeout(function() {
console.log(‘two‘);
}, 0);
new Promise(function(resolve, reject) {
console.log(‘three‘);
resolve();
}).then(function() {
console.log(‘four‘);
});
console.log(‘five‘);
答案:one three five four two
分析:程序从上往下执行首先打印出来one,new Promise会执行他的构造函数这时候打印three,
然后因为Promise属于异步microtask,这个时候会继续执行主线程代码打印出来five,这个时候会执行microtask队列,
打印出来four,接下来执行macrotask任务队列打印出来two
8. 下面的代码输出结果?
falseStr = "false";
if (true) {
var falseStr;
if (falseStr) {
console.log("false" == true);
console.log("false" == false);
}
}
答案:false false
分析:下面的规则用于判定==运算符比较的两个值是否相等:
1.如果两个值具有相同的类型,那么就检测它们的等同性。如果这两个值完全相同,它们就相等。如果它们不完全相同,则它们不相等。
2.如果两个值的类型不同,它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性:
2.1 如果一个值是null,另一个值是undefined,它们相等。
2.2 如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。
2.3 如果一个值是true,将它转换成1,再进行比较。如果一个值为false,把它转换成0,再进行比较。
2.4 如果一个值是对象,另一个值是数字或者字符串,将对象转换成原始类型的值,再进行比较。
2.5 其他的数值组合是不相等的。
9. 下面的代码输出结果?
var length = 10;
var obj = {
length: 5,
func: function() {
console.log(this.length);
}
};
var func = obj.func;
func();
obj.func();
答案:10,5
分析:函数的作用域是在被定义时候决定,跟执行环境没有关系,所以var func = obj.func;可以理解为在全局作用域定义了func
所以func函数内的this应该是全局,浏览器环境下是window,所以length为10。obj.func函数的执行上下文对象是obj,所以
length是5
10. PNG,GIF,JPG的区别及如何选?
GIF:
256色
无损,编辑 保存时候,不会损失。
支持简单动画
支持boolean透明,也就是要么完全透明,要么不透明
JPG:
millions of colors
有损压缩, 意味着每次编辑都会失去质量
不支持透明
适合照片,实际上很多相机使用的都是这个格式
PNG:
无损,其实PNG有好几种格式的,一般分为两类:PNG8和truecolor PNGs
与GIF相比:
它通常会产生较小的文件大小
它支持阿尔法(变量)透明度
无动画支持(可通过CSS3实现动画效果)
与JPEG相比:
文件更大
无损
因此可以作为JPEG图片中间编辑的中转格式
结论:
JPEG适合照片
GIF适合动画
PNG8适合其他任何种类——图表,buttons,背景,图表等等
11. 请用CSS实现屏幕正中间有个元素A,随着屏幕宽度的增加,始终满足以下条件:
1)A元素垂直居中于屏幕中央
2)A元素离屏幕左右边距各10px
3)A元素的高度始终是A元素宽度的50%
答案:这道题目有多种实现方案,方案如下,
1.1 CSS3 flex来实现,对父元素设置样式display: flex; align-items: center;
1.2 父元素设置postion: relative; A元素设置样式position: absolute; top: 50%; transform: translateY(-50%);
1.3 父元素设置postion: relative; A元素设置:postition: absolute; top: 0; bottom: 0; margin: auto 0;
2.1 A元素margin-left: 10px; margin-right: 10px;
3.1 这里借助于padding百分比来实现,padding百分比w3c解释是:规定基于父元素的宽度的百分比的内边距