面试常见问题(js)

1)get和post请求的区别

get的参数通过URL传递,post的参数是放在Request Body中。

get的参数通过URL是有长度限制的,post没有。

get请求更危险,因为它直接暴露在URL上。

get参数请求会完整的记录在浏览器历史记录里面,而post请求参数不会被保留。

get请求只能进行url编码,而post请求支持多种编码方式。

get请求浏览器会主动cache,post不会,除非手动设置。

总的来说,get和post本质上就是TCP链接,但是由于HTTP的规定和浏览器/服务器的限制,导致它们在应用过程中体现出一些不同。对于get方式的请求,浏览器会把http header和data一并发送出去,服务器响应200,即返回数据,而对于post,浏览器先发送header,服务器响应100,continue,浏览器在发送data,服务器响应200,即返回数据。在网络环境好的情况下,发一次包的时间和发两次包的时间差别基本没有,而在网络环境差的情况下,两次包的TCP在验证数据包完整性下,有非常大的优点。

2)http method有哪些

安全方法

HTTP定义了一组被称为安全方法的方法。get方法和head方法都被认为是安全的,这就意味着使用ge或head方法的HTTP请求都不会产生动作。安全方法并不一定什么动作都不执行(由开发者决定),使用安全方法的目的是当使用可能引发某一动作的不安全方法时,运行HTTP应用程序开发者通知用户。

get方法

通常用于请求服务器发送某个资源。

head方法

head方法与get方法的行为类似,但服务器在响应中只返回首部。不会反回实体的主体部分。使用head,可以在不获取资源的情况下,了解资源的情况,通过查看响应中的状态码,看看某个对象是否存在,通过查看首部,测试是否被修改,服务器开发者必须确保返回的首部与get请求返回的首部完全相同

put方法

与get方法从服务器读取文档相反,put方法会向服务器写入文档。有些发布系统允许用户创建web页面,并用PUT直接将其安装到web服务器上。

post方法

post方法起初是用来向服务器写入数据的。实际通常会用它来支持HTML的表单。表单中填好的数据通常会被发送给服务器,然后服务器将其发送到他要去的地方。

trace方法

trace方法只要用于诊断,允许客户端在最终将请求发送给服务器时,看看他变成什么样子。trance请求最终会在目的服务器发起一个回环诊断,行程最后一战的服务器会回弹一条trance响应,并在响应主题中携带它收到的原始请求报文。这样客户端就可以查看在所有中间HTTP程序组成的响应链上,原始报文是否以及如何被毁坏或修改过。中间应用程序会自行决定对trance请求的处理方式,trance请求不能带有实体的主题部分。trance响应的实体主体部分包含了响应服务器收到的请求精确副本。

option方法

option方法请求web服务器告知其支持的各种功能。可以询问服务器通常支持那些方法,或者对某些特殊资源支持哪些方法。使用option方法的请求和响应示例:

请求报文

OPTIONS http://www.cnivi.com.cn/ HTTP/1.1

Accept-Encoding: gzip,deflate

Host: www.cnivi.com.cn

Connection: Keep-Alive

User-Agent: Apache-HttpClient/4.1.1 (java 1.5)

响应报文

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

Content-Length: 0

Date: Thu, 09 Oct 2014 04:20:09 GMT

delete方法

delete方法所做的事情就是请服务器删除请求URL所指定的资源。但是客户端应用程序无法保证删除操作一定会执行。因为HTTP规范允许服务器在不通知客户端的情况下撤销请求。

lock方法

允许用户锁定资源,比如可以再编辑某个资源时将其锁定,以防别人同时对其进行编辑。

mkcol方法

允许用户创建资源

copy方法

便于用户在服务器上复制资源

move方法

在服务器上移动资源

3)es6变量的解构赋值

按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就是解构。

数组的解构赋值

let[foo,[[bar],baz]]=[1,[[2],3]];foo // 1bar // 2baz // 3

注意,如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。

// 报错let[foo]=1;let[foo]=false;let[foo]=NaN;let[foo]=undefined;let[foo]=null;let[foo]={};

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let[x=1]=[undefined];x // 1let[x=1]=[null];x // null

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let{bar,foo}={foo:"aaa",bar:"bbb"};foo // "aaa"bar // "bbb"let{baz}={foo:"aaa",bar:"bbb"};baz // undefined

字符串解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e]='hello';a // "h"b // "e"c // "l"d // "l"e // "o"

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

let {length: len}='hello';len // 5

数值和布尔型解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

let {toString: s}=123;s===Number.prototype.toString // truelet{toString:s}=true;s===Boolean.prototype.toString // true

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。

let{prop:x}=undefined; // TypeErrorlet{prop:y}=null; // TypeError

函数参数的解构赋值

函数的参数也可以使用解构赋值。

[[1,2],[3,4]].map(([a,b])=>a+b);// [ 3, 7 ]

