前端经典面试题目

zhuaaaa3944210

已于 2024-03-29 12:00:46 修改

阅读量2.3k

点赞数 1

分类专栏： js 文章标签：面试题

于 2018-04-03 07:07:13 首次发布

本文链接：https://blog.csdn.net/zhuaaaa3944210/article/details/79797603

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. html5有哪些新特性？

⁃ 绘画 canvas

⁃ 用于媒介回放的 video 和 audio 元素

⁃ 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

⁃ sessionStorage 的数据在浏览器关闭后自动删除

⁃ 语意化更好的内容元素，比如 article、footer、header、nav、section

⁃ 表单控件，calendar（日历）、date、time、email、url、search

2. 请描述一下cookies，sessionStorage 和localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

3. CSS清除浮动的几种方法（至少两种）

⁃ 使用带clear属性的空元素

⁃ 使用CSS的overflow属性；

⁃ 使用CSS的:after伪元素；

eg:#content:after{content:"";display:block;clear:both;}

4. sass里面的函数声明

@function funNanme（）{}

$变量

Less用@来定义变量

5.bootstrap12删格系统的不同终端尺寸

Bootstrap 12栅格系统是指在Bootstrap框架中，页面被分为12列的栅格系统，可以通过将内容放置在不同的列中来实现灵活的布局设计。在不同终端尺寸下，这些列以不同的方式排列和显示，以适配不同设备的屏幕大小。

Bootstrap 12栅格系统主要分为四种终端尺寸：xs（Extra small）、sm（Small）、md（Medium）和lg（Large）。每种尺寸都有对应的预设CSS类，通过在HTML元素上添加这些类来指定在不同尺寸下元素的布局行为。

具体来说，Bootstrap的12栅格系统在不同终端尺寸下的表现如下：

xs尺寸：Extra small屏幕，通常是移动设备上的小屏幕。在xs尺寸下，栅格系统会将每个列的宽度设置为100%。
sm尺寸：Small屏幕，通常是平板设备。在sm尺寸下，栅格系统会将每个列的宽度平均分成12等份。
md尺寸：Medium屏幕，通常是桌面电脑屏幕。在md尺寸下，栅格系统会将每个列的宽度平均分成12等份。
lg尺寸：Large屏幕，通常是大型显示器。在lg尺寸下，栅格系统会将每个列的宽度平均分成12等份。

通过在HTML元素上添加不同的栅格类，可以实现在不同设备上呈现不同的布局。这种响应式设计的方式，使得网页可以在不同终端设备上都能够得到良好的显示效果。

6. 介绍css的盒子模型？

有两种， IE 盒子模型(怪异)、标准 W3C 盒子模型；

IE的content部分包含了 border 和 padding;盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

7. Css3 有哪些新特性？

• CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），

• 对文字加特效（text-shadow、），线性渐变（gradient），

分为linear-gradient（线性渐变）和 radial-gradient（径向渐变）

旋转（transform）

• transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

• 增加了更多的CSS选择器多背景 rgba

• 动画@keyframes名称{}

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用"from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。

• 过度效果 transition

帧动画 animation是个复合属性。检索或设置对象所应用的动画特效。如果提供多组属性值，以逗号进行分隔。

8. ajax中的get和post区别？

1. Get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接；Post 方法通过 HTTP post 机制，将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端

2. Get 方式传输的数据量非常小，一般限制在 2 KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大

3. 安全问题：get没有post安全

9.谈谈This对象的理解。

1. this在构造函数中指的是构造函数实例化得到对象的原型

2. this在对象的方法中指的是当前对象

10. 面向对象继承的几种方法？

1.call

2.apply

3.原型继承

4.原型链继承

11、AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）

12.ajax 四部曲及返回数据处理方式？

1.创建

(1).得到XMLHttpRequest对象 AJAX对象

newXMLHttpRequest( )；

newActiveXObject("Microsoft.XMLHTTP" ) ie6

2.请求

get方式

xhr.open("get","login.php?aa=1&bb=2&cc=3",true/false)配置第三参数是否异步

