前端面试日记（二）

大概是在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，没有生命周期；

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

一、 无状态函数式组件

• 无状态组件的建立形式使用一个使代码的可读性更好，而且减小了大量冗余的代码，精简至只有一个render方法，大大的加强了编写一个组件的便利
• 无状态组件不会像其它两种方法同样在调用时会建立新实例；它建立时始终保持了一个实例，避免了没必要要的检测和内存分配，坐到了内部的优化；

• 组件不能访问this对象

  • 无状态组件因为没有实例化过程，因此没法访问组件this中的对象，例如：this.state等均不能访问。
• 组件没法访问生命周期的方法

二、React.createClass

• 建立有状态的组件，这些组件是要被实例化的，而且能够访问组件的生命周期方法。
• 通常须要管理组件内部的状态、使用生命周期方法或者进行this绑定会使用这种形式建立组件。

三、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面试题