面试题

# JS面试题大放送

 

1. JS基本类型有哪些?引用类型有哪些?(必会)

    a, 基本:number string boolean null undefined;

    b, 引用:function object Array

 

2. JS在什么情况下会返回undefined?(必会)

    a, 访问声明但未赋值(初始化)的变量

    var  a;

    console.log(a);  //undefined

    b, 访问不存在的属性

    var b = {};

    console.log(b.score);  //undefined

    c, 没有定义return的函数隐式返回

    function add1(){}

    console.log(add1());  //undefined

    d, 函数return没有显式的返回任何内容

    function add2(){

        return;

    }

    console.log(add2());  //undefined

 

3. 列举三种强制类型转换和两种隐式类型转换？（必会）

    a, 强制类型转换

        转化成字符串 toString()  String()

        转换成数字 Number()  parseInt()  parseFloat()

        转换成布尔类型 Boolean()

    b, 隐式类型转换

        拼接字符串 

        例子 var str = "12" + 4;

        - / % === ==

        例子 var aaa = "12" - 4;

 

4. ===和==有什么区别?(必会)

    ===：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。也就是说三个等号既要判断值也要判断类型是否相等

    ==：当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。也就是说两个等号只要值相等就可以

 

5. 如何判断JS的数据类型？（必会）

    typeof 

    var a = null;

    console.log( a === null); //true

 

1.垂直居中在的方法

 

1、定位+外边距 盒子宽高已知，

position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、定位+transform  盒子高宽已知，

 #container{ position:relative;  border:1px solid red;   width:800px;  height:600px; }

 #center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

3、flex 布局

     父级：

         display: flex;

         align-items: center;

         justify-content: center;

 

　　

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证基本的功能，然后 再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。2.你能描述一下渐进增强和优雅降级之间的不同吗

（一开始保证基本的功能，再改进和追加功能）

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）

3.清除浮动的方法

1、直接设置父元素高度，但不是每次都知道父元素的高度。

2、设置父元素也浮动，但不是任何时候父元素都需要浮动，而且浮动会影响后续元素。

3、为父元素设置 overflow属性，但如果有内容需要溢出显示的话，也会一同被隐藏。

4、在父元素中，追加空子元素，并设置其clear:both,但页面中会多出一个空元素。

5、用内容生成的方式:after{content:””;display:block;clear:both;}

　　

4. 谈一下盒模型 

盒模型包括：content,padding,border,margin

盒模型分为：IE盒模型（怪异盒模型）和标准w3c盒模型

IE盒模型宽度包含了padding和border，w3c盒模型宽度就是内容宽度。

5.说一下对HTML语义化的理解

  HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；

使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

6.查看以下程序的运行结果

var a=0;

var foo=()=>{

  console.log(a);

  var a=2;

  console.log(a);

  function boo(a){

    a++;

  }

  boo(a++);

  console.log(a); 

}

foo();

console.log(a);

　　

7.什么是闭包 答案：undefined  2  3   0

模拟私有变量，在函数外部间接访问函数内部的变量

私有变量一直保存在内存中，不被销毁

内部变量不会污染全局命名空间

闭包在处理速度和内存消耗方面对脚本性能具有负面影响

 

let count = (function(){   

let sum = 10   

function change(x){

     return sum += x   

}   

return change

})();

console.log(count(10)) //20

 

8. 编写程序，实现数字中千分位格式化 

例如：1389233    1,389,233

9.rem是什么

 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单 位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

rem适合的场景就是 webapp.  即在手机端上浏览的网页.

利用 JS 根据设备自动更改根元素字体大小, 就可以实现全局的自动适配

10.js常用的数据类型有哪些？列举几个常用的几个

 原始类型：数值、字符串、布尔、未定义、空

 引用类型：对象

11. display:none和visibility:hidden的区别？

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。  

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。  

12. animation 和 transition 的区别?

1.transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2.animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3.animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4.animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5.在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了

13. 常见的浏览器内核有哪些？

IE——trident

chrome——blink

safari——webkit

firfox——gecko

opera——blink

14. link和import的区别？

答案：

(1)从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加 载 CSS 文件，还可以定义 RSS、rel 连接属性等。

(2)加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

(2)DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import的方式插入样式。

15.如何理解JSON

 

JSON是JS对象的一种表现方式，即以js对象的数据格式表现出来的字符串，JSON中的两个api如下：

将JSON字符串转换成JSON对象 JSON.parse()

将JSON对象转换成JSON字符串 JSON.stringify()

 

16. 前端需要注意哪些 SEO

1. 使用title、description、keywords属性及合理的描述

2. 语义化标签让搜索引擎更好的理解文章结构

3. img标签添加alt属性

4. 不使用iframe标签

5. 服务器渲染，页面内容尽量不要使用js输出

6. 页面内容尽可能靠前，搜索引擎抓取有长度限制，保证抓取到内容

17. nodejs中跟时间相关的函数有哪些?

setTimeout/clearTimeout

setInterval/clearInterval

setImmediate/clearImmediate

process.nextTick

 

18. 列举几种常见的3和4开头的状态码以及他们的意义？

答案：

301 ：永久性重定向

302 ：临时重定向

304 ：请求资源未被修改，命中缓存

 

400 (错误请求) 服务器不理解请求的语法。

403 (禁止) 服务器拒绝请求。

404 (未找到) 服务器找不到请求的网页。

 

19. CSS哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

 

答案：

可继承的样式： font-size ,font-family ,color, background等;

不可继承的样式：border, padding ,margin ,width ,height ;

 

 

优先级就近原则，同权重情况下以最近者为准;

 

优先级为: !important > id > class > tag

important 比 内联优先级高

 

CSS3 新增伪类：

:first-child 选择属于其父元素的首个元素。

:last-child 选择属于其父元素的最后一个元素。

:only-child 选择属于其父元素唯一的元素。

:nth-child(n) 选择属于其父元素的任意一个子元素。

:empty 选择没有子元素的元素。

:not(selector) 将满足指定选择器的元素给排除在外

20.为什么要初始化 CSS 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但力求影响最小的情况下初始化。

21. src和href的区别？

（1）href：

    href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。

并行下载该文档，不会停止对当前文档的处理

（2）src：

    src是source的缩写，src指向的内容会嵌入到文档当前标签所在位置

    如img、script、iframe当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。

22. 对语义化如何理解？

用正确的标签做正确的事情！

HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

23. 请简述一下 Ajax 的原理及实现步骤

 

HTTP协议的异步通信

get 请求

1) 创建一个XMLHttpRequest对象

2) 调用该对象的open方法

3) 如果是get请求，设置回调函数onreadystatechange = callback

4) Send

 

如果是post 请求

 

5) 创建一个XMLHttpRequest对象

6) 调用该对象的open方法

7) 调用setRequestHeader("Content-Type","application/x-www-form-urlencoded");

8) 设置回调函数onreadystatechange = callback

9) Send