接上篇面试总结，本文主要作为查漏补缺记录面试review list。

JS基础

• null和undefined区别
• 字符编码(ASCII,Unicode,UTF*8,Base64)
• 闭包（定义、作用）
• 运算符 对象相加过程
• 介绍下原型链（解决的是继承问题吗）
• 标准库toString()、Object.getOwnPropertyDescriptor(obj, ‘a’)、Object.defineproperty()
• 数组
  • push,pop,unshift,shift,reverse,splice,sort
  • contact,slice,map,forEach,every,some,reduce
  • 数组复制
  • 类数组转化为数组（延伸：类数组对象有哪些？nodelist和htmlcollection有哪些区别）
• 面向对象
  • new（实现过程）
  • 不加new后果？如何避免？
  • Object.create()的理解
  • this的实质?javascript为什么要设计this?
  • apply、call、bind手写代码
  • 对象的拷贝
• 严格模式，用处
• setTimeout和setInterval运行机制
• js实现类的继承
• 如何实现深拷贝：1、JSON.parse(JSON.stringify(arr)) 、2、jquery的extends({}, {a:1}) 3、自己用递归实现
• 6种跨域方法
• 正则
  • 零宽断言(?=pattern)、负前瞻(?!pattern)
  • 捕获和非捕获（?:）（(?abc)组名为xlj）
  • 贪婪和非贪婪(默认都是贪婪的，后面加？就是非贪婪。+？、*？、{2,5}?尽可能的少)
  • 反向引用 ‘aabbccddee’.match(/(\w)\1/g)
  • 反义 [^aeiou]、\W \S \D \B
• 常见设计模式7种。工厂模式、单例、策略、装饰者、适配器模式、代理模式、中介者模式、发布/订阅和观察者模式区别在哪，各自用在哪里。
• es6
  • 手写promise、手写Promise.all()，手写Promise.race()
  • promise、async、Generator有什么区别
  • 对async、await的理解，内部原理
  • ES6中的map和原生的对象有什么区别
• 缓存
  • service worker离线缓存应用解决方案
  • 了解pwa原理
• 事件代理原理?如何自己实现？优缺点？

前言：经过了两个月多月的准备，2019年3月我开始发简历面试，地点上海，3.5年前端开发经验。本文主要记录两个内容，1是我面试的一些感受和经验总结，2是我认为前期要做的一些准备。

面试感受总结

1、面试前期准备很重要

尤其是对于我这种代码造诣不深的人，前期准备真的太重要了。记得上一次换工作是一年半以前，我本来想内部trans到百度品专上海的部门，很自以为是的认为内部trans并不需要准备，随便聊聊工作内容就可以了。结果大失所望，问了三题之后，面试官说，我们还要继续吗？当时就恨不得找个地洞钻进去。从那以后我深刻的明白了一个道理：永远不要打没准备的仗，机会永远是留给有准备的人！

2、平时有意识的积累沉淀很重要

平时做业务多的人一般都会犯一个错，喜欢copy自己的或者别人的代码。这种习惯很不好，一定要养成自己的代码自己敲的习惯。

还有一点，面试中一定会问的一个问题，就是你项目的难点，平时遇到难点问题的时候就要记得记录下来，你是怎么解决的，最后落地了没。

最后，关注小组其他同学沉淀的很不错的点，学习、吸收、转化成自己的！借力打力，面试时候也可以拿出来说。

Array.from可通过1、类数组(arguments)2、可迭代对象(set,map)来创建新数组。

1
2

// 后面两个参数可选
Array.from(arrayLike, mapFn, thisArg)

• arrayLike: 必选，1、类数组(argumentg)2、可迭代对象(set,map)。
• mapFn: 可选，相当于Array.from(arrayLike).map(mapFn, thisArg)。
• thisArg: 可选，执行回调函数mapFn时候的this对象。非常有用，利于解耦。可以把被处理的数据和对象分离，thisArg中定义处理函数handle，用来在mapFn中返回调用handle之后的结果。

我们在【从一道面试题说起】闭包&函数柯里化】认识了函数科里化，本文我们来了解下函数反柯里化。

函数反柯里化其实就是把this泛化的过程。

在认识它之前，首先思考一个问题，如何让类数组借用数组的push方法，应该很容易想到,可以借助Array.prototype.push方法。

1
2
3
4

(function() {
    Array.prototype.push.call(arguments, 4);
    console.log(Array.prototype.slice.call(arguments)); // [ 1, 2, 3, 4 ]
})(1,2,3);

某些情况下，函数调用并非是用户自身能控制的，可能会造成性能浪费。

使用场景

window.onresize

监听window的resize事件时，随着浏览器窗口的大小改变，触发的频率非常高。如果在window.resize函数中进行了dom操作，这会对性能造成非常大的浪费，会造成浏览器卡顿。

mousemove

给一个div绑定mousemove事件，那么在鼠标滑动的时候，会频繁触动拖曳事件。

函数节流原理

设置每多少秒才触发一次事件。比如window.resize事件，在1s内会触发10次，实际上我们只需要2-3次，所以我们可以设置每500ms才触发一次。可以借助setTimeout来实现。

代码实现

把下面的代码放浏览器console中，并拖动浏览器窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var throttle = function(fn, interval) {
    var timer = null;
    var self = fn;
    var isFirstTime = true;
    return function() {
        var me = this;
        // 第一次调用，不用节流
        if (isFirstTime) {
            self.apply(me, arguments);
            return isFirstTime = false;
        }
        // 如果上次计时器还在，节流
        if (timer) {
            return false;
        } 
        
        timer = setInterval(function() {
            clearTimeout(timer);
            self.apply(me, arguments);
            timer = null;
        }, interval); 
    }
}

