一些前端基础知识点自我总结!!!(实习面试准备)
虚拟dom和diff算法相关?
https://www.jianshu.com/p/595a13040055JS中EventLoop事件循环机制
总结如下,点击此处Promise、Generator以及Async/await相关?
看了一篇文章总结的很全面,点击此处设计模式相关的一些?
以下这篇博文总结了常用的十五种设计模式。(不过只了解了其中几种)
点此了解防抖和节流?
还是推荐一篇博文,很详细点击此处session相关?
session和cookie都是用来保存用户数据,相对来说session存储在服务器上更安全。
Session结束生命周期的几种情况:
(1)客户端关闭浏览器(只针对session机制都使用会话cookie来保存session
id,其实也属于Session过期这种情况,这里单说,是因为大部分的会话机制是这样。)
(2)Session过期。
(3)服务器端调用了session对象的invalidate()方法。
其中(1)(2)是属于自动失效,即后台中的session timeout设置的时间过了
(3)是属于手动调用了失效方法。
区别于cookie过期:
(1)cookie是保存在客户端,session保存在服务器端,cookie保存着session相关信息
(2)如果cookie没有超时,那么浏览器每次请求都会使用cookie信息,服务器端
根据cookie信息从session缓存中获取相对应的session。这两个信息有一个超时,用户连接即宣告关闭。
(3)cookie一般分两种。1.不设置过期时间,会存在内存里,浏览器关闭即失效。2.设置过期时间,会存在硬盘里,一直到过期时间才失效。
组件的划分?
可以划分为两类(当然可以再细划):基础组件、业务组件
基础组件不涉及业务逻辑(picker、timepicker、toast、dialog、actionsheet 、button等,也可以是页面容器header,footer等),而业务组件则是涉及业务逻辑的具体实现,可能包含若干个基础组件,处理一定的逻辑。什么是前端的模块化,组件化,工程化?
模块化:将某一复杂逻辑或功能的代码封装成一个文件以实现更规范化的管理、隔离及组织,以便在项目其他地方可以用到的时候引入,可以称之为模块化。js代码的模块化规范很多,有AMD/CommonJS/UMD/ES6 Module等等,css也可以采用模块化思想编写,而webpack则是一种模块打包工具。(具体的模块化编程请自行百度)
组件化:将一个网站页面想象成一个容器,里面各个独立的可视或可交互区域则可看作是各个组件。不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。
(浅显见解,翻阅过许多资料,模块化组件化都有更深的含义,具体自行百度)
工程化:工程化是一种规范化的思想,将一个复杂项目明确分层组织出清晰的结构去进行开发,而不是毫无组织结构的去做。模块化和组件化可以说是工程化思想下相对较具体的开发方式及实现。什么是原型,原型链,继承,闭包?
原型:js中定义的每个函数都有一个显式原型属性prototype,而每一个对象都有一个隐式原型属性_proto_,而prototype属性值是一个对象其中的constructor属性都指向构造函数本身。(关系如下图)
原型链:访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,依次层层往上查询直到prototype的原型对象为null,则该条查询路径为原型链。(下图中红线则为一条原型链)
继承:继承是面向对象思想编程中的概念,是指子类通过继承来具有父类的属性和方法或者重新定义、追加属性和方法等。而js中的继承则有原型链继承,构造函数继承,实例继承,拷贝继承,组合继承,寄生组合继承等。这里所述的则是根据原型链确定继承关系,由于所有的对象的原型链都会找到Object.prototype,因此可以通过_proto_找到父级对象的prototype属性调用其方法,这就是原型链继承。
闭包:简单来说闭包就是定义在一个函数内部的函数,而闭包是为了保留函数内的变量,使函数不会被被释放,始终保持在内存中,同时可以通过闭包访问其他函数内的变量。js中的数据类型有哪些?
js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object)js有哪些内置对象?
Object 是 JavaScript 中所有对象的父对象
数据封装类对象:Object、Array、Boolean、Number 和 String
其他对象:Function、Arguments、Math、Date、RegExp、Error数据类型存储额内存图?
栈中的基本类型在当前执行环境结束时销毁,而堆中的引用类型不会随执行环境结束而销毁
NULL和Undefined的区别?
NULL:空值,一个空的对象
Undefined: 不存在这个值同步和异步的区别?
同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.
同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。call、apply和bind方法的用法以及区别
js中call、apply、bind方法的作用是改变函数运行时this的指向
apply()方法接受两个参数,一是作用域,二是参数(可以是数组也可以是arguments对象)
call()的使用和apply()基本是一样的,不同的是参数的传递,call()必须明确的传入每一个参数
bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
(很抽象,具体说明例子自行百度理解)css3下伪类和伪元素的区别
伪类是弥补了CSS选择器的不足,用来更方便地获取信息。
伪元素由两个冒号::开头,可以创建源文档不存在的内容,其本质上是创建了一个虚拟容器(元素),可以添加内容或样式。
可以同时使用多个伪类,而只能同时使用一个伪元素。判断一个对象属于某个类的方法
使用instanceof 运算符:左边的运算数是一个对象,右边的运算数是对象类的名字或构造函数
Object.prototype.toString.call():该方法是目前为止发现的判断一个对象类型的最好的办法。前端性能优化的方法
不太了解,啃干货吧 前端性能优化(点击进入).使用匿名函数的优点
非匿名函数在定义时,就已经创建函数对象和作用域对象;所以,即使未调用,也占用内存空间;
匿名函数,仅在调用时,才临时创建函数对象和作用域链对象;调用完,立即释放,所以匿名函数比非匿名函数更节省内存空间主流浏览器的内核
浏览器 | 内核 |
---|---|
Chrome | Webkit/blink |
IE | Trident |
Firfox | Gecko |
Safari | Webkit |
Opera | presto |
js中字符串对象的slice()方法和substring()方法的不同
都是提取字符串中的一些字符
但是slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数http的一些状态码
1XX:表示已接受
2XX:成功
3XX:重定向,进行进一步操作(302 redirect: 302 代表暂时性转移(Temporarily Moved ))
4XX:表示客户端发送请求有语法或者请求无法实现的错误。
5XX::表示服务器处理时发生错误,未能实现合法请求。实现AJAX的基本步骤
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
var xmlhttp = XMLHttpRequest
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
xmlhttp.open('get',url,async='true')
//post请求下需要配置请求头信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
(3)设置响应HTTP请求状态变化的函数.
xmlhttp.onreadystatechange = function(){if(xmlhttp.readystate = 4 && xml.status ==200){...一些事情}
}
(4)发送HTTP请求.
xml.send()
(5)获取异步调用返回的数据.
var responseText =xmlHttp.responseText
(6)使用JavaScript和DOM实现局部刷新.
了解过哪些常见的web注入攻击?
sql注入,XSS(跨站脚本),CSRF(跨站请求伪造)列举一些常用的长度单位?
(1)绝对长度单位
彼此固定,不会因为其他元素的尺寸变化而变化。主要有 px cm mm
(2)相对长度单位
指定相对于另一长度的长度。主要有em rem %和可视区百分比长度单位 vm vh vmin vmax一个200*200的div在不同分辨率屏幕上下左右居中,用css实现?
div {width: 200px;height: 200px;background-color: aqua;position: absolute;left: 50%;top: 50%;margin-left:-100px;margin-top:-100px;
}
- 写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽?
#left {width: 200px;background-color: aqua;
}
#center {flex: 1;background-color: rgb(255, 0, 0);
}
#right {width: 200px;background-color: rgb(43, 255, 0);
}
- 数组的克隆复制应该怎么处理?
最近遇到一个问题,就是数组复制时直接赋值为浅拷贝。如下:
// 此方法为删除数组其中一个元素
function permutation(arr) {arr.forEach(element => {ar = arr//改写之后 ar = [...arr]ar.splice(ar.indexOf(element),1)console.log(ar) // 此处循环输出的为下图});
}
var arr = [[1,2],[3,4],[5,6]]
permutation(arr)
很明显输出有问题,之后便发现是浅拷贝的问题,改变被赋值后的值其原来的数组也会变。所以改用了es6的方法进行深拷贝。
- 下面哪个选择器的优先级最高?
A: #nav
B: #nav a
C: #nav .current-active
D: #nav #special
(选择器优先级: id选择器 > class选择器 > html元素选择器 > 通配符选择器 && 子级高于父级)
持续更新中。。。
记录这段时间遇到的一些晦涩不懂的概念,直到实习面试!
-------------------------以下是第一次面试部分内容总结------------------------- (面试公司:成都享宇金服的前端实习岗位)
- 图片常见的一些格式?
PNG,JPG,JPEG,GIF,SVG,BMP,TIF。 - gif是怎么实现的?
动态图,主要是多张照片组合成帧调整时间间隔形成动画。 - jpg图片和png图片有哪些区别?
png存在透明度背景,也就是rgba所构成,未压缩,jpg则是rgb,一种压缩位图。 - 列举一些es6的一些语法?
let,const,Promise,Symbol,class,module,proxy代理,还有一些数组对象函数等的扩展内容······ es6语法 - 具体说一说promise对象?
简略介绍了下,这里具体请看 promise对象详解 - 说一下es6中数组新增的一些方法?
forEach(),find(),findIndex(),Array.from(),Array.of()等等等等······ - 用过vue是吧,知道他的作者吗?
尤雨溪 - 大致说一下vue全家桶中vuex,vue-router等等,为什么要用(基本是围绕vue问了一下)?
vuex状态管理器集中式存储管理,vue-router路由控制页面跳转(有点像锚点)至于为什么要用请百度。 - 为什么浏览器会有跨域限制?
浏览器为了保证用户的信息安全,具有一种安全策略叫同源策略,因此不允许不同域的页面资源相互访问。 - 什么是不同的域?
即 域名,协议,端口号其中有一个不同都算不同的域。 - 如何解决跨域问题?
(1)使用jsonp(通过在script标签中访问不同域的URL实现跨域)
(2)WebSocket(HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议)
(3)CORS(跨站点资源共享,它是w3c官方推荐的一种跨域方案)
(4)配置代理实现跨域访问。(vue-cli+webpack创建的项目下设置config/index.js文件中的proxyTable如下:
proxyTable: {'/api': { // 匹配所有以'/api'开头的请求路径target: 'https://elm.cangdu.org', // 代理目标的基础路径changeOrigin: true, // 支持跨域pathRewrite: { // 重写路径:删除路径中开头的'/api''^/api': ''}}}
)
12. 说一下你目前这段时间的规划?
吧啦吧啦吧啦······
-------------------------以下是第二次面试部分内容总结------------------------- (面试公司:成都咕咚的前端实习岗位)
第一部分:笔试题 4道
- 如何实现数组的随机排序?
方法一:var arr = [1,2,3,4,5,6,7,8,9,10];function randSort1(arr){for(var i = 0,len = arr.length;i < len; i++ ){var rand = parseInt(Math.random()*len);var temp = arr[rand];arr[rand] = arr[i];arr[i] = temp;}return arr;}console.log(randSort1(arr));方法二:var arr = [1,2,3,4,5,6,7,8,9,10];function randSort2(arr){var mixedArray = [];while(arr.length > 0){var randomIndex = parseInt(Math.random()*arr.length);mixedArray.push(arr[randomIndex]);arr.splice(randomIndex, 1);}return mixedArray;}console.log(randSort2(arr));方法三:var arr = [1,2,3,4,5,6,7,8,9,10];arr.sort(function(){return Math.random() - 0.5;})console.log(arr);
- 请问下列语句输出什么?为什么?
foo()
var foo
function foo(){console.log(1)
}
foo = function(){console.log(2)
}
输出为1。因为上例中函数声明function foo()会提升,foo = function()不会提升,因此foo()输出为1。
请问对js的什么特性印象比较深刻?为什么?
自行发挥(博主乱答了一个操作dom树吧,然后吧啦吧啦吧啦。。。)请用css实现一个左边定宽,右边自适应的布局?
html:<div class="oyfather"><div class="oyleft"></div><div class="oyright"></div></div>css:.father {display: flex;margin: 0;padding: 0;
}
.left {width: 200px;height: 500px;background-color: blue;overflow: hidden;
}
.right {flex: 1;height: 500px;background-color: red;overflow: hidden;
}
第二部分:面试(emmmm…记不清了)
-------------------------以下是第三次面试部分内容总结------------------------- (面试公司:成都当乐网)
如何实现一个div使其宽度和高度自适应浏览器窗口的大小(不能设置固定宽高)?
原生js添加监听事件的方式列举几种?
vue实现双向数据绑定的原理?
js如果使用setTimeOut函数后再使用promise对象,那么先执行哪个?
跨域的几种方式?
js事件捕获和事件冒泡?如何阻止事件冒泡?及事件委托的使用场景?
回忆中…
-------------------------------------------------结束------------------------------------------------(最后去了咕咚并于5月8号辞职)
超全前端面试题合集总结(点击进入)
一些前端基础知识点自我总结!!!(实习面试准备)相关推荐
- 前端基础知识点-每天一个基本知识点(100+个前端小知识,你是否都知道?)
文章目录 前言 第一回合 一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
- 前端基础知识点整理(html+css+js基础)、不包含框架
css盒子模型 盒模型都是由四个部分组成的,分别是margin.border.padding和content. 标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同.标 ...
- 前端基础知识点汇总(持续更新...)
1. HTML5 文档类型和字符集是? <!DOCYPE>声明位于html文档的最上方,处于`html` UTF-8字符集. 2. HTML5语义化的优势? HTML结构清晰 代码可度性 ...
- Java基础知识点总结(偏向面试)
1,webservice是什么? webservice是一种跨编程语言和跨操作系统的远程调用技术,遵循SOPA/WSDL规范. 2,springCloud是什么? springcloud是一个微服务框 ...
- 前端基础知识点:JS中的参数传递详解
JS语法中的传递参数,对于初学者是一个非常重要的概念.很多小伙伴在学习"值传递"和"引用传递"时,会有不少烦恼.今天我们就来通过各种姿势全方位剖析JS中的值传递 ...
- 前端基础知识点总结CSS篇(问题实例)
CSS 优化.提高性能的方法有哪些? 多个 css 合并,尽量减少 HTTP 请求 css 雪碧图 抽象提取公共样式,减少代码量 选择器优化嵌套,尽量避免层级过深 (用'>'替换' ') 属性值 ...
- 记一次网易前端实习面试
记一次网易前端实习面试 很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在 ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- 自然语言处理算法工程师历史最全资料汇总-基础知识点、面试经验
2019年秋招已过,零星的招聘任然在继续.本资源适用于NLP算法工程师面试,也适用于算法相关的其他岗位.整理了算法面试需要数学基础知识.编程语言.深度学习.机器学习.计算机理论.统计学习.自然语言处理 ...
最新文章
- springboot 修改了端口不生效_Spring Boot 项目 Docker 化快速上手
- 11_短信发送器_快速回复页面实现
- 状态机学习(二)解析INI文件
- MySQL中整型和字符串类型指定长度的含义
- 一般程序员 vs 优秀程序员,没有对比就没有伤害
- [Editor][001][vim]VIM的辅助工具们
- CVPR 2020 | 北大Futurewei提出 GraphTER:无监督图变换共变表征学习
- 深度剖解“IF表达式”底层实现过程
- 计算机软件服务可以自开专票,可以自开专票的小规模纳税人到底有几类?
- 薛定谔 Maestro教程--用户界面 | 结构编辑 | 测量距离角度
- 一个泛型句柄类--C++模板和泛型编程--c++ primer
- 经典的850棋牌游戏搭建教学
- JAVA 根据身份证计算年龄
- 第5章-着色基础-5.4-锯齿和抗锯齿
- Python中in的用法小结
- matlab中如何实现开关可调频率,如何设计利用数字控制的电压可调开关电源
- Cannot mix different versions of joi schemas解决方案
- 《人性的弱点》——戴尔·卡耐基
- 内网安全-域横向网络传输应用层隧道技术
- WPF游戏开发——小鸡快跑