前端面试中踩中的雷（持续更新）

1、metadata有没有了解

元数据指用来描述一个文件的特征的系统数据，诸如访问权限、文件拥有者以及文件数据块的分布信息(inode...)等等。在集群文件系统中，分布信息包括文件在磁盘上的位置以及磁盘在集群中的位置。用户需要操作一个文件必须首先得到它的元数据，才能定位到文件的位置并且得到文件的内容或相关属性。

 

2、map有没有了解

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

 

3、vue中组件之间怎么传值

父组件向子组件传递数据

在 Vue 中，可以使用 props 向子组件传递数据。

子组件部分：

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值，就需要使用 props: ['logo']

在 props 中添加了元素之后，就不需要在 data 中再添加变量了

 父组件部分：

在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

 

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

 

子组件向父组件传递数据

 子组件主要通过事件传递数据给父组件

子组件部分：

 

这是 login.vue 的 HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue

首先声明一个了方法 setUser，用 change 事件来调用 setUser

在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username

其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件 

父组件部分：

在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

 

子组件向子组件传递数据

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

 

4、vue中怎样和后台交互

使用axios组件/get/post/jsonp

 

5、怎样判断一个字符串是不是json格式的

function isJsonString(str) {
        try {
            if (typeof JSON.parse(str) == "object") {
                return true;
            }
        } catch(e) {
        }
        return false;
    }

更好的方法：

var isJson = typeof (comein) == "object" && Object.prototype.toString.call(comein).toLowerCase() == "[object object]" && !comein.length;

 

6、字符串和json之间的转换

字符串转json:

JSON.parse(text[, reviver])

参数说明：

• text:必需， 一个有效的 JSON 字符串。
• reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

返回值：

返回给定 JSON 字符串转换后的对象。

json转字符串：

jsonStr.stringify()

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

• value:

  必需， 要转换的 JavaScript 值（通常为对象或数组）。

• replacer:

  可选。用于转换结果的函数或数组。

  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

• space:

  可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

•  

7、数组中怎样删除一个值

array.split('obj',length)

 

8、判断对象是否为空

JSON.parse(obj)?false:true;

 

9、promise用法

var p1 = new Promise(test)

var p2 = p1.then(function(result){

 console.log('成功',+result);

})

var p3 = p2.catch(function(reason){

console.log('失败',reason);

})

 

10、学习pipeline: es6-> typescript -> angular2(基于面向对象)

 

11、vue中8个时间周期

 

12、代码设计模式

13、页面里有10000个按钮，怎样给他们设置监听事件？

14、判断获取的元素是不是button(e.target.tagName)

15、http和https的区别

16、怎样判断执行的是自己页面的脚本

17、ES6和ES5的区别

 

12、有没有用过bundle.js 和js节流

bundle.js:webpack里打包用的

js节流：是一种编程思想。当鼠标一直拖动，或者页面一直在刷新时，可以在点下一次之后等待一段时间再响应第二次。