前端面试题三

这篇具有很好参考价值的文章主要介绍了前端面试题三。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ES6新特性有哪些?

  1. 变量声明:由var变为let和const;
  2. 模板字符串:使用反引号 `` ;在模板字符串里面支持换行,并可以在里面使用${}来包裹一个变量或表达式;
  3. 解构赋值:有数组解构和对象解构,可以快速获取数组和对象的值;
  4. 扩展运算符:在ES6中用...来表示展开运算符,它可以将数组或者对象进行展开;
  5. 箭头函数:函数的快捷写法,不需要通过function关键字创建函数,并且可以省略return关键字,但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象; 化简规则: Function 变成 =>; 只有1个参数可以省略小括号; 没有参数或者有多个参数不能省略小括号; 函数体内只有一行可以省略大括号,如果有返回值return,则return也要省略; 函数体内有多行,不能省略大括号;
  6. 对象的简化赋值:对象赋值时如果属性名和变量名一致可以简写
  7. 类的支持:ES6中添加了对类的支持,引入了class关键字。JS本身就是面向对象,ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建,继承更直观,父类方法的调用,实例化,静态方法和构造函数更加形象化。

    JavaScript 中,如何判断两个对象是否相等?

两个Object类型对象,即使拥有相同属性、相同值,当使用 == 或 === 进行比较时,也不认为他们相等。这就是因为他们是通过引用(内存里的位置)比较的,不像基本类型是通过值比较的。

```js //浅拷贝指向同一内存的时候,此时两个对象相等。 var obj1 = { name: "xiaoming", age: "18" };

var obj2 = { name: "xiaoming", age: "18" };

var obj3 = obj1;

console.log(obj1 === obj3); // true

console.log(obj2 === obj3); // false ```

说说你对promise的理解

Promise的含义:

promise是异步编程的一种解决方法。 所谓promise,简单说是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,promise是一个对象,从它可以获取异步操作的消息,promise提供了统一的API,各种异步操作都可以用同样的方法进行处理。

Promise对象的特点:

(1)对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也是promise这个名字的由来“承若”; (2)一旦状态改变就不会再变,任何时候都可以得到这个结果,promise对象的状态改变,只有两种可能:从pending变为fulfilled,从pending变为rejected。这时就称为resolved(已定型)。如果改变已经发生了,你再对promise对象添加回调函数,也会立即得到这个结果,这与事件(event)完全不同,事件的特点是:如果你错过了它,再去监听是得不到结果的。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise的用法:

是一个构造函数,这个构造函数里有两个参数,分别是:resolve(成功之后的回调函数)、reject(失败之后的回调函数)。

因为promise表示的是一个异步操作,每当我们new一个promise实例,就表示一个具体的异步操作,那么这个异步操作的结果就只能有两种状态:成功/失败,两者都需要回调函数resolve/reject返回。所以内部拿到操作的结果后,无法使用return把操作结果返回给调用者,这时候只能用回调函数的形式来把成功或失败的结果返回给调用者。

vue中watch和computed区别

监听属性watch - 不支持缓存,数据变,会直接触发相应的操作; - watch支持异步; - 监听数据必须是data中声明过或者父组件传递过来的props中的数据。

计算属性computed - 支持缓存,只有依赖数据发生改变,才会重新进行计算; - 不支持异步,当computed内有异步操作时无效,无法监听数据的变化; - computed属性值会默认走缓存,计算属性是基于他们的相应依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

Vue-router 中hash模式和history模式的区别

外观:

hash模式url带#号,history模式不带#号。

功能: hash模式url里面永远带着#号,开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传; 比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合,让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok了。

Vuex的相关知识

详见

Vue生命周期

beforeCreate

实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据,常用于初始化非响应式变量。

created

实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组,常用于简单的ajax请求,页面的初始化。

beforeMount

在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数。

mounted

实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问 常用于获取VNode信息和操作,ajax请求。

beforeupdate

响应式数据更新时调用,发生在虚拟DOM打补丁之前,适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。

updated

虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作,避免在这个钩子函数中操作数据,可能陷入死循环。 beforeDestroy

实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例,常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

destroyed

实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

理解vue的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形:

这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:

js props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:

js props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } 注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

js props: { list: { type: Array, default: (() => []) } }, methods: { addFn () { this.list.push('newValue') } } 单向数据流:父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。文章来源地址https://www.toymoban.com/news/detail-776864.html

