多益网络笔试

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_45293422

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量541

点赞数 1

原文链接：https://blog.csdn.net/weixin_45641846/article/details/109880007?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164782685916782246410172%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164782685916782246410172&biz_id=0&ut

版权

1、以下表达式哪一个可以产生0-7之间(含0,7)的随机数？

A Math.ceil(Math.random()*7)  //[1, 7] 
B Math.floor(Math.random()*7)  //[0,6]
C Math.floor(Math.random()*8) //[0,7]
D Math.ceil(Math.random()*8)  //[1,8]
Math.ceil是向上取整， Math.floor是向下取整

生成n到m之间的随机整数（包括n和m):
Math.floor(Math.random()*(m-n+1))+n

n=0，m=7 得到Math.floor(Math.random()*8

2、以下代码输出的内容是：

const shape = {
    radius: 10,
    diameter() {
        return this.radius * 2
    },
    perimeter: () => 2 * Math.PI * this.radius
};
console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NAN

对于箭头函数，this 关键字指向的是它当前周围作用域（简单来说是包含箭头函数的常规函数，如果没有常规函数的话就是全局对象），这个行为和常规函数不同。这意味着当我们调用 perimeter 时，this 不是指向 shape 对象，而是它的周围作用域（在例子中是 window）。

在 window 中没有 radius 这个属性，因此返回 undefined。

3、关于ES6中Symbol说法错误的是

A Symbol是值类型而非引用类型
B Symbol(‘a’) !== Symbol(‘a’)
C Symbol.iterator能够使对象可迭代
D Symbol.hasInstance用于类的非静态方法

Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。

是Symbol的静态属性

symbol 是一种基本数据类型 （primitive data type）。Symbol()函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。

每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。

4、RGBA颜色值中A的含义是：

RGB是一种色彩标准，是由红（R）、绿（G）、蓝（B）的变化以及相互叠加来得到各式各样的颜色。RGBA说白了，就是在RGB的基础上加了一个透明度通道Alpha。

R、G、B三个参数可以为正整数，也可以为百分比。正整数值的取值范围为0～255，百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

参数A为透明度，类似opacity属性，取值范围在0.0~1.0之间，不可为负值。

5、一个没有经过任何css修饰的html文件，1rem等于多少px？

1rem等于html根元素设定的font-size的px值

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

那么后面的CSS里面的rem值则是以这个14来换算。

假如我们在css里面设定下面的css

html{font-size:14px}

例如设定一个div宽度为3rem,高度为2.5rem.
则它换算成px为width:42px.height:35px

同理，假如一个设计稿为宽度42px,高度为35px
则换成rem，则是42/14=3rem，35/14=2.5rem。（14就是html的font-size）

em是相对于父元素

6、input标签的onblur事件会在什么时候触发？

失去焦点时触发

焦点事件

onblur：元素失去焦点
onfocus：元素获得焦点

7、以下代码输出的分别是：

var b;
(function a() {
	let d = '2'
    b();
    b = function() {
        console.log(d);
        let d = 3
    }
})();

报错：b is not a function

var b;
(function a() {
	let d = '2'
    b = function() {
        console.log(d);
        let d = 3
    }
})();
b();

报错：Cannot access ‘d’ before initialization

var a = 3;
function b() {
	console.log(a)
}
function c() {
	var a = 3;
    b();
}
c();

输出：3

8、实现不使用`border`画出`1px`高的线框，并且能够在不同浏览器的标准模式与怪异模式下保持一致

两种办法

<div style="width: 100%;height: 1px;"></div>
<hr size="1">

<div style="height:1px;overflow:hidden;background:red"></div>

9、清除浮动的技巧，以及各自适用的使用场景

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪元素清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
{
  content:"";
  clear:both;
  visibility:hidden;
  height:0     
}

10、读程题

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()

输出结果是 1,2,3,5,4

Promise.then 是异步执行的，而创建Promise实例（ executor ）是同步执行的。
setTimeout 的异步和 Promise.then 的异步看起来 “不太一样” ——至少是不在同一个队列中。

11、`js`引擎执行`0.1+0.2==0.3`返回`false`，为什么？请给出解决办法

造成这个问题主要是因为十进制与二进制在转换中出现精度问题

解决的方法：

利用es6在Number对象上新增的一个极小常量Number.EPSILON，其值等于2的-52次方，即Number.EPSILON === Math.pow(2, -52)，Number.EPSILON是JavaScript能够表示的最小精度，误差如果小于这个值，就可以认为不存在误差了。引入一个这么小的量的目的，是为浮点数计算，设置一个误差范围，如果误差在这个范围内，我们就认为不存在误差。

// 将误差范围限制在2的50次方之内Number.EPSILON * Math.pow(2, 2)
0.000000000000000055511151231257827021181583404541015625 < Number.EPSILON * Math.pow(2, 2) // true

function withinErrorMargin (left, right) {
  return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
}
0.1 + 0.2 === 0.3 // false
withinErrorMargin(0.1 + 0.2, 0.3) // true

12、谈谈你对`css modules`的理解，以及它与`css scoped`的差异

css modules

解决了样式局部作用域和模块依赖

使用方法

引入样式文件 import style from ‘./App.css’
元素上使用
Hello World </ h1>

实现原理

构建工具会将类名style.title进行编译，编译成一个哈希字符串。
同时css文件内也会被进行同样的编译
这样直观类名就变成了一个独一无二的类名了，只对该组件有效

css scoped

为类名添加一个hash标识属性。无法完全避开css权重和类名重复的问题。

缺点

如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。
根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重,引用使用了scoped的组件作为子组件，修改子组件的样式变得很难，可能迫不得已只能用！important
scoped会使标签选择器渲染变慢很多倍，用标签选择器时scoped会严重降低性能，而使用class或id则不会

css module前期进行不麻烦的配置，实现的效果比scoped css更优，推荐使用css module。

13、写出inline和inline-block的差别：

布局方式相同，唯一的区别在inline-block可以设置宽高，inline不可以。

另外：inline设置上下内边距和上下外边距会造成一些mess。

14、写出五大主流浏览器的内核名称

ie(trident),
firefox(gecho)
google chrome(blink)
safari(webkit)
oprea(blinnk)

15、隐藏元素的N种方式

opacity 占据空间，可以响应用户交互，可以有动画。
.hide {
  opacity: 0;
}

visibility 占据空间，但是不响应用户交互，可以有动画。
.hide {
   visibility: hidden;
}

display 不占据空间，不响应交互，没有动画。
display: none

position 不占据空间，响应交互

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

16、jQuery中live,bind,on,delegate的区别

使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上
你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题
使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
新的.on()方法其实就是模拟.bind() ， .live()和.delegate()实现的语法糖，具体取决于你如何调用它
新的方向是使用新的.on()方法。

17、如何去除img元素底部的空白

1.img{vertial-align:middle}

2.div{line-height:0} //div为img的父标签

3.img{float:left}

4.img{font-size:0} //会造成图文混乱

5.img{display:block}

18、写出promise构造函数

var promise=new Promise(
    function (resolve,reject) {
    if("异步处理成功"){
        resolve ();
    }else{
        reject();
    }

});
promise.then(
    function A () {
        console.log("事件处理成功时的操作")

    },
    function B() {
        console.log("事件处理失败时的操作")
    }
)

19、如何阻止冒泡事件和默认事件

（1）阻止冒泡事件

function stopBubble(e) { 
	if(e && e.stopPropagation){
		e.stopPropagation();
	} else {
		window.event.cancelBubble = true;
	}
};

（2）阻止默认事件

function stopDefault(e){ 
	if(e && e.preventDefault) {
		e.preventDefault();
	} else {
		window.event.returnValue = false;
	}
	return false;
};

20、写出手机号的正则表达式

^1[3|4|5|7|8]\d{9}$

^开始符号首位为1 第2位为3或4或5或7或8 后面9位为任意数字 $结束符号

\d: 0-9
{n} : 恰巧出现n次
[] : 集合【如：[abc] 表示匹配 a或b或c】

21、css的继承属性

字体系列：font、font-size、font-weight

文本系列：text-align、line-height、color、text-transform、cursor、visibility、list-style

22、css制作动画效果的3个属性

transition、transform、animation

23、HTTP协议请求方式

get、post、put、head、connect、trace、options、delete

24、图像格式： .jpg .png .svg .gif 图像有啥区别

JPEG

JPEG格式：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!
注： jpg是jpeg的简称。

GIF

GIF格式：最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。但是其色域不太广,只支持256种颜色。

PNG

PNG格式：与JPG格式类似,网页中有很多图片都是这种格式，压缩比高于GIF，支持图像透明，可以利用Alpha通道调节图像的透明度,是网页三剑客之一Fireworks的源文件。

BMP

BMP格式:Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大。在很多软件中被广泛应用。

SVG

SVG格式：它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

25、写出几个网站优化的方法

合并js和css文件

Sprites图片技术（图片精灵技术）

压缩图片和文本

按需加载（及可见区域以外的区域延时加载）

确保功能图片优先加载

图片格式优化

使用 Progressive JPEGs（高级JPEG）

代码的精简

延迟加载和执行非必要代码

借助自动化工具来实现页面的优化

26、form表单常用属性

action：url 地址，服务器接收表单数据的地址

method：提交服务器的http方法，一般为post和get

name：最好好吃name属性的唯一性

enctype: 表单数据提交时使用的编码类型，默认使用``"pplication/x-www-form-urlencoded"``，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用``"multipart/form-data"``，类型，才能完成传递文件数据。

enctype为form表单数据的编码格式，Content-type为Http传输的数据的编码格式。分清两者

27、计算机网络中五层协议分别是什么，HTTP属于哪一层？

计算机网络中五层协议分别是（从下向上）：1) 物理层 2）数据链路层 3）网络层 4）传输层 5）

