题目总结

1. localstorage 和 sessionstorage 的区别

1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。（浏览器关闭后不可使用）

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。、

不支持跨域。

localstorage不支持跨域，跨域可以利用postmessage和iframe来实现

3. cookie：如果不设置过期时间，那么在浏览器关闭后就会被销毁

2. http 301、302、304状态码解释

1. 301：请求的url已经永久地失效了（资源被移动到了新位置），重定向到新的 url 对其进行请求
2. 302：重定向到新的 url，但是也可能随时改变主意，也可能会显示到旧的 url，或者其他地方。有时候搜索引擎会来决定是定向到哪个 url
3. 304：当前请求的资源还没有过期，返回的是本地的缓存

3. 箭头函数

​ 箭头函数内部的this是词法作用域，由上下文确定。

​ 当箭头函数的函数体中定义了 this ，其 this 指向是由上下文决定的。（以往的 this 是由闭包或者函数的运行环境决定的）

// 写法1
(x,y)=>{
	//函数体
}
// 写法2
x=>{
    //函数体
}
// 写法3
x=>x+x
// 如果要返回一个对象
x=>{name:'joey'}// 会报错
x=>({name:'joey'}) // 正确写法

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25
//在对象中定义箭头函数，其指向obj对象

4. 解决闭包

// 函数要求：点击每个 li 标签弹出相应的innerText
// 原因：由于闭包的存在，使得内部的每个i引用的都是外部的i，因此不会达到预期
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
	var myli = document.getElementsByTagName('li');
    for(var i =0;i<myli.length;i++){
        myli[i].onclick = function(num){ // 这一层是立即执行函数，每次换不同的i执行一次
            return function(){ // 这一层的作用是生成一个新函数，附加在 myli[i] 上
                alert(num)
            }
        }(i)
    }
</script>

5. flex布局

6. typeof 和 instanceof

• 确定一个值是哪种基本类型可以使用 typeof 操作符
• 确定一个值是哪种引用类型可以使用 instanceof 操作符

7. 堆内存和栈内存

• 堆内存：存储对象 Object
• 栈内存：存储基本类型 Number、String 等，占据固定的空间大小

8. js五大基本数据类型

• Number （NaN )
• String
• Boolen
• Null
• Undefined

9.闭包的优缺点

• 优点：
  • 可以保留一个变量不被清除（默认的标记清除机制，当函数运行完成后会清空不需要的函数，当外部函数被内部函数 引用的情况下，就不会被清空，因此会被保存）
• 缺点：
  • 内存泄漏：当要保存的数据量很大时，优点就变成了缺点，会造成内存泄漏。

10.数组去重

方法一：indexOf

<script>
    var myarray = [1,6,6,5,43]
function arrayFunc (arr) {
    if (arr.length === 0) {
        return 0
    }
    var newArray = [];
    for (var i = 0;i<arr.length;i++) {
        if( newArray.indexOf(arr[i]) === -1) {
            newArray.push(arr[i])
        }
    }
    return newArray
}
	console.log(arrayFunc(myarray))
</script>

方法二：set

var myarray2 = [2,6,5,4,2]
console.log(new Set(myarray2))

Set：一种新数据结构

• 类似数组，但是没有重复元素，因此可以用来去重
• set相关

// 创建新的set
var set1 = new Set ([1,2,3,2])

// set添加新的元素
set1.add(8)

// set删除元素
set1.delete(3)

// set清空元素
set1.clear()

// set是否存在某种元素
set1.has(1) // true

// set类型转数组
Array.from(set1)

11. 跨域

• JSONP：使用

12. http 400、401、403状态码解释

• 400：请求无效，前端发送的数据格式与后端要接收的数据格式不同
• 401：未授权，要进入当前的URL要经过授权
• 403：服务器理解这次接口，但是拒绝执行此请求
• 404：没找到
• 405：method not allowed，方法出错

