扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天就跟大家聊聊有关js、jQuery面试题大全，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联成立与2013年，是专业互联网技术服务公司，拥有项目网站设计制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元临邑做网站,已为上家服务,为临邑各地企业和个人服务,联系电话:18980820575
js、jQuery面试题整理
1.数据类型
基本类型：除Object、String、Number、boolean、null、undefined。
引用类型：object。里面包含的 function、Array、Date。
2.数组方法
join()：数组转为字符串，可带中间符号
push()：数组尾部添加内容，返回新长度
pop()：数组尾部删除一条内容，返回长度
unshift()：数组头部添加内容，返回新长度
shift()：数组头部删除一条内容，返回删除内容
sort()：数组内容从大到小排序
reverse()：反转数组内容项
concat()：拼接数组，若无内容复制数组内容
slice()：截取数组，从指定下标开始
splice()：删除、插入、替换；
3.字符串方法
charAt()：根据下标找到对应值
charCodeAt()：通过下标值找到对应字符Unicode编码
indexOf()：通过字符查找对应下标（首次出现）
lastIndexOf()：通过字符找最后一次出现的下标值
slice()：截取字符串，2个参数，（起始位置，结束位置）
split()：把字符串按分隔符分割成数组
substring()：截取字符串，（起始位置，结束位置）
substr()：截取指定位置和长度的字符串，（起始位置，长度）
toLowerCase()：字符串转为小写
toUpperCase()：字符串转成大写
trim()：去掉字符串前后所有空格
4.阻止冒泡，阻止默认事件
阻止冒泡：
e.stopPropagation e.cancleBubble=true（IE） return false；
阻止默认事件：
e.preventDefault(); e.returnValue=false;（IE） return false;
5.函数作用域
函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用.
全局变量：声明在函数外部的变量，在代码中任何地方都能访问到的对象拥有全局作用域（所有没有var直接赋值的变量都属于全局变量）
局部变量：声明在函数内部的变量，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。
6.闭包
外部函数访问内部函数，能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
7.原型链
每个对象都有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。
8.继承的几种方式
9.函数创建的方式
函数声明：
function Fn(){}字面量/函数表达式：
var m = function(){}构造函数：
var sum =new Function(“n1”,”n2”,”return n1+n2”)
10.如何解决异步回调地狱
promise、generator、async/await
let getStuPromise = new Promise((resolve,reject)=>{
getStu(function(res){
resolve(res.data);
});});getStuPromise.then((data)=>{
// 得到每个学生的课程
getCourse();
// 还可以继续返回promise 对象})function *generatorGetStu(){
let stus = yield getStu();
// 等到getStu异步执行完才会执行getCourse
let course = yield getCourse();}11.事件委托理解
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件.
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
target 事件属性可返回事件的目标节点（触发 该事件的节点）
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeeName.toLowerCase() == "li"){
target.style.background = "red";
}}12.图片的懒加载和预加载
function loadImage(url, callback){
var img = new Image(); //创建一个Image对象，实现图片预下载
img.src = url;
if (img.complete){
// 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function (){
//图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来
};}懒加载：主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut、setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
13.bind,apply,call的区别
都可以改变函数内部this指向
区别：
14.js的节流和防抖
15.前端模块化和组件化
16.js单线程怎么执行异步操作
Js作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
js怎么异步：浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，执行效率会非常的低，甚至导致页面的假死。
所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。这些异步任务完成后通过回调函数让主线程知道。
17.手写promise函数
三种状态：pending（过渡）fulfilled（完成）rejected（失败）
function Promise(exector){
let _this = this;
//status表示一种状态
let status = “pending”;
let value = undefined;
let reason = undefined;
//成功
function resolve(value){
if(status == “pending”){
_this.value = value;
_this.status = “resolve”;
}
}
//执行失败
function reject(value){
if(status == “pending”){
_this.value = value;
_this.status = “reject” }
}
//异步操作
try{
exector(resolve,reject)
}catch(e){
reject(e)
}
//测试then
Promise.prototype.then = function(reject,resolve){
let _this = this;
if(this.status == “resolve”){
reject(_this.value)
}
if(this.status == “reject”){
resolve(_this.reason)
}
}}//new Promise测试let promise = new Promise((reject,resolve)=>{
resolve(“return resolve”);});promise.then(data=>{
console.log(`success${data}`);},err=>{
console.log(`err${data}`);})18.数组去重
1.遍历并两个对比，splice删除重复的第二个
function unique(arr){
for(var i=0; i2.indexOf
function unique(arr) {
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;}3.sort
function unique(arr) {
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;}4.includes （ES6）
function unique(arr) {
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array}19.数组排序
- 冒泡排序：
var arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,总共比较次数为arr.length-1次,每次的比较次数为arr.length-1次，依次递减var temp;for(var i=0;iarr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}}
- 选择排序：（相邻对比）
var arr=[1,23,5,8,11,78,45];var temp;for(var i=0;iarr[j]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}}
- sort()：
var arr=[1,5,7,9,16,2,4];arr.sort(function(a,b){
return b-a; //降序排列，return a-b; —>升序排列})
//括号里不写回调函数，则默认按照字母逐位升序排列，结果为[1,16,2,4,5,7,9]20.去除首尾空格
JavaScript 本身并不提供 trim() 方法，不过可以用正则表达式（其中一种）
if(typeof(String.prototype.trim) === "undefined"){
String.prototype.trim = function()
{
return String(this).replace(/^\s+|\s+$/g, '');
};}
if(" dog ".trim() === "dog") {
document.write("去除首尾空格成功"); }21.解决跨域方案
- jsonp：包含回调函数和数据
//1、使用JS动态生成script标签，进行跨域操作function handleResponse(response){
console.log('The responsed data is: '+response.data);
//处理获得的Json数据}var script = document.createElement('script');script.src = 'http://www.example.com/data/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);//2、手动生成script标签function handleResponse(response){
console.log('The responsed data is: '+response.data);
//处理获得的Json数据}//3、使用jQuery进行jsonp操作//jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁//$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。- 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 对象、连接服务器、发送请求、接收响应数据；
（理解）
实例：
ajax({
method : 'het/post',
url : '...',
data : {
},
success : function (res) {
},
error : function(err){
},
async : true});23.ES6
简述，具体请参考https://blog.csdn.net/Juliet_xmj/article/details/103940173
- 字符串扩展
- 解构表达式
- 函数优化
- 函数参数默认值
- 箭头函数
- 对象的函数属性简写
- 箭头函数结合解构表达式
- map：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
- reduce：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：（上一次reduce处理的结果，数组中要处理的下一个元素）
- promise
const promise = new Promise(function(resolve, reject) {
// ... 执行异步操作
if (/* 异步操作成功 */){
resolve(value);// 调用resolve，代表Promise将返回成功的结果
} else {
reject(error);// 调用reject，代表Promise会返回失败结果 }});promise.then(function(value){
// 异步执行成功后的回调}).catch(function(error){
// 异步执行失败后的回调
})- 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元素（伪数组形式存储）的过程，给匹配到的所有元素进行循环遍历，执行相应的方法，而不需要我们自己进行循环遍历
- web
- 前端
//js$("li").html("WEB前端梦之蓝");
//将所有的li标签html内容全部换成“WEB前端梦之蓝”,这个就属于隐式迭代看完上述内容，你们对js、jQuery面试题大全有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网