2021-06-06 前端小组考核试题整理

前端测试题

一、选择题

1.下面哪种说法是正确的？（B）

A. jQuery 是 JSON 库
B. jQuery 是 JavaScript 库

2.3+2+“7”=？

答：“57”

※3.写出下列代码的输出结果

console.log([ ]==false); console.log(![ ]==false)

输出结果：true,true
解析：
首先，[ ]是一个空数组，也就是一个Object类型，既然是一个Object，那么作判断条件时就会转换为true
其次要注意！当空数组和布尔值作比较时，会先将两者都转换为Number类型然后比较，比如false就转换为0，而[ ]是空数组，也就转换为0，然后两者比较结果为true
最后导致出现以下结果：

		console.log([]==false);//true
        console.log(![] == false);//true
        console.log(![]);//false
        console.log([]==![]);//true

※※4.写出下列代码的输出结果

let arr = [1,2,3,4];
arr = arr.map(parseInt);
console.log(arr);

输出结果：[1,NaN,NaN,NaN]
解析：
通常使用parseInt时，只需要传递一个参数，但实际上，parseInt可以有两个参数，第二个参数是进制数，可以通过"alert(parseInt.length === 2)"来验证。
map方法在调用callback函数时，会给它传递三个参数：当前正在遍历元素、元素索引、原数组本身。第三个参数parseInt会忽视，但是第二个参数不会，也就是说，parseInt把传过来的索引当成进制数来使用，从而返回了NaN。
如果想要返回目标值，可以这样修改：

function returnInt(e){
    return parseInt(e,10);
}
["1","2","3"].map(returnInt);

※5.通过Javascript使页面前进或者后退的代码是？

前进：

window.history.forward();
//或者
window.history.go(1);

后退：

window.history.back();
//或者
window.history.go(-1);

6.在javascript中，可以使用Date对象的什么方法返回一个月中的每一天？

答：getDate();

7.所有引用类型的_proto_属性值指向它构造函数的什么属性值，体现了Javascript的继承关系。

答：prototype

8.获取焦点的事件和失去焦点的事件分别是什么？

答：获取焦点：onfocus 失去焦点：onblur

9.怎么才能隐藏下面的元素？（C）

<input type="text" id="id_txt" name="txt" value=""/>