13. 从输入url到返回页面的过程中，发生了什么

• 域名解析系统 DNS 进行域名解析
• 建立 TCP 连接
• 发送 HTTP 请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器渲染页面
• 连接结束

14. get 和 post 的一些区别

• get：
  • 浏览器和服务器会限制url的长度，因此get传的参数可以看成是有限制的（但是get本身是没有限制的）
  • 一般用于向服务器请求获取资源，可以使用缓存
• post：
  • 不限制长度大小
  • 一般向服务器发送数据，不使用缓存

15. mouseover 和 mouseenter的区别

• mouseover：鼠标移动到父元素（和子元素）时都会触发，相当于重复触发
• mouseenter：鼠标移动到父元素（不包括子元素）时会触发

16. bind、apply、call

• bind：绑定函数的作用域
• apply：在某个作用域中调用函数 fn.apply(作用域)，参数可以是数组
• call：在某个作用域中调用函数 fn.call(作用域)，参数是arg1,arg2,…,argn排列下去

17. 用 setTimeout 实现 setInterval

function say () {
	setTimeout(say,200)
}
setTimeOut(say,200)

18、数组的随机排序

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
    return Math.random() - 0.5;
})
console.log(arr);

19、正则表达式

20、盒模型（box-sizing）

• 标准盒模型：content-box
  • 标签的宽度：width只包含content部分，不包括padding和border等
• IE盒模型：border-box
  • 标签的宽度：width包括content+padding+border

21、…Array

function add(a,b){
 return a+b
}
var myarray = [1,2]
console.log(add(...myarray))
// ...myarray代表把数组中的各项，拆成参数并在函数中调用

22、const 变量修改

const t1 = {a:456}
t1.a = 666
console.log(t1.a) // 666
// 对象的属性可以更改

const a = 111
a = 222
console.log(a) // TypeError
// 常量的值不能更改

23、js 变量命名规则

• 必须以字母、下划线“_”、美元符号$开头
• 不允许有空格、和其他标点符号，首个不能为数字
• 变量名长度不能超过255个字符。
• 变量名区分大小写。(javascript是区分大小写的语言)
• 变量名必须放在同一行中
• 不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。

24、边距

margin:10px 20px 30px 40px

边距顺序：上右下左

25 、数组 push

• 为数组添加新元素，并返回新数组的 长度

var myarray = [1,2,3]
console.log(myarray.push(5)) // 4

• concat 方法用于连接数组，然后返回新数组的副本
• reverse、sort 返回数组本身
• pop() 方法用于删除并返回被删除的那个值

26、假链接（点击不跳转）

<a href="javascript:;"></a>
<a href="#"></a>

• 不推荐第二种，会跳到页面最上面，还是有跳转的感觉

27、函数定义

• 函数表达式 var sum = function(a,b){return a+b} 表达式是个式子
  • 表达式是个式子
• 函数声明 function sum(a,b){return a+b}

28、运算符

• 当字符串和数字进行运算时，+ 会把数字变成字符串
• 当进行其他运算时，均会把字符串变成数字

29、Boolean 是个对象

var x = new Boolean(false);// 新建一个对象，虽然值是false，但是解析Boolean对象得到的是true
if (x) {
  alert('hi'); // 弹出 hi
}
var y = Boolean(0);
if (y) {
  alert('hello'); //不弹
}

30、HTML中不能显示 tif 图片

31、回调函数和eventloop

console.log('one')
setTimeOut(function(){console.log('two')},0)
console.log('three')
// 输出 one three two
// setTimeOut的回调函数会进入 eventloop 中，等线程里的任务执行完成后，最后才调用

32、手写动画的最小间隔

默认浏览器刷新频率是1秒60次，因此每一帧动画的间隔最小是1/60 = 16.7ms

33、日历标签

<input type="date" name="bday">
<input type="datetime-local" name="bdaytime"> 

• 时间都可以修改
• 目前只有谷歌浏览器支持日历

