前端面试知识点总结(持续更新)一

  1. JavaScript分为ECMAScript,DOM,BOM
    BOM:浏览器对象模型,它使得js有能力与浏览器进行‘对话’,如alert()就是它提供的
    DOM:文档对象模型,通过它可以访问HTML文档的所有元素,如document.getelementByid()就是它提供的

  2. 变量提升:
    就是将js中的变量或者函数提高到作用域的顶部,如先把var和function声明的变量前置,再去顺序执行代码

  3. 阻止冒泡
    什么是冒泡:如果一个按钮绑定了一个‘click’事件,那么click事件会依次在它的父元素中触发
    w3c的方法是 e.stopPropagation()
    ie是e.cancelBubble=true

  4. 取消默认事件:
    什么是默认事件:比如a的链接,input的submit这都属于默认行为,就是不设置方法,自带的方法行为
    w3c的方法是:e.preventDefault()
    ie是:e.returnValue=false
    注意:如果event对象设置cancelable为false时,表示没有默认行为,以上两者不起作用
    Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

  5. px,em和rem
    px:表示绝对尺寸,中文名像素,它不能适应浏览器缩放时产生变化,一般不用与响应式网站
    em:表示相对尺寸,它根据当前对象文本的font-size(如果当前对象文本的font-size也是em,则根据其父元素文本的font-size进行变化),使用em可以随网站的变化字体也跟着发生变化,但是使用em需要知道当前元素和父元素的font-size,如有遗漏,可能发生错误
    rem:也叫相对尺寸,它参考对象时根元素的font-size,因此只需要确定一个font-size

  6. em与px换算:
    任意浏览器的默认字体高度都是16px
    所有未调整的浏览器都符合1em=16px
    唯一方便简化,在通常开发中会讲css的body选择器声明font-size=62.5%,因为10px=0.625em,这样12px等于1.2em,10px等于1em

  7. 盒子模型:
    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
    marign 外边距
    border 边框
    padding 内边距
    content 内容
    属性设置:width:内容的宽度
    height:内容的高度
    padding:内边距,边框到内容的距离
    border:边框
    margin:外边距,盒子边框到附近最近盒子的距离

  8. js的类型
    undefined,null,boolean,string,object,number
    ES6新增了一种原始数据类型:Symbol,表示一种独一无二的值

  9. var 和let,const
    ①var声明的变量会挂载在window上,let和const不会
    ②var生命的变量可以状态提升,let和const不能
    ③let和const声明形成块级作用域
    ④同一作用域下,let和const不能声明同名变量,但是var可以
    ⑤暂存死区
    只要块级作用域内存在let/const命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。前端面试知识点总结(持续更新)一_第1张图片

    6.1const一旦声明不能修改,但是复合型数据,可以修改属性
    6.2不能不赋值

  10. JS截取字符串
    三种:
    ① .substr(下标值,截取个数)
    从输入下标向后面截取几个字符串,默认不写截取全部
    注意:下标值可以是负数,长度也可以是负数(结果显示为空)
    如果所截选长度超过字符串长度,将显示应有的数据,不会报错
    ②.substring()
    参数必须为非负整数,否则返回整个字符串
    ③.slice(开始下标,结束下标-1)

              var str='123456';
               console.log(str.slice(1,2));
               //结果为 2

  1. 闭包
    JavaScript 变量可以是局部变量或全局变量。

私有(局部)变量可以用到闭包。
闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。
实现方式,就是在一个方法内再创建一个方法来对需要修改的数据进行操作如:

function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();
//不使用闭包,结果都是1
------------------------------
//js闭包
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
//结果为3

使用这种方式让局部变量常驻内存,且不使用全局变量,但是会造成内存泄漏(因为有一块内存一直被占用,不被释放)
最常见的闭包使用场景:
setTimeout,这也是为什么我们使用最开始学习js使用setTimeout需要考虑this指向的原因

  1. js排序
    ①冒泡排序:
    思想:第一个和第二个比,谁小谁放在前面,然后第二个再和第三个比,还是谁小谁放在前面,依次类推(注意,已经排过的不再考虑,如,第二次不考虑第一个,第三次不考虑前两个)
    ②sort排序
    sort是数组的一个方法,所以可以自定义排序方式
    使用其需要定义两个参数:如n1,n2
    如果n1-n2,则升序,反则降序
var arr=[1,11,2,22,5,4,0];
            arr.sort(
                function(n1,n2){
                    return n1-n2;
                });
alert(arr);//[0,1,2,4,5,11,22]
升序
------------------------------------------------
var arr=[1,11,2,22,5,4,0];
            arr.sort(
                function(n1,n2){
                    return n2-n1;
                });
