2019-07-27 前端面试题

1.js的基础类型

    js的基础类型包括  Undefined , Null , String ,Number , Boolean.五种

    基础数据类型的变量直接按值存放的,是存放在栈中,可以直接被访问。

2.js的引用类型

        js的引用类型包括:Function , Object ,  两种。

        存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需要的数据。

3.js的原型链是什么?

        当创建一个构造函数,就会产生一个原型,所谓的原型链就是,当一个查找一个函数的属性或者方法的时候,会先在当前的函数中进行查找,如果没有查找到,就继续向上一级的原型中查找,当原型中没有的话,就继续在原型中的原型中进行查找,直到找到属性或者方法为止,或者知道查找到最上一级的Object.prototype中返回值null为止。一级一级的查找就像一个链条,所以叫原型链

4.除了原型链的继承,你还知道其他的继承方法吗

原型继承

代码实例

打印结果:

打印结果

child通过指针__proto__指向其原型对象(其原型对象又指向他的原型对象),其原型对象分为两部分,从构造函数中即成的实例属性color,和从原型对象中继承的。

补充:原型对象的构造函数是函数本身,因此每个构造函数的prototype对象可以看作一个实例化对象。

优点:可以继承构造函数的属性,也可继承原型属性。

缺点:

1.首先属性值为引用类型值的原型属性被修改后可能会影响到所有的实例,而该种继承方式中,构造函数中的属性会继承到子类型,成为子类的原型对象的属性。(这也是为什么要在构造函数中定义属性,在原型中定义公共方法)

2.在创建子类的实例时,不能向父类的构造函数中传递参数。

二,借用构造函数

实例代码
打印结果

优点:避免了原型继承中的两个缺点,可以向父类传参,且不会造成原型属性共享的问题(因为父类构造函数中的属性继承到子类构造函数中,而非原型对象中)。

缺点:不能继承原型属性,无法实现函数复用,所有方法都只能放在构造函数中。

三,组合继承

四,原型链式继承

五,寄生式继承

六,寄生组合式继承

5.深拷贝和浅拷贝有什么区别   

js存储对象都是存地址的,所以浅拷贝只是会拷贝带栈中的指针地址,比如obj1 和obj2,obj2对obj1进行浅拷贝,拷贝完之后,两者是指向同一个内存地址的,所以,当一方的的内存上进行了修改,就会影响另一方。

深拷贝不光是拷贝了指针地址,同事在内存中开辟一个新的内存,所以两者指针指向不同的内存地址,也就是说,一方改变的时候,不会影响另一方

1浅拷贝实现:1.简单的引用复制  

                     var arr1 = [1,2,3];  var arr2 = arr1[];

            2.Object.assign();  此方法可以吧任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。Object.assign()会跳过那些值为null或undefined的源对象

var x = { a: 1, b: { f: { g: 1 } }, c: [ 1, 2, 3 ]};var y = Object.assign({}, x);console.log(y.b.f === x.b.f); // true

2.深拷贝的实现:

2.1.Array的slice和concat

2.2.Json对象的parse和stringify   parse  将JSON字符串反序列化成JS对象,

6.es6中的Map和Set

Map对象保存键值对。

Map的属性

(1)size:返回Map对象所包含的键值对的个数

Map对象的方法:

(1)set(key,val); 添加新元素

(2)get(key); 通过键值查找特定的数值并返回

(3)has(key);判断Map对象中是否含有Key所对象的值

(4)delete(key);通过key删除对应的数值

(5)clear(); 将Map中所有的元素都删除

遍历方法:

(1)keys(); 返回键名

(2)values();  返回键值

(3)entries();  返回键值对  // for (let [key, value] of map.entries()) {

                                              console.log(key, value)

                                            }

(4)forEach(); 使用回调函数遍历每个成员

2。Set

Set对象允许存储任何类型的值,无论是原始值或者是对象引用。类似与数组,但是成员的值都是唯一的,没有重复的值

特殊值:+0  -0      和   undefined    和NaN

Set实例对象的属性

    (1)size:返回Set实例的成员总数。

Set实例对象的方法

(1)add(value);添加值,返回set结构本身

(2)delete(value);删除某个值,成功返回true,否则发了

(3)has(value); 判断是否包含这个值,返回bool类型

(4)clear();清除所有成员,无返回值

    const mySet = new Set(['a', 'a', 'b', 1, 2, 1])

    console.log(mySet) // {'a', 'b', 1, 2}

    myset.add('c').add({'a': 1})

    console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}

    console.log(mySet.size) // 6

    mySet.has(2) // true

遍历方法(由于Set结构没有键名只有键值,所以keys方法和value方法行为完全一致)

(1)keys();

(2)values();

(3)entries();

(4)forEach();

Set对象作用

(1)数组去重(利用扩展运算符)

(2)合并两个Set对象

  let a= new Set([1,2,3]);    let b = new Set([2,3,4]) 

  let union = new Set([...a,...b])     //【1,2,3,4】

(3)交集

    let a= new Set([1,2,3])   let b = new Set([2,3,4])

    let intersect = new Set([...a].filter(x=>b.has(x)));//{2,3}

(4)差集

    let a = new Set([1,2,3]);   let b = new Set([2,3,4])

    let difference = new Set([...a].filter(x=>!b.has(x)))  //{1}