34、IE中的attachEvent中的this总是指向全局对象Window

35、parseFloat、toFixed

• parseFloat 解析一个字符串，并返回一个浮点数
• toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字

36、百分比形式的margin-top和padding-top

当元素的margin-top和padding-top是百分比形式时，是相对于最近父级元素的 width

37、font-size、font-weight、font-style、line-height都是可继承属性

38、变量提升

​ 在 js 代码中，如果有 var a 语句，则这句话会被提到前面执行

​ 如果是 var a = 1 语句，这句话会先提到前面，声明 a ，但是不会给 a 赋值，此时 a 还是 undefined

39、阻止 IE 和各大浏览器默认方式

window.event.returnValue = false;

40、typeof

**null === object **特殊

typeof undefined === undefined

undefined == null

typeof [] === object

typeof Symbol() === symbol

0 == []

false == []

String (‘foo’) // 返回 对象

new String(‘foo’) // 返回 ‘foo’

41、status\statusText

status属性返回状态码，为一个数字。

statusText属性返回状态码以及描述，字符串。

没有statusCode这个属性

42、块内声明函数

if (x) {  var foo = function() {}}

不要在块内声明函数，如果要声明的话，可以用 函数表达式 的方式

43、选择器权重

id选择器 > Class选择器 = 伪类 > 标签名称选择器

44、回流 & 重绘

• 浏览器页面渲染步骤：
  • 渲染 DOM tree ：浏览器解析 HTML 中的 DOM 结构，渲染出 DOM 结构，此时还没有添加样式
  • 渲染 Render tree：浏览器解析文档中的样式语句，和 DOM tree 结合，渲染出 Render tree
• 回流：
  • 当页面中的元素发生 位置、尺寸、布局、隐藏 的变化时，会发生回流
• 重绘：当 Render tree 中的元素发生外观上的变化，如color、background-color变化时，发生重绘
• 小结：回流一定会导致重绘，而重绘不一定导致回流。
• 减少回流和重绘的方法：
  • 通过修改类名的方式为元素更换样式
  • 用 cssText 的方式一次性把所有样式写在一起，然后赋值给元素
  • 添加节点的时候，把所有的子节点都一并复制 cloneNode(true)

45、注意全局变量

var x=10;
function cals(myNum) { 
    console.log(typeof x); // number
    console.log(typeof myNum); // number 
    return x+myNum;
}
console.log(cals(7)); // 17

46、函数定义：提升

<script> 
    var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
　 } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
</script> 
// y=4 z=4

• function(){}声明的函数会放在前面优先解析，（允许同名函数），后面定义的函数会覆盖前面的
• function(){}的优先级 高于 var a = 1
• var a = 1 这句话虽然有变量提升，但是赋值却不会提升（即真正的赋值还是等到执行这一句后才会赋值）

47、返回值

null == undefined // true
[] == false // true (发生隐式转换)
[] === false // false
!![] // 返回 true

48、前置和后置加减符

• 输出 11
• 如果是 temp–，则是先运算，再–
• 如果是 --temp，则是先–，再运算

49、数组的方法

• concat：连接两个数组，并返回新的对象

• sort & reverse ：排序、颠倒数组，并返回数组本身

  • var array = [-1,1,3,4,6,10];
    array.sort((a,b)=>Math.abs(a-3)-Math.abs(b-3));
    // [3, 4, 1, 6, -1, 10]
    // 按照和3的距离，升序排序
    

• push：为数组添加新元素，并返回添加元素后的数组长度

• pop：删除数组最后一项，并

• slice：选取数组的一部分，返回选中的一部分

• splice：对数据进行删除，增加 splice(删除首项index,删除的个数,新增的元素)

• map：返回新的数组，不影响原数组

• reduce：

arr.reduce(function(prev,cur){
	
},init)
// prev:上一次调用的返回值 || 初始值init
// cur:当前数组元素
// init:设置初始值

