前端面试4

2017-09-11 本文已影响22人卡农me

1.箭头函数使用需要注意的地方
this、new、arguments

this对象的指向是可变的，但在箭头函数中是固定的，指向定义时所在的对象，而非调用时所在的对象
不可以做构造函数，也就是不能使用new，否则抛出一个错误
不可以使用arguments，因为它在函数体内不存在，可以用rest代替
2.将arguments转换为数组

var arr = Array.prototype.slice.apply(arguments)；

可以理解为arguments.slice()（当然arguments里面没有slice方法）

var arr = [...arguments];

3.rest参数
用于获取函数的多余参数,它是一个数组

add(...values){ } //values获取的是add的全部参数
add(arr, ...values){ }//values获取的是剩余的参数

注意：rest参数只能是最后一个参数，否则报错;
rest参数可替代arguments

//arguments变量的写法
const sortNum = () => Array.prototype.slice.call(arguments).sort();
//rest参数的写法
const sortNum = (...numbers) => numbers.sort();

4.扩展运算符...
作用：将数组转换为一个参数序列

//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);

打印： [0, 1, 2, 3, 4, 5]

//使用ES6
var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2);

//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];

console.log(arr1.concat(arr2));

打印： [0, 1, 2, 3, 4, 5]

var arr1 = [0,1,2];
var arr2 = [3,4,5];
[arr1,...arr2];

应用：

解构赋值

const [first, ...rest] = [1,2,3,4,5];
first //1
rest //[2,3,4,5]

*将字符串转换成真正的数组

[...'hello']
//['h','e','l','l','o']

注意：扩展运算符也只能放在最后一位，否则报错
5.当new Foo()时发生了什么

创建了一个新对象
将this指向这个新对象
执行构造函数里面的代码
返回新对象（this）
6.你做过哪些性能优化
网页内容
1.减少http请求（通过合并图片，合并CSS和JS文件）
2.减少DNS的查询（DNS预解析）
3.使用CDN
CSS
1.将样式表置顶
2.少用@import
js
1.使用外部js和css（因为可以被缓存）
2.减少dom操作
7..前端路由的原理
什么是路由？
简单的说，路由是根据不同的 url 地址展示不同的内容或页面
原理：在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。
HTML5 History
两个新增的API： history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。
Hash
就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。
8.call,apply和bind的区别
它们在功能上是没有区别的，都是改变this的指向，它们的区别主要是在于方法的实现形式和参数传递上的不同
①：函数.call(对象,arg1,arg2....)
②：函数.apply(对象，[arg1,arg2,...])
③：var ss=函数.bind(对象,arg1,arg2,....)
我们通过代码来更加明显的区别一下：

 function show(sex){  
            console.log("普通函数"+sex);  
        }  
        var person={  
            name:"aa",  
            age:14  
        };  
        show.call(person,"男");  
        show.apply(person,["女"]);  
        //对于bind来说，用法更加的灵活  
        var ss=show.bind(person,"不明");  
        ss();

通过观察上面的代码，很明显的就可以得出它们三者的区别，仅仅是函数传递的不同以及bind方法可以更加的方便的使用

9.闭包的应用
闭包+函数重写

function foo() {  
     var context=1;
     console.log(context);
     context=2;
      foo = function() {
        console.log(context);
     }
}

foo();

第一次打印1，之后都打印2

// 判断element是否匹配选择器selector
function matchSelector(element, selector) {
    var match = 
        document.documentElement.webkitMatchesSelector || 
        document.documentElement.mozMatchesSelector || 
        document.documentElement.msMatchesSelector ||
        // 兼容IE8及以下浏览器
        function(selector, element) {
            // 这是一个好方法，可惜IE8连indexOf都不支持
            // return Array.prototype.indexOf.call(document.querySelectorAll(selector), this) !== -1;

            if (element.tagName === selector.toUpperCase()) return true;

            var elements = document.querySelectorAll(selector),
            length = elements.length;

            while (length--) {
            if (elements[length] === this) return true;
            }

            return false;
        };

    // 重写函数自身，使用闭包keep住match函数，不用每次都判断兼容
    matchSelector = function(element, selector) {
        return match.call(element, selector);
    };

    return matchSelector(element, selector);
}

前端面试4

猜你喜欢

热点阅读