window.onresize = throttle(function() {
    console.log(1);
}, 500);

为更加理解和掌握React Router v4，我在github上创建了demo项目用来实践React Router v4。

介绍

React Router v4是一个完全使用react重写的React包，所有的东西都仅仅是组件。跟react router之前的版本理念都不一样了。

安装

React Router 现在已经被划分成了3个包：react-router，react-router-dom，react-router-native。

不应该直接安装react-router包，这个包为React Router 应用提供了核心的路由组件和函数，另外两个包提供了特定环境的组件（浏览器和 react-native 对应的平台），不过他们也是将 react-router 导出的模块再次导出。

本项目在web中应用，因此使用react-router-dom

1

npm install --save react-router-dom

题目

考查内容

在具体项目中，经常会碰到需要把主业务逻辑和无关功能分开(无关业务逻辑的如日志、处理异常)，这个叫做AOP（面向切面编程)。通过把一个函数动态织入另一个函数来实现。这样的好处是：1、提高了业务代码的纯度，2、非业务代码的高度复用和维护。这种AOP的方式给函数添加职责，也是一种巧妙的装饰者模式实现。

题目描述

实现一个func函数：

• 主业务逻辑 console.log(2);
• 与业务无关逻辑：在主业务逻辑之前console.log(1)；在主业务逻辑之后输出console.log(3)。

在调用func()的时候依次输出1，2，3。

思路

扩展Function的方法：before和after，before中先执行bofore中的与业务无关逻辑，再执行主业务逻辑；after相反，先执行当前主业务逻辑，在执行与业务无关逻辑。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Function.prototype.before = function(fn) {
    var self = this; // 保存当前的func
    return function() {
        fn.apply(this, arguments); // 执行before中的入参函数
        return self.apply(this, arguments) // 执行并返回当前函数
    }
}

Function.prototype.after = function(fn) {
    var self = this; // 保存当前的func
    return function() {
        var ret = self.apply(this, arguments) // 执行当前函数
        fn.apply(this, arguments); // 执行after中的入参函数
        return ret;
    }
}

var func = function() {
    console.log(2);
};

func = func.before(function() {
    console.log(1);
}).after(function() {
    console.log(3);
});

func();

bind用来绑定函数内部的this指向。在某些浏览器不支持的情况下，需要polyfill自行去实现。

思路

先把调用bind的函数保存起来，在调用func()的时候执行bind中的闭包函数，返回func函数调用后return的值。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Function.prototype.bind = function(context) {
    var self = this;
    return function() {
        return self.call(context, arguments);
    }
}
var obj = {
     name: 'xlj'
};

var func = function() {
    return this.name;
}.bind(obj);

console.log(func());

下面实现的难一点，在bind和func中都传入参数，bind(obj, 1, 2)，func(3,4)，要求输出[1,2,3,4].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Function.prototype.bind = function() {
    var self = this;
    var context = [].shift.call(arguments);
    var args = [].slice.call(arguments);
    return function() {
        return self.call(context, [].concat.call(args, [].slice.call(arguments)));
    }
}
var obj = {
     name: 'xlj'
};

var func = function() {
    console.log(this.name);
    console.log(arguments[0]);
}.bind(obj,1,2);

func(3,4);

判断数组中是否含有某个值，返回true/false

用法

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

• searchElement：需要查找的元素值
• fromIndex: 从某个索引开始查找(可选)。如果为负，从array.length + formIndex处开始查，并跟0比取最大值。默认为0.

思路

• formIndex如果大于等于数组长度Array.length, 不查下去，return false。
• 数组长度AArray.length为0, 不查下去，return false。
• 设置开始循环判断的k值，默认为k为formIndex || 0，若formIndex小于0，k取formItem+Array.length和0相比的较大值。
• 从k处循环，直到k >= length跳出循环。判断如果数组中有值和searchElement相等，return true。

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {
        if (this === null) {
            throw new typeError('"this" is null or undefined');
        }
        const o = new Object(this);
        const length = o.length;
        fromIndex = fromIndex || 0;
        if (fromIndex >= length) {
            return false;
        }
        if (length === 0) {
            return false;
        }
        let k = fromIndex;
        if (fromIndex < 0 ) {
            k = Math.max(fromIndex + length, 0);
        }
        while(k < length) {
            if (o[k] === searchElement) {
                return true;
            }
            k++;
        }
        return false;
    }
})

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const includes = require('./index');
test('if formIndex greater than length , return false', () => {
    expect([1,2,3].includes(1, 100)).toBeFalsy();
})

test('if length of array === 0, return false', () => {
    expect([].includes(1)).toBeFalsy();
}) 

test('formIndex < 0', () => {
    expect([1,2,3].includes(1, -100)).toBeTruthy();
    expect([1,2,3].includes(3, -2)).toBeTruthy();
    expect([1,2,3].includes(1, -2)).toBeFalsy();
})

test('[1,2,3] includes 1', () => {
  expect([1,2,3].includes(2, 1)).toBeTruthy();
})

题目

考察内容

闭包，函数柯里化

题目描述

• 写一个func函数，调用func(-, b, c)(a)，按照顺序输出a,b,c
• 写一个func函数，调用func(-, b, c)(a)()，按照顺序输出a,b,c

代码

1
2
3
4
5
6
7
8
9
10
11
12
13

// func(-, b, c)(a)，按照顺序输出a,b,c
function f() {
    let args = [].slice.call(arguments);
    let str = args.join('');
    const i = str.indexOf('-');
    if (i >= 0) {
        return function(x) {
            args.splice(i,1,x);
            return args.join('');
        }
    }
}
console.log(f(1,'-', 3)(2))