50、let

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo(); // 报错
// let 声明的变量只能在较小的 块级作用域 中有效
// let x = 10 并不能放在 foo 中调用
// foo 中，x没有被定义：如果是 var，可以先定义成 undefined，但是 let 不会把它先定义成 undefined，必须是赋值的时候才会有值。因此会报错。

51、readonly 和 disabled

• readonly 不能编辑
• disabled 的input 不能编辑，也不会跟着表单一起提交
• 都可以用 js 修改

52、map

• 对数组调用 map 方法，会跳过 空值，但是会保留空值（[1,2,4]） 其中2和4之间是一个空值（即什么都没有

• forEach 也是

• ['1','2','3'].map(parseInt)
  

53、use strict

function Foo(){'use strict'
console.log(this.location);
}
Foo() // 报错
// 在严格模式下，禁止 this 指向window

54、解释型语言的特点

• 非独立
• 效率低

55、js 内置 可迭代对象

• Array
• Map
• String

56、Math.round

当小数部分是 0.5 时，舍入到接近无穷大的一个整数

Math.round(11.5) // 12

Math.round(-11.5) // -11

57、Bootstrap

- .col-xs- 超小屏幕 手机 <768px

- .col-sm- 小屏幕 平板 >=768px

- .col-md- 中等屏幕 >=992px

- .col-lg- 大屏幕 >1200px

58、HTML5新增

• sessionStorage
• localStorage
• WebSocket

59、函数参数相关

var a = 10 // 全局变量 a
function test(a){
	a = a + 5
}
test(a)
console.log(a) // 输出10
// test函数中的a是一个形参，不是全局变量a，因此在函数调用结束后就销毁了

function test1(){
    a = a + 5
}
test1()
console.log(a) // 输出15
// test1函数中没有形参，其调用的是全局变量a

60、filter 属性

• filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

61、可继承的元素属性

继承就是指子节点默认使用父节点的样式属性。

不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。

可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

62、flash和js通过什么类如何交互? ExternalInterface

63、Math 对象

• Math.max(arg1,arg2,…,arg) 参数必须是number，不能是一个数组！

64、this 指向问题

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log(this.foo);  
        console.log(self.foo);  
        (function() {
            console.log(this.foo);  
            console.log(self.foo);  
        }());
    }
};
myObject.func(); // 由谁调用，this就指向谁，此时指向 myObject
// bar
// bar
// undefined
// bar

65、img

<img src=”” onerror=”alert(1)”/>

• 当图片不存在的时候，弹出 1

66、&

• 位与运算符：把两个数转换为 2进制数，再比较这两个数的每一位，都为1才为1，否则为0

67、AngularJS

{{ }} // 用于数据绑定的占位符

68、闭包

function Foo(){
     var i=0;
     return function(){
         document.write(i++);
     }
}
var f1=Foo(),
f2=Foo();
f1(); // 0
f1(); // 1
f2(); // 0

69、三元表达式

var x=10;
var y=20;
var z=x<y?x++:++y;
console.log('x='+x+';y='+y+';z='+z);
// x=11;y=20;z=10

• 注意：++y 这个语句根本就没有执行的机会（只执行到x++就停止了）

70、数组去重

// 1.indexOf
function arrayFunc (arr) {
            if (arr.length === 0) {
                return 0
            }
            var newArray = [];
            for (var i = 0;i<arr.length;i++) {
                if( newArray.indexOf(arr[i]) === -1) {
                    newArray.push(arr[i])
                }
            }
            return newArray
        }

// 2.Set
var myarray2 = [2,6,5,4,2]
var set1 = new Set(myarray2)
console.log(set1)

// 3.reduce
function arrayReduce(arr){
            var newArray = arr.reduce(function(prev,cur){
                if(prev.indexOf(cur) === -1){
                    prev.push(cur)
                }
                return prev // 这里必须要 return 本次调用后返回的值
            },[])
            return newArray
        }

