JS基础
1、JavaScript有哪几种数据类型
基本数据类型和引用数据类型 number string boolean null undefined
对象数据类型:对象 数组 正则 时间 Math Date 函数数据类型:function
2、call() 和 apply() 的区别和作用?
call方法传参数是用逗号隔开,从第二个参数开始一个一个传进去
apply方法传参数,除了第一个参数以外,剩下的参数要把他放在一个数组中传入,然后在形参赋值的时候,也是一个一个的赋值
JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来便利所有的参数。
3、BOM对象有哪些,列举window对象?
- window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;
- document对象,文档对象;
- location对象,浏览器当前URL信息;
- navigator对象,浏览器本身信息;
- screen对象,客户端屏幕信息;
- history对象,浏览器访问历史信息。
4、列举至少3种强制类型转换和2种类型转换?
Boolean(value)——把给定的值转换成Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String(value)——把给定的值转换成字符串。js提供了parseInt()和parseFloat()两个转换函数。
前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
5、请写出以下运算结果:
alert(typeof null); objecy
alert(typeof undefined); undefined
alert(typeof NaN); number
alert(NaN\==undefined); false
alert(NaN\==NaN); false
var str="123abc";
alert(typeof str++); number
alert(str); nan
6、JavaScript的typeof返回哪些数据类型?
number, boolean, string, undefined, object, function
(它不能细分object)
7、data-属性的作用是什么?
自定义data属性
使用 data-* 属性来嵌入自定义数据
8、document.ready和document.load和$(function(){})有什么区别?
document.ready 是页面文件资源加载完毕 执行
document.load 是dom结构详细信息(包括了加载图片等其他信息)加载完毕执行
$(function(){}) dom结构加载完成 执行
9、什么是闭包?闭包作用?在工作中是如何应用的?
闭包的概念:函数执行都会形成一个私有作用域 保护里面定义的私有变量不受外界干扰,这种保护机制 叫做闭包
但是现在99%的IT开发者都认为:函数执行,形成一个不销毁的私有作用域,除了保护私有变量以外,还可以存储一些内容,这样的模式才是闭包
介绍一下闭包和闭包的常用场景
闭包作用:
(1)保护 团队协作开发 每个开发者把自己的代码存放在一个私有的作用域中,防止相互之间的冲突 把需要供别人使用的方法
通过return或者window.xxx暴露在全局下即可; jQuery源码中也是利用保护机制实现的
(2)保存
eg:选项卡 的闭包解决方法 单例模式(JS高阶编程技巧:惰性思想/柯理化函数思想…)
10、JS实现继承的几种方式?
什么是继承:子类继承父类的一些属性和方法
(1) 原型继承
(2) call继承
(3) 寄生组合继承
(4) ES6中的类及继承
11、创建对象的三种方式?
(1) 通过"字面量"方式创建
(2) 通过"构造函数"方式创建
(3) 通过object方式创建
1.对象字面量创建对象
var obj = { a:1,b:2 };
注意:对象字面量是一个表达式,这种表达式每次运算都会创建并初始化一个新对象,并计算这个新对象的每个属性值。所以如果在循环体内使用对象字面量,每次循环时都会创建新对象。
2.通过new运算符创建对象
var obj = new Object(); //创建空对象 var ary = new Array(); //创建空的数组对象
注意:new运算符后面跟的是一个函数调用,这个函数被称为构造函数。js中原始类型都包含内置的构造函数,也可以自己定义构造函数。
3.通过立即执行函数创建对象
var obj = (function(){ return {x:1,y:2};}());
注意:在立即执行函数内部一定要有return语句,return出的内容就是待创建的对象。
4.通过Object.create()创建对象
var obj = Object.create({x:1,y:2});
注意:Object.create()是一个静态函数,传入原型对象就可以创建继承此原型对象的对象,例如上面的例子中obj对象继承了x,y属性。
12、new Person()时发生了什么?
构造函数模式执行 通过一个new 把Person 当做一个类 执行 并且返回这个类的实例 就是返回“Object” (构造函数模式:创建一个自定义类 并且创建这个类的实例(封装组件)
13、什么是深拷贝和浅拷贝?
1.浅拷贝:复制一份引用,所有引用对象都指向一份数据,并且都可以修改这份数据。
2.深拷贝(复杂):复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。
深拷贝: 复制对象所引用的全部对象。
浅拷贝: 仅仅复制对象的引用,而不是对象本身。
14、手工模拟完整的bind方法
15、什么是节流和防抖?
函数节流:是确保函数特定的时间内至多执行一次。
函数防抖:是函数在特定的时间内不被再调用后执行。
应用场景:
函数节流(throttle)
频繁的mousemove/keydown,比如高频的鼠标移动,游戏射击类的
搜索联想(keyup)
进度条(我们可能不需要高频的更新进度)
拖拽的dragover等
高频的点击,抽奖等
函数防抖(debounce)
scroll/resize事件
文本连续输入,ajax验证/关键字搜索
16、console.log(typeof (typeof (typeof (typeof[]))));
出来两个和两个以上的typeof的时候 ,最终结果都是"string"
17、把一个数组随机打乱
18、如何判断一个对象是否属于某个类?
instanceof
19、严格模式和非严格模式的区别
在严格(“use strict”)模式下 (要写在第一行)
严格模式 让js在严格的条件运行js(消除不合理 一些怪异行为 优化编译器运行速度)
● 函数执行前面就算没有点 this指向的不是window 而是 undefined
● 自执行函数中的this也是undefined
● arguments 传的参就算在函数里修改 也不会改变 因为是在严格模式下
严格模式中,对象直接量中定义同名属性会抛出语法错误; 非严格模式不会报错
严格模式中,函数形参存在同名的,抛出错误; 非严格模式不会
严格模式不允许八进制整数直接量(如:023)
严格模式中 eval和arguments当做关键字,它们不能被赋值和用作变量声明
严格模式会限制对调用栈的检测能力,访问arguments.callee.caller会抛出异常
严格模式 变量必须先声明,直接给变量赋值,不会隐式创建全局变量,不能用with,
严格模式中 call apply传入null undefined保持原样不被转换为window
严格模式下, delete运算符后跟随非法标识符(即delete 不存在的标识符),
会抛出语法错误; 非严格模式下,会静默失败并返回false
严格模式中,arguments对象是传入函数内实参列表的静态副本;非严格模式下,
arguments对象里的元素和对应的实参是指向同一个值的引用
20、一个页在从输入url,到页面显示完成,都经历了哪些过程?你有什么优化的技巧吗?
主要分为三个阶段(请求request、响应response、渲染dom render)
[请求阶段]
1、根据输入的URL中的域名到DNS服务器上进行反解析,找到服务的外网IP
2、通过外网IP地址,找到对应的服务器
3、通过输入的端口号(HTTP默认端口80、HTTPS默认端口443、FTP默认端口21)找到服务器上对应的服务及资源文件
[响应阶段]
1、服务器根据请求的内容,找到对应的资源文件,把资源文件中的代码获取到
2、通过传输协议(例如:HTTP或者HTTPS)把获取的原代码返回给客户端浏览器
[DOM渲染]
1、不同的浏览器会调用自己的内核(例如:谷歌webkit、IE的trident、火狐的gecko、欧朋的presto…)把返回的原代码进行渲染,调取电脑中的GPU(显卡),绘制出对应的页面
21、JS运行机制
如何理解JS的单线程
因为JS运行在浏览器中,是单线程的,每个window一个JS线程,既然是单线程的,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码。而浏览器是事件驱动的(Event
driven),浏览器中很多行为是异步(Asynchronized)的,会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列,你可以理解成就是普通函数和回调函数构成的队列。
当异步事件发生时,如mouse click, a timer firing, or an XMLHttpRequest completing(鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等),将他们放入执行队列,等待当前代码执行完成。
22、script标签的defer、async的区别
defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
async是在加载完成后立即执行,如果是多个,执行顺序和加载顺序无关
DOM事件
1、DOM事件流包括哪几个阶段?
包括三个阶段: 捕获阶段 目标阶段 冒泡阶段
2、DOM事件级别有哪些?
DOM0 DOM1 DOM2 不同版本
DOM 0级事件: 在行内 或者直接给元素绑定 都是DOM0级事件
只有冒泡阶段 DOM 2级事件: 需要通过addEventListener / removeEventListener 绑定/移除
它俩是 EventTarget的原型上的方法
不需要加on
3、描述DOM事件捕获和冒泡的具体流程?
事件捕获 先捕获—>再到目标—>再到冒泡
1)捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
2)目标阶段:到达目标事件位置(事发地),触发事件;
3)冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。
4、Event对象的常见应用场景?
事件对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行
5、事件委托是什么?
事件委托:利用事件默认会进行冒泡传播的机制,给最外层容器相关行为(eg:click)绑定事件,当后代元素中的相关行为(click)触发时,会一直触发到最外层容器相关行为(click) 我们根据事件对象中的事件源来判断(当前是哪个元素)并作出相应的处理
6、事件冒泡,e.target和e.currentTarget的区别
事件传播(事件冒泡):
当前元素的相关行为(例如click)触发的时候 ,他的所有上级元素的相关行为(click)也会触发 一直到document
(!行为要统一如果一个是onclick一个是onmouseover 就不会有冒泡)
e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象,也是触发这个事件的对象
7、事件委托的实现原理是什么?有什么优势与缺点?
原理:事件冒泡机制
优势:
(1)可以大量节省内存占用,减少事件注册,比如ul上代理所有li的click事件就很不错,
(2)可以实现当新增(或删去)子对象时无需再次对其绑定(或解绑)事件。尤其是对于动态部分的内容,比如AJAX,不需要对新增的元素进行绑定以及对删除的元素解除绑定
缺点:
(1)事件委托是基于事件冒泡机制来说的,如果不支持事件冒泡则不能进行事件委托
(2)如果层级过多,冒泡过程中,很可能被某层阻断
去重和排序
1、排序方法有哪些?
排序的方法:插入排序 冒泡排序 快速排序
泡排序思想:每一次对比相邻两个数据的大小,小的排在前面,如果前面的数据比后面的大就交换这两个数的位置
快速排序思想:先找到一个基准点(一般指数组的中部),然后数组被该基准点分为两部分,依次与该基准点数据比较,如果比它小,放左边;反之,放右边
2、请使用原生JS语法将以下数组进行去重和排序(不使用sort)
var arr=[5,2,2,1,4]
上图有个地儿写错了 笔记里截图也不方便改
ary[i]=ary[ary.length-1];记得改一下 前面有ary[ary.length-1]
3、数组sort 排序 只能排10以内的
// 从小到大 ary.sort(function (a,b){return a-b})
// 从大到小 ary.sort(function (a,b){return b-a})
4、插入排序思想:每次摸一张,每拿一张的时候,看手里的牌,从右到左依次比较,发现比手里的某一张牌小,放到他的左边
CSS
分别说出你对 em rem px vh 等单位的理解?
- px:绝对单位,页面按精确像素展示
- em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值
- rem:相对单位,可理解为”root em”,
相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持 - vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%
- vh:viewpoint height,视窗高度,1vh等于视窗高度的1%
- vmin:vw和vh中较小的那个
- vmax:vw和vh中较大的那个
2、有哪些隐藏内容的方法
- CSS display的值是none。
- type=”hidden”的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的,该元素是不会在页面上显示。
- CSS visibility的值是hidden。
- CSS opacity的值是0。
3、display和disvisibility:hidden的区别
联系:它们都能让元素不可见
区别:
- display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;
- visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
- display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;
- visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility:
visible;可以让子孙节点显示; - 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容
之前整理过一些面试题 有从网上搜集的、实际面试遇到的、也有自己看视频整理的笔记
希望能帮助到大家 (如文章内容有侵权请联系我删除)