1.请描述一下cookies、sessionStorage和local Storage
参考答案
共同点：都是保存在浏览器端，且同源的。
区别：
| cookie | sessionStorage | localStorage | |
|---|---|---|---|
| 储存方式 | 在浏览器和服务器间来回传递 | 不会自动把数据发给服务器，仅在本地保存 | 同左 |
| 储存大小的限制 | 不能超过4k | 比cookie大得多，可以达到5M | 同左 |
| 数据有效期 | 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 | 仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持 | 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据 |
| 作用域 | 在所有同源窗口中都是共享的( 即数据共享 ) | 不在不同的浏览器窗口中共享，即使是同一个页面(即数据不共享) | 在所有同源窗口中都是共享的 |
参考链接：cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
2.定位position的值有哪几种？区别是什么？
参考答案
| static | fixed | relative | absolute | |
|---|---|---|---|---|
| 对象是否存在标准文档流中 | 是 | 否，若离标准文档流 | 是 | 否，若离标准文档流 |
| top, right, bottom, left 等属性 | 失效 | 否，若离标准文档流 | 是 | 否，若离标准文档流 |
| 相对于谁定位 | —— | 相对于浏览器窗口进行绝对定位 | 相对于该对象在标准文档流中的位置进行偏移 | 相对于static定位以外的第一个父元素进行绝对定位 |
结论：
1.从位置上（是否脱标）
static与relative位置上以及形态上没有任何变化
absolute与fixed靠内容撑开盒子，脱离标准流，不占位置
2.从相对谁定位上来看
通过top、left等属性值得出结论
static与在top、left属性下作用无任何改变
relative在自己原来的位置产生变化即相对自己原来的位置定位
fixed相对于浏览器窗口定位，永远固定在浏览器窗口的一个位置，不随文档滚动而滚动
absolute分两种情况
1.在父元素没有定位的情况下，它的定位相对于浏览器窗口定位，但不固定
2.在父元素定位的情况下，它的定位相对于父元素作为定位
3.写出下面代码输出什么
undefined == null
1 == true
0 == false
NaN == NaN
[] == false
null == Object
参考答案
undefined == null //true 因为null == false //false undefined == false
1 == true //true 只要布尔类型参与比较，该布尔类型的值首先会被转换为数字类型
0 == false //true 根据布尔类型的ToNumber规则，true转为1，false转为0
NaN == NaN //false
[] == false //true
null == Object //false
相关资料补充——隐式转换的补充
1.++ -- 自加自减的隐式转换
var a = "123";
a++;
console.log(a);
var b ="123";
--b;
console.log(b);//122
var c = "啊啊啊";
c++;
console.log(c);
1.++ -- 自加自减的隐式转换（参考答案）
var a = "123";//Number(a)
a++;
console.log(a); //124
var b ="123";
--b;
console.log(b);//122
var c = "啊啊啊";
c++;
console.log(c); //NaN
2.+ - * / % 的隐式转换
var b = "b" +1 ;
console.log(b);
var c = "1" +1 ;
console.log(c);
2.+ - * / % 的隐式转换（参考答案）
var b = "b" +1 ;//String(1)
console.log(b);//b1
var c = "1" +1 ;
console.log(c);//11
3.< > = 的隐式转换
var d = "1" > 2;
console.log(d);
var e = 1 > "2";
console.log(e);
var f = "a" > "b";
console.log(f);
3.< > = 的隐式转换(参考答案)
var d = "1" > 2;
console.log(d); //false
var e = 1 > "2";
console.log(e); //false
var f = "a" > "b";//转换成ascii < > = 都转换成number
console.log(f); //false
4. "==" & "===" 的隐式转换
var a = 1 =="1";
console.log(a)//true
var c = 1 ==="1";
console.log(c)//false
var b = 1 !="2";
console.log(b);
4. "==" & "===" 的隐式转换（参看答案）
var a = 1 =="1";
console.log(a);//true
var c = 1 ==="1";//这个不进行隐式转换
console.log(c);//false
var b = 1 !="2";
console.log(b);//true
5.NaN 的隐式转换
//"==" & "===" 的隐式转换
var a = 1 =="1";
console.log(a);//true
var c = 1 ==="1";//这个不进行隐式转换
console.log(c);//false
var b = 1 !="2";
console.log(b);//true
//NaN 的隐式转换
var d = NaN == NaN;
console.log(d); //false
//比较的隐式转换
var f1 = 2 > 1 > 3;
console.log(f1);//false
var f2 = 2 > 1 == 1;
console.log(f2);//true
//undefined null 的隐式转换
var a1 = undefined > 0;
var a2 = undefined < 0;
var a3 = undefined = 0;
var a4 = undefined == 0;
console.log(a1,a2,a3,a4);//false false 0 false
var b1 = null > 0;
var b2 = null < 0;
var b3 = null = 0;会报错
var b4 = null == 0;
console.log(b1,b2,b4);//false false false
var c = undefined == null;
console.log(c);//true
var c = undefined === null;
console.log(c);//false 因为数据类型不同
console.log(isNaN(123));//false
console.log(isNaN("123"));//false
console.log(isNaN(null));//false
console.log(isNaN(undefined));//true undefined -> 隐式转换时 Number（undefined）属于NAN
//isNaN ==> Number(值) -> Nan -> bool
6.[] == ![] 输出什么？
1. [] == ![]
2. [] == false
3.[] == 0
4.'' == 0
5.0 == 0
6.[] == ![] 输出什么？（参考答案）
1. [] == ![]
// true 因为 ！的优先级比较高先执行，[]数组的存储属于堆，[] == []是false的
2. [] == false
//true 当比较中有布尔值时，优先把布尔值转化为数值 把false转化成 0
3.[] == 0
//true 当比较中是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较(valueOf 和 toString) [].toString() == 0 ——> "" == 0 再进行比较
4.'' == 0
//true 当字符串和数值对比时，把字符串转为数值进行对比 即Number("") == 0 Number("")——>0
4.怎么添加、移除、移动、复制、创建和查找节点（用原生JS）
参考答案
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName()
通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
5.Js创建对象的有哪几种方式（代码举例实现）
参考答案
1.对象字面量方法var p ={name:"Jokid",job:"doctor"}
console.log(p) //{name: "Jokid", job: "doctor"}
2.构造函数模式
function person(name,age,job){
this.name = "Jokid",
this.age = 18,
this.job = "teacher",
this.init = function(){console.log(this.name)}
}
6简述AJAX的原理
参考答案
参考链接： 参考1
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
7.谈谈你对Promise的理解并写出其基本模式代码
8.JS有几种类型的值并简单描述
参考答案
undefined
null
number
string
boolean
object
symbol————————是一种特殊的、不可变的数据类型，可以作为对象属性的标识符使用，表示独一无二的值。
栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
symbol 拓展
参考链接：symbol 拓展
9.说说你对闭包的理解
10.写出JS面向对象中继承实现的代码（最少两种）
11.请描述Javascript是一门怎么样的编程语言
参考答案
js就是面向对象的弱类型语言
语言特性：面向对象（要掌握创建对象的多种方式，继承的多种方式、原型链），动态/弱类型语言
动态语言的特性
var num=10;//num是一个数字类型
num="jim";//此时num又变成一个字符串类型
//我们把一个变量用来保存不同数据类型的语言称之为一个动态语言，或者说是一个弱类型语言
12.请简述前端跨域的原因及解决方案
参考答案
13.如何判断一个变量的类型，并封装一个判断变量的函数
参考答案
14.请罗列数组操作方法，并标注哪些会改变原数组
参考答案
参考链接：数组方法不混淆 es6操作数组的方法 面试题大全——数组的操作
map: 遍历数组，返回回调返回值组成的新数组
forEach: 无法break，可以用try/catch中throw new Error来停止
filter: 过滤
some: 有一项返回true，则整体为true
every: 有一项返回false，则整体为false
join: 通过指定连接符生成字符串
push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项【有误】
unshift / shift: 头部推入和弹出，改变原数组，返回操作项【有误】
sort(fn) / reverse: 排序与反转，改变原数组
concat: 连接数组，不影响原数组， 浅拷贝
slice(start, end): 返回截断后的新数组，不改变原数组
splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev为上次化简函数的return值，cur 为当前值(从第二项开始)
15.请写出下面代码在控制台的运行结果，为什么？
console.log(a);//请写出输入结果
console.log(b);//请写出输入结果
var a =function(){};
var a = 100;
var b = 200;
function b(){}
console.log(a);//请写出输入结果
console.log(b);//请写出输入结果
参考答案
16.正则表达式在实际项目中的应用，请列举2~3个例子
参考答案
17.请描述get和post的区别？
参考答案
| get | post | |
|---|---|---|
| 在浏览器回退时 | :---------------- | :---------------- |
| 是否可以被Bookmark | :---------------- | :---------------- |
| 被浏览器主动cache | :---------------- | :---------------- |
| 请求编码 | :---------------- | :---------------- |
| 参数保留 | :---------------- | :---------------- |
| 传送参数的长度 | :---------------- | :---------------- |
| 对参数的数据类型 | :---------------- | :---------------- |
| 安全性 | :---------------- | :---------------- |
| 传参形式 | 参数通过URL传递 | 放在request body 中 |
18.请列举css隐藏元素的几种方法
参考答案
display:none元素隐藏，不再占有原来的位置
visibility:hidden元素隐藏，仍占有原来的位置
opacity:0元素隐藏，仍占有原来的位置
height,width:0元素隐藏，不占有原来的位置，但内容仍显示
19.原型链_proto_和prototype分别是什么？
参考答案
prototype(原型)
原型与原型链的关系
instance.constructor.prototype = instance.__proto__
20.使用过那些前端自动化构建工具，都解决了什么问题？
参考答案
21.请简述时间委托和时间循环（event loop）
参考答案
22.项目上做过哪些优化？
参考答案
23.使用过哪些设计模式及场景？
参考答案
24.如何实现一个new？
参考答案
new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
25.css的居中
参考答案
1.关于文字居中
text-align: center
适用于行类标签，如div、p标签
vertical-align: middler
只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素,所以可以配合display: table-cell;使用
补充：
行内元素
不单独占一行
书写完成后不会自动换行
没有宽和高
不单独占一行
常用有：
a、b、button、i、img、input、label、select、span...
块级元素
独占一行
书写完会自动换行
宽和高可以修改
常用有：
div、p、li、nav、ul...
关于行块级元素，详情可参考：探究行内元素和块级元素 最全的居中
