js、jQuery面试题整理
1.数据类型
基本类型:除Object、String、Number、boolean、null、undefined。
引用类型:object。里面包含的 function、Array、Date。
2.数组方法
join():数组转为字符串,可带中间符号
push():数组尾部添加内容,返回新长度
pop():数组尾部删除一条内容,返回长度
unshift():数组头部添加内容,返回新长度
shift():数组头部删除一条内容,返回删除内容
sort():数组内容从大到小排序
reverse():反转数组内容项
concat():拼接数组,若无内容复制数组内容
slice():截取数组,从指定下标开始
splice():删除、插入、替换;
删除:2 个参数:要删除的第一项的位置和要删除的项数。
插入:3 个参数:起始位置、 0(要删除的项数)和要插入的项。
替换:3 个参数:起始位置、要删除的项数和要插入的任意数量的项。
3.字符串方法
charAt():根据下标找到对应值
charCodeAt():通过下标值找到对应字符Unicode编码
indexOf():通过字符查找对应下标(首次出现)
lastIndexOf():通过字符找最后一次出现的下标值
slice():截取字符串,2个参数,(起始位置,结束位置)
split():把字符串按分隔符分割成数组
substring():截取字符串,(起始位置,结束位置)
substr():截取指定位置和长度的字符串,(起始位置,长度)
toLowerCase():字符串转为小写
toUpperCase():字符串转成大写
trim():去掉字符串前后所有空格
4.阻止冒泡,阻止默认事件
阻止冒泡:
1 2 3 |
|
阻止默认事件:
1 2 3 |
|
5.函数作用域
函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,可以在整个函数的范围内使用及复用.
全局变量:声明在函数外部的变量,在代码中任何地方都能访问到的对象拥有全局作用域(所有没有var直接赋值的变量都属于全局变量)
局部变量:声明在函数内部的变量,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域称为函数作用域。
6.闭包
外部函数访问内部函数,能够读取其他函数内部变量的函数。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
7.原型链
每个对象都有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。
prototype属性,函数的原型对象,它是函数所独有的,它是从一个函数指向一个对象。
__proto__是指向构造函数的原型对象,它是对象独有的。
8.继承的几种方式
构造函数继承:在Child里面,把Parent的this指向改为是Child的this指向,从而实现继承
缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承原型链继承:把Child的原型改为是Parent的实例,从而实现继承
缺点:因为Child的原型对象都是New Parent,所以实例化出来的对象的属性都是一样的,而且Parent上面的引用类型只要有一个实例对象修改了,其他也会跟着修改.因为他们原型对象都是共用的组合方式继承(组合前两种):
缺点:父类的原型对象调用了两次,没有必要,而且student实例的构造函数是来自于Person还有两种组合式继承优化
9.函数创建的方式
函数声明:
1 |
|
字面量/函数表达式:
1 |
|
构造函数:
1 |
|
10.如何解决异步回调地狱
promise、generator、async/await
promise
1 2 3 4 5 6 7 |
|
generator
1 2 3 4 |
|
async/await
async函数是Generator函数的语法糖。使用 关键字async来表示,在函数内部使用await来表示异步
11.事件委托理解
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件.
原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。
target 事件属性可返回事件的目标节点(触发 该事件的节点)
1 2 3 4 5 6 |
|
12.图片的懒加载和预加载
预加载:常用的是new Image();,设置其src来实现预载,再使用onload方法回调预载完成事件。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
懒加载:主要目的是作为服务器前端的优化,缓解服务器前端压力,一次性请求次数减少或延迟请求。
实现方式:
1.第一种是纯粹的延迟加载,使用setTimeOut、setInterval进行加载延迟.
2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。
13.bind,apply,call的区别
都可以改变函数内部this指向
区别:
callcall传递参数aru1, aru2… 形式
apply传递参数必须数组形式[arg]
bind不会调用函数,可以改变函数内部this指向
主要应用场景:
1、call经常做继承。
2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。
3、bind不会调用函数,可以改变函数内部this指向。
14.js的节流和防抖
防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
节流:当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次。时间戳和定时器
区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行。
15.前端模块化和组件化
模块化:可复用,侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。
组件化:可复用,更多关注的UI部分,页面的每个部件,比如头部,弹出框甚至确认按钮都可以成为一个组件,每个组件有独立的HTML、css、js代码。
16.js单线程怎么执行异步操作
Js作为浏览器脚本语言,它的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。
js怎么异步:浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,执行效率会非常的低,甚至导致页面的假死。
所以,浏览器为这些耗时任务开辟了另外的线程,主要包括http请求线程,浏览器定时触发器,浏览器事件触发线程,这些任务是异步的。这些异步任务完成后通过回调函数让主线程知道。
17.手写promise函数
三种状态:pending(过渡)fulfilled(完成)rejected(失败)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
18.数组去重
1.遍历并两个对比,splice删除重复的第二个
1 2 3 4 5 6 7 8 9 |
|
2.indexOf
1 2 3 4 5 6 7 8 |
|
3.sort
1 2 3 4 5 6 7 8 9 |
|
4.includes (ES6)
1 2 3 4 5 6 7 8 |
|
19.数组排序
冒泡排序:
1 2 3 4 5 6 7 8 |
|
选择排序:(相邻对比)
1 2 3 4 5 6 7 8 |
|
sort():
1 2 3 |
|
20.去除首尾空格
JavaScript 本身并不提供 trim() 方法,不过可以用正则表达式(其中一种)
1 2 3 4 5 6 7 |
|
21.解决跨域方案
jsonp:包含回调函数和数据
1 2 3 4 5 6 7 |
|
window.name + iframe
location.hash+iframe
window.postMessage(HTML5中的XMLHttpRequest Level 2中的API)
通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)
使用跨域资源共享(CORS)来跨域
使用Web sockets来跨域
使用flash URLLoader来跨域
22.手写ajax
ajax的技术核心是 XMLHttpRequest 对象;
ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4 |
|
实例:
1 2 3 4 5 6 7 8 9 10 |
|
23.ES6
简述,具体请参考https://blog.csdn.net/Juliet_xmj/article/details/103940173
字符串扩展
解构表达式
函数优化
函数参数默认值
箭头函数
对象的函数属性简写
箭头函数结合解构表达式
map:接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce:接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:(上一次reduce处理的结果,数组中要处理的下一个元素)
promise
1 2 3 4 5 6 7 8 9 |
|
set:本质与数组类似。不同在于Set中只能保存不同元素,如果元素相同会被忽略。
map:本质是与Object类似的结构。不同在于,Object强制规定key只能是字符串。而 Map结构的key可以是任意对象。
模块化:把代码进行拆分,方便重复利用
对象扩展
数组扩展
24.BOM,DOM
BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”
DOM:是指文档对象模型,通过它,可以范文HTLM文档的所有元素
window对象:是客户端JavaScript最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的应用。
25.jQuery选择器
元素选择器:$("p.intro")选取所有 class=“intro” 的
元素。
属性选择器:$("[href='#']")选取所有带有 href 值等于 “#” 的元素。
css选择器:$("p").css("background-color","red");
26.隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程,给匹配到的所有元素进行循环遍历,执行相应的方法,而不需要我们自己进行循环遍历
1 2 3 4 |
|
感谢大家的阅读,希望大家面试成功。
本文转自:https://blog.csdn.net/Juliet_xmj/article/details/106982585