前端面试之JavaScript(总结)

2018-06-15 admin

1. JS基本的数据类型和引用类型

  • 基本数据类型:number、string、null、undefined、boolean、symbol – 栈
  • 引用数据类型:object、array、function – 堆
  • 两种数据类型存储位置不同
  • 原始数据类型是直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据;
  • 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;
  • 引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。
  • 当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

2.介绍JS的内置对象

  • 数据封装类对象:Object、String、Number、Boolean、Array
  • 其他对象:Function、Data、Math、Arguments、RegExp、Error
  • ES6新增对象:Promise、Proxy、Map、Set、Symbol、Reflect

3.说几条JavaScript的基本规范

  • 变量和函数在使用前声明
  • 语句结束后添加分号
  • 代码段使用{}包裹
  • 以大写字母开头定义构造函数,以全大写定义常量
  • 用{} 和 []声明对象和数组
  • 使用===和!==来比较true和false或者数字值

4.eval是做什么的

  • 他的功能是把对应的字符串解析成JS代码并运行;
  • 他不安全,而且非常耗能(执行两次,一次解析成JS代码,一次执行)

5.对闭包的理解

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数里创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用域链,将函数内部的变量和方法传递到外部

闭包的特性:函数内嵌套函数;内部函数可以引用外部的参数和变量;参数和变量不会被垃圾回收机制回收

6.http状态码有哪些

简单版

  100  Continue   继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  200  OK         正常返回信息
  201  Created    请求成功并且服务器创建了新的资源
  202  Accepted   服务器已接受请求,但尚未处理
  301  Moved Permanently  请求的网页已永久移动到新位置。
  302 Found       临时性重定向。
  303 See Other   临时性重定向,且总是使用 GET 请求新的 URI。
  304  Not Modified 自从上次请求后,请求的网页未修改过。

  400 Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
  401 Unauthorized 请求未授权。
  403 Forbidden   禁止访问。
  404 Not Found   找不到如何与 URI 相匹配的资源。

  500 Internal Server Error  最常见的服务器端错误。
  503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

完整版

  1**(信息类):表示接收到请求并且继续处理
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本

  2**(响应成功):表示动作被成功接收、理解和接受
    200——表明该请求被成功地完成,所请求的资源发送回客户端
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到,但返回信息为空
    205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求

  3**(重定向类):为了完成指定的动作,必须接受进一步处理
    300——请求的资源可在多处得到
    301——本网页被永久性转移到另一个URL
    302——请求的网页被转移到一个新的地址,但客户访问仍继续通过原始URL地址,重定向,新的URL会在response中的Location中返回,浏览器将会使用新的URL发出新的Request。
    303——建议客户访问其他URL或访问方式
    304——自从上次请求后,请求的网页未修改过,服务器返回此响应时,不会返回网页内容,代表上次的文档已经被缓存了,还可以继续使用
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码,现行版本中不再使用
    307——申明请求的资源临时性删除

  4**(客户端错误类):请求包含错误语法或不能正确执行
    400——客户端请求有语法错误,不能被服务器所理解
    401——请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
    402——保留有效ChargeTo头响应
    403——禁止访问,服务器收到请求,但是拒绝提供服务
    404——一个404错误表明可连接服务器,但服务器无法取得所请求的网页,请求资源不存在。eg:输入了错误的URL
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖,请求资源不可访问
    407——类似401,用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态,请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求长。

  5**(服务端错误类):服务器不能正确执行一个正确的请求
    500 - 服务器遇到错误,无法完成请求
    502 - 网关错误
    503:由于超载或停机维护,服务器目前无法使用,一段时间后可能恢复正常

7.描述浏览器渲染的过程,DOM书和渲染树的区别

浏览器渲染过程:

  • 解析HTML构建DOM,并行请求css、image、js
  • css文件下载完成,开始构建CSSOM(CSS树)
  • CSSOM构建结束后,和DOM一起生成Render Tree(渲染树)
  • 布局(layout):计算出每个节点在屏幕中的位置
  • 显示:通过显卡把页面画到屏幕上

DOM树和渲染树的区别

  • DOM树与HTML标签一一对应,包括head和隐藏元素
  • 渲染树不包括head和隐藏元素,大段文本的每一个行都是独立节点,每一个独立节点都有对应的css属性

8.如何最小化重绘(repaint)和回流(reflow)

  • 需要创建多个DOM节点时,使用DocumentFragment创建完成后一次性的加入document
  • 缓存layout属性值,减少回流次数,如const offsetLeft=element.offsetLeft
  • 尽量避免使用table布局(table元素一旦触发回流就会导致table里所有的其他元素回流)
  • 避免使用css表达式,因为每次调用都会重新计算值(也会重新加载页面)
  • 尽量使用css属性简写
  • 将多次修改元素样式合并成一次操作

9.介绍JavaScript的原型、原型链?有啥特点

原型:

  • JavaScript的所有对象中都包含了一个 proto 内部属性,这个属性所对应的就是该对象的原型
  • JavaScript的函数对象,除了原型 proto 之外,还预置了 prototype 属性
  • 当函数对象作为构造函数创建实例时,该 prototype 属性值将被作为实例对象的原型 proto

原型链:

  • 当一个对象调用的属性/方法自身不存在时,就会去自己 proto 关联的前辈 prototype 对象上去找
  • 如果没找到,就会去该 prototype 原型 proto 关联的前辈 prototype 去找。依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”

原型特点:

  • JavaScript对象是通过引用来传递的,当修改原型时,与之相关的对象也会继承这一改变

10.JavaScript如何实现继承

构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6使用extends继承

class Apple extends Fruit{
    constructor() {
        super()
    }
}

实例继承:将子对象的prototype指向父对象的一个实例

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型继承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象

function extend(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
        c[i] = p[i];
    }
}

11.什么是window对象,什么是Document对象

  • Window 对象表示当前浏览器的窗口,是JavaScript的顶级对象。
  • 我们创建的所有对象、函数、变量都是 Window 对象的成员。
  • Window 对象的方法和属性是在全局范围内有效的。
  • Document 对象是 HTML 文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)
  • Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
  • Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

12. 在一个DOM上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次,先执行冒泡还是捕获?

  • 该DOM上的事件如果被触发,会执行两次(执行次数等于绑定次数)
  • 如果该DOM是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获
  • 如果该DOM是处于事件流中的非目标元素,则先执行捕获,后执行冒泡

13. 事件的代理/委托

  • 事件委托是指将事件绑定目标元素的到父元素上,利用冒泡机制触发该事件

优点:

  • 可以减少事件注册,节省大量内存占用
  • 可以将事件应用于动态添加的子元素上

缺点:

14. 编写一个方法 求一个字符串的字节长度

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

15. 列举一下JavaScript数组和对象有哪些原生方法?

数组:

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

对象:

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);

原文链接:https://segmentfault.com/a/1190000015294769

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34089.html

文章标题:前端面试之JavaScript(总结)

相关文章
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
回到顶部