alert(arr);
降序
  1. JS操作数据
    ①join()
    将数组中所有元素转化为字符串并连接在一起
    ②reverse()
    将数组中的元素颠倒顺序
    ③concat()
    数组拼接,返回新数组,且原数组不受影响
    ④slice(开始下标,结束下标-1)
    截取数组形成新数组,且原数组不受影响
    注意:如果超过最大长度,只显示到最后结果
    如果第二个下标为负数:如-1,则表示倒数第一个元素,-2表示倒数第二个元素
    如果第一个参数为负数,则表示从倒数第几个下标开始,-2则表示从倒数第二个开始
    前端面试知识点总结(持续更新)一_第2张图片
    ⑤indexOf和lastIndexOf
    查找指定元素的下标值,indexOf是从左到右,lastIndexOf是从右到左,如果没有找到返回-1
    ⑥splice()
    删除元素,插入元素
    第一个参数:删除或插入的起始位置
    第二个参数:要删除的个数
    第三个参数:插入到数组中的元素
    注意:如果只有一个参数,默认删除参数后边的所有元素
    该方法新建一个数组,并修改原数组
    ⑦push()
    在数组末尾添加一个或多个元素
    ⑧pop()
    从数组末尾删除一个元素(只能删除一个),并返回被删除的元素
    ⑨unshift()
    把一个元素添加到数组的开头,并返回数组的新长度
    ⑩forEach()
    遍历数组,数组每一个元素都执行一次回调函数
    前端面试知识点总结(持续更新)一_第3张图片
    ⑩①map()
    调用数组的没有给元素传递给指定的函数
    前端面试知识点总结(持续更新)一_第4张图片
    ⑩②every()和some()
    every()判断数组中的每一项是否都满足条件,只有所有项都满足条件,才返回true
    some()判断数组中是否存在满足条件的项,只要有一项满足,就返回true

  2. 解构赋值
    解构赋值是对赋值运算符的扩展,它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值

基本形式:
let [a,b,c]=[1,2,3];
//a=1
//b=2
//c=3
忽略形式:
let [a, ,b]=[1,2,3]
//a=1;
//b=3
不完全解构:
let [a=1,b]=[ ];
//a=1,b=undefined
剩余运算符:
let [a,...b]=[1,2,3]
//a=1,
//b=[2,3]
字符串解构
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
解构默认值:
let [a=2]=[undefined]
//a=2
  1. 字符串扩展
    ES6提供
    ①includes()
    返回布尔值,表示是否找到了参数字符串
    ②startsWith()
    返回布尔值,表示参数字符串是否出现在原字符串的头部
    ③endsWith()
    返回布尔值,表示参数字符串是否出现在原字符串的尾部
    ES7提供
    ④padStart()
    头部补全
    ⑤padEnd()
    尾部补全
    前端面试知识点总结(持续更新)一_第5张图片

ES5写法
parseInt(12.32)//12
parseFloat('123.43#')//123.43
ES6写法
Number.parseInt(12.32)//12
Number. parseFloat('123.43#')//123.43
这样做的目的,是逐步减少全局性方法,使得语言逐步模块化
  1. 扩展运算符(…)
    对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
  1. keys(),values(),entries()
    三者都是返回的遍历器对象
keys()遍历出对象的key
let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for ( let key of Object.keys(obj)){
    console.log(key)
}
 
// name
// sex
// age
// height
————————————————
版权声明:本文为CSDN博主「阿泽啊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41702660/article/details/82015313
values()遍历出对象的value值
let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for ( let val of Object.values(obj)){
    console.log(val)
}
 
// 张三
// 男
// 20
// 150
————————————————
版权声明:本文为CSDN博主「阿泽啊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41702660/article/details/82015313
entries()遍历出对象的每一个值
let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for ( let item of Object.entries(obj)){
    console.log(item)
}
 
// (2) ["name", "张三"]
// (2) ["sex", "男"]
// (2) ["age", 20]
// (2) ["height", 150]
————————————————
版权声明:本文为CSDN博主「阿泽啊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41702660/article/details/82015313

-------------------------------

let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for ( let [key,val] of Object.entries(obj)){
    console.log(key,val)
}
 
