前言

这是6月前端面试最后一篇文章了，因为我的技术栈是react，下面都是面试官面对面问的一些问题的记录～

react

react的生命周期

MOUNTING：

• mountComponent 负责管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。

由于 getDefaultProps 是通过构造函数进行管理的，所以也是整个生命周期中最先开始执行的。 而 mountComponent 只能望洋兴叹， 无法调用到 getDefaultProps。 这就解释了为何 getDefault-Props只执行一次。

RECEIVE_PROPS：

• updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponent- Update、componentWillUpdate、render 和 componentDidUpdate。

UNMOUNTING：

• unmountComponent 负责管理生命周期中的 componentWillUnmount

组件的生命周期在不同状态下的执行顺序。

• 当首次挂载组件时， 按顺序执行 getDefaultProps、 getInitialState、 componentWillMount、render 和 componentDidMount。
• 当卸载组件时，执行 componentWillUnmount。
• 重新挂载组件时，此时按顺序执行 getInitialState、componentWillMount、render 和componentDidMount，但并不执行 getDefaultProps
• 再次渲染组件时，组件接受到更新状态，此时按顺序执行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate

前言

上一篇文章，写了一些出去面试会考到的笔试题，不是很全(哈哈哈，基本上都是靠脑子记的，有些都忘记了～)

传送门在这里：2018年6月前端面试经历(上)～～～

这篇我会写出一些我碰到的算法题，解法不统一，希望大家能多多的提供自己的想法和代码～

算法题

1）快速排序

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
29
30
31

思路:
- 随机选择数组中的一个数 A，以这个数为基准
- 其他数字跟这个数进行比较，比这个数小的放在其左边，大的放到其右边
- 经过一次循环之后，A 左边为小于 A 的，右边为大于 A 的
- 这时候将左边和右边的数再递归上面的过程
const Arr = [85, 24, 63, 45, 17, 31, 96, 50];
function quickSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    let pivotIndex = Math.floor(arr.length / 2);
    let pivot = arr.splice(pivotIndex, 1)[0];
    let left = [];
    let right = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    // 递归
    return quickSort(left).concat([pivot], quickSort(right));
}
console.log(quickSort(Arr));
ps:
这是阮老师的一个快排写法，网上对于这个的争论很多，第一说了阮老师不应该用splice去取值，应该用下标，还有就是不应该每次都从新开俩个新数组。
其实我觉得算法题重要的是思路，实现的方式有很多，不一定说谁对谁错，效率越好的算法的确是我们想要的，但是更多的理解一些不同的实现思路，我觉得也是可以的～。

这里是不同的声音： 面试官：阮一峰版的快速排序完全是错的

前言

坐标：杭州 。自己从事前端工作差不多2年，本人不是科班出身，算是一个小菜鸡到现在刚入门吧。2年前去面试，因为技术菜，其实公司并没有怎么去了解我的技术，主要还是看个人的态度和学习能力，所以很感谢前面的俩个老东家，把我这个小菜鸡带入门了。今年，在上一个东家做的项目差不多也成型了，发现自己也到了一个一个瓶颈期吧，所以出来闯闯看。
出去面试其实就是一个快捷径去认识到自己的不足，希望能给和我一样在面试的江湖人一点小小的抛砖引玉吧。

笔试题

1）js的继承是什么？原型链？

1
2
3
4
5
6

function super (){
        this.a = '1'
    }
    function sub (){  
        super.call(this)
    }

或者

1
2
3

function sub (){...}
sub.prototype = new super();
//直接在他的原型上new一个super的实例。

在new的过程中，发生了，改变this的指向，执行super里面的代码，返回一个新的函数。

es6的继承方法。

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