应用层七层：物理层->数据链路层->网络层->传输层->会话层->表示层->应用层

其功能分别是：

1）物理层主要负责在物理线路上传输原始的二进制数据；

2）数据链路层主要负责在通信的实体间建立数据链路连接；

3）网络层主要负责创建逻辑链路，以及实现数据包的分片和重组，实现拥塞控制、网络互连等功能；

4）传输曾负责向用户提供端到端的通信服务，实现流量控制以及差错控制。（TCP、UDP）

5）会话层：定义了何时开始、控制和结束一个回话，包括对多个双向消息的控制和管理，以便在只完成连续消息的一部分时可以通知应用，从而使得表示层看到的数据是连续的，某些情况下，如果表示层收到了所有的数据，则用数据代表表示层。

6）表示层：主要功能是定义数据格式以及加密，

7）应用层为应用程序提供了网络服务。一般来说，物理层和数据链路层是由计算机硬件（如网卡）实现的，网络层和传输层由操作系统软件实现，而应用层由应用程序或用户创建实现。

28、传输层有哪些协议?TCP协议与UDP协议的区别

传输层（Transport Layer）是OSI中最重要, 最关键的一层,是唯一负责总体的数据传输和数据控制的一层.传输层提供端到端的交换数据的机制，检查分组编号与次序。传输层对其上三层如会话层等，提供可靠的传输服务,对网络层提供可靠的目的地站点信息.主要功能：为端到端连接提供传输服务.