到了这里,关于前端面试题三的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2023前端超全面试题,全是金三银四面试真题整理!附答案。

    目录 HTML 标签语意化 HTML5新特性 SEO input元素的类型 iframe的特点 CSS Flex BFC 重排重绘 CSS优先级 CSS3新特性 清除浮动的方法 盒模型的理解 响应式布局 移动适配方案 三栏布局 圣杯布局和双飞翼布局 JS JS为何是单线程 JS数据类型 js判断数据类型 js中的length属性 判断空对象 判断空

    2024年02月08日
    浏览(34)
  • 「Vue3面试系列」Vue 3.0中Treeshaking特性有哪些?举例说明一下?

    Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码 如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有

    2024年02月01日
    浏览(28)
  • 入职微软一月后的感悟,谈谈面试经历及入职体验,web前端常见面试题

    在某一天,我在某 App 上被一个微软的陌生人勾搭,简单地电面后一拍即合,我向他投递了简历。 正式的面试一共有四轮,三轮技术面 + 一轮 AA 面(大老板),每轮持续时间一个小时左右。 除了最后一面聊了聊人生、理想、逻辑推理等非技术内容。其他三面基本上是项目算

    2024年04月26日
    浏览(37)
  • 逗号链式声明-变量声明中使用逗号声明多个变量

    在JavaScript中,使用 逗号, 可以将多个变量声明在同一行中。 使用逗号将多个变量声明在同一行中。这种方式通常被称为“逗号链式声明”。 这种写法相对于分别声明每个变量来说,可以更加简洁和清晰。 不过,需要注意的是,在同一行中声明多个变量时,如果没有使用逗号

    2024年02月03日
    浏览(31)
  • 前端基础面试题:如何判断对象是否具有某属性?遍历数组的方法有哪些?

    一、如何判断对象具有某属性? 如: let obj={name:\\\'zhangsan\\\',age:21} 有以下方法 ( property 为属性名的变量,实际上是key,键名): 1. property in obj 效果如图: in 运算符 2. Reflect.has(obj, property) 效果如图: 关于 Reflect: ① 它是JS的一个内置对象,无构造函数,可以用它遍历对象的key,如

    2023年04月08日
    浏览(37)
  • 【面试题】2023当面试官问我前端可以做的性能优化有哪些

    面试过程中面试官问到前端性能优化有哪些,当我咔咔一顿输出之后面试官追问:前端可以做的性能优化有哪些呢? 前端优化大概可以有以下几个方向: 网络优化 页面渲染优化 JS优化 图片优化 webpack打包优化 React优化 Vue优化 link标签的rel属性设置dns-prefetch,提前获取域名对

    2023年04月14日
    浏览(75)
  • 前端、后端面试集锦

    诸位读者,我们在工作的过程中,经常会因跳槽而面试。 你开发能力很强,懂得技术也很多,若加上条理清晰的面试话术,可以让您的面试事半功倍。 个人博客阅读量破 170万 ,为尔倾心打造的 面试专栏-前端、后端面试 专栏,已组织好面试的话术,为你的简历锦上添花,为

    2024年02月10日
    浏览(28)
  • 前端面试题(计算机网络):HTTP 1.0 和 HTTP 1.1 之间有哪些区别?

    http1.0默认是使用非持久连接,而http1.1默认使用持久连接,持久连接来使请求复用同一个TCP连接,以此来避免使用非持久连接时需要每次建立连接延迟(所花费的时间) http1.0中存在资源浪费现象,客户端如果只需要某个对象的一个部分,而服务器却会将整个对象资源全部发送

    2024年01月21日
    浏览(37)
  • Golang 局部变量、全局变量 声明

    四种声明方式 + 多变量声明: 全局变量的声明和局部变量的声明方式一、二、三 相同; 但是不能使用局部变量声明方式四 (:=) 来声明全局变量。

    2024年02月13日
    浏览(28)
  • 【ES】笔记-let 声明及其特性

    声明变量 变量赋值、也可以批量赋值 变量不能重复声明 块级作用域,let声明的变量只在块级作用域内有效 注意:在 if else while for 中使用 let 都是块级作用域 不存在变量提升 使用 var (存在变量提升) 使用 let (不存在变量提升) 注:变量提升就是在变量创建之前使用(比如输出

    2024年02月14日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包