前端面试题二

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

//浅拷贝指向同一内存的时候,此时两个对象相等。
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 用作其初始值:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

props: {
  list: {
    type: Array,
    default: (() => [])
  }
},
methods: {
  addFn () {
    this.list.push('newValue')
  }
}

单向数据流:父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容

  • UDP协议为什么不可靠? UDP在传输数据之前不需要先建立连接,远地主机的运输层在接收到UDP报文后,不需要确认,...
    helloworld1024阅读 102评论 0 0
  • 1、vue与react的区别 vue和react的区别 两者本质的区别:模板和组件化的区别 Vue本质是MVVM框...
    亦腕n_n阅读 4,711评论 0 16
  • 一、js基础 1、简述同步和异步的区别同步是阻塞模式,异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候,若...
    Yupipi_710f阅读 689评论 0 0
  • 目录 1.vue-router是怎么传递参数的 2.v-if和v-for一起使用的弊端以及解决办法 3.befor...
    裁尘的人儿阅读 1,033评论 1 5
  • vue2的: 1.生命周期函数: 1.1 什么是生命周期函数 我理解的生命周期函数就是 vue 实例从创建到销毁的...
    tang温暖阅读 246评论 0 0