71、Location 对象

• location 对象是 window 对象的子对象，可以用 window.location 访问
• 属性
  • hash：设置 或 返回从 # 开始的 url 部分 ( 包括# )
  • host：设置 或 返回 主机名和端口号
  • hostname：设置 或 返回当前的主机名
  • href：设置 或 返回完整的url (常用)
  • pathname：设置 或 返回当前url的路径部分
  • port：设置 或 返回当前url的端口号
  • protocol：设置 或 当前url的协议
  • search：设置 或 返回当前url的 ? 查询部分

72、Navigator 对象

• 表示当前浏览器的一些信息

73、存储空间

• javascript 的基本数据类型的存储空间都是 8字节

74、日期

• Date 中的 Month 只有 0-11，其对应现实日期的 1-12月

75、正则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAa5JB0E-1571540811594)(E:\typoraPics\1568615557714.png)]

76、优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffHrzh0t-1571540811595)(C:\Users\vchenzhe\AppData\Roaming\Typora\typora-user-images\1568616728163.png)]

77、a 标签 伪类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbEu1FVS-1571540811595)(E:\typoraPics\1568702743337.png)]

78、寻找子类

<div id=”wrapper”>

<div class=”wText”>…</div>…<!—more wText items here -->

<div class=”wImg”>…</div>…<!—more wImg items here -->

<div class=”wVideo”>…</div>…<!—more wVideo items here -->
</div>

$(‘#wrapper’).children(); //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。

$(‘#wrapper’).html(); //返回的是dom结构。而不是集合

$(‘#wrapper’).contents();

$(‘#wrapper’).find(“all”); //并没有all这个元素

79、强调文本

strong	重要文本
em	强调文本
b	粗体文本
big	大号字体效果

• 根据 H5 规则，b标签应该是最后的选择

80、div 元素的默认CSS 属性

border-top-width:默认值medium,定义中等的上边框。
outline-width:默认值medium,规定中等的轮廓。

margin-top：默认是0

padding-top：默认是0

81、栅格参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHQH0NGR-1571540811596)(E:\typoraPics\1568773582956.png)]

82、贝塞尔曲线无法制造的部分

• fade-in
• fade-out

83、media query 的类型

设备像素比、设备类型、设备高度

84、H5 新元素

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持（localStorage & sessionStorge）
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义 元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

85、浏览器支持 H5 元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例:

header, section, footer, aside, nav, main, article, figure { display: block; }

为浏览器添加新标签

<script>
	document.createElement("myHero")
</script>
<myHero></myHero>

86、video 元素

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

支持3种格式：MP4, WebM, 和 Ogg

<video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素
<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

element.play() //播放
element.pause() //暂停

87、audio 元素

您的浏览器不支持 audio 元素。

control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

88、datalist 元素

<input list="browsers">
<datalist id="browsers">
	<option>Chrome</option>
	<option>FireFox</option>
</datalist>
<!--IE9之前、safari不支持-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsekNSA7-1571540811597)(E:\typoraPics\1568874030205.png)]

89、H5应用程序缓存

• Cache Manifest

• <!DOCTYPE HTML>
  <html manifest="demo.appcache">
  ...
  </html>
  

  manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

90、web worker

个可识别的格式

```javascript
element.play() //播放
element.pause() //暂停

87、audio 元素

您的浏览器不支持 audio 元素。

control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

88、datalist 元素

<input list="browsers">
<datalist id="browsers">
	<option>Chrome</option>
	<option>FireFox</option>
</datalist>
<!--IE9之前、safari不支持-->

[外链图片转存中…(img-WsekNSA7-1571540811597)]

89、H5应用程序缓存

• Cache Manifest

• <!DOCTYPE HTML>
  <html manifest="demo.appcache">
  ...
  </html>
  

  manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

90、web worker

• web worker 是运行在后台的 JavaScript，不会影响页面的性能。