阿里前端笔试题2

1.写一个求和的函数sum，达到下面的效果

// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
  'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);

（1） parseFloat()函数将字符串转换成浮点数；

　　　　paseFloat(String)

　　如：window.parseFloat("-2");//返回-2

　　   parseInt()函数将字符串转换为整数

　　如：window.parseInt("3.5");//返回3

　　　　window.parseInt("bar");//返回NaN，意思就是不能转换为数字

　　　　window.parseInt("1010",2);//返回10，这个就是二进制的转换

（2）toFixed()函数

　　1. toFixed(n) 限制小数点后位数，四舍五入。n:0~20 。

　　2. 作用对象必须是number,不能为其他类型。如(8.001).toFixed(2)返回8.00;

　　3. toFixed(n)返回值是String类型，所有当成数字进行比大小是错误的。

　　4. parseFloat(“number“)与parseInt("number")读取字符串中第一个遇到的数(如91.2w3 第一个数为91.2)并转换为float或int，返回类型为number.

　　如：

 　　 var a0 = 8.01.toFixed();
 　　 var a1 = parseFloat("8.006").toFixed(2);
  　　var a2 = parseFloat("9.091").toFixed(2);
　　　　a0，a1，a2的类型都是string

（3）Arguments类和arguments属性（是javascript的内置类）
　　Arguments类是用于存储和访问函数的参数，它位于函数体内部，可以使用Function类的arguments属性对其进行访问。
　　Arguments类代表的这些参数作为数组元素存储，所以就进行这样的访问，第一个参数就是arguments[0]，第二个arguments[1]....
　　arguments.length属性表示传递给函数的参数数目，但是，传递给函数的参数与该函数声明的参数的数目可能不同。下面的代码就是这么做的。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>求和</title>
	<script type="text/javascript">
		function sum() {
		    var nResult = 0;
		    for (var i = 0, len = arguments.length; i < len; i++) {
		        nResult += window.parseFloat(arguments[i]) || 0;
		    }
		    return nResult.toFixed(3) * 1000 / 1000;
		}
		console.log(sum(1,2,3,4,5));
		console.log(sum(5,null,-5));
		console.log(sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
  'E', 1, 'F', 1, 'G', 1));
		console.log(sum(0.1,0.2));
	</script>
</head>
<body>
	
</body>
</html>

　　

上面的代码，

window.parseFloat(arguments[i]) || 0   
parseFloat的结果要么为一个小数，要么为NaN，||运算如果前一个为真则不计算后一个，直接返回前一个表达式的值，如果是NaN则返回后一个表达式的值；
 
nResult.toFixed(3) * 1000 / 1000
这个是在做：保留三位小数，并且去掉末尾的0，最后一位会进行四舍五入。

2.　请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

　　通过for循环遍历，然后

　　trs[i].className=(i%2==0)?'even':'odd';

　来判定是奇数行还是偶数行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奇偶行变色</title>
    <style type="text/css">
        tr{
            text-align: center;
        }
        .even{
            background-color:grey;
        }
        .odd{
            background-color: white;
        }
        .ye{
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var tab=document.getElementById('t1');
            var tbody=tab.getElementsByTagName('tbody')[0];
            var trs=tbody.getElementsByTagName('tr');
            for(var i=0;i<trs.length;i++){
                trs[i].className=(i%2==0)?'even':'odd';
                 //鼠标移上去会变黄色
                trs[i].onmouseover=function(){
                    this.className='ye';
                }
                trs[i].onmouseout=function(){
                    this.className=' ';
                }
            }

        }
    </script>
</head>
<body>
    <div style="margin:10px 0;">
        <table id="t1" style="width:500px;height:auto">
            <thead>
                <tr style="background-color:#00ae9d">
                    <td>序号</td>  
​                    <td>姓名</td> 
                    ​<td>年龄</td> 
​                 </tr>
            <thead>
            <tbody>   
​                 <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>24</td>
                </tr> 
​                 <tr>
​                    <td>2</td>
​                    <td>李逵</td>
​                    <td>38</td>
​                 </tr>  
​                 <tr>
​                    <td>3</td>
​                    <td>林冲</td>
​                    <td>43</td>
​                 </tr>   
​            </tbody>
         </table>
     </div>
</body>
</html>

3.　写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。

　（1）在DOM中，HTML文档的各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形结构来说，最常做的就是遍历树。在DOM中，可以通过parentNode，firstChild，nextChild，lastChild，childNodes（节点所有的子节点）等属性来遍历文档树。

　（2）concat用于数组的连接。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>转换</title>
	<script type="text/javascript">
		function traverse(oNode){
			var aResult=[];
			var oNode=oNode||doucment.body;
			if(oNode.style){
				var nWidth=window.parseInt(oNode.style.width,10)||0;
				var nHeight=window.parseInt(oNode.style.height,10)||0;
				if(nWidth>50 && nHeight>50){
					aResult.push(oNode);
				}
			}
			var aChildNodes=oNode.childNodes;
			if (aChildNodes.length>0) {
				for(var i=0,len=aChildNodes.length;i<len;i++){
					var oTemp=aChildNodes[i];
					aResult=aResult.concat(traverse(oTemp));
				}
			}
			return aResult;
		}
	</script>
</head>
<body>
	
</body>
</html>

　　

　

posted @ 2016-09-05 10:38  GumpYan  阅读(631)  评论(0)    收藏  举报