这种传输服务分为可靠和不可靠的,其中TCP是典型的可靠传输,而UDP则是不可靠传输.

为端到端连接提供流量控制,差错控制,服务质量(Quality of Service,QoS)等管理服务. 具有传输层功能的协议： TCP UDP SPX NetBIOS NetBEUI

29、DNS

DNS（Domain Name System，域名系统），万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。DNS协议运行在UDP协议之上，使用端口号53。

30、事件响应问题事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

31、你听过 ES6规范吗，列举一些你所知道的差别

1、let，const

let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域

2、import、export

import导入模块、export导出模块

3、class、extends、super

ES5中最令人头疼的的几个部分：原型、构造函数，继承，有了ES6我们不再烦恼！

ES6引入了Class（类）这个概念。

4、arrow functions （箭头函数）

函数的快捷写法。不需要 function 关键字来创建函数，省略 return 关键字，继承当前上下文的 this 关键字

5、template string （模板字符串）

解决了 ES5 在字符串功能上的痛点。

6、destructuring （解构）

简化数组和对象中信息的提取。

ES6前，我们一个一个获取对象信息；

ES6后，解构能让我们从对象或者数组里取出数据存为变量

7、default 函数默认参数

8、Spread Operator （展开运算符）

9、对象

10、Promise

用同步的方式去写异步代码