get请求会把要提交的信息（aa=1&bb=2&cc=3"）添加到地

址栏的后面速度快配置简单不安全

post方式

xhr.open("post","login.php",true/false)配置

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//将我们的请求添加到头部报文中

post请求安全性比较高配置复杂一些传递一些数据量比较大的数据

3. 发送

xhr.send()发送请求

xhr.send("aa=1&bb=2&cc=3")

4.响应

通过一个函数xhr.onreadstatechange来处理对象的执行结果

xhr.readyState

4 响应已经完成

xhr.status 判断状态码（判断页面返回的数据是否成功）数据报文

200 表示成功

304 数据未做修改使用缓存数据

404 页面未找到 403 服务器禁止访问

500 未知错误

1.json.parse()/json.stringify()/eval()

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码

2.responseText(）

3.responseXml()

13种常见的 http状态码以及代表的意义如下：

1.200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。

2. 303（ See Other）：告知客户端使用另一个 URL来获取资源。

3 .400（ BadRequest）：请求格式错误。1)语义有误，当前请求无法被服务器

理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。

4. 404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。

5. 500（ InternalServer Error）：服务器遇到了一个未曾预料的状况，导致了它

无法完成对请求的处理。

14.简述 AJAX的交互模型，以及同步和异步的区别

同步：脚本会停留并等待服务器发送回复然后继续。

异步：脚本不停留并处理可能的回复。

15.axios是什么？

请求后台资源的模块

和ajax有相同的用法，用于数据的交互

Axios.post().then()

Axios.get().then()

16、说出至少4种vue当中的指令和它的用法？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

17、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

18、请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

19.vue如何实现父子组件通信？

props.

20.node.js创建服务？

引入模块require(“http”)

const http=require(“http”);

http.createServer((req,res)=>{})).listen(“8080”,(req,res)=>{})

16.对于传入的值怎么判定是不是一个数组？

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出 true

let obj = { key: 'value' };
console.log(Array.isArray(obj)); // 输出 false

在JavaScript中，可以使用Array.isArray()方法来判断一个值是否为数组。这个方法接受一个参数，如果这个参数是一个数组，则返回true，否则返回false

17.对于跨域，你是怎么理解的，解决的方案有哪些？

JSONP是什么？
       JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
       由于同源策略，一般来说位于www.baidu.com的网页无法与www.google.com的服务器沟通，而HTML的script元素是一个例外。利用<script type="text/javascript">
       元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的JSONP。
       JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
       JSONP的组成部分
       JSONP由三部分组成：script标签对，回调函数和数据
       script标签对：对指定URL+参数（callback）进行访问
       回调函数：当响应到来时应该再页面中调用的函数
       数据：就是传入回调函数中的JSON数据。

<!-- $.ajax({
		            type: "get",
		            url: "/jsonp/tender/idCard.json",
		            dataType: "jsonp",
		            jsonp: "callback",
		            data: "userid=" + checked_realname_id + "&flag=" + flag + "&callback=?",
		            success: function (json) {
		
		            }
		        }) -->

18.es6有哪些新的特点，举例说明并说明它的优点，例如箭头函数？

ES6是ECMAScript 2015的简称，是JavaScript的一个重大更新版本，引入了许多新特性。以下是一些ES6的新特性，以箭头函数为例说明其优点：

Arrow Functions（箭头函数）：箭头函数是ES6中引入的一种新的函数声明语法，使用=>符号来定义函数。箭头函数有以下特点：
// ES5写法
function multiply(a, b) {
  return a * b;
}

// ES6箭头函数写法
const multiply = (a, b) => a * b;

console.log(multiply(3, 4)); // 输出 12
优点：

箭头函数具有更简洁的语法，可以简化函数的定义。特别是对于单行函数体，可以省略大括号和return关键字。
箭头函数内部的this指向外层作用域的this，解决了传统函数内部this丢失的问题，使得函数内部的this更加符合预期。

