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

e.stopPropagation

e.cancleBubble=true(IE)

return false；

阻止默认事件：

1

2

3

e.preventDefault();

e.returnValue=false;(IE)

return false;

5.函数作用域

函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用.

全局变量：声明在函数外部的变量，在代码中任何地方都能访问到的对象拥有全局作用域(所有没有var直接赋值的变量都属于全局变量)

局部变量：声明在函数内部的变量，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。

6.闭包

外部函数访问内部函数，能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

7.原型链

每个对象都有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。

  • prototype属性，函数的原型对象，它是函数所独有的，它是从一个函数指向一个对象。

  • __proto__是指向构造函数的原型对象，它是对象独有的。

8.继承的几种方式

  • 构造函数继承：在Child里面,把Parent的this指向改为是Child的this指向,从而实现继承
    缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承

  • 原型链继承：把Child的原型改为是Parent的实例,从而实现继承
    缺点:因为Child的原型对象都是New Parent,所以实例化出来的对象的属性都是一样的,而且Parent上面的引用类型只要有一个实例对象修改了,其他也会跟着修改.因为他们原型对象都是共用的

  • 组合方式继承(组合前两种)：
    缺点:父类的原型对象调用了两次,没有必要,而且student实例的构造函数是来自于Person

  • 还有两种组合式继承优化

9.函数创建的方式

函数声明：

1

function Fn(){}

字面量/函数表达式：

1

var m = function(){}

构造函数：

1

var sum =new Function(“n1”,”n2”,”return n1+n2”)

10.如何解决异步回调地狱

promise、generator、async/await

  • promise

1

2

3

4

5

6

7

let getStuPromise = new Promise((resolve,reject)=>{

    getStu(function(res){

        resolve(res.data);

    });});getStuPromise.then((data)=>{

    // 得到每个学生的课程

    getCourse();

    // 还可以继续返回promise 对象})

  • generator

1

2

3

4

function *generatorGetStu(){

    let stus = yield getStu();

    // 等到getStu异步执行完才会执行getCourse

    let course = yield getCourse();}

  • async/await
    async函数是Generator函数的语法糖。使用 关键字async来表示，在函数内部使用await来表示异步

11.事件委托理解

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件.
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
target 事件属性可返回事件的目标节点(触发 该事件的节点)

1

2

3

4

5

6

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.图片的懒加载和预加载

  • 预加载：常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。

1

2

3

4

5

6

7

8

9

10

11

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指向
区别：

  • 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

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删除重复的第二个

1

2

3

4

5

6

7

8

9

function unique(arr){           

        for(var i=0; i

            for(var j=i+1; j

                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个

                    arr.splice(j,1);

                    j--;

                }

            }

        }return arr;}

2.indexOf

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

9

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)

1

2

3

4

5

6

7

8

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.数组排序

  • 冒泡排序：

1

2

3

4

5

6

7

8

var arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,总共比较次数为arr.length-1次,每次的比较次数为arr.length-1次，依次递减var temp;for(var i=0;i

    for(var j=0;j

        if(arr[j]>arr[j+1]){

            temp=arr[j];

            arr[j]=arr[j+1];

            arr[j+1]=temp;

        }

    }}

  • 选择排序：(相邻对比)

1

2

3

4

5

6

7

8

var arr=[1,23,5,8,11,78,45];var temp;for(var i=0;i

    for(var j=i+1;j

        if(arr[i]>arr[j]){

            temp=arr[i];

            arr[i]=arr[j];

            arr[j]=temp;

        }

    }}

  • sort()：

1

2

3

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() 方法，不过可以用正则表达式(其中一种)

1

2

3

4

5

6

7

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

2

3

4

5

6

7