// name 张三
// sex 男
// age 20
// height 150
————————————————
版权声明:本文为CSDN博主「阿泽啊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41702660/article/details/82015313
  • w3c和ie盒子区别
    ie的content部分包含了border和padding
    别的相同
    如果想不考虑这两者的差异,可以使用box-sizing属性设置
    content-box:标准盒模型:padding和border不被包含在定义的width和height中
    border-box:IE盒模型:padding和border包含在width和height中,也就是说定义width值,就算你设置其他属性,盒子的宽度也不变,也就是说border和padding不影响实际宽度

  • 相对定位绝对定位
    首先需要知道一句话:子绝父相,也就是一般情况下都是父盒子相对定位,子盒子绝对定位
    绝对定位:绝对定位是相对当前元素 最近的 已经定位的父元素(找不到,继续向上找,还找不到就相对body定位),会脱离标准文档流
    相对定位:是根据当前元素的初始位置进行定位,不会脱离标准文档流
    脱离标准文档流:大白话就是不会在浏览器上占位置,会浮动起来
    常见的几种脱离标准文档流的方法:
    float,flex,绝对定位
    如何恢复,也就是清除浮动
    ①在父盒子添加一个无意义的使用clear:both的盒子
    ②在父元素中设置 overflow:hidden

  • 如何让盒子在浏览器上水平垂直局中
    ①使用flex 父盒子 :justfy-content和align-items
    ② 查看另外三种方法
    前端面试知识点总结(持续更新)一_第6张图片

  • 选择器以及它的优先级
    css的基本选择器有三种
    ①元素选择器(就是标签)
    ②ID选择器
    ③类选择器
    ④行内样式(一般不用这个)
    优先级:④>②>③>①
    注意:在属性后面使用!important优先级立马最高

  • 它是html5标准网页声明,如果你声明了这个,浏览器就会开启标准模式,按照w3c的标准渲染页面,否则将会使用怪异模式(浏览器使用自己的怪异模式解析渲染页面)

  • http的请求方式
    请求方式有很多,
    但通常情况下用到的也就四种
    GET,PUT,POST,DELETE
    对应着CRUD,上述四种请求就可以实现CRUD功能了

  • cookie、sessionStorage,localStorage
    都是存储数据,但是cookie存储的少(cookie大小4K左右,Storage一般为5M或者更大),且需要依赖服务器
    cookie有过期时间,localStorage默认永久保存
    ,sessionStorage保存在当前会话中,刷新页面不会被删除,关闭浏览器,关闭页面,跳转页面会清除
    使用cookie需要自行封装(因为原生api相当不快乐),使用storage可以直接使用

  • CSS3的新特性:
    过渡:transition
    形装转换:transform,可以旋转,缩放,倾斜
    box-shadow:阴影

  • HTML5新特性
    语义化标签:如 article,details,main,footer
    canvas和svg:
    canvas图片放大会失真,svg图片放大不会失真,和分辨率无关

  • jquery选择器
    基本选择器:标签,类,id
    层级选择器:子代,后代,相邻
    表单选择器:input,checked,button
    简单过滤选择器::first,odd,even,eq
    内容过滤选择器:$([select],div)

  • jquery中的attr和prop
    prop用来操作固有属性
    attr用来操作自定义属性
    如radio标签的checked属性,因为这个属性本身自带,所以使用prop

  • Promise
    ①是异步编程的一种解决方案
    ②解决ajax死亡回调
    ③一般搭配async和await一起使用
    Promise.all()全部执行完才执行
    Promise.race()有一个成功就执行

  • MVVM
    MVVM是Model-View-ViewModel的缩写
    Model代表数据模型,也可以在Model中定义数据修改的业务逻辑
    View代表UI组件,它负责将数据模型转换成UI
    ViewModel是两者的桥梁,用于同步View和Model
    在MVVM架构上,View和Model之间没有直接联系,惹事通过VM进行交互,而且Model和ViewMode交互是双向的,因此View的数据会同步到Model中,而Model数据的变化也会反映在View上
    这样的好处就是程序员不需要再处理DOM操作,仅仅关注业务逻辑就行饿了
    Vue实现双向绑定的原理:
    Object.defineProperty()

  • key的用处:
    在Vue或者React中,写循环时,往往会加上key,
    因为Vue存在一个DOM复用机制,会尽量回收DOM元素进行复用,而这个机制本身也是高效的,但有时候可能会出现不可想象的问题,而加了key后,元素就有了一个标识,复用机制就不会复用带key的元素了,React也有这样子的机制
    key最好用独一无二的值

  • v-if和v-show
    v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
    也就是说,使用v-if如果条件不为真,元素不渲染,直接不存在,而v-show是存在只不过设置display为none

  • Vue定义统态路由
    在router目录下的index.js中,对path属性加上/:id,使用router的params.id获取

  • $router和 $route的区别:
    $router是是一个VueRouter的实例,可以导航到不同的路由里
    $route是 $router跳转到的当前一个对象,里面包含path,query,name,params

  • vue-router的钩子函数

①全局钩子
主要包括beforeEach和afterEach
beforeEach函数有三个参数
to:router 即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进入管道中的一个钩子,如果执行完了,则导航的状态就是confiremed(确认的);否则为false,终止导航。
afterEach函数不能传next()函数
这类钩子函数主要作用于全局,一般用来判断权限,以及页面丢失时候时需要执行的操作,如
前端面试知识点总结(持续更新)一_第7张图片
②单个路由里面的钩子
主要用于写某个指定路由跳转时需要执行的逻辑