除了箭头函数，ES6还引入了其他一些新的特性，如let和const关键字、模板字符串、解构赋值、默认参数值、类和模块等等。这些新特性使得JavaScript编程更加简洁、易读和强大。

19.vue的原理，还有v-model是基于什么的？

Vue.js是一款流行的前端JavaScript框架，它基于MVVM（Model-View-ViewModel）架构模式，主要原理如下：

数据驱动： Vue将数据和DOM进行绑定，当数据发生变化时，Vue会自动更新DOM，实现了数据驱动视图的原理。通过使用指令（Directive）和事件绑定（Event Binding），可以轻松地将数据和DOM关联起来。

响应式系统： Vue利用JavaScript的Object.defineProperty方法对数据对象进行劫持，监听数据变化并在数据发生改变时更新视图。这个部分实现了Vue中的响应式系统，确保数据的变化能够自动更新视图。

组件化： Vue允许开发者将页面拆分为多个独立的组件，每个组件包含自己的数据和视图。组件可以嵌套使用，提高了代码复用性和开发效率。Vue的组件化改进了传统的开发方式，使得代码更加模块化、可维护性更强。

虚拟DOM： Vue使用虚拟DOM来提高性能。当数据发生变化时，Vue会先更新虚拟DOM，然后通过Diff算法对比旧虚拟DOM和新虚拟DOM的差异，在最小化的更新操作中批量更新DOM，以减少页面重新渲染的开销。

v-model是Vue中用于实现双向数据绑定的指令。v-model实质上是通过对input、textarea等表单元素的value属性和input事件进行双向数据绑定来实现的。当用户在表单元素中输入内容时，数据模型会自动更新，反之当数据模型改变时，表单元素也会同步更新。v-model的实现依赖于Vue的响应式系统，确保数据的变化能够及时更新页面。

20 cookie和sessioncookie的区别？

Cookie和SessionCookie是Web开发中常用的两种技术，它们之间有以下区别：

存储位置：

Cookie：Cookie是存储在客户端浏览器上的文本文件，通常以键值对的形式保存在浏览器中。
SessionCookie：SessionCookie也是一种Cookie，但是它是在客户端浏览器关闭后自动删除的临时Cookie。SessionCookie通常用于存储会话期间需要保持的数据，如用户的登录状态等。

生命周期：

Cookie：Cookie可以设置过期时间，可以是永久的（即不设过期时间），也可以是在一定时间后到期。除非手动清除或过期，否则Cookie会一直保存在客户端。
SessionCookie：SessionCookie的生命周期受到浏览器会话的影响，即只在当前浏览器会话中有效，当浏览器关闭后自动销毁。

安全性：

Cookie：Cookie存在一些安全隐患，比如可以被篡改或伪造，因此敏感信息应该避免直接存储在Cookie中。
SessionCookie：SessionCookie相对于普通Cookie更加安全，因为它的生命周期短暂且只在会话期间有效。

使用场景：

Cookie：适合存储较小、不敏感的数据，如用户偏好设置、购物车信息等。
SessionCookie：适合存储会话期间需要保持的数据，如用户登录状态、用户权限等。

总的来说，Cookie和SessionCookie都是用来在客户端和服务器之间传递信息的工具，但它们有不同的存储位置、生命周期和安全性特点，开发者需要根据具体情况选择合适的方式来存储和管理数据。

21 对大前端的前后端分离的理解？

大前端的前后端分离是指将前端和后端的开发过程分离开来，通过API接口来实现数据交互和通信，以实现更好的开发效率、可维护性和灵活性。在传统的前后端开发中，前端和后端开发通常是耦合在一起的，前端开发人员需要等待后端开发完成接口的开发才能进行前端页面的开发和调试，这种方式的开发效率低下且不利于团队协作。而采用前后端分离的开发方式，前端开发人员和后端开发人员可以并行开发，开发进度更快，同时也更容易实现前后端的人员分工和合作。

