博彦科技面试
该公司使用的Vue项目中es6主要用到了哪些?
letconstimport export 模块化处理箭头函数解构赋值
箭头函数和普通函数的区别
箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
var B = ()=>{ value:1;}var b = new B(); //TypeError: B is not a constructor
箭头函数不绑定arguments,取而代之用rest参数…解决
function A(a){ console.log(arguments); //[object Arguments] {0: 1}}var B = (b)=>{ console.log(arguments); //ReferenceError: arguments is not defined}var C = (...c)=>{ //...c即为rest参数 console.log(c); //[3]}A(1);B(2);C(3);
箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值
var obj = { a: 10, b: function(){ console.log(this.a); //10 }, c: function() { return ()=>{ console.log(this.a); //10 } }}obj.b(); obj.c()();
箭头函数当方法使用的时候没有定义this绑定
这句话是MDN里面写的,但是我觉得这条和上条其实是一条,还是捕获所在的上下文,比如下面这个例子:b是一个箭头函数,然后它的 this是指向window,这是为什么呢,因为箭头函数捕获的是obj{}这个对象的环境,然后这个环境的this指向的是window,就相当于上一条的例子:在c方法里面return的那个箭头函数捕获的是c:function(){}这个环境的this,而这个环境的this是obj,这样是不是就清晰明了了
var obj = { a: 10, b: () => { console.log(this.a); //undefined console.log(this); //window }, c: function() { console.log(this.a); //10 console.log(this); //obj{...} }}obj.b(); obj.c();
使用call()和apply()调用
通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this并没有什么影响
var obj = { a: 10, b: function(n){ var f = (v) => v + this.a; return f(n); }, c: function(n) { var f = (v) => v + this.a; var m = {a:20}; return f.call(m,n); }}console.log(obj.b(1)); //11console.log(obj.c(1)); //11
箭头函数没有原型属性
var a = ()=>{ return 1;}function b(){ return 2;}console.log(a.prototype);//undefinedconsole.log(b.prototype);//object{...}
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数不能换行
var a = () =>1; //SyntaxError: Unexpected token =>
对于函数的this指向问题,总结:
箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind(), apply()
普通函数的this指向调用它的那个对象
箭头函数和普通函数的链接:
Vuex的状态管理的原理
状态管理有5个核心,分别是state、getter、mutation、action以及module。
1、state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
3、mutation
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
4、action
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch
5、module
module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
aciton(数据处理)----》派发值mutation----》去触发state的改变
Flex布局
可以看看这个大佬整理的
1.flex-direction决定主轴的方向,即项目排列的方向,有四个可能的值:row(默认)|row-reverse|column|column-reverse
row:主轴为水平方向,项目沿主轴从左至右排列
column:主轴为竖直方向,项目沿主轴从上至下排列
row-reverse:主轴水平,项目从右至左排列,与row反向
column-reverse:主轴竖直,项目从下至上排列,与column反向
2、flex-wrap
默认情况下,item排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式,可能的值nowrap(默认)|wrap|wrap-reverse
nowrap:自动缩小项目,不换行
wrap:换行,且第一行在上方
wrap-reverse:换行,第一行在下面
3、flex-flow是flex-direction和flex-wrap的简写形式,如:row wrap|column wrap-reverse等。默认值为row nowrap,即横向排列 不换行。
4、justify-content
决定item在主轴上的对齐方式,可能的值有flex-start(默认),flex-end,center,space-between,space-around。当主轴沿水平方向时,具体含义为
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space- between:两端对齐
space-around:沿轴线均匀分布
5、align-items
决定了item在交叉轴上的对齐方式,可能的值有flex-start|flex-end|center|baseline|stretch,当主轴水平时,其具体含义为
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline:item第一行文字的底部对齐
stretch:当item未设置高度时,item将和容器等高对齐
6、align-content
该属性定义了当有多根主轴时,即item不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效。align-content可能值含义如下(假设主轴为水平方向):
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space- between:两端对齐
space-around:沿轴线均匀分布
stretch:各行将根据其flex-grow值伸展以充分占据剩余空间
怎么理解同源策略
什么是同源策略?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
不受同源策略限制的:
1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的script,img,link,iframe等。如何跨域
降域 document.domain
此方式的特点:
- 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
- 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
这种方法只适用于 Cookie 和 iframe 窗口。
JSONP跨域
JSONP和JSON并没有什么关系!
JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加script元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。当前项目遇到了哪些问题怎么解决的
跨域请求登录并跳转
幽灵节点