//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数据}

    $.getJson('http://www.example.com/data/?callback=?',function(jsondata){

    //处理获得的Json数据});

  • 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

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

1

2

3

4

5

6

7

8

9

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元素(伪数组形式存储)的过程，给匹配到的所有元素进行循环遍历，执行相应的方法，而不需要我们自己进行循环遍历

1

2

3

4

    web

    前端//js$("li").html("WEB前端梦之蓝");

    //将所有的li标签html内容全部换成“WEB前端梦之蓝”,这个就属于隐式迭代

感谢大家的阅读，希望大家面试成功。

本文转自：https://blog.csdn.net/Juliet_xmj/article/details/106982585

jQuery 一次定时器_史上最全的js、jQuery面试题相关推荐

  1. JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  2. javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  3. python常用面试题_史上最全Python工程师常见面试题集锦，有这一份就够了

    从互联网诞生以来,基本上所有的程序都属于网络程序,也就需要设计到网络编程,在python中,就是在python程序本身这进程内,链接别的服务器进程的通信端口进行通信.在Python程序员找工作的时候, ...

  4. html权重值_史上最全的web前端面试题汇总及答案HtmlCss（二）

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 HTML&CSS img的alt和title的异同? **alt **是图片加载失败时, ...

  5. java spring框架 注解_史上最全的java spring注解

    史上最全的java spring注解,没有之一 注解是个好东西,但好东西我们也是看见过,整理过,理解过,用过才知道好.不求我们每个都记住,但求保有印象,在需要的时候能提取出来再查找相关资料,平时工作就 ...

  6. @async注解_史上最全的java spring注解

    史上最全的java spring注解,没有之一 注解是个好东西,但好东西我们也是看见过,整理过,理解过,用过才知道好.不求我们每个都记住,但求保有印象,在需要的时候能提取出来再查找相关资料,平时工作就 ...

  7. python 完全面向对象_史上最全的Python面向对象知识点疏理

    原标题:史上最全的Python面向对象知识点疏理 面向对象技术简介 类: 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例.class 类变量:类变 ...

  8. python迭代器与生成器答案_史上最全 Python 迭代器与生成器

    原标题:史上最全 Python 迭代器与生成器 作者:浪子燕青 链接:http://www.langzi.fun/迭代器与生成器.html 迭代器与可迭代对象 概念 迭代器:是访问数据集合内元素的一种 ...

  9. idea mac 替换_史上最全的IntelliJ IDEA For Mac快捷键！快来收藏吧！

    原标题:史上最全的IntelliJ IDEA For Mac快捷键!快来收藏吧! IntelliJ IDEA 2020 for Mac适用于JVM的功能强大且符合人体工程学的IDA! IDEA对新手来 ...

最新文章

  1. easyui js拼接html,class属性失效的问题
  2. centos纯命令行配置java环境
  3. 正式发布python版本的年份_飞书首次举办产品发布会，新版本“”正式发布
  4. 组织配置java项目的外部lib包
  5. RPM 软件包命名规范
  6. 1.6编程基础之一维数组_09向量点积计算
  7. java 找不到或无法加载类_解决Java中找不到或无法加载主类错误
  8. python实现k core算法_python实现密度聚类(模板代码+sklearn代码)
  9. python编程入门视频-2020年5个经典python编程入门视频教程推荐学习
  10. 【图像去噪】基于matlab GUI均值+中值图像去噪【含Matlab源码 1815期】
  11. 【转】在淘宝一年测试工作的感悟
  12. 那根你想顺着去打人的网线是怎么制作的？
  13. 微信小程序云开发如何修改后台手动添加的数据
  14. 医保结余7600亿匮
  15. 失眠可以用什么东西改善一个失眠多年的朋友给我推荐
  16. leetcode No7. Reverse Integer
  17. 黑马程序员————IO流4（day21）
  18. JavaScript实现二代身份证号码转一代身份证号码
  19. 百度石榴算法有什么意义？打击那些网站？怎么避免惩罚？
  20. app美工html css,美工css是什么意思？

热门文章

  1. 备战数学建模六之差值拟合
  2. 1_Grassfire Algorithm_宾夕法尼亚大学机器人运动规划专项课程【学习笔记】
  3. 【智能优化算法】基于凌日算法求解单目标优化问题附matlab代码Transit Search Optimization Algorithm
  4. 微信公众号 网页支付的实现
  5. 使用Fiori BarcodeScannerButton在浏览器上扫描二维码和条形码
  6. 为何要用征信约束员工跳槽？
  7. 微信小程序Canvas绘制证件照底色，小程序Canvas绘图
  8. Mac OS X使用之——新年第一天弘法寺许愿，MacVim小试
  9. Python使用OpenCV拼接图片
  10. SQL SERER系统概述