在大前端的前后端分离中，前端主要负责页面的开发和UI设计，后端主要负责业务逻辑的处理和数据接口的编写。前端通过向后端发起请求获取数据，并将数据渲染到页面上，而不需要关心后端是如何获取数据的。后端只需要提供符合规范的接口，并确保接口的正确性和安全性即可，不需要关心具体的页面展示和交互逻辑。

前后端分离的优势包括：

开发效率更高：前后端可以并行开发，提高开发效率，减少开发周期。
可维护性更好：前后端分离有利于代码的模块化和复用，便于维护和升级。
灵活性更强：前后端分离可以让前端和后端分别选择适合自己的技术栈和开发工具，提高技术选择的灵活性。

总的来说，大前端的前后端分离是一种更加灵活、高效、易维护的开发方式，逐渐成为现代Web开发的主流趋势。但是也需要注意前后端分离带来的一些问题和挑战，如接口设计的规范性、前后端协作的沟通、接口的安全性等，需要开发团队具备更好的沟通协作能力和技术水平。

22 .this的用法，详细说明

"this" 是 JavaScript 中的一个关键字，用于指代当前对象。它的具体指向取决于函数的调用方式。

全局环境下：在全局环境下，this指向全局对象，通常是浏览器中的window对象。

console.log(this); // 输出window对象

函数中：在函数内部，this的指向取决于函数的调用方式。

如果是作为一个普通函数调用，this指向全局对象。

function test() {
  console.log(this);
}
test(); // 输出window对象

如果是作为对象的一个方法调用，this指向调用该方法的对象。

var obj = {
  name: 'John',
  sayHello: function() {
    console.log(this.name);
  }
};

obj.sayHello(); // 输出John

如果使用call、apply、bind方法改变方法的调用对象，this会指向传递的对象。

var person1 = {
  name: 'Alice'
};

var person2 = {
  name: 'Bob'
};

function introduce() {
  console.log(this.name);
}

introduce.call(person1); // 输出Alice
introduce.call(person2); // 输出Bob

如果是箭头函数，它没有自己的this，箭头函数的this在它被创建时就已经确定了，指向定义时所在的对象。

var obj = {
  count: 0,
  timer: function() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};
obj.timer();

构造函数中：在构造函数中，this指向由构造函数创建的新实例对象。

function Person(name) {
  this.name = name;
}

var person = new Person('Alice');
console.log(person.name); // 输出Alice

总的来说，this 的指向可以根据调用方式的不同而有不同的值，需要根据具体情况来理解和使用。在开发过程中，合理正确的理解this的指向是非常重要的。

23.异步的应用举例说明？在js中

异步操作是指不会阻塞程序执行的操作，而是在后台执行并在完成后通知程序。在 JavaScript 中，异步操作常见的形式包括回调函数、Promise、async/await 等。

以下是一个简单的异步操作应用举例说明：
// 异步操作示例：请求用户信息
function getUserInfo(userId, callback) {
  setTimeout(() => {
    // 模拟异步请求用户信息的过程
    const userInfo = {
      id: userId,
      name: `User ${userId}`,
      email: `user${userId}@example.com`
    };
    
    // 将获取到的用户信息传递给回调函数
    callback(userInfo);
  }, 1000);
}

// 使用回调函数处理异步操作
getUserInfo(1, function(user) {
  console.log(user);
});

console.log("请求已发送，等待响应...");

// 上述示例中，getUserInfo 函数模拟了发送异步请求获取用户信息的操作。
// 当请求发送后，程序不会阻塞在请求的响应上，而是继续往下执行后续的代码，直到数据返回后调用回调函数输出用户信息。
在这个示例中，getUserInfo 函数是一个异步操作，它模拟了发送异步请求获取用户信息的过程。同时，我们使用一个回调函数来处理异步操作返回的用户信息。

这种异步操作的应用场景非常常见，例如网络请求、定时任务、事件监听等。通过异步操作，可以更好地利用系统资源，提高程序的性能和响应速度。在处理异步操作时，需要注意处理异步操作返回的数据及错误，并合理地管理异步操作的流程。

24 闭包的原理，我们为什么用它？

