【牛客网-前端笔试题】——Javascript专项练习3

🦸个人主页: 小卢要刷力扣题
🦸‍♂️ 作者简介： 大三学生,准备找工作的人儿
🕍 推荐一款找工作神器网站: 《牛客网》 |笔试题库|面试经验|实习招聘内推|
⛪ 系列专栏： 《前端面试题》
🐋 希望大家多多支持😘一起进步呀！
📝 如果文章对你有帮助的话，欢迎评论💬点赞👍收藏📂加关注

---

前言

秋招正式批已经到来,相信不少小伙伴在为找工作而烦恼,对自己的实力不太自信,感觉好难找工作,不用怕,下面我来给各位推荐一个知名刷题网站《牛客》

一、牛客是做什么的？

牛客网，是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。牛客是领先的数字化招聘求职解决方案服务商，牛客向企业提供校园招聘技术人才招聘一站式解决方案服务，主要包括招聘渠道服务（发校招岗位收简历） ，招聘SaaS工具服务（笔、面试 、群面系统 ），招聘传播服务（技术竞赛、广告、线上招聘专场、牛客职播。
牛客网题库中包含几万道题目，主要通过第三方购买和 UGC 的方式获得，牛客网先后尝试了直播和录播课，内容覆盖笔试题解析、面试技巧和机器学习等。

在里面可以与大家交流最近的面试心得,
如果不知道怎么面试的或者面试技巧掌握得不够牢固的小伙伴可以在牛客里面找面经来看,快速提升自己的面试能力,以更快的找到自己心仪的工作

Javascript专项练习

onfocus 获取焦点时 一般在input,select,a 使用
onBlur 元素失去焦点时 一般用于表单输入框
onSubmit 在提交 一般用于form
onKeyDown 键盘按键时触法

then() 方法返回一个 Promise (en-US)。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。
因此选D

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 “switch” 参数，您能够规定只删除或只添加类。

Number()可以用于任何数据类型的转换。转换规则如下：
1.如果是Boolean值，true和false将分别被转换为1或0.
2.如果是null值，返回0；
3.如果是undefined，返回NaN;
4.如果是字符串则遵循以下规则：
a.字符串只把含数字（包含前面带正号或负号的情况），则将其转换为十进制数值，前导零会被忽略。（例如“011”会变成11）；
b.如果字符串中包含有效的浮点格式，则将其转换为相应的浮点数值,前导零会被忽略；
c.如果字符串中包含十六进制格式，则将其转换为相同大小的十进制整数；//number(“01f”)=31
d.如果字符串是空的，则将其转换为0；//number(" ")=0;
e.如果字符串中包含除以上格式之外的字符，则将其转换为NaN.//number(“helloworld”)=NaN
5.如果是数值，不用说当然是传啥返啥；
6.如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，然后再次按照前面的规则转换返回的字符串值。

首先明确UI渲染是宏任务，而按照事件循环的模型，先执行的是整体的主干代码，这期间style频繁变化但是还没有被渲染所以不会有颜色的变化，同时因为有个微任务也就是promise回调函数，最终改变了style为black，之后才执行的UI渲染，也就是最后被改变的颜色了。

/ * ：出现零到多次
+： 出现一到多次
？：出现零次或者一次
. : 除了\n以外的任意字符
{n} : 出现n次
{n,} : 出现n到多次
{n,m} : 出现n到m次

普通函数，this永远指向它的调用者；箭头函数，this指向定义时的上下文
obj.print() ===> obj调用的普通函数，this指向调用者obj这个对象，所以this.a就是obj.a，即为 ‘o’；
obj.print2() ===> obj调用的箭头函数，this指向上下文，即全局作用下的window，所以this.a就是window.a，即为 ‘w’；
let p = obj.print; p() ===> p是在全局作用域下的，p指向了print(){}函数的地址，执行时是在全局作用域下调用的，所以this指向window，this.a就是window.a，即为 ‘w’;
let p2 = obj.print2; p2() ===> 虽然p2是在全局作用域下的，但是p2指向了print2: () => {}箭头函数的地址，所以this指向print2函数定义时的上下文，即window，this.a就是window.a，即为 ‘w’；
所以，最终输出为：‘o’, ‘w’, ‘w’, ‘w’

