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

最新推荐文章于 2024-06-28 13:00:49 发布

Dream_Lee_1997

最新推荐文章于 2024-06-28 13:00:49 发布

阅读量2.2w

点赞数 2

文章标签：前端笔试阿里巴巴

本文链接：https://blog.csdn.net/qq_41846861/article/details/88429232

版权

面试参考专栏收录该内容

17 篇文章 0 订阅

订阅专栏

阿里巴巴在线笔试题汇总

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

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.length
		for(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