A. $(“id_txt”).hide();
B. $(#id_txt).remove();
C. $("#id_txt").hide();
D. $("#id_txt").remove();

10. 在jQuery中被誉为工厂函数的是（C）

A. ready()
B. function()
C. $()
D. next()

二、简答题

1. JS有哪几种数据类型？

Number
String
Boolean
Object
Undefined
Null
PS：还有ES6新增的 Symbol和BigInt类型

基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

2."==" 与 "==="的区别:

"=="相对于 "==="来说只要求比较的值相等即可，
而后者还要求比较的类型也要一致才行

3.深浅拷贝的区别：

首先，深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

4.谈谈this的理解

4.1 普通的this：指向调用这个函数的对象。
例如：
指向window

 
function MyObject(){
    console.log(this);
}
 
MyObject();//window
 
window.MyObject();//window
 
console.log(this);//window

4.2 指向调用的对象
例如：

function MyObject(){
    console.log(this);
}
 
var b = new MyObject();//MyObject
 
console.log(b instanceof MyObject);//true
 
new Myobject();//MyObject

4.3 作为对象方法：指向调用对象的父级

function f1(){
    this.pro1 = '1';
    console.log(this.pro1);
    console.log(this);
}
var a = {};
a.pro = f1();//'1',window
a.proa = f1;
a.proa();//1,object(这里是a)
 
console.log(a.pro1);//1

4.4 apply调用：指向apply()括号里面的对象
PS:apply的功能是改变调用函数的对象

var x = 0;
function f1(){
    console.log(this.x);
}
var y = {};
y.x = 1;
y.pro = f1;
y.pro.apply();//0
y.pro.apply(window);//0，没有参数默认是window
y.pro.apply(y);//1

4.5指向本身

function f2(){
    this.x = 1;
    return this;
}
var a = new f2();
 
console.log(a.x);//1

5.什么是闭包，为什么要用它？

5.1什么是闭包？
闭包其实就是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式就是在一个函数的内部创建另一个函数
5.2为什么要是用闭包？
因为闭包可以读取函数内部的变量，可以让变量的值始终保持在内存中。

6. 解释一下数组方法pop(),push(),unshift(),shift()的作用

push(): 在数组结尾处添加一个新的元素，并且返回新数组的长度
pop()：从数组中删除最后一个元素，并且会返回被删除的元素
unshift()：在开头向数组添加新元素，并“反向位移”旧元素,返回新数组的长度
shift()：删除首个数组元素，并把所有其他元素“位移”到更低的索引，并且会返回被移除的 字符串

7.javascript代码中的"use strict";是什么意思？使用它区别是什么？

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,
使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。

※※※8.js中then()是什么意思？

then()方法是异步执行。
意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到等的问题。

9.jQuery对象和Dom对象是怎样转换的？

使用$()获取dom对象并封装成jquery对象
然后可以通过以下方法转为DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

10. 什么是函数节流？介绍一下应用场景和原理函数节流:

PS：有关函数节流和函数防抖的详细区别和实现，在学习之后再进行整理

函数节流：频繁触发,但只在特定的时间内才执行一次代码
函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作

// 限制500ms执行一次
var type = false;
window.onscroll = function(){
    if(type === true) return;
    type = true;
    setTimeout(()=>{
        console.log("要执行的事");
        type = false;
    },500)
}

11. .new操作符具体干了什么？

在JavaScript中，new操作符用于创建一个给定构造函数的实例对象
new操作符主要做了下面工作：

• 创建一个新的对象obj
• 将对象与构建函数通过原型链连接起来
• 将构建函数中的this绑定到新建的对象obj上
• 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

12.同步和异步的区别？

最基础的异步是setTimeout和setInterval函数,可以简单地理解为：可以改变程序正常执行顺序的操作就可以看成是异步操作，如下代码：

<script type="text/javascript">
        console.log( "1" );
        setTimeout(function() {
            console.log( "2" )
        }, 0 );
        setTimeout(function() {
            console.log( "3" )
        }, 0 );
        setTimeout(function() {
            console.log( "4" )
        }, 0 );
        console.log( "5" );
</script>

输出为：

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

13. map和forEach的区别？

共同点：

1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。
3.匿名函数中的this都是指Window。
4.只能遍历数组。

区别：

forEach()没有返回值，而map有返回值，map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）

14.for…in和for…of的区别？

1. for…in是ES5的标准，该方法遍历的是对象的属性名称(key：键名)。一个Array对象也是一个对象，数组中的每个元素的索引被视为属性名称，所以在使用for…in遍历Array时，拿到的是每个元素索引
   for…of是ES6的标准，该方法遍历的是对象的属性所对应的值(value：键值)。所以它用来遍历数组时得到每个元素的值
   如下代码：

var a = ['A','B','C'];
var s = new Set(['A','B','C']);
var m = new Map([[1:'x'],[2:'y'],[3,'z']]);

//遍历数组
for(var x of a){
alert(x);//输出的是值 A　B　C
}
for(var x in a){
alert(x);//输出的是下标 0 1 2
}

//遍历Set集合
for(var x of s){
alert(x);//输出的是Set集合每个元素的值 A　B　C
}
for(var x in s){
alert(x);// 不起作用，不能使用for...in循环遍历Set集合
}

//遍历Map集合
for(var x of m){
alert(x[0]+"="+x[1]);//既可以拿到键名，也可以拿到键值，输出的是值 A　B　C
}
for(var x in m){
alert(x[0]+"="+x[1]);//for...in循环不能用于遍历Map
}

综上所述，使用for…of来遍历数组，使用for…in来遍历对象

15.解释Javascript中定时器的工作？如果有，也可以说明使用定时器的缺点（写出有关定时器的函数）

setInterval()
clearInterval()
关于这两个函数的详解就不在这再整理了
存在的问题就是：频繁开启定时器的话，定时器会启动多个，并不会自动覆盖，导致出现预期结果之外的错误，所以在开启新的定时器前，应该清除上一个定时器。

16. 如何在点击一个按钮时使用jQuery隐藏一个图片？

其中一种：

 $(function () {
        var $button=$("button")[0];
        $button.onclick=function () {

          var $img =$("#img1");
          $img.css({
            display:"none"
          });

        }
      });

※17.window.onload()函数和jQuery中的document.ready()有什么区别？

1. 执行时机:window.onload必须等待网页中所有内容加载完毕后*(包括图片)*才能执行,而$(document).ready()是网页中所有DOM结构绘制完毕后执行,可能DOM元素关联的东西并没有加载完,在DOM完全就绪时就可以被调用,此时,网页的所有元素对JQuery而言都是可以访问的,但是这并不意味着这些元素关联的文件都已经下载完毕
2. 编写个数: window.onload不能同时编写多个,而$(document).ready()能同时编写多个