阿里巴巴在线笔试题汇总

2013阿里巴巴前端在线笔试题
- 1、现有代码如下：
- 2、如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？
- 4、请写出至少5个html5新增的标签，并说明其语义和应用场景
- 5、在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？
2018阿里巴巴前端在线笔试题
- 1、使用css实现一个持续的动画效果
- 2、右边宽度固定，左边自适应
- 3、水平垂直居中
- 4、四种定位区别
- 5、Flex布局用的多吗？
- 6、移动端适配怎么做的？
- 7、let与var的区别？
- 8、为什么 var 可以重复声明？
- 9、封装一个函数，参数是定时器的时间，.then执行回调函数。
- 10、一个关于 this 指向的问题
- 11、CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

2013阿里巴巴前端在线笔试题

1、现有代码如下：

var foo = 1;
function main(){alert(foo);var foo = 2;alert(this.foo)this.foo = 3;
}

1.请给出以下两种方式调用函数时，alert的结果，并说明原因。
var m1 = main();
var m2 = new main();
2.如果想要var m1 = main()产生的m1和前面的m2完全一致,又该如何改造main函数?

答案：

1、var m1=main()时，alert的结果是undefined和1,原因是首先在alert(foo)的时候，foo在main()函数域内还没有被定义（这里作者说错了，不是没有定义，是局部变量还没有赋值，变量声明时会提前的），因此提示undefined,而在输出this.foo时，因为此时的函数执行环境是全局域，相当于window.main()，因此this=window，所以this.foo=window.foo=1。
*var m2=new main()时,alert的结果是undefined和undefined，第一个undefined的原因与前面一种情况相同，而第二个提示undefined的原因是在这种情况下用new构造了一个main()的实例，因此执行环境发生了改变，不再是全局域，而是m2，因此此时的this=m2，因此this.foo=m2.foo，但是由于在alert(this.foo)时，m2中的this.foo还未被定义,因此提示undefined
注意：全局环境下定义的变量会被当做全局对象的属性：如在1中alert（this.main）也会有结果。但是在局部环境下就不是了，局部变量不会被当做对象的属性。如：foo就不是main的属性。

2、如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？

<input id='test' type='text' placeholder='alipay WD Team' /><script>
document.getElementById('test').function(){this.value=" "};
</script>

3、写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推；
方法一：

<a href="#">第一个链接</a>
<a href='#'>第二个链接</a>
<script>window.onload=function(){var l=document.links.lengthfor(var i=0;i<l;i++){document.links[i].onclick=(function(x){return function(){alert(x+1);}})(i);}}
</script>

方法二：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style text="text/css">body{background-color:pink;font-size:24px;text-align:center;}p{line-height:0.86;}</style><script type="text/javascript">function clickme(x){var dom=document.getElementsByTagName("p");//该点击的节点for(var i=0;i<dom.length;i++){if(x==dom[i]){//alert(x.id);alert(i+1);break;}}}function add_jd(){var id_str=document.getElementsByTagName("p").length+1;var para=childpoint=document.createElement("p"); para.id="aa".concat(id_str);para.innerHTML=para.id;para.onclick=function (){var dom=document.getElementsByTagName("p");for(var i=0;i<dom.length;i++){if(this==dom[i]){//alert(this.id);alert(i+1);break;}}}document.getElementsByTagName("body")[0].appendChild(para);}</script></head><body><input onclick="add_jd()" type="button" value="点击我吧"></input><p id="first" onclick="clickme(this)">first 1</p><p id="second" onclick="clickme(this)">second 2</p><p id="third" onclick="clickme(this)">third 3</p><p id="fourth" onclick="clickme(this)">fourth 4</p><p id="fifth" onclick="clickme(this)">fifth 5</p><p id="sixth" onclick="clickme(this)">sixth 6</p></body>
</html>

4、请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节；
nav：定义只包含导航链接的章节；
header：定义页面或章节的头部；
它经常包含logo，页面标题和导航的目录。
footer：定义页面或章节的尾部；
它经常包含版权信息，法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低内容，如果被删除，剩下的内容仍然很合理。

5、在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？

px是像素，em是相对单位，em，在缩放查看网页时，能准确缩放文字。使用px作为尺寸时，部分浏览器中放大页面时，文字不会变大。

2018阿里巴巴前端在线笔试题

1、使用css实现一个持续的动画效果

animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}}

2、右边宽度固定，左边自适应

方法一
使用body {display: flex; } 和 flex: 1;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>body {display: flex;}.left {background-color: rebeccapurple;height: 200px;flex: 1;}.right {background-color: red;height: 200px;width: 100px;}</style><body>
<div class="left"></div > <div class = "right" > </div>
</body>
</html>