闭包是一种特殊的函数，可以访问其创建时所处的作用域中的变量。闭包在 JavaScript 中常用于封装变量、创建私有变量、延迟执行函数等。

闭包的原理可以简单理解为：当一个函数在其内部定义了另一个函数，并且内部的函数引用了外部函数的变量时，就形成了闭包。内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

下面是一个闭包的示例说明：
function outerFunction() {
  let outerVar = 'I am outside!';

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

let innerFunc = outerFunction();
innerFunc(); // 输出："I am outside!"
在上述示例中，innerFunction 函数引用了外部函数 outerFunction 中的变量 outerVar。当 outerFunction 被调用后，返回了内部函数 innerFunction，并将其赋值给变量 innerFunc。即使外部函数 outerFunction 执行完毕后，内部函数 innerFunction 仍然可以访问外部函数中的变量 outerVar，这是因为闭包的存在。

闭包的一个重要特性是可以保持外部函数中的变量不被销毁，即使外部函数执行完毕。这使得闭包可以在函数外部访问和修改外部函数的变量值，从而实现一些特殊的功能。同时，闭包还可以实现函数的延迟执行、高阶函数、函数柯里化等功能。但需要注意的是，过度使用闭包可能会导致内存泄漏，因此在使用闭包时应该谨慎考虑。

25 作用域说说你的理解？

作用域（Scope）是指在代码中定义变量时，这个变量的可访问范围。作用域规定了在特定区域中引用变量时的可见性和访问权限。

在 JavaScript 中，作用域分为全局作用域和局部作用域。全局作用域是指在整个代码中都可以访问的作用域，而局部作用域是指在特定的代码块、函数或语句中定义的变量只能在其所属的作用域内访问。

作用域的工作原理可以简单描述为：在代码执行时，每个变量都有对应的作用域，变量的查找是通过作用域链来确定的。当代码引用一个变量时，JavaScript 引擎会从当前作用域开始查找这个变量，如果找不到就会到父级作用域继续查找，直到找到该变量或者到全局作用域结束。

一个常见的例子是函数作用域，在函数内定义的变量只能在函数内部访问，外部无法直接访问函数内的变量。而全局作用域中的变量可以在整个程序中访问。

作用域的概念是编程语言中非常重要的概念，它可以帮助我们组织代码、避免变量冲突、提高代码的可维护性。在 JavaScript 中，理解作用域可以更好地理解闭包、作用域链、执行上下文等概念，从而写出更加健壮、可靠的代码。

26 JS垃圾回收机制

1.JavaScript使用自动内存管理，也称为垃圾回收机制，来管理内存使用。JavaScript的垃圾回收机制有两种主要方式：标记清除和引用计数。

           1.标记清除（Mark-and-Sweep）：在JavaScript中，当一个对象不再被引用时，垃圾回收器会标记这个对象，并在下一次垃圾回收过程中清除这些标记的对象及其相关的垃圾数据。垃圾回收器会定期启动标记清除操作，以便将不再被引用的对象释放出来，以供系统重新利用。

           2.引用计数：引用计数是另一种垃圾回收机制，它通过跟踪对象的引用次数来判断对象是否可回收。当一个对象被引用时，引用计数加1；当引用失效或对象被回收时，引用计数减1。一旦对象的引用计数为0，垃圾回收器会立即回收这个对象。

           需要注意的是，JavaScript的垃圾回收机制有它自己的算法和策略，如何触发垃圾回收、如何管理内存等都由JavaScript引擎负责。开发者需要避免内存泄漏和不必要的内存消耗，可以通过合理地管理对象的引用关系和及时释放不再使用的对象来优化内存管理。

zhuaaaa3944210

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端经典面试题目

1. html5有哪些新特性？⁃ 绘画 canvas⁃ 用于媒介回放的 video 和 audio 元素⁃ 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；⁃ sessionStorage 的数据在浏览器关闭后自动删除⁃ 语意化更好的内容元素，比如 article、footer、header、nav、section⁃ 表...
复制链接

扫一扫