前端面试题（二）

1.Vue中watch、methods 和 computed 的区别?

• watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
• methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。

2.vue-router 有哪些钩子函数?

• 全局前置守卫 router.beforeEach
• 全局解析守卫 router.beforeResolve
• 全局后置钩子 router.afterEach
• 路由独享的守卫 beforeEnter
• 组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

3.说一下 Vue 和 React 的认识，做一个简单的对比

（1）监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的劫持，能精确快速的计算出 Virtual DOM 的差异。这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
• React 默认是通过比较引用的方式进行的，如果不优化，每当应用的状态被改变时，全部子组件都会重新渲染，可能导致大量不必要的 VDOM 的重新渲染。

      Vue 不需要特别的优化就能达到很好的性能，而对于 React 而言，需要通过 PureComponent/shouldComponentUpdate 这个生命周期方法来进行控制。如果你的应用中，交互复杂，需要处理大量的 UI 变化，那么使用 Virtual DOM 是一个好主意。如果你更新元素并不频繁，那么 Virtual DOM 并不一定适用，性能很可能还不如直接操控 DOM。

      为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。

（2）数据流的不同

• Vue 中默认支持双向绑定，组件与 DOM 之间可以通过 v-model 双向绑定。但是，父子组件之间，props 在 2.x 版本是单向数据流
• React 一直提倡的是单向数据流，他称之为 onChange/setState()模式。

（3）模板渲染方式的不同

在表层上，模板的语法不同

• React 是通过 JSX 渲染模板
• 而 Vue 是通过一种拓展的 HTML 语法进行渲染

在深层上，模板的原理不同，这才是他们的本质区别：

• React 是在组件 JS 代码中，通过原生 JS 实现模板中的常见语法，比如插值，条件，循环等，都是通过 JS 语法实现的
• Vue 是在和组件 JS 代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

4.请用js去除字符串空格？

方法一：使用replace正则匹配的方法

去除所有空格: str = str.replace(/s*/g,"");      

去除两头空格: str = str.replace(/^s*|s*$/g,"");

去除左空格： str = str.replace( /^s*/, “”);

去除右空格： str = str.replace(/(s*$)/g, "");

str为要去除空格的字符串，实例如下：

var str = " 23 23 ";
var str2 = str.replace(/s*/g,"");
console.log(str2); // 2323

方法二：使用str.trim()方法

str.trim()局限性：无法去除中间的空格，实例如下：

var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(str2);   //xiao  ming 

同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。

方法三：使用jquery,$.trim(str)方法

$.trim(str)局限性：无法去除中间的空格，实例如下：

var str = "   xiao  ming   ";
var str2 = $.trim(str)
console.log(str2);   //  xiao  ming

 

5.你如何获取浏览器URL中查询字符串中的参数？

测试地址为：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

实例如下：

function showWindowHref(){
    var sHref = window.location.href;
    var args = sHref.split('?');
    if(args[0] == sHref){
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0;i< arr.length;i++){
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming

 

6.js 字符串操作函数

    concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

    indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。

    charAt() – 返回指定位置的字符。lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。

    match() – 检查一个字符串是否匹配一个正则表达式。

    substr() 函数 -- 返回从string的startPos位置，长度为length的字符串

    substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

    slice() – 提取字符串的一部分，并返回一个新字符串。

    replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

    search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。

    split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

    toLowerCase() – 将整个字符串转成小写字母。

    toUpperCase() – 将整个字符串转成大写字母。

7.怎样添加、移除、移动、复制、创建和查找节点？

 1）创建新节点

　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

8.写出3个使用this的典型应用

（1）、在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

（2）、构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）、input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

(4)、apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

 

9.什么是跨域？跨域请求资源的方法有哪些？

什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

     网络协议不同，如http协议访问https协议。

     端口不同，如80端口访问8080端口。

     域名不同，如qianduanblog.com访问baidu.com。

     子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。域名和域名对应ip,如www.a.com访问20.205.28.90.

跨域请求资源的方法：

(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

实例如下：

<script>
    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺点：

　　1、这种方式无法发送post请求（这里）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

10.JavaScript中如何检测一个变量是一个String类型？请写出函数实现

方法1、

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}

方法2、

function isString(obj){
    return obj.constructor === String? true: false;
}

方法3.

function isString(obj){
     return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如：
var isstring = isString('xiaoming');
console.log(isstring);  // true