前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。

大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧，记录下不管过没过，也是一份宝贵经历。

（面试时间：2018-6-12 晚上：9.00；时长：1小时11分钟；公司：6666，（一面））

介绍的真的很简单。。。。。。

me：学习前端的话，我主要是以书籍为主、然后是网站视频、博客、文档等学习理论，之后再通过代码实践。。。

H:前端的学习的话一般是得通过实践的，平时有自己做过项目吗？

me：学习基础的js阶段的话主要是通过实现一些基本特效和模块功能；在学习jQuery的时候做过一个

说了下使用JQuery阶段，做过一个比较简单的商场；

在接触React是，也就是最近做的项目是一个完全使用React全家桶搭建的二手商场；

其中主要的工作的话就是负责前端的大部分工作，包括界面的规划，还有就是前后端交互等；

估计是一面，之后并没有很深入的问项目了，直接转到谈实习经历。

当时是在深圳的一家小型的电商公司实习的，主要工作的话，包括一些简单的PS图片处理；

还有就是店铺的代码美工优化，因为在淘宝和阿里的平台上店铺的装修可以通过代码进行书写；但是都会有对应的使用限制（简单的说了下自己的日常工作）

React组件在本质上就是一个类，创建方式可以说用三种形式：

React.createClass:是最传统、兼容性最好的方法，当是相对与其他ES6的创建方式来说代码量偏多；

ES6 class创建：React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用；

无状态组件（直接函数定义）：只传入两个参数props、context两个参数；不存在state，没有生命周期；

说的优缺点不是太详细，这里科普下：

1、 无状态函数式组件

无状态组件的创建形式使用一个使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利

无状态组件不会像其它两种方法一样在调用时会创建新实例；它创建时始终保持了一个实例，避免了不必要的检测和内存分配，坐到了内部的优化；

组件不能访问this对象

无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.state等均不能访问。

组件无法访问生命周期的方法

2、React.createClass

创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。

一般需要管理组件内部的状态、使用生命周期方法或者进行this绑定会使用这种形式创建组件。

3、React.createClass与React.Component区别

函数this自绑定

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定；

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动bind绑定，否则this不能获取当前组件实例对象。

组件属性类型propTypes及其默认props、state属性配置不同

const ItemComponent = React.createClass({
    propTypes: { 
        name: React.PropTypes.string
    },
     getInitialState(){ 
        return {
            isLogin: false
        }
    },
    getDefaultProps(){ 
        return {
            name: "li"    
        }
    }
    render(){
        return 
{this.props.name}
    }
})
//  VS
class ItemComponent extends React.Component {
    static propTypes = {
        name: PropTypes.string
    };

    static defaultProps = {
        name: ""
    };
    constructor(props) {
        super(props)
        this.state = {
             isLogin: false
        }
    }
    render(){
        return 
{this.props.name}
    }
}

好像面试问道React都会问生命周期，之前都被问到过，详情React生命周期详解

答：不一定

问：为什么呢？

答：。。。。（当时没想到为啥？但问了呢肯定是有坑的）落落的回答了一点概念；

解答：React在调用render方法后只是构建出了虚拟DOM，之后还会经历Diff算法的调和过程，找出最小差异树，然后通过最少的DOM操作将其构建到真实的DOM中；

答：（恍悟，原来是问这个意思，赶紧补下）但是在render方法调用后，我们该是没有办法对其进行渲染的阻止的；这些过程只能由React内部控制。

恩恩，好好~没有骗人

不会改变原数组的方法：

concat：拼接两个数组，返回拼接后的数组；

filter()：接收一个函数作为参数，数组中每个元素执行函数，返回执行该函数时返回true的元素组成的数组。

map： 返回执行函数后组成的数组；

reduce：累加器；

slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象

forEach() 方法对数组的每个元素执行一次提供的函数

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

会改变原数组

pop（）删除尾部元素，返回删除的元素；

push（）添加尾部元素，返回数组长度；

shift（）删除头部元素，返回删除的元素；

unshift()网头部添加元素，返回长度；

splice（）添加、删除，

同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，Ajax任意请求，这会有很严重的安全隐患；

为了保护不同站点和用户的隐私安全，个浏览器便制定了同源策略；

所谓同源即要求协议、域名、端口号完全相同；

一般解决跨域的方式常用的有JSONP(只支持 GET 请求)、跨域资源共享CORS（服务器端通过设置Access-Control-Allow-Origin来进行的）、服务器端设置代理请求：服务器端不受同源策略限制

1）GET：获取数据

（2）POST：提交数据

（3）HEAD：请求头信息

（4）PUT：上传文档到服务器

（5）DELETE：删除远程服务器上的某个文档

（6）OPTION

发送的请求数不一样，get发送一个TCP数据包，post两个；

get向服务器请求数据，数据放于URL后相对不安全、post发送数据相对更加安全点；

post数据发送大小大于get；但两种都会有限制（浏览器和服务器都会限制）

一个临时重定向；一个永久重定向

冒泡排序

选择排序

插入排序

归并排序

快速排序

恩恩，直接传化为二进制就知道啦？求解？？？？？

给我耐心的讲解了，当时懂了点，现在再多研究下吧

还好不是太难，想想看……………………

整个过程CSS、Js没怎么问，感觉侧重于框架、网络、算法这些；相比之前的面试问题没有很多，就是涉及的比较广，偏向于问实践；然后面试官挺好的，不同的或者不足的都会给指出，给解释

说一个礼拜左右给结果，恩恩~不过怎样数据结构偏弱，补补再说！

大概能想起这么多了

往期经典JavaScript面试题