前端面试日记（二）

大概是在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组件在本质上就是一个类，创建方式可以说用三种形式：

1. React.createClass:是最传统、兼容性最好的方法，当是相对与其他ES6的创建方式来说代码量偏多；
2. ES6 class创建：React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用；
3. 无状态组件（直接函数定义）：只传入两个参数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 <div>{this.props.name}</div>
    }
})
//  VS
class ItemComponent extends React.Component {
    static propTypes = {
        name: PropTypes.string
    };

    static defaultProps = {
        name: ''
    };
    constructor(props) {
        super(props)
        this.state = {
             isLogin: false
        }
    }
    render(){
        return <div>{this.props.name}</div>
    }
}

（六）说说React生命周期

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

（七）React中不管在生命情况下只要调用了Reader方法，界面都会重新渲染吗？

• 答：不一定
• 问：为什么呢？
• 答：。。。。（当时没想到为啥？但问了呢肯定是有坑的）落落的回答了一点概念；
• 解答：React在调用render方法后只是构建出了虚拟DOM，之后还会经历Diff算法的调和过程，找出最小差异树，然后通过最少的DOM操作将其构建到真实的DOM中；
• 答：（恍悟，原来是问这个意思，赶紧补下）但是在render方法调用后，我们该是没有办法对其进行渲染的阻止的；这些过程只能由React内部控制。

（八）问个简单的CSS基础，说说相对布局和绝对布局

• 恩恩，好好~没有骗人

（九）问下js基础，数组的操作

• 不会改变原数组的方法：

  • 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、和post请求，说说区别

• 发送的请求数不一样，get发送一个TCP数据包，post两个；
• get向服务器请求数据，数据放于URL后相对不安全、post发送数据相对更加安全点；
• post数据发送大小大于get；但两种都会有限制（浏览器和服务器都会限制）

（十三）状态码的话说说301和302的区别？

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

（十三）简单的说说在浏览器中输入一个RUL但显示页面的整个过程？

（十三）问些简单的算法，就说说你所知道的排序算法吧？

• 冒泡排序
• 选择排序
• 插入排序
• 归并排序
• 快速排序

（十四）对于你个数值（十进制）如何最快的知道它在二进制中有多少个1

• 恩恩，直接传化为二进制就知道啦？求解？？？？？
• 给我耐心的讲解了，当时懂了点，现在再多研究下吧

（十五）给你一块正方体蛋糕，中间任意位置挖出一个小正方体，如何切一刀将它切成等分的两半

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

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

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

大概能想起这么多了

• 往期经典JavaScript面试题