前端面试知识点总结(持续更新)一_第8张图片
③组件路由
主要包括 beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave这几个钩子都是写在组件里面的,也可以传三个参数(to,from,next),作用于前面类似
前端面试知识点总结(持续更新)一_第9张图片
MVC和MVVM的区别:
都是一种设计思想,主要是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决的mvc中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当Model频繁发生变化,开发者需要主动更新到View
Vue半场钩子动画

<transition
@before-enter="boforeEnter" 动画开始之前,一般获取起始位置
@enter="enter" 动画运行,一般设置动画的偏移量
@after-enter="afterEnter" 动画结束
>
transition>
  • Vue中进场动画
		.v-enter,.v-leave-to{
		transfrom:translateX(150px);
		}
		.v-enter-active,.v-leave-active{
		transition:all 0.5s ease;
		}
  • Vue过滤器
    局部过滤器
<div id="app">
     <input type="text" v-model="msg" />
     {{msg | slice(自定义过滤器的名字)}}
div>
var vm new Vue({
	el:"#app",
	data:{
		msg:''
	},
	filters:{
		slice:function(value){
			if(!value) return ''
			return value.toString().slice(1);
		}
	}
})

全局定义过滤器

Vue.filter('slice',function(value){
	if(!value) return ''
	return value.toString().slice(1);
})
  • Vue/keep-alive
    keep-alive是vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素,一般用来执行这种操作:我们将某个列表类组件内容滑动到第100条的位置,那么我们在切换到一个组件再次切换回到该组件,该组件的位置状态依旧保持在第100条

被keep-alive包裹的动态组件不需要再次发送HTTP请求,但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面,这也就出现了例如:我们使用动态路由做匹配的话页面只会保持第一次请求数据的结果,所以需要我们在特定的情况下强制刷新某些组件

include 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面

exclude 使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面

export default {
 name:'a', // include 或 exclude所使用的name
 data () {
 return{
    }
  },
}

路由:

   // 保持 name为a和b的组件
   <keep-alive include="a">
        <router-view/>
   keep-alive>
  • vue的两个核心是什么
    数据驱动、组件系统

  • vue常用的修饰符
    .prevent:提交事件不再重载页面
    .stop:阻止单击事件冒泡
    .self:当事件发生在该元素本身而不是子元素的时候会触发
    .capture:事件监听,事件发生时会调用
    .once:只触发一次

  • Vue的watch和computed
    前端面试知识点总结(持续更新)一_第10张图片
    v-on绑定多个事件
    如果是绑定多个事件,可以键值对的形式
    在这里插入图片描述
    如果是绑定多个相同事件,直接用逗号隔开即可在这里插入图片描述

  • Vuex
    state
    Vuex使用单一状态树,即每个应用将仅仅包含一个store实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
    mutations 通过commit调用里面的方法,进行修改数据
    mutations定义的方法动态修改Vuex的store中的状态或数据
    getters
    类似vue的计算属性,主要用来过滤一些数据
    action
    actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view层通过store.dispath来分发action
    组件访问State中数据的第一种方式:
    this. $store.state.全局数据名称
    方式二:
    this. $store.getters.名称
    方式 三:
    使用mapState,mapGetters
    前端面试知识点总结(持续更新)一_第11张图片前端面试知识点总结(持续更新)一_第12张图片

  • vue等单页面应用及其优缺点
    优点:vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,核心是响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
    缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件)来第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

  • React的生命周期
    生命周期分为三个部分:创建阶段,运行阶段,销毁阶段
    ①创建阶段:创建的生命周期函数,在组件中只执行一次;
    componmentWillMount:组件将要被挂载,此时还没有开始渲染虚拟DOM,
    componmentDidMount:组件完成了挂载,此时,组件已经显示到了页面上,当这个方法执行完,组件就进入运行中的状态
    ②组件运行阶段:根据组件的state和props的改变,有选择的触发0次或者多次;
    componmentWillReceiveProps:组件将要接收新属性,此时,只要这个方法被触发,就证明父组件为当前组件传递了新的属性值;
    shouldComponentUpdate:组件是否需要被更新,此时,组件尚未被更新,但是state和props肯定是最新的。
    componentWillUpdate:组件将要被更新,此时,尚未开始更新,内存中的虚拟DOM树还是旧的
    componentDidUpdate:此时,页面又被重新渲染,state和虚拟DOM和页面已经完全保持同步
    ③组件销毁阶段:一辈子只执行一次
    componmentWillUnmount:组件将要被卸载,此时组件还可以正常使用

  • React中getChildContentType
    React中Context特性的使用()

你可能感兴趣的:(面试,JavaScript)