字节2017前端笔试题学习笔记

最新推荐文章于 2024-05-14 05:03:31 发布

巴卫939

最新推荐文章于 2024-05-14 05:03:31 发布

阅读量576

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/bawei939/article/details/119838261

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

仅供学习

1.变量a是一个64位有符号的整数，初始值用16进制表示为：0Xf000000000000000；变量b是一个64位有符号的整数，初始值用16进制表示为：0x7FFFFFFFFFFFFFFF。则a-b的结果用10进制表示为多少？（）

答案：2^62 + 2^61 + 2^60+1

解析：

负数，原码转补码：取反加1。
如果补码的符号位为“0”，表示是一个正数，所以补码就是该数的原码。
如果补码的符号位为“1”，表示是一个负数，求原码的操作可以是：符号位为1，其余各位取反，然后再整个数加1。
0Xf000000000000000补码为1111000000000000000000000000000000000000000000000000000000000000
0x7FFFFFFFFFFFFFFF补码为0111111111111111111111111111111111111111111111111111111111111111
a-b=a+(-b)=
1111000000000000000000000000000000000000000000000000000000000000+
1000000000000000000000000000000000000000000000000000000000000001=
10111000000000000000000000000000000000000000000000000000000000001(高位溢出舍去)
结果为
0111000000000000000000000000000000000000000000000000000000000001=2^62 + 2^61 + 2^60+1

2.得到的结果分别是什么？（）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

答案：true true false

解析：
Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0
即：
console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]false?true:false); // => console.log(00?true:false);
console.log(({}false)?true:false); // => console.log((NaN0)?true:false);

“==”运算符（两个操作数的类型不相同时）

如果一个值是null，另一个值是undefined，则它们相等
如果一个值是数字，另一个值是字符串，先将字符串转换为数学，然后使用转换后的值进行比较。
如果其中一个值是true，则将其转换为1再进行比较。如果其中的一个值是false，则将其转换为0再进行比较。
如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值，再进行比较。

对象到数字的转换

如果对象具有valueOf()方法，后者返回一个原始值，则JavaScript将这个原始值转换为数字（如果需要的话）并返回一个数字。
否则，如果对象具有toString()方法，后者返回一个原始值，则JavaScript将其转换并返回。（对象的toString()方法返回一个字符串直接量（作者所说的原始值），JavaScript将这个字符串转换为数字类型，并返回这个数字）。
否则，JavaScript抛出一个类型错误异常。

空数组转换为数字0

数组继承了默认的valueOf()方法，这个方法返回一个对象而不是一个原始值，因此，数组到数学的转换则调用toString()方法。空数组转换为空字符串，空字符串转换为数字0.

3.下列哪些是块级元素（）

input
ul
hr
li
div
form

答案：

ul
hr
li
div
form

解析：
input是行内替换元素

4.关于跨域问题下面说法正确的是？（）

A.可以利用flash的http请求，来处理跨域问题
B.通过iframe设置document.domain可以实现跨域
C.一般情况下，m.toutiao.com可以ajax请求www.toutiao.com域名下的接口并获得响应
D.通过jsonp方式可以发出post请求其他域名下的接口

答案：B

解析：

javascript中实现跨域的方式总结

第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中
第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
第五种方式：CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
第六种方式：Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

5.以下符合 ES6 写法的有：（）

Aclass Foo
{
constructor() {return Object.create(null);}
}
Foo()
B.var m=1;
export m;
C.export var firstName=’Michael’;
D.在A模块中export{readFile}后，在B模块中import readFile from ‘A’可以获取到readFile

答案：C

解析：

A:类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
B:export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

// 报错
export 1;
// 报错
var m = 1;
export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

D:A模块对外暴露了一个对象，引入的时候需要使用解构赋值

import {readFile} from ‘A'

6.可继承的样式属性包括（）

color
background-color
font-size
border
margin

答案： color font-size

解析：
一、无继承性的属性

1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility
2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

7.堆的数据结构能够使得堆顶总是维持最大（对于大根堆）或最小（对于小根堆），给定一个数组，对这个数组进行建堆，则平均复杂度是多少？如果只是用堆的 push 操作，则一个大根堆依次输入 3,7,2,4,1,5,8 后，得到的堆的结构示意图是下述图表中的哪个？（）

答案：
在这里插入图片描述
解析：

初始建堆操作复杂度是 O(n)的.
建堆时,由于只采取Push的操作,所以每次将新的数字Push到堆的最后一位,然后按照插入到原则,进行堆的由下至上调整.

8.http 请求方式 get 和 post 的区别包括（）

A.get和post的可传输内容大小不一样，一个有限制一个没有限制
B.get和post传输的内容存放的位置不一样，一个放在header，一个放在body
C.get请求Content-type只能是text/html
D.get请求可以跨域、post请求不能跨

答案：AB

解析：

get的 Content-type不仅可以是 text/html，也可以是其他，如 application/json, text/plain 等等
post一样可以跨域

