面试中的问题总结

第一家公司：

上海莘亮网络科技有限公司

问题：1数据内嵌了解多少

            2.熟悉php框架thinkcmf

            3.商城站的数据一般不用本地存储做，正式做项目还是用ajax

 

 

第二家公司  

上海宝朔科技有限公司

 

       第一部分：

        笔试：

 

            1.es6,css3,html5有哪些新特性

            2.什么是模块化。对三大框架的了解

            3.写一个闭包的例子，并说明闭包的好处

            4.前端如何保证性能

            5.如何保证网站的安全

            6.编写一个随机函数，要求返回["a","b","c","d","e"]中的其中一个，他们对应的概率分别为[10,20,15,40,15]

                

            7.编写一个javascript函数fn，该函数有一个参数n数字类型，其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2,32]

 

口试：1.vue两个页面间值的传递通过什么可以实现。

 

 

详解vuejs几种不同组件（页面）间传值的方式

作者：ygtq
本篇文章主要介绍了详解vuejs几种不同组件（页面）间传值的方式，具有一定的参考价值，有兴趣的可以了解一下
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。
一、路由传值
路由对象如下图所示：
在跳转页面的时候，在js代码中的操作如下，在标签中使用<router-link>标签
this.$router.push({


            name: 'routePage',


            query/params: {


              routeParams: params


            }


          }) 
需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。
这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。
二、通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法
通过下面的方法调用：
this.$parent.$data.id //获取父元素data中的id


this.$children.$data.id //获取父元素data中的id 
这样用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难
三、通过eventBus传递数据
使用前可以在全局定义一个eventBus
window.eventBus = new Vue(); 
在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）
eventBus.$emit('eventBusName', id); 
在需要接受参数的组件重，用on接受该值（或对象）
//val即为传递过来的值


eventBus.$on('eventBusName', function(val) {console.log(val)}) 
最后记住要在beforeDestroy()中关闭这个eventBus

eventBus.$off('eventBusName'); 

 

2.var a=="1"&&a=="2"&&a=="3"   在a为什么的时候才为真

const a = {
  i: 1,
  toString() {
    return this.i++;
  }
}
if(a == 1 && a == 2 && a == 3) {
  console.log('Hello World!');
}
// 结果: 页面弹出 " Hello World! "

3，你写过的动画方式有哪些？       实例：三角形的制作，两种方法 

第一种：利用html+css来实现：div给id="demo"

   

第二种：通过css3动画控制边框来做三角形。

    

 

 你觉得哪些项目适合vue框架？

答：1、数据信息量比较多的，反之类似企业网站就无需此框架了。
2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli+webpack后的前端目录，非常有利于项目的跨平台部署。


mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷


怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 
答：在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id

eval是做什么的
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。属于内置函数

    eg:>>> eval('pow(2,2)')4>>> eval('2 + 2')4>>> eval("n + 4")85

    

        将字符串转成相应的对象（如list、tuple、dict和string之间的转换）

>>> a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]"
>>> b = eval(a)

缺点是：安全性是其最大的缺点。box-sizing的属性有哪些，分别有什么作用。
    

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了。

eg：左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决
web应用从服务器主动推送date到客户端有哪些方式？

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通讯协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    Comet的方式比较适合，也有相应的实现框架，实现成本最低

    
css有哪些属性，哪些可以继承

 

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

 

js冒泡和捕获的区别，如何阻止冒泡和捕获事件？

 

 

 

事件冒泡是一个从子节点向祖先节点冒泡的过程；

 

 

事件捕获刚好相反，是从祖先节点到子节点的过程。

阻止事件冒泡方法：

法1：当前点击事件中return false;

         $('#clickMe').click(function(){
alert('hello');

                               return false;
});

法2：$('#clickMe').click(function(event){
alert('hello');

                                var e = window.event || event;

if ( e.stopPropagation ){ //如果提供了事件对象，则这是一个非IE浏览器
  e.stopPropagation();
}else{
        //兼容IE的方式来取消事件冒泡
  window.event.cancelBubble = true;
}
});

 

 

session,cookie,sessionStorage,localStorage的区别。

 

 

    

一、cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

     Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

