基础知识
- 定义一个对象，里面包含用户名、电话，然后将其存入localStorage的代码
var json = {username:"张三",phone:17650246248}
for(var key in json){
localStorage.setItem(key,json[key]);
}
For in 遍历对象 for of可以遍历对象吗？ 不可以？原因？ Symbol.interator
(string/map/set/array等) Object.prototype
2.css兼容性、代码如何优化、怎么优化网页、清除浮动、css3新的技术、语义化标签、浏览器的兼容性问题、如何居中盒子等。
3.Ajax原生对象是什么？如何完成一个完整的ajax请求？
Ajax 优点、缺点 异步、同步 跨域 同源策略 解决跨域？（jsonp 原理？）
反向代理？ vue proxy（target changeOrigin pathRewrite）
后端配置 CORS（跨域资源共享 headers *）
4.你所了解的http状态码有哪一些？
5.Window.onload与$(document).ready()的区别是什么？ $(function(){})
6.闭包是什么，所带来的问题是什么？闭包使用场景是什么 垃圾回收机制 怎么存储堆栈
7.媒体查询如何实现？rem与em、px的区别是什么？
Bootstrap（12栅格 -> xs sm md lg）
媒体查询代码
@media screen and（mix-width：500px）{具体的样式}
em 默认16像素 相对于父元素定义的
1rem相对于根元素的单位
Rem的设置：document.document.style.fontSize = document.document.clientWidth / 3.75 + ‘px
Vw vh
你还了解哪些布局单位
8.采用正则表达式验证电话号码、邮箱号码
9.Cookie/localStorage、sessionStorage的区别是什么? 本地存储与Vuex的异同
怎么存cookie/localstorage，怎么取，哪些情况下会用到
本地存储是永久性存储，主要是不同页面之间的存储。Vuex强调的是多个组件之间进行的存储
10.简述css盒模型（标准与怪异盒模型）
IE9（标准盒模型） width=padding+margin+border
IE8（怪异盒模型）width=content+padding+border
项目中标准盒模型改成怪异盒模型：box-sizing：border-box 默认是标准盒模型（content-box）
11.什么是viewport?
移动端浏览器中用来显示网页的区域
12.position定位属性有哪几个？区别分别是什么？
Static、absolute（会破坏文档流的结构）、relative、fixed
一般父元素加相对定位，这样子元素再加绝对定位就会根据父元素的位置进行偏移
13.什么是css预处理器？请描述一些简单的语法规则
Less、scss、stylus
Scss：$定义变量、{}嵌套&、封装一些css样式在用的时候进行@include引用
14.阻止事件默认行为和事件的冒泡方法分别是什么？（w3c与非w3c浏览器）
e.preventDefault return false
e.stopPropagation() e.cancelBubble = true
事件流机制：冒泡（从下到上）和捕获（从上到下），两者都存在的情况下，先捕获后冒泡
事件绑定addEventListener（）
事件委托 $(“ul”).on(“click”,’li’,e=>{ })
15.看下列代码输出结果是什么？
var a;
alert(typeof a);
alert(b);
var c = null;
alert(typeof c)
16.什么是跨域？解决跨域问题的主流方案是什么？(jsonp跨域优缺点)
17.请写出该代码的执行结果
var bb = 1;
function aa(bb){
bb=2;
alert(bb);
}
aa(bb);
alert(bb);
18.下面列出的浏览器，无webkit内核的是（ D ）
A.chrome B. safari C.搜狗浏览器 D.firefox
19.Call、bind与apply的区别？
call与apply都属于Function.prototype的一个方法，所以每个function实例都会有call/apply属性
两者传递参数不同，call函数第一个参数都是要传入当前对象的对象，apply不是
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
Call传入则是直接的参数列表。Call方法可以将一个函数的对象上下文从初始的上下文改成由thisObj指定的新对象
20.下面的代码输出结果是什么？
function Foo(){
var i=0;
return function(){
console.log(i++);
}
}
var f1 = Foo();
f2 = Foo();
f1();
f1();
21.行内元素、块级元素、空元素有哪一些？
22.为何要清除浮动？清除浮动的方式？
23.如何让chrome支持小于12px的文字？
<style>
p span{
font-size:10px;
-webkit-transform:scale(0.8);
display:block;
}
</style>
<p><span>haorooms博客测试10px</span></p>
24.如何在css中告诉浏览器使用不同的盒模型来渲染你的布局？
25.已知前端页面中，有如下table
<table id="t1">
<tr></tr>
<tr></tr>
...
<tr></tr>
</table>
请添加用户交互效果，当用户点击该表格的某一行的时候，该行背景色设置为红色的代码
26.请问以下结果会输出什么？
for(var i=0;i<5;i++){
console.log(i);
}
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i);
},1000*i);
}
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i);
},1000*i);
})(i);
}
for(var i=0;i<5;i++){
(function(){
setTimeout(function(){
console.log(i);
},1000*i);
})(i);
}
for(var i=0;i<5;i++){
setTimeout((function(){
console.log(i);
})(i),1000*i);
}
27.写出超链接的合理顺序（l v h a） link visited hover active
28.写出函数DateDemo()的返回结果
function DateDemo(){
for(var i=0,j=0;i<10,j<6;i++,j++){
k=i+j;
}
return k;
}
29.请实现该缺少的内部代码，交换两个数的值
var res = (function(x,y){
...补全缺少的代码....
return {
x:x,
y:y
}
})(1,2);
console.log(res.x);//打印2
console.log(res.y);//打印1
30.以下程序的执行结果为：
var array1 = [1,2];
var array2 = array1;
array1[0] = array2[1];
array2.push(3);
console.log(array1);
console.log(array2);
31.写出下列打印值：
console.log(1+"2"+"2")
console.log("1"-'2'+'2')
console.log('A'+"B"+"2")
console.log("A"-"B"+2)
32.解析链接www.qq.com?name=jack&age=18&id=100，获取其中的查询参数，并格式为js对象的代码：
如： {name:”jack”,age:18,id:100}
var str = "www.qq.com?name=jack&age=18";
var str2 = str.substring(str.lastIndexOf("?")+1);
var arr = str2.split("&");
var json = {};
for(var i=0;i<arr.length;i++){
var newArr = arr[i].split("=");
json[newArr[0]] = newArr[1];
}
33.谈一下Jquery中的bind、live、delegate、on的区别？
https://www.cnblogs.com/zagelover/articles/2840762.html
34.Jquery中如何将数组转化为json字符串，然后再转化回来？
var arr = [{usernname:"张三",age:10}]
console.log($.parseJSON(JSON.stringify(arr)));
35.什么是zepto点透问题?如何解决此问题？
http://smile-leaf-language.github.io/2016/02/02/zepto-tap/
36.输出的结果为
var myObject = {
foo:"bar",
func:function(){
var self = this;
console.log("outer func:",this.foo);
console.log("outer func",self.foo);
(function(){
console.log("inner func",this.foo);
console.log("inner func",self.foo);
})();
}
}
myObject.func();
37.下面的结果是什么？
(function(){
var a = b = 1;
})();
console.log(typeof a);
console.log(typeof b);
38.优化下面这段css代码：
.myclass{
font-family:arial,verdana,sans-serif;
border-width: 10px;
border-left-width:20px;
border-bottom-width: 5px;
color:#ff6600;
font-weight: normal;
font-size:1em;
}
39.Html中form里的action方法的get与post方法区别是什么？
40.Html元素id与class区别是什么？
41.简述src与href的区别？
42.简述同步与异步的区别？
43.如何对网站的文件和资源进行优化？
[1.文件合并 2.文件压缩 3.使用cdn进行托管资源 4.缓存的使用]
44.简单模拟Bootstrap的12栅格系统
45.ES6新特性
Let/const 数组对象的解构赋值 symbol set和map proxy promise async classs继承 模块导入导出 for..of循环
你如何理解ES5中的function与ES6中的类
45.编写一个高效数组去重的方法 array=[9,22,15,5,9,23,99,15]
function unique(arr){
var obj = {};
var result = [];
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
result.push(arr[i]);
obj[arr[i]] = true;
}
}
return result;
}
用set方法
var array=[9,22,15,5,9,23,99,15];
console.log(array.from(new set(array)))
