结合蚂蚁金服面试经历总结理解前端学习要求

时间 2019-11-26

原文原文链接

先简短的介绍一下我本身吧，我是一个前端学习者，虽然我基础知识也学了比较好，可是许久不用的知识就像流失的水，很容易就忘。在此次蚂蚁金服的电话面试里面认识到了本身不少不足的地方吧。虽然在阿里内推后的人才观的问题里面我以为本身作的仍是很不错的，可是在真正的编程题里面，才发现本身的编程其实须要更加的提高。javascript

接下来就分析一下此次蚂蚁金服的电话面试的题目吧，其实这些题目我也都知道基本的答案，可是回答的时候终究仍是紧张了，致使不少问题都回答的都很差。html

若是不想看完，那就记得看看总结吧。前端

简短的介绍一下本身

这个回答，我就简短的介绍了本身的学校专业，而后学习了什么样的专业课，大一大二大三学习编程的历程。vue

为何要学习前端

对于我我的而言的话，大一在acm集训队里面，以为总是刷题有点不是很和本身的性格，而后就开始转向了学习java进而学习了android，后来又因为一些缘由吧。最后选择了学习前端。java

了解js的事件吗？说说js的事件

JavaScript 使咱们有能力建立动态页面。事件是能够被 JavaScript 侦测到的行为。android

网页中的每一个元素均可以产生某些能够触发JavaScript函数的事件。比方说，咱们能够在用户点击某按钮时产生一个 onClick事件来触发某个函数。事件在 HTML 页面中定义。es6

一些简单的事件仍是要记得的面试

当用户进入或离开页面时就会触发 onload 和 onUnload 事件
表单里面使用的onFocus，onBlur，onChange

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。正则表达式

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit 用于在提交表单以前验证全部的表单域。
onMouseOver 和 onMouseOut 用来建立“动态的”按钮。

绑定事件的方法?

嵌入dom

<button onclick="open()">按钮</button>
        <script> function open(){ alert(1) } </script>

直接绑定编程

<button id="btn">按钮</button>
    <script> document.getElementById('btn').onclick = function(){ alert(1) } </script>

事件监听

<button id="btn">按钮</button>
        <script> document.getElementById('btn').addEventListener('click',function(){ alert(1) }) //兼容IE document.getElementById('btn').attachEvent('click',function(){ alert(1) }) </script>

ie和w3c绑定事件的标准有没有不同？

代码说明吧，ie绑定事件是用attachEvent方法，删除事件是detachEvent方法

//添加事件监听兼容函数 
    function addHandler(target, eventType, handler){  
        if(target.addEventListener){//主流浏览器 
            addHandler = function(target, eventType, handler){  
                target.addEventListener(eventType, handler, false);  
            };  
        }else{//IE 
            addHandler = function(target, eventType, handler){  
                target.attachEvent("on"+eventType, handler);  
            };        
        }  
        //执行新的函数 
        addHandler(target, eventType, handler);  
    }  
    //删除事件监听兼容函数 
    function removeHandler(target, eventType, handler){  
        if(target.removeEventListener){//主流浏览器 
            removeHandler = function(target, eventType, handler){  
                target.removeEventListener(eventType, handler, false);  
            }         
        }else{//IE 
            removeHandler = function(target, eventType, handler){  
                target.detachEvent("on"+eventType, handler);  
            }         
        }  
        //执行新的函数 
        removeHandler(target, eventType, handler);  
    }

了解事件流吗？事件流的顺序是什么？

用一张图片解析一下吧

一个完整的JS事件流是从window开始，最后回到window的一个过程

事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)目标过程、(6~ 10)冒泡过程

js的基本数据类型

基本数据类型有五种Undefined、Null、Boolean、Number和String，也叫作简单的数据类型，还有一种复杂的数据类型是Object，但不属于基本数据类型。

说说字符串经常使用的十个函数

举下例子吧，其实在控制台打印一下就有了的

charAt() 返回在指定位置的字符。
concat() 链接字符串。
fromCharCode() 从字符编码建立一个字符串。
indexOf() 检索字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片段，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

说说数组经常使用的十个函数

这个也举下例子吧，其实在控制台打印一下就有了的

concat() 链接两个或更多的数组，并返回结果。
join() 把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值。

谈谈this是什么，this表明什么

this是Javascript语言的一个关键字。它表明函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不一样，this的值会发生变化。可是有一个总的原则，那就是this指的是，调用函数的那个对象。

改变this指向的方法

要想把 this 的值从一个上下文传到另外一个，就要用 call 或者apply 方法。

// 一个对象能够做为call和apply的第一个参数，而且this会被绑定到这个对象。
    var obj = {a: 'Custom'};

    // 这个属性是在global对象定义的。
    var a = 'Global';

    function whatsThis(arg) {
      return this.a;  // this的值取决于函数的调用方式
    }

    whatsThis();          // 'Global'
    whatsThis.call(obj);  // 'Custom'
    whatsThis.apply(obj); // 'Custom'

在a标签里面添加一个点击事件，那么点击事件的this指向的是什么。

<a onclick="alert((function(){return this})());">
      Show inner this
    </a>

这种状况下，没有设置内部函数的this，因此它指向global/window对象（即非严格模式下调用的函数未设置this时指向的默认对象）。

ES6有哪些新增的东西

这个就太多了，你们能够看看阮一峰的es6教程吧。

说说jq经常使用的一些函数

jq经常使用的函数也就太多了，这里由于我在简历里面写了了解jq因此才被面到，你们根据本身的理解回答就行了吧。

谈谈vue的生命周期

这里给出一张图片就好，不用问我为何

vue绑定input数据的方法

回答：v-model

<div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>

谈谈http协议

HTTP（HyperText TransportProtocol）是超文本传输协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的相似于MIME的消息结构。服务器以一个状态行做为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

一般HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个指示头域结束的空行和可选的消息体组成。HTTP的头域包括通用头，请求头，响应头和实体头四个部分。每一个头域由一个域名，冒号（:）和域值三部分组成。域名是大小写无关的，域值前能够添加任何数量的空格符，头域能够被扩展为多行，在每行开始处，使用至少一个空格或制表符。

主要还得记得http中Status-Code的第一个数字定义响应的类别，后两个数字没有分类的做用。第一个数字可能取5个不一样的值：

1xx:信息响应类，表示接收到请求而且继续处理
2xx:处理成功响应类，表示动做被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动做，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

总结

阿里的面试很基础，并且问的问题基本都是你简历上写的技术，因此，简历上面写的东西，千万要再熟悉一次，并且若是你还擅长什么，面试官都会很乐意去问你问题的，能够跟他们向你会的领域去问。

原文连接：http://www.javashuo.com/article/p-raihkgic-es.html