class sub extends super(){
    constructor(){
        //super()和super(props)的区别
        super() // cosole.log(this.props)  undifined
        super(props) // console.log(this.props) //打印出定义好的props
        
        // super() 它在这里表示父类的构造函数，用来新建父类的this对象。
        //子类必须调用这个方法，不然继承的话会报错。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
        //这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
        //得到与父类同样的实例属性和方法，然后再对其进行加工，
        //加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
        }
        // constractor一定是必要的吗？
        // 答 是的，就算你不声明，也会隐式的把你声明好一个空的constractor。

零配置的打包工具

在我们日常过工作中会用到webpack或gulp等打包工具，这些得力的打包工具带来工作的流程化和便捷的同时还有复杂繁琐的各种配置，是我快速开始工作之前的必经之路。

parcel打造零配置，只需要你把它加入到你的项目中即可。

1

parcel index.html

file-watch这个插件，我们在项目开发中基本上都会用，它会帮助我们监听文件的变化从而重启项目。但是如果项目大了的话，重启1次是一件很耗时的事情。parcel利用worker进程并行编译你的代码，利用现代多核处理器。这是因为它在初始化构建的时候有一个巨大的加速度，它还有一个文件系统缓存，它为更快的后续启动节省了每个文件的编译结果。

前言

计算属性在vue官方文档里简单的介绍了一下，可自定义一个函数去作用属性，说是提供的函数将作用属性的getter函数。其实，底层的实现原理并没有那么简单，用到了闭包,Object.defineProperty,观察者模式

1.首先是要了解Js的新特性。Object.defineProperty这个属性的getting和setting方法。

1
2
3
4
5
6
7
8
9

var obj = {}
Object.defineProperty(obj,'a',{
    get:function(){
        console.log("getting the a")
        return 1;
    }
})
console.log("this a is:",obj.a)

前言

博主之前一直用的react的技术栈，新东家全部吧react的改版称vue，所以现在开始学习。本文仅记录心路历程。

vue和react比较

在我看来react是一个纯view的的展示层，写多了react基本上我很少回去用到react的生命周期和用class生命出来的组件。纯纯的把react做成了html的模板。数据基本上是交给redux去全局管理，其实不用redux也是可以的，自己去定一个全局的变量，自己写方法去修改，其实也是看你怎么去做这个项目。
相比较vue，第一个就是问题就是如何处理一个组件。
先说说看react的组件思路，先写一个function直接去返回html，然后把需要的参数传入就行了。
vue的数据绑定，必须要绑定在html的标签上的。用vue的语法，传参可以规范传参数（就是去定义参数的类型，和自定义参数的类型去校验）相比之下react的参数定义需要引入一个模块（props-type去定义参数）。因为vue自带v-model的双向数据绑定。我这几天没有用这个语法，绑定子引响父全靠回调函数，父引响子基本上靠props。
在react里这么写感觉没有什么问题，但是在vue里这么写，不知道为什么觉得有点蠢。还有就是在data的一个参数要粗发页面刷新，如果这个参数是一个对象，你改变的是比较深层的东西的时候，我发现并没有出现刷新。
我猜测啊，可能是vue觉得我这个参数并没有发生变化，只是做了一个简单的浅比较。所以我的解决办法就是把这个参数要改的地方改掉后，把这个参数重新赋值一遍，这样就可以刷新页面了。

还有的体会就是vue的@router挺好用的，在react的用react-router还要自己手动去引，vue都已经帮我们全家桶了。

现在有几个问题需要接下里去了解的：
1.vue的生命周期到底有什么用？
2.全局一个类似store的对象就可以去电vuex的存在？
3.vue的渲染机制是什么？深层对象的变化问题？
4.v-model如何在组件里也用的得心应手？（在自己写的组件中，v-model没用到，因为感觉不知道怎么去绑定。）

JQuery的extend扩展方法：
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。

一、Jquery的扩展方法原型是:

1

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用

1

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3…进行合并，然后将合并结果返回给newSrc了。如下例：

1

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果：

1

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

• 本文是一篇译文，原文是在 Preethi Kasireddy’sJavaScript Modules: A Beginner’s Guide (翻墙更快哟～)，感谢大神的分享！比心

如果你是一个新的JavaScript，诸如“模块与模块的装载机，“Webpack vs. Browserify”和“AMD与CommonJS可以迅速成为压倒性的。

JavaScript模块系统可能是令人生畏的，但是理解它对于Web开发人员来说是至关重要的。

在这篇文章中，我会将这些流行语你在平原英语（和一些示例代码）。我希望你觉得有用！

注意：为了简单起见，这将分为两部分：第1部分将深入解释什么是模块以及为什么我们使用它们。第2部分（下星期发布）将介绍捆绑模块的含义和不同的方法。

1.don元素

在react中，到处都是可以复用的元素，这些元素并不是真实的实例，它只是让react告诉开发者想要在屏幕上显示什么。我们无法通过方法去调用这些元素，他们只是不可变的描述对象

2.组建元素

这也是 React 的核心思想之一。因为有公共的表达方法，我们就可以让元素们彼此嵌套或混合。这些层层封装的组件元素，就是所谓的 React 组件，最终我们可以用递归渲染的方式构建出完全的 DOM 元素树。

JSX 将 HTML 语法直接加入到JavaScript代码中，再通过翻译器转换到纯 JavaScript后由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。尽管JSX是第三方标准，但这套标准适用于任何一套框架。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42

//JSON-dom
const DeleteAccount = () => 
({  type: 'div',  
    props: {    
        children: [{   
            type: 'p',
                props: {  children: 'Are you sure?',
                },  
            }, {
                type: DangerButton,
                props: {
                    children: 'Confirm',
                    },
                    }, {
                    type: Button,
                    props: {
                        color: 'blue',
                        children: 'Cancel',
                        },
                    }],
                }
            })
//react-dom
var DeleteAccount = function DeleteAccount() {
    return React.createElement(
        'div',    null,
        React.createElement(
            'p',
            null,
            'Are you sure?'
            ),
        React.createElement(
            DangerButton,
            null,
            'Confirm'
            ),
        React.createElement(
            Button,
            { color: 'blue' },
            'Cancel'
            )
        );

其结构与一直在讲的 JSON 的结构是一致的
JSX 并不是强制选项，我们可以像上述代码那样直接书写而无须编译，但这实在是极其槽糕的编程体验。JSX的出现为我们省去了这个烦琐过程，使用 JSX写法的代码更易于阅读与开发。事实上，JSX并不需要花精力学习。只要你熟悉HTML标签，大多数功能就都可以直接使用了。

Promise对象有以下两个特点

• Promise对象代表一个异步操作
  • 有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果
  • Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。
  • 事件的特点是，如果你错过了它，再去监听，是得不到结果的.
  • 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

缺点

• 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

注意
如果某些事件不断地反复发生，一般来说，使用 Stream 模式是比部署Promise更好的选择。