前端面试日记(二)

大概是在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中不管在生命情况下只要调用了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没怎么问,感觉侧重于框架、网络、算法这些;相比之前的面试问题没有很多,就是涉及的比较广,偏向于问实践;然后面试官挺好的,不同的或者不足的都会给指出,给解释

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

大概能想起这么多了

    原文作者:keywords
    原文地址: https://segmentfault.com/a/1190000015304821
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