6.vue的几种指令

        v-if   v-show   v-on  v-bind

7.v-show和v-if有什么区别

    v-show是 dispaly属性的 none和block来控制的。其实一直是存在在DOM元素里的

    v-if 是不存在 当条件不成立的时候在DOM元素里边的,条件成立才会在DOM树里

8.你还知道其他的几种dom元素的隐藏方式吗

9.vue路由的replace和push有什么区别

push是以压栈的方式一直往里存,这个方法会像history中添加一个新的记录,当用户点击浏览器后退按钮是,则回到之前的url.

replace 是将history里的上一条记录直接替换掉,导航不会留下history记录,点击浏览器的后退按钮不会反悔上一页。

10.说一下vuex

 vuex是一个专门为vue.js开发的状态管理模式,集中管理存储所有组件的公共状态,以相应的规则保证状态以一种可预测的方式发生变化。

    vuex包括state ,geeter, mutation , action .

state:Vuex的公共状态,所有组件的公共数据

getters:可理解为所有组件的comouted属性,也就是计算属性。getters的返回值会根据它的依赖被缓存起来,且只有当他的依赖值发生了改变才会被重新计算

mutation:可理解为store的methods.这个只能是同步的

action :类似于mutation,不同在于,action提交的是mutation而不是直接变更状态。action中包含异步操作,mutation绝不允许出现异步操作

Modules:vuex允许我们将store分割成模块。每个模块拥有state getter  action  mutation.

11.mutation 为什么是同步的,知道原理吗

之所以通过提交mutation的方式来改变状态数据,是因为想要更明确的追踪到状态的变化。所以必须是异步

12.如何进行web前端性能优化

1.减少HTTP请求的次数;

资源大小很重要,不仅关系到下载时间,还因为IPv4和IPv6协议规定一个IP包的最大只为65535字节,一个包是一次请求。 得到一个等式:服务器发送全部负载的响应次数=页面大小的总字节数除以IP包的字节数。  我们可控制资源尽可能小,可采取使用Gulp等自动化构建工具进行自动合并js文件,压缩文件和图片等手段。  2,避免重定向,重定向说明客户端采取进一步操作才能完成请求,,请求时间就会延长,所以,输入URL时应该使用最完整的最直接的地址,比如www.baidu.com  而不是baidu.com

2,图片懒加载

页面图有很多的时候,可以使用懒加载,只加载第一屏的图片,当用户滚动是访问后边的内容的时在加载相应的图片。 方法是先用一张极小的占位图代替图片,占位图值下载一下,将原本图片的src存储在另一个属性里,判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

3.代码优化

1)页面结构,css放在HTML内容的上部,js放在HTML内容得下部。可以使用preload提前解析资源的DNS.由于浏览器是自上而下读取内容的,因为放置资源的位置会影响网站的访问速度。2)javascript优化:比如减少DOM的操作,减少重拍和重绘,减少作用域链查找,慎用eval函数等。3)css优化:比如减少使用通配符,提取公共样式增强可复用性选择器准确可减少匹配时间,适度使用内联样式。

13.缓存有几种方式

14.浏览器的两种什么缓存是什么

15.了解webpack吗?说一下loader有哪几个?渲染vue页面的html的是哪个loader?

 webpack可以看作是模块打包机:她做的事情就是分析你的项目结构 ,找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言,并将其转换和大宝成为核实的格式工浏览器使用。

常用的loader有以下几个:

css-loader,style-loader  image-loader   file-loader   sass-loader   less-loader   babel-loader   jsx-loader    raw-loader(处理html文件)    url-loader     eslint-loader

16.了解网络协议吗,网络协议有几层?http在第几次,tcp在第几层?

网络体系结构分层 OSI七层模型。TCP/IP概念层模型四层。

网络分层

2.利用TCP/IP协议进行网路通信,会通过分层顺序与对方进行通信


TCP/IP通信传输流

17.简述一下你理解的面相对象

万物皆对象,把一个对象抽象成雷,具体就是把一个对象的静态特征和的动态特征抽象成属性和方法,也就是把一类事物的算法和数据封装在一个类之中,程序就是多个对象和互相之间的通信组成的

对象具有,继承性,多态性,和封装性。

封装:隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠借口进行通信。封装性降低了编程的复杂性,通过继承,使得新建一个类变得很容易,一个类从派生类哪里获得其非私有的方法和工友属性的繁琐工作交给了编译器,而继承和实现接口和运行时的类型绑定机制所产生的多态,使得不同的类所产生的对象能都对相同的消息做出不同的反应,极大提高代码的通用性。

18.jq有几种选择器,分别是什么?

19.什么是冒泡排序

20.数组去重(indexof<0)(set-->es6新特性,数据不重复)(双循环)

21.统计字符串中字母个数并统计最多字母数

布局中,造成盒子margin塌陷的原因是什么,怎么解决?

  父元素包裹着子元素 *(都是块级元素),给子元素设置margin-top时,子元素没有位移,反而父元素位移了。给父元素加border   父元素加浮动    佛于是怒设置display:table

父元素 position:fixed    子元素 dispaly:inline-block

层叠选择器,基本过滤选择器,内容过滤选择器,可视化过滤选择器,属性过滤选择器,子元素过滤选择器,表单元素过滤器,表单元素过滤选择器。 

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

推荐阅读更多精彩内容