11、Generators

生成器（ generator）是能返回一个迭代器的函数。

32、排序算法有哪些？并给出时间复杂度

33、 jQuery中live,bind,on,delegate的区别

bind

该.bind()方法将事件类型和事件处理程序直接注册到所讨论的 DOM 元素。这种方法存在时间最长，在当时它是围绕存在的各种跨浏览器问题的一个很好的抽象。这种方法在连接事件处理程序时仍然非常方便，但存在如下所列的各种性能问题。

该.bind()方法会将事件处理程序附加到所有匹配的锚点！这是不好的。隐式迭代所有这些项目以附加事件处理程序不仅成本高昂，而且由于它一遍又一遍地使用相同的事件处理程序，这也是一种浪费。

优点

此方法适用于各种浏览器实现。
连接事件处理程序非常简单快捷。
速记方法（.click()、等…）使连接事件处理程序变得更加容易。 .hover()
对于一个简单的 ID 选择器，.bind()不仅使用快速连接，而且在事件触发时几乎立即调用事件处理程序。

缺点

该方法将相同的事件处理程序附加到选择中的每个匹配元素。
它不适用于与同一选择器匹配的动态添加的元素。
处理大量选择时存在性能问题。
附件是预先完成的，这可能会在页面加载时出现性能问题。

live

该.live()方法使用事件委托的概念来执行其所谓的“魔术”。你调用的方式.live()和你可能调用的方式一样.bind()，非常方便。然而，在幕后，这种方法的工作方式大不相同。该.live方法将事件处理程序连同相关的选择器和事件信息一起附加到根级文档。通过在文档上注册此信息，它允许一个事件处理程序用于所有已冒泡（也称为委托、传播）到它的事件。一旦事件冒泡到文档中，jQuery 会查看选择器/事件元数据以确定它应该调用哪个处理程序（如果有）。这种额外的工作对用户交互时的性能有一些影响，但初始注册过程相当快。

与上面的示例相比，这段代码的好处.bind()是它只将事件处理程序附加到文档一次而不是多次。这不仅速度更快，而且浪费更少，但是，使用这种方法存在许多问题，下面将对其进行概述。

优点

仅注册了一个事件处理程序，而不是可能已使用该方法注册的众多事件处理程序。 .bind()
.bind()从to的升级路径.live() 非常小。您所要做的就是将“绑定”替换为“活”。
动态添加到与选择器匹配的 DOM 的元素会神奇地工作，因为真实信息已注册在文档上。
您可以在文档就绪事件之前连接事件处理程序，帮助您利用可能未使用的时间。

缺点

从 jQuery 1.7 开始，该方法已被弃用，您应该开始逐步淘汰其在代码中的使用。
使用此方法不正确支持链接。
所做的选择基本上被丢弃，因为它仅用于在文档上注册事件处理程序。
使用 event.stopPropagation() 不再有用，因为事件已经一直委托给文档。
由于一旦事件确实发生，所有选择器/事件信息都会附加到文档中，因此 jQuery 已通过其大型元数据存储匹配，使用该matchesSelector方法确定要调用哪个事件处理程序（如果有）。
您的事件始终委托给文档。如果您的 DOM 很深，这可能会影响性能。

delegate

该.delegate()方法的行为方式与该方法类似.live()，但您可以选择锚定位置，而不是将选择器/事件信息附加到文档。就像该.live()方法一样，该技术使用事件委托来正常工作。