9.下面哪些属于JavaScript的typeof运算符的可能结果：（）
symbol
int
boolean
null
array
undefined
string

答案：symbol boolean undefined string

解析：
在这里插入图片描述

10.老王有两个孩子，已知至少有一个孩子是在星期二出生的男孩。问：两个孩子都是男孩的概率是多大？

A.13/27
B.7/9
C.1/2
D.1/3

答案：A

解析：

条件概率
男，周二：1/14
男，非周二：6/14
女，周二：1/14
女，非周二：6/17
两个孩子至少一个是周二生的男孩：1/14+1/14-1/14*1/14=27/196
两个孩子都是男孩且至少一个是周二生的：
1/14 * 1/14+1/14 * 6/14+6/14 * 1/14=13/196
条件概率：13/27

11.下列说法正确的有：（）

visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的完全透明；
display:none;不为被隐藏的对象保留其物理空间；
visibility:hidden;与display:none;两者没有本质上的区别；
visibility:hidden;产生reflow和repaint（回流与重绘）；

答案：AB

解析：

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

12.TCP断开连接的四次挥手中，第四次挥手发送的包会包含的标记，最正确的描述是？（）

FIN
FIN,PSH
ACK
FIN,ACK

答案：ACK

解析：

假设由client提出关闭，则：
第一次：FIN（client发给server）
第二次：ACK（server发给client）
第三次：FIN（server发给client ）
第四次：ACK（client发给server）

13.页面有一个按钮button id为button1，通过原生的js如何禁用？（）

A.document.getElementById(“button1”).setAttribute(“Readolny”,true);
B.document.getElementById(“button1”).setAttribute(“disabled”,”true”);
C. document.getElementById(“button1”).Readonly=true;
D.document.getElementById(“button1”).disabled=true;

答案：BD

解析：

readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。

14.关于下列CSS选择器：ID选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是：（）
A. ID选择器>Class选择器>伪类=标签名称选择器
B. ID选择器>伪类>Class选择器>标签名称选择器
C. ID选择器>Class选择器>伪类>标签名称选择器
D. ID选择器>Class选择器=伪类>标签名称选择器

答案：D

解析：

优先级由高到低可分为：

1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器 = 伪类选择器=属性选择器（后面的样式会覆盖前面的样式）
5.标签选择器
6.通配符选择器
7.浏览器自定义的样式

15.假设 a 是一个由线程 1 和线程 2 共享的初始值为 0 的全局变量，则线程 1 和线程 2 同时执行下面的代码，最终 a 的结果不可能是（）

boolean isOdd = false;

for(int i=1;i<=2;++i)
{
if（i%2==1）isOdd = true；
else isOdd = false；
a+=i*(isOdd?1:-1)；
}

A. -1
B. -2
C. 0
D. 1

答案：D

解析：

假设两线程为A、B，设有3种情况：

1.AB不并发：此时相当于两个方法顺序执行。A执行完后a=-1，B使用-1作为a的初值，B执行完后a=-2
2.AB完全并发：此时读写冲突，相当于只有一个线程对a的读写最终生效。相同于方法只执行了一次。此时a=-1
3.AB部分并发：假设A先进行第一次读写，得到a=1;之后A的读写被B覆盖了。B使用用1作为a的初值，B执行完后a=0

16.使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时边框变成红色，需要考虑语义化。
在这里插入图片描述
参考答案：
style样式：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      width: 180px;
      height: 180px;
      flex-wrap: wrap;
    }
    .box {
      width: 50px;
      height: 50px;
      border: 5px solid blue;
      background-color:aqua;
      text-align: center;
      line-height: 50px;
      margin-right: -5px;
    }
    .box:hover {
      border: 5px solid red;
      z-index:9999;
    }
  </style>

body结构：

 <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
  </div>

17.给出一个上传文件时不用刷新页面的方案，要求写出关键部分的js代码。

<input type="file"  id="file"/>
<button id="upload">点击上传</button>

const file = document.getElementById("file");
const upload = document.getElementById("upload");
upload.onclick=function(){
const xhr= new XMLHttpRequest();
xhr.open("POST", "url地址");
xhr.send(file.value);
xhr.onreadystatechange = funcation () {
    if(xhr.readyState === 4){
    	if(xhr.status === 200){
        let response = xhr.responseText;
        }
    }
}
}

巴卫939

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
字节2017前端笔试题学习笔记

仅供学习1.变量a是一个64位有符号的整数，初始值用16进制表示为：0Xf000000000000000；变量b是一个64位有符号的整数，初始值用16进制表示为：0x7FFFFFFFFFFFFFFF。则a-b的结果用10进制表示为多少？（）答案：2^62 + 2^61 + 2^60+1解析：负数，原码转补码：取反加1。如果补码的符号位为“0”，表示是一个正数，所以补码就是该数的原码。如果补码的符号位为“1”，表示是一个负数，求原码的操作可以是：符号位为1，其余各位取反，然后再整个数加1。
复制链接

扫一扫