博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
博彦科技面试
阅读量:5341 次
发布时间:2019-06-15

本文共 4427 字,大约阅读时间需要 14 分钟。

博彦科技面试

该公司使用的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

此方式的特点:

  1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
  2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
  3. 这种方法只适用于 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数据形式作为参数传递,完成回调。

    当前项目遇到了哪些问题怎么解决的

    跨域请求登录并跳转

    幽灵节点

转载于:https://www.cnblogs.com/yhbh/p/10642837.html

你可能感兴趣的文章
freeswitch编译
查看>>
Validate Binary Search Tree
查看>>
Largest Divisible Subset
查看>>
win8改win7笔记
查看>>
MYSQL 数据导入导出LOAD DATA AND OUTFILE
查看>>
mysql中两表更新时产生的奇葩问题,产生死锁!
查看>>
Python正则表达式
查看>>
celery使用
查看>>
如何在win2003下安装sql2008[多次安装sql2008失败者必看]
查看>>
[C++]C++学习笔记(四)
查看>>
Vue 不睡觉教程1-从最土开始
查看>>
IT技术栈、JAVA技术栈、游戏开发技术栈
查看>>
浏览器百度点击第二页时仍然跳转到第一页
查看>>
EXTI—外部中断/事件控制器
查看>>
全本软件白名单 Quanben Software Whitelist
查看>>
Android4.4新的特性,在应用内开启透明状态栏和透明虚拟按钮。
查看>>
JS 书籍拓展内容
查看>>
WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮
查看>>
用css3和javascript做的一个简单的计算器
查看>>
[转]AI+RPA 融合更智能
查看>>