该.delegate()方法非常强大。上面的代码会将事件处理程序与选择器/事件信息一起附加到无序列表（“#members”）。.live()这比总是将信息附加到文档的方法要有效得多。.delegate()此外，引入该方法还解决了许多其他问题。有关详细列表，请参阅以下大纲。

优点

您可以选择附加选择器/事件信息的位置。
选择实际上并未预先执行，而仅用于注册到根元素。
正确支持链接。
jQuery 仍然需要遍历选择器/事件数据来确定匹配，但是由于您可以选择根在哪里，因此要排序的数据量可以小得多。
由于此技术使用事件委托，因此它可以将动态添加的元素添加到选择器匹配的 DOM 中。
只要您对文档进行委派，您还可以在文档就绪事件之前连接事件处理程序。

缺点

从 a 更改.bind()为.delegate() 方法并不那么简单。
jQuery 仍然需要考虑使用该matchesSelector方法，根据存储在根元素中的选择器/事件信息来确定调用哪个事件处理程序。.live() 但是，与使用该方法相比，存储在根元素中的元数据应该小得多。

on

您是否知道 jQuery .bind()、.live()和.delegate()方法只是新的 jQuery 1.7.on()方法的一行代码？.unbind()、.die()和.undelegate()方法也是如此。

您可以将该.on()方法视为具有不同签名的“重载”，这反过来会改变事件绑定的连接方式。该.on方法为 API 带来了很多一致性，并有望使事情变得不那么混乱。

优点

为各种事件绑定方法带来统一性。
简化了 jQuery 代码库并删除了一层重定向，因为.bind(),.live()和.delegate()在后台调用此方法。
仍然提供该方法的所有优点.delegate() ，同时在需要时仍为该方法提供支持.bind() 。

缺点

带来混乱，因为行为会根据您调用方法的方式而改变。

34、js常用方法

"string".length                           返回字符串长度
"  string ".trim()                           移除字符串的空白
"  string ".trimLeft()                     移除字符串左侧的空白
"  string ".trimRight)                    移除字符串右侧的空白
"string".charAt(n)                        返回字符串中的第n个字符
"string".concat(string2, string3, ...)               拼接
"string".indexOf(substring,start)         子序列起始位置
"string".lastIndexOf(substring,start)     子序列终止位置
"string".substring(from, to)              根据索引获取子序列
"string".slice(start, end)                切片
"string".toLowerCase()                    将字符串转为大写
"string".toUpperCase()                    将字符串抓为小写
"string".split(delimiter, limit)          以特定字符分割字符串

obj.length          数组的大小
obj.push(ele)       尾部追加元素
obj.pop()           从尾部弹出元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素

// 可用此句完成对数组的插入，删除，替换操作
obj.splice(start, deleteCount, value, ...)  从start位置开始，删除deleteCount个元素，插入value,...

obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

document.getElementById()通过id获取元素
document.getElementsByTagName()通过标签名获取元素
document.getElementsByClassName()通过class获取元素
document.getElementsByName()通过name获取元素
document.querySelector()通过选择器获取元素，只获取第1个
document.querySelectorAll()通过选择器获取元素，获取所有document.createElement()创建元素节点document.createTextNode()创建文本节点
document.write()输出内容
document.writeln()输出内容并换行
setTimeout(alertMes, 2000)开启“一次性”定时器
clearTimeout()关闭“一次性”定时器
setInterval()开启“重复性”定时器
clearInterval()关闭“重复性”定时器

obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,…) 连接数组
obj.sort( ) 对数组元素进行排序


```javascript
document.getElementById()通过id获取元素
document.getElementsByTagName()通过标签名获取元素
document.getElementsByClassName()通过class获取元素
document.getElementsByName()通过name获取元素
document.querySelector()通过选择器获取元素，只获取第1个
document.querySelectorAll()通过选择器获取元素，获取所有document.createElement()创建元素节点document.createTextNode()创建文本节点
document.write()输出内容
document.writeln()输出内容并换行
setTimeout(alertMes, 2000)开启“一次性”定时器
clearTimeout()关闭“一次性”定时器
setInterval()开启“重复性”定时器
clearInterval()关闭“重复性”定时器