面试总结

1.get和post比较

1>提交方式:GET提交,请求的数据会附在URL之后;POST提交则把数据放置在HTTP包的包体中。因此,GET提交的数据会在地址栏中显示出来,而POST提交,地址栏不会改变

2>传输数据的大小:HTTP协议没有对传输的数据大小进行限制,HTTP协议规范也没有对URL长度进行限制。 而在实际开发中存在的限制主要有:GET:特定浏览器和服务器对URL长度有限制,一般是2kb。因此对于GET提交时,传输数据就会受到URL长度的限制; POST:由于不是通过URL传值,理论上数据不受限。

3>安全性:POST的安全性要比GET的安全性高。通过GET提交数据,用户名和密码将明文出现在URL上,因为登录页面有可能被浏览器缓存, 那么其他人查看浏览器的历史纪录,就可以拿到账号和密码了。

2.JavaScript数据类型

基础数据类型:String、Number、Boolean、Undefined、Null

引用数据类型:Object、Array、Function 

基础数据类型是直接存储在栈(stack)中的简单数据段。因为占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中,将会影响程序运行的性能。

当我们声明一个变量a的时候, 会在栈里面开辟出一块新的内存空间, 用来存放这个变量a的数值, 当这个变量a存储的数值发生改变时, 栈空间里的对应那块内存里的数据也会发生改变, 此时如果又声明了一个变量b, 并把变量a赋值给变量b时, 在栈里面又会新开辟出一块空间, 用来存放变量b存储的数值, 而这个数值, 是变量a传递给他的, 因此, 此时两个变量分别对应两块内存空间, 存储的值是相同的, 因此, 当变量a发生改变时, 并不会影响到变量b所拥有的那块内存空间, 所以变量b是不会改变的。

复杂数据类型在声明之后, 会在堆内存中开辟出一块空间, 用来存放数据, 拿对象举例, 在我们新建一个对象之后, 会在堆内存中开辟一块空间, 用来存放对象里的数据, 而复杂数据类型跟简单数据类型的不同点就是在于, 简单数据类型的变量指向的是内存中的数据, 而复杂数据类型指向的是其在内存中的地址,通过这个地址, 从而拿到地址中的数据, 因此, 如果将一个对象赋值给另一个对象的时候, 其实是把这个对象在内存空间中的地址传递给了另一个对象, 此时, 他们共享内存中的同一块空间以及空间里的数据, 如果对其中一个对象的一个属性进行修改的话, 那么因为两个对象是共享一块地址一个数据的, 因此另一个对象中的属性也会被改变. 如果对其中一个对象重新赋值的话, 那么这个对象就会指向另一块内存空间, 就不在与另一个对象共享同一块内存了

3.sessionStorge , localStorge , cookie , Web Storage之间的区别

①数据存储大小

cookie:4kb;webStorge:5mb

②数据存储有效期限

cookie:根据自己的设置时间;sessionStorage:关闭窗口后失效;localStorage:永久有效除非js删除或者浏览器删除

③作用域

cookie和localStorage是在同源窗口,同一个浏览器共享的,sessionStorage只在同一个标签页共享。

4.闭包

一个父函数里面包含了一个子函数,子函数调用了父函数内部的变量,如果子函数在外部被调用,就产生了闭包。简单的说:闭包就是能够读取其他函数内部变量的函数。

闭包的作用:

①读取其他函数内部的变量

②变量保存在内存中

问题:

使用过多的闭包会消耗大量内存,造成网页的性能问题,可以在函数执行完成之前把不需要的局部变量删除。

5.bind、call、apply的区别

在说区别之前还是先总结一下三者的相似之处

1、都是用来改变函数的this对象的指向的。

2、第一个参数都是this要指向的对象。

3、都可以利用后续参数传参。

那么他们的区别在哪里的,先看一个例子。

                var xw = {

                        name : "小王",

                        gender : "男",

                        age : 24,

                        say : function() {

                                alert(this.name + " , " + this.gender + " ,今年" + this.age);                                

                        }

                }

                var xh = {

                        name : "小红",

                        gender : "女",

                        age : 18

                }

                xw.say();

本身没什么好说的,显示的肯定是小王 , 男 , 今年24。

那么如何用xw的say方法来显示xh的数据呢。

对于call可以这样:

xw.say.call(xh);

对于apply可以这样:

xw.say.apply(xh);

而对于bind来说需要这样:

xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以

那么call和apply有什么区别呢?我们把例子稍微改写一下。

                var xw = {

                        name : "小王",

                        gender : "男",

                        age : 24,

                        say : function(school,grade) {

                                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                

                        }

                }

                var xh = {

                        name : "小红",

                        gender : "女",

                        age : 18

                }

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。

对于call来说是这样的

xw.say.call(xh,"实验小学","六年级");       

而对于apply来说是这样的

xw.say.apply(xh,["实验小学","六年级"]);

call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

那么bind怎么传参呢?它可以像call那样传参。

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

xw.say.bind(xh)("实验小学","六年级")

6.ajax的优缺点

优点:

通过异步模式,提升了用户体验;优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用;Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载;Ajax可以实现动态不刷新(局部刷新)

缺点:

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

不容易调试

7.RESTful接口规范

一、URL 设计

RESTful 的核心思想就是,客户端发出的数据操作指令都是"动词 + 宾语"的结构。比如,GET /articles这个命令,GET是动词,/articles是宾语。

动词通常就是五种 HTTP 方法。GET:读取(Read);POST:新建(Create);PUT:更新(Update);PATCH:更新(Update),通常是部分更新;DELETE:删除(Delete)

根据 HTTP 规范,动词一律大写。

二、状态码

状态码必须精确

客户端的每一次请求,服务器都必须给出回应。回应包括 HTTP 状态码和数据两部分。

HTTP 状态码就是一个三位数,分成五个类别。

1xx:相关信息;2xx:操作成功;3xx:重定向;4xx:客户端错误;5xx:服务器错误

8.jQuery与vue对比

vue通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染

组件化

DOM操作

3.VUE 的生命周期

1.beforeCreate:组件实例刚创建,属性计算之前

2.created:属性已绑定,dom生成之前

3.beforeMount:模板/编译挂载之前

4.mounted:模板/编译挂载之后

5.beforeUpdate:组件更新之前

6.updated:组件更新之后

7.beforeDestroy:组件销毁前调用

8.destroyed:组件销毁后调用

一般用到的是:beforeCreate:el 和 data 并未初始化 ;created:完成了 data 数据的初始化,el没有;beforeMount:完成了 el 和 data 初始化 ;mounted :完成挂载

9.watch、computed与methods比较

watch:适合监控,类似于onchange

computed是属性调用,而methods是函数调用

computed带有缓存功能依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值,避免一些无谓的请求,优化了用户的体验

7.ES6语法

1>定义:ES6 推荐在函数中使用 let 定义变量;const 用来声明一个常量 。let和const只在最近的一个块(花括号)中有效。

2>箭头函数:使用 => 作为函数表达形式,极简风格,参数+ => +函数体。箭头函数中的 this 指的不是window,是对象本身。

3>类:ES6中增加了类的概念,其实ES5中已经可以实现类的功能了,只不过使用Class实现可以更加清晰,更像面向对象的写法。

4>解构赋值:let [first, second, third] = someArray;

//let [,,third] = [1,2,3];console.log(third); //3

//let [first,...last] = [1,2,3];

console.log(last); //[2,3]

//对象解构let {name,age} = {name: "lisi", age: "20"};

console.log(name); //lisi   console.log(age); //20

//注意let {ept1} = {};

console.log(ept1); //undefined 

let {ept2} = {undefined};console.log(ept2); //undefined

let {ept3} = {null};console.log(ept3); //null

5>模版字符串:

ES6中提供了用反引号`来创建字符串,里面可包含${…}等

`Thisisa pretty little templatestring.``InES5 thisisnotlegal.`letname ="Bob",time="today";`Hello ${name}, how are you ${time}?`

6>Promises:

一个 Promise 是一个等待被异步执行的对象,当它执行完成后,其状态会变成 resolved 或者 rejected

Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的 deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式

function timeout(duration =0) {

    return new Promise((resolve, reject) => {

        setTimeout(resolve, duration);

    })}

var p=timeout(1000).then(() => {

    return timeout(2000);

}).then(() => {

    throw new Error("hmm");

}).catch(err => {

    return Promise.all([timeout(100), timeout(200)]);

})

3.sessionStorge , localStorge , cookie , Web Storage之间的区别

10.原型与原型链

每个对象在内部都是会初始化一个属性的,当我们访问一个对象的属性时,如果这个对象不存在这个属性,那么他就会去 prototype中查找,然后 prototype中还有自己的 prototype,就这样一直找下去,这就是原型链的概念。

每个对象都有 __proto__ 属性,但只有函数对象才有 prototype 属性,原型链的顶层就是Object.prototype


在默认情况下,所有的原型对象都会自动获得一个 constructor(构造函数)属性,这个属性(是一个指针)指向 prototype 属性所在的函数(Person)

那原型对象是用来做什么的呢?主要作用是用于继承。

var A = function(){};

var a = new A();

console.log(a.__proto__); //A {}(即构造器function A 的原型对象)

console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)

console.log(a.__proto__.__proto__.__proto__); //null

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

推荐阅读更多精彩内容

  • 1.cookie和localStorage的区别 cookie:可设置失效时间,一般在浏览器关闭后失效;一般4k左...
    湖衣阅读 180评论 0 0
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 3、HTTP的几种请求方法用途 4、从浏览器地...
    peng凯阅读 771评论 0 1
  • 前端页面由哪三层构成 结构层:由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的...
    九四年的风阅读 445评论 0 2
  • http://python.jobbole.com/85231/ 关于专业技能写完项目接着写写一名3年工作经验的J...
    燕京博士阅读 7,566评论 1 118
  • JS中的块级作用域 1.with 2.try.. catch 3.let, const 变量提升和函数提升 包括变...
    杰米桀弥阅读 729评论 1 3