方法二
float: right;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>div {height: 200px;    }.left {float: right;width: 200px;background-color: rebeccapurple;    }.right {margin-right: 200px;background-color: red;    }</style><body><div class="left"></div ><div class = "right" > </div>
</body>
</html>

3、水平垂直居中

方法一

 position:absolute;    top:50%;    left:50%;    transform: translate(-50%,-50%);}

方法二

#container{ position:relative;}
#center{ width:100px; height:100px; position:absolute; top:50%;left:50%;margin:-50px 0 0 -50px;
}

方法三

#container{    position:relative;
}
#center{    position:absolute;    margin:auto;    top:0;    bottom:0;    left:0;    right:0;
}

方法四

#container{    display:flex;    justify-content:center;    align-items: center;
}

4、四种定位区别

static 是默认值
relative 相对定位相对于自身原有位置进行偏移，仍处于标准文档流中
absolute 绝对定位相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

5、Flex布局用的多吗？

因为项目考虑兼容 IE9。所以要说用的不多

6、移动端适配怎么做的？

使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同 css

7、let与var的区别？

let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下不同：

var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
let 不允许重复声明.

8、为什么 var 可以重复声明？

当我们执行代码时，我们可以简单的理解为新变量分配一块儿内存，命名为 a，并赋值为 2，但在运行的时候编译器与引擎还会进行两项额外的操作：判断变量是否已经声明：
1、首先编译器对代码进行分析拆解，从左至右遇见 var a，则编译器会询问作用域是否已经存在叫 a 的变量了，如果不存在，则招呼作用域声明一个新的变量 a，若已经存在，则忽略 var 继续向下编译，这时 a = 2被编译成可执行的代码供引擎使用。
2、引擎遇见 a=2时同样会询问在当前的作用域下是否有变量 a，若存在，则将 a赋值为 2（由于第一步编译器忽略了重复声明的var，且作用域中已经有 a，所以重复声明会发生值得覆盖而并不会报错）。若不存在，则顺着作用域链向上查找，若最终找到了变量 a则将其赋值 2，若没有找到，则招呼作用域声明一个变量 a并赋值为 2。
参考博文：https://www.cnblogs.com/neil080320/p/6529679.html

9、封装一个函数，参数是定时器的时间，.then执行回调函数。

function sleep (time)
{  return new Promise((resolve) => setTimeout(resolve, time));
}

10、一个关于 this 指向的问题

obj = {name: 'a',getName: function() {console.log(this.name);}
}
var fn = obj.getNameobj.getName()
var fn2 = obj.getName()
fn()
fn2()

11、CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

1、CommonJS 模块的重要特性是加载时执行，即脚本代码在 require 的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
2、ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
3、import/export 最终都是编译为 require/exports 来执行的。
4、CommonJS 规范规定，每个模块内部， module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。
5、export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

2015：https://blog.csdn.net/daisukes/article/details/52873637
2017：https://www.cnblogs.com/lastnigtic/p/7420080.html
2018：https://www.jianshu.com/p/8ec72c1e65a6
19：34道常见的HTML+CSS面试题（附答案）：http://www.qiangseo.com/wap/wap.php?action=article&id=1290

阿里巴巴历年在线笔试题汇总相关推荐

2015年阿里巴巴校招研发工程师在线笔试题汇总
在线笔试题汇总卷一: 1.下面的函数中哪个是系统调用而不是库函数______? printf scanf fgetc read print_s scan_s 2.某足球队有四名外援,分别 ...
阿里巴巴历年经典面试题汇总：Java岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦本系列历史文章: 学姐百度实习面经学姐,来挑战字节最牛部门最强阿里巴巴历年经典面试题汇总:C++研发岗关于我 ...
超经典，阿里巴巴历年高频面试题汇总：前端岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦本系列历史文章: 阿里巴巴历年经典面试题汇总:Java岗学姐百度实习面经学姐,来挑战字节最牛部门最强阿里巴巴 ...
最强阿里巴巴历年经典面试题汇总：C++研发岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦本系列历史文章: 关于我的那些面经--百度后端(附答案) <关于我的那些面经>滴滴Java岗(附答案) ...
百度校招历年经典面试题汇总：Java开发岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 百度校园招聘历年经典面试题汇总:C ...
网易校园招聘历年经典面试题汇总：前端岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 腾讯校园招聘历年经典面试题汇总:前 ...
网易校园招聘历年经典面试题汇总：C++研发岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 腾讯校园招聘历年经典面试题汇总:前 ...
今日头条校园招聘历年经典面试题汇总：C++研发岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 京东&华为 Java开发历 ...
百度校园招聘历年经典面试题汇总：C++研发岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 最容易进的大厂工作,百度经典百题 ...

阿里巴巴历年在线笔试题汇总