　　　　　　原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

　　　　（2）保存上次登录的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

　　（1）网上商城中的购物车

　　（2）保存用户登录信息

　　（3）将某些数据放入session中，供同一用户的不同页面使用

　　（4）防止用户非法登录

 7、缺点：cookie：（1）大小受限

　　　　　　　　（2）用户可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性较低

　　　　　　　　（4）有些状态不可能保存在客户端。

　　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。

　　　　　　　　（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

 　　　　session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

　　　　　　　　（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

　　　　　　　　（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

 

     cookie在浏览器和服务器间来回传递。 

 

    

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

　　　　　　  sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

　　　　setItem (key, value) ——  保存数据，以键值对的方式储存信息。

      　　 getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        　　clear () ——  删除所有的数据

        　　key (index) —— 获取某个索引的key

 

 

 

essionStorage和localStorage不会     sessionStorage和localStorage的存储空间更大；

    



数组和字符串的截取方法及用法？

字符串：

slice()、substr()、substring()

这三个方法都会返回被操作字符串的一个子字符串。可以接收两个参数，用来表示子字符串的开始位置和结束位置。

slice()和substring()第二个参数指定的是子字符串最后一个字符后面的位置，也就是截取的子字符串中不包含该位置的字符。
substr()第二个参数指定的是子字符串的长度。

如果给的参数是负数：
slice() 会将传入的负值与字符串的长度相加；
substr() 会将负的第一个参数加上字符串的长度，而将第二个负的参数转换为0；
substring() 会将所有的负值参数都转换为0。会自动将小的参数作为开始位置，大的参数作为结束位置。
angular，react和vue的区别？

 

 

数组

 

 

 

（2）slice()

从当前数组中截取一到多个项创建一个新数组。接收一或两个参数，即要返回项的起始和结束位置，但不包括结束位置的项。如果只有一个参数，则是从起始位置到数组末尾的所有项。

 

如果slice()的参数中有一个是负数，则用数组的长度加上该数来确定相应的位置。如果结束位置小于起始位置，则返回空数组。

（3）splice()
splice()方法可以对数组项进行删除、替换、插入操作。
删除：需要指定2个参数，要删除的第一项的位置和要删除的项数。如splice(1, 2);
插入：需要指定3个参数，起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以继续传入第4、第5、...、第n个项。
替换：需要指定3个参数，起始位置、要删除的项数和要插入的任意数量的项。可以向指定位置插入任意数量的项，且同时删除任意数量的项。

splice()方法始终会返回一个数组，该数组包含从原始数组中删除的项，如果没有删除的项，则返回一个空数组。

position有哪些值，分别基于什么定位？

position定位有一个默认的属性值：static。但是它常用的属性还是以下3个：relative、fixed、absolute。

 

 

relative：

 

 

如果仅仅是像这样：position:relative; 那么它的表现是和static一样的。需要加top、right、bottom、left来使其偏离正常位置。注意：relative不会使元素脱离文档流，也就是其他的元素不会调整位置来弥补它偏离后剩下的空隙。

fixed：

fixed是相对于浏览器可视窗口来定位的，即使是页面滚动，fixed定位的元素还是会停留在原来的位置。注意：fixed会使元素脱离文档流，也就是其他元素会填充它偏离后在页面中原本位置的空隙。

absolute：

absolute是相对于它最近的已定位的祖先元素，如果没有，那么它就是相对于body元素定位。注意：absolute会使元素脱离文档流。

怎么对JSON对象进行深拷贝？

 

 

解决的办法有：

 

 

1.用jquery的extend方法，把对象合并到新的对象去，会返回一个深层次的副本。 
2.使用JSON的序列化，var b = JSON.stringify(a); 在反序列化：JSON.parse(b);

//这个函数可以深拷贝 对象和数组
var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

 

 

写一个方法对下面的数组进行排序去重。arr=['1','5','1','2','10','32','34']

注意的是：先去重，然后排序

 

 

 

 

 

    

利用对象对数组进行去重排序

原创 2018年03月07日 20:28:32

• 65

