1. localstorage 和 sessionstorage 的区别
1.sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。(浏览器关闭后不可使用)
2.localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。、
不支持跨域。
localstorage不支持跨域,跨域可以利用postmessage和iframe来实现
- cookie:如果不设置过期时间,那么在浏览器关闭后就会被销毁
2. http 301、302、304状态码解释
- 301:请求的url已经永久地失效了(资源被移动到了新位置),重定向到新的 url 对其进行请求
- 302:重定向到新的 url,但是也可能随时改变主意,也可能会显示到旧的 url,或者其他地方。有时候搜索引擎会来决定是定向到哪个 url
- 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,不会影响页面的性能。