button1节点绑定了点击事件，当鼠标点击该节点时，就会触发moveBtn事件处理函数，并为moveBtn函数传入button1节点。在该函数内部，先调用cloneNode()复制了button1节点，然后使用parentNode属性获取button1元素节点的父节点，即div元素节点，再通过appendChild()方法为div元素节点在其最后一个子节点，即button2节点末尾处添加button1子节点，最后调用removeChild()方法将当前被点击到的button1节点删除，整个效果相当于点击button1时，将button1移动到button2后面，B选项正确。

splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。

因此选A

需要明确写操作和读操作的不同，关于num变量是一个写操作的过程，所以当发现实例son1本身没有num变量时直接新增num变量且赋值为117，并不会涉及到原型链上，因此不会影响下次实例化num的值。而数组的修改并没有影响到数组的引用，所以可以看成是读操作然后在原型链上修改，与实例本身无关，除非是直接给数组赋值来修改掉其引用，因此会影响到下次实例化数组的值。

因为setTimeout 方法， 指定 固定时间后运行 指定的 function 运行， 只运行一次， setInterval 是按照固定的时间 间隔运行。
这里setTimeOut 第一个参数 是函数名， checkState 传递函数的引用。 checkState（） 表示立即调用这个函数， 第二个参数表示 时间， 单位为ms， 所以 10 s 应该为 10000

Promise.prototype.finally(onFinally)添加一个事件处理回调于当前promise对象，并且在原promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected)。Promise.reject直接就是出错了，后边的finally只是无论前面的promise是否出错都会走的一个新的promise，相当于错误没有处理，那么在控制台上报错了，如果代码改成Promise.reject(123).catch((a)=>{console.log(a)})，或者在finally后面再加一个catch对错误进行手动处理，控制台就不会报错了

在(x = x) => x中的三个x都是指向相同的变量，并且当函数在尝试给x赋值时会访问第2个x，如果是f（）则此时由于变量x是未赋值的，因此它就如同let变量一样不可访问，从而触发异常，相反的就可以拿到这个值了。

A. className 属性设置或返回元素的 class 属性。获取属性值：HTMLElementObject.className；设置属性值：HTMLElementObject.className=classname
B. tagName 属性返回元素的标签名。HTML 返回 tagName 属性的值是大写的。element.tagName
C. innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。HTMLElementObject.innerHTML=text
D. id 属性设置或者返回元素的 id。HTMLElementObject.id=id

javascript在做判断的时候会将数值转换为布尔型，但输出的结果是最后一次判断且未转换为布尔型的数值。
ECMAScript 中的 && 运算是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数
如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true
true && 1 ==> 1
1 && true ==> true
如果两个运算数是 null undefined NaN 以外的数据类型，则返回第二个对象
4 >= 6 || 1 && true || false ==> true
将题目中的 true 和 1 换下位置，在控制台执行的结果为 true

++x是前置自增，也就是先自增加1，再将x返回，所以switch表达式的值为1，匹配第二个case语句，同样对x进行前置自增，x的值变为2，由于没有使用break语句，在成功匹配后，会继续往下执行后面的case语句，也就是继续执行第三个case语句，最终x值为3，C选项正确。

最开始执行匿名函数，定义了a, b，然后执行了匿名函数，这时候由于还未赋值，所以a 和 b都是undefined，接着var a = b = 3， 等价于var a ，b = 3，a = b，这里的a是局部变量，b是全局变量，所以alert值为 3 ，3 ，接着执行完匿名函数，alert(a)，这里的a是全局变量，还是undefined，而b在匿名中已经赋值3，所以是3。 最后输出 undefined undefined 3 3 undefined 3

forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
ES6 中都会将空位当做undefined

AB比较简单，变量的赋值，正确
C：Symbol的用法
Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
D. Object.assign()方法：
Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）

const target = { a: 1 };
 
const source1 = { b: 2 };
const source2 = { c: 3 };
 
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
1
2
3
4
5
6
7

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

E. Generator函数
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
 
var hw = helloWorldGenerator();
1
2
3
4
5
6
7

A：返回一个对象。
B：返回相同的字符串。
C:比较时首先将两边值转化为同一类型，0 == 0 true。
D:[]可以转化为‘’，0，true。但在一元运算中首先转换为number型，！0true；
E:同上