博彦科技面试

news/2024/11/28 13:35:58/

博彦科技面试

该公司使用的Vue项目中es6主要用到了哪些?

let
const
import 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); //undefinedconsole.log(this); //window},c: function() {console.log(this.a); //10console.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)); //11
console.log(obj.c(1)); //11
箭头函数没有原型属性
var a = ()=>{return 1;
}function b(){return 2;
}console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数不能换行
var a = ()=>1; //SyntaxError: Unexpected token =>

对于函数的this指向问题,总结:

箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind(), apply()

普通函数的this指向调用它的那个对象

箭头函数和普通函数的链接:https://www.jianshu.com/p/73cbeb6782a0

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布局

可以看看这个大佬整理的 https://www.cnblogs.com/nuannuan7362/p/5823381.html
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


http://www.ppmy.cn/news/957461.html

相关文章

博彦科技笔面试题

19/3/27下午参加了博彦(西安)的Java技术岗笔试 题目比较简单,不过对我来说有些难,Java好久没碰过了。 根据后序和中序序列重建树,本来会的,但是做错了(遗憾)。 数据库操作有一个统计…

【Hive实战】Hive的事务表

Hive Transactions 在升级到Hive 3之前,需要把在事务表上Major Compaction。主要是为了合并掉增量文件。更准确地说,自上次Major Compaction以来在其上执行过任何更新/删除/合并语句的任何分区都必须进行另一次Major Compaction。在 Hive 升级到 Hive 3 …

复旦版 ChatGPT 正式开源,太强了!!

点击上方“Java基基”,选择“设为星标” 做积极的人,而不是积极废人! 每天 14:00 更新文章,每天掉亿点点头发... 源码精品专栏 原创 | Java 2021 超神之路,很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应…

78、分布式事务解决方案

分布式事务解决方案 XA规范: 分布式事务规范,定义了分布式事务模型 四个角色: 事务管理器(协调者TM)、资源管理器(参与者RM),应用程序AP,通信资源管理器CRM 全局事务:一个横跨多个数据库的事务,要么全部提交、要么全部回滚 JT…

Chatgpt AI聊天实现,技术NodeJs+uni-app+eventsource,流式响应,支持上下文聊天

前端程序员的AI聊天小应用体验分享 最近空闲出点时间,作为一名前端程序员,我一直对人工智能(AI)技术充满了好奇和热情。最近,我开发了一个AI聊天小应用,大家想体检的可以私聊我或者V:155278082…

altium designer OUTPUT FILE Analysis

设计完PCB后,会导出相关光绘文件发给板厂打板,针对AD导出的各个光绘文件,我记录下了它们各个文件对应的层如下: GTL: Top Layer 顶层线路 GBL: Bottom Layer 底层线路 G1,G2… : Mid Layer 1, 2, … 中间信号层 GP1,GP2…: Internal Plane Layer 1, 2, …内电层 G…

DAppStore率先集成ChatGPT助力App安全开发

人工智能技术发展与应用拓展正暴风式席卷全球,为数字化转型升级带来全新机遇。DAppStore率先集成ChatGPT ,将ChatGPT和移动安全领域的众多场景结合起来,提供安全开发指南和安全代码示例,帮助开发者提升App安全防护能力。 近日,Cha…

ChatGPT自动开发SwiftUI App

ChatGPT 是 OpenAI 的一个演示项目,可以就许多话题进行对话。包括编程。 让我们逐步了解它,好吗? ChatGPT 从这一点开始接下来的一切都是我的输入提示,然后是 ChatCGP 的响应,并附有示例代码。 嘿 ChatGPT,你能制作一个包含名称、地址、城市、州和邮编字段的 SwiftUI …