http协议(restful接口,各个版本的区别)
react和redux(hooks和性能优化,源码)
vue了解,angularjs1版本
前端性能优化
闭包,面向对象及继承,数组排序算法,深浅拷贝,this关键字
ES6,ES7,ES8
跨域及前端安全
sass、less、css、flex布局
js事件的阶段、防抖和节流
node基础,express和koa框架
异步promise async await的区别以及和定时器的执行顺序(宏任务和微任务)
盒子模型及异形盒子模型(border-box)
浏览器内核及兼容性,indexDB cookie session localSession
一行代码数组去重:new Set(arr)
JavaScript 中包含以下 7 个全局函数,用于完成一些常用的功能(以后的章节中可能会用到):
escape( )、eval_r( )、isFinite()、isNaN( )、parseFloat( )、parseInt( )、unescape( )
强制类型转换(数值比较的时候会进行类型转换)
Number(参数)把任何类型转换成数值类型;
parseInt(参数1,参数2)将字符串转换成整数;
parseFloat()将字符串转换成浮点数字;
string(参数):可以将任何类型转换成字符串;
Boolean()可以将任何类型的值转换成布尔值
JSON.parse(),JSON.stringfy().
!!
其实就是一个语法糖,主要用于替换对“”、null、undefined的==或者===的判断
作用:例如 !!null 返回的是false。
(1)标签:
行内元素(无宽高,不可设置margin的上下边距):span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)
块级元素:div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
行内块元素:display:inline-block;的元素。
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
px、em、rem的区别
①px:像素,相对于屏幕的分辨率而言的。
②em:相对长度单位,它是相对于当前对象内文本的字体尺寸,em是相对于父级元素的单位,会随父级元素的属性(font-size或其它属性)变化而变化
③rem:CSS3新增的一个相对单位(root em,根em),相对的是HTML根元素。例如:p {font-size:14px; font-size:.875rem;}
display:none 和 visibility:hidden 的区别
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
attribute和property的区别
attribute :dom 元素在文档中作为 html 标签拥有的属性,这个属性一共有三个相关的方法,setAttribute、getAttribute、removeAttribute;
property: dom 元素在 js 中作为对象拥有的属性。
attribute的value值只在初始化的时候跟property一样,使用getAttribute获取的值是初始化时候的值,如果使用setAttribute方法手动去改变,但是这个改变也不会影响property的值;
property的value值是input实时输入的值,该值的改变同样也不影响attribute。
math对象的方法
Math.ceil() 执行向上舍入
Math.floor() 执行向下舍入
Math.round() 执行标准输入,即四舍五入为最接近的整数
Math.random() 返回随机数
CSS中 link 和 @import 的区别
(1) link属于HTML标签,而@import是CSS提供的;
(2) 页面被加载的时,link会同时被加载,而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
position
absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
static 默认值。没有定位,元素出现在正常的流中
sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出
(2)jQuery事件绑定
on:美刀符(’#clickmeon’).on(“click”,function(e){})
给未来元素或异步请求后的元素添加事件
美刀符(document).on(‘click’,‘绑定点击事件的元素’,function(){
/需要注意的就是事件里边的 ( t h i s ) 指 的 就 是 被 点 击 的 元 素 而 不 是 (this)指的就是被点击的元素而不是 (this)指的就是被点击的元素而不是(document)/
})
live:美刀符("#button li a").live(“click”,function(e){});
delegate:美刀符(“div”).delegate(“li a”,“click”,function(e){});
bind:美刀符(’#clickmebind’).bind(“click”, function(e){});
注意:如果只使用一次可以用one绑定。
(3)img标签的alt和title属性
alt:图片不显示的时候显示
title:图片正常显示的时候,鼠标放上去的时候显示
(4)flex布局
父元素定义:{display:flex; flex-direction: column; }即可。
水平垂直居中{
align-items:center;
justify-content:center;
}
(5)CommoneJS(requireJS)、AMD(异步加载依赖)及CMD(就近依赖)
CommoneJS:用在服务器端,加载模块是同步的,所以只有加载完成才能执行后面的操作。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
//exports和module.exports是等同效果的
module.exports=function(x){
console.log(x);};
AMD(异步加载依赖):用在浏览器端,提前加载依赖模块
CMD(就近依赖):用在浏览器端,用到的时候才会加载依赖模块
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething() // 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {
// 依赖必须一开始就写好
a.doSomething() // 此处略去 100 行
b.doSomething()
...
})
(6)bind , call及apply
他们都会改变this的指向
bind:生成一个绑定函数,但是不会调用。例如:f.bind(obj),实际上可以理解为obj.f(),这时f函数体内的this自然指向的是obj;
call:绑定后会直接执行,单个传参
apply:绑定后也会直接执行,以数组的形式传参
(8)ES6
1、let和const
const定义的常量是不能改变的,但是const定义的引用类型变量是可以改变他们的属性值。
2、箭头函数
3、this关键字(箭头函数结果了函数中this指向的问题);
4、函数的默认参数
5、函数的rest参数(…args):rest参数是数组,而arguments是类数组
6、数组/对象的解构赋值
7、类
8、模块的导入(import & export)
9、展开操作符“…”
promise:promise.then(),promise.all()
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了,打出 '失败'
})
ES6编译为ES5使用babel
(9)ES7
1、includes:arr.includes(),返回bool值
注意:indexOf ()返回的是索引的下标或者是-1。
2、指数操作符:** ,2**3 = 8
(10)ES8
1、object.entries():
将对象转为键值对的数组,对象的每一个属性和值是数组里的每一个元素。
例如let obj = {a: 1, b: 2,