function add([x, y]){  return x + y;}add([1, 2]); // 3

4)什么是闭包,闭包的作用是什么?

闭包就是能够读取其他函数内部变量的函数,另一个就是让变量的值始终保持在内存当中,不会因为被调用后自动清除。

var f1 = function(){

        var a=1;

        return function f2(){

            a++;

            console.log(a);

        }

    }

    var b = f1();

    b();            // 2

    b();            // 3


5)客户端存储localstorage和sessionstorage的区别

localstorage的生命周期是永久,sessionstorage生命周期为当前窗口或者标签页,一旦窗口或者标签页被关闭了,那么通过sessionstorage存储的数据也会被清空。

6)JavaScript有哪几种方法定义函数

函数有三种定义方法,函数定义语句,函数直接量表达式和function()构造函数。

函数定义语句

function sum(a, b){

  return a+b;

}

函数直接量表达式

//求阶乘的函数

var factorial = function fact(x){  //将函数赋值给一个变量

    if(x<0) {return NaN;}

    else if(x===0) {return 1;}

    else

    return x*fact(x-1);    //递归函数

};

console.log(factorial(3));

function()构造函数

var f =new Function("x","y","return x+y");//Function()构造函数

var f =function(x, y){return x+y};

7)如何判断一个对象是否为函数

调用object原声方法不存在兼容问题,可以用typeof,但是存在浏览器兼容问题。

Object.propotype.toString.call(object) === "[object Function]"

8)编写JavaScript深度克隆函数

function clone(obj) {

  var o = obj instanceof Array ? [] : {};

  for(var k in obj)

    o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];

  return o;

}

var a = [[1, 2, 3], [4, 5, 6, 7]];

var b = clone(a);

console.log(b);

9)什么是虚拟dom,为什么使用虚拟dom?

  可以看作使用JavaScript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息。VDOM将DOM的对比放在js层,通过对比不同之处来选择新渲染的DOM节点,从而提高渲染效率。

10)jsonp的优缺点

优点:

jsonp可以跨越同源策略,兼容性很好,请求完毕后可以通过调用callback的方式回传结果。

缺点:

支持get请求,只支持跨域http请求,在调用失败的时候不会返回各种http状态码,不够安全,存在页面注入漏洞。

11)React组件的生命周期函数

一.初始化阶段:

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始状态

componentWillMount:组件即将被装载,渲染到页面上

render:组件在这里生成虚拟dom节点

componentDidMount:组件在被装载之后

二.运行中:

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件在接收到新属性或者新状态的时候

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

三.销毁阶段:

componentWillUnmount:组件即将销毁

12)es6数据类型

Number,String, Null, Undefined, Symbol, Boolean

13)什么是事件委托,有什么作用?

  事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。在js中,添加到页面上的事件处理程序数量将直接关系到页面整体运行性能,因为需要不断与dom节点进行交互,访问dom的次数越多,引起浏览器重回与重排的次数也就越多,就会延长整个页面的交互就绪时间。,使用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需一次,这样就能大大的减少与dom的交互次数,提高性能。

14)什么是事件冒泡?如何阻止事件冒泡?

事件冒泡就是从目标对象到外层的顺序触发。

    阻止事件的传播:在W3C中,使用stopPropagation()方法,在IE下设置cancelBubble = true;

阻止事件的默认行为:在W3C中,使用preventDefault()方法,在IE下设置window.event.returnValue = false;

15)什么是async函数,有什么作用?

async函数是Generator函数的语法糖。async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

16)HTML5的离线存储怎么使用,工作原理能不能解释一下?

原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样存储下来。之后当网络处于离线状态下时,浏览器会通过离线存储的数据进行页面展示。

使用:在页面头像加入一个manifest的属性,在cache.manifest文件的编写离线存储资源,在离线状态时,操作window.applicationCache进行需求实现

16)你是如何划分react组件

通常是根据组件的指责来划分为UI组件和容器组件,UI组件复杂UI的呈现,容器组件负责管理数据和逻辑的。

17)react性能优化是哪个周期函数,react性能优化方案?

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法,可以极大的提高性能。

优化方案:重写shouldComponentUpdate来避免不必要的dom操作,使用production版本的react.js,使用key来帮助react识别列表中所有子组件的最小变化。

18)说说前端中的事件流

HTML中的javascript交互是通过事件驱动来实现,事件流描述的是从页面中接受事件的顺序,dom级事件流包括下面几个阶段。

事件捕获阶段

处于目标阶段

事件冒泡阶段

19)js的new操作符的作用

new操作符新建了一个控对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象。

20)bind,apply,call改变函数内部this的指向的区别。

1>通过apply和call改变函数的this指向,他们两个函数的第一个参数都是一样的,表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2...这种形式

2>通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行。



后续会继续更新

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

推荐阅读更多精彩内容