var arr = [1,5,8,4,3,8,7,1,6,2]
var obj = {}
for(let i = 0; i < arr.length; i++)
{
obj[arr[i]] = arr[i]
}

Object.values(obj)

    去重的想法是将数组中的值作为对象的属性，因为属性值不可以重复，所以当设置重复的属性后后将之前设定的属性值覆盖，然后利用Object将对象中的值拿出来，系统会默认从小到大的方式排序。

 

vue中数据是如何绑定的，v-if v-show的区别，除此以外写出至少3中指令及其用法。

 

 

 

数据绑定，v-bind, v-model(修饰符)

 

 

 

 

修饰符

• .lazy：添加该修饰符，从而转变为在 change 事件中同步，而非input事件！请查看： change和input区别
• .number：将用户的输入值转为 Number 类型
• .trim：自动过滤用户输入的首尾空格

    

v-if 控制显隐方式 
v-if 是惰性的，如果初始渲染的条件为假，那么什么事情都不做，在第一次变为真的时候才开始局部渲染。这就导致当条件为假的时候在条件块里面的子组件不会被渲染，而且时间监听器也不会生效。当条件切换时会有销毁、重建的过程，所以说，v-if才是真正的条件渲染

二、v-show控制显隐方式 
v-show其实是通过控制节点css属性中的display：none与否来控制是否显示。所以v-show无论条件真假都会进行编译并且保留编译，只是简单基于css切换

总结： 
1、根据对比可知，v-if有更高的切换消耗，v-show有更高的初始渲染消耗。因此，如果需要频繁切换就采用v-show，如果运行条件不太可能改变，就采用v-if 
2、v-if与v-else搭配，v-show也可以使用取反来模拟

v-on,v-for,v-else

使用过element.ui吗，说下其中两个组件的使用方法？
 

elementUI select组件使用详解

• 动态生成option选项
• option选项绑定对应的文本值和value值
• 作为表单项目，新增、编辑功能
• 对选项改变后触发相关事件

 

请详细说下你对vue生命周期的理解？






上海爽车面试题

1、是否在开发过程中封装过组件？如有封装，简单介绍下。分页组件会如何设计

2、js有多少种继承

 

 

 

3、jsonp的实现原理(axiso) 

 

 

 

    script

    url='https://ww.baidu.com/index.php?a=1&b=2&callback=fn'

    回调函数
    function fn(data){
        console.log(data);
    }
    axiso.get().then()
    



4、(a) => (b) => { return a +b; } 是指？
    闭包
    function aa(a){
        function bb(b){
            return a+b;
        }
    }
5、上传的实现原理

    input:file   url    fileReader对象


function readAsText(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以文本形式读入页面
    reader.readAsText(file);
    reader.οnlοad=function(f){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML=this.result;
    }

 

}

中国联通太原分公司面试题

 1.请罗列你知道的display的属性与意义？

2.三角形使用css来实现

3.使用js来实现一个选择排序

4.console.log(2<<5)的输出值是什么

5.如何用js来阻止事件的冒泡

6.简述js的垃圾回收机制

7. 代码实现深拷贝与浅拷贝

8. this与Jqery中的$(this)关键字有何不同

9。什么是跨域，跨域请求资源的方式有哪些？

10.兄弟组件之间的传递

11.call和apply之间的区别

12.闭包的作用，写个例子

13.说说你对模块化的理解

14.说说你对MVC的理解

15.面对新的知识点，你是如何学习快速上手的。 

 

 

山西和合通科技有限公司

1.jquery的$()是什么？

2.如何找到所有的HTML中的select 标签的选中项？

3.$(this)和this关键字在jquery的有何不同？

4.写出一个简单的$.ajax()的请求方式？

5.写一个function,清除字符串前后的空格，(兼容所有的浏览器)

6.使用正则表达式验证邮箱？

7.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

8、右边宽度固定，左边自适应，两种方法DIV+CSS?

9.vue-router是什么，有哪些组件？

10.请说下封装vue组件的过程？

11.说出至少四种vue当中的指令

以及它的用法？

12.用javascript中实现一个方法，去除一个数组中的重复元素，给的数组是[0，2，3，4，4，0，2]

13.请描述出未来五年的职业及人生规划？