前端面试之JavaScript(总结)

简介: 前端面试之JavaScript(总结)

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);

目录
相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
151 0
|
前端开发 JavaScript
26个精选的JavaScript面试问题
面试官和面试者了解一下
1218 0
下一篇
DataWorks