17年阿里敲门砖题目

一、使用面向对象的方式维护一个列表，每个按钮有一个删除按钮，点击删除按钮移除当前行
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
li {
  list-style: none;
}
li span{
  padding: 10px;
}
</style>

<body> 
 <ul class="list">
   <li>第一行<span class="del">x</span></li>
   <li>第二行<span class="del">x</span></li>
   <li>第三行<span class="del">x</span></li>
   <li>第四行<span class="del">x</span></li>
 </ul>
</body>
<script>
class List {
  constructor(sel) {
    this.el=Array.from(document.querySelectorAll(sel));//es6 把类似数组转换为数组。
    let self=this;
    this.el.forEach(item=>{
      item.addEventListener('click',function(ev){
       var ev = ev || window.event;
        if(ev.target.className.indexOf('del')>-1) {
          self.removeItem.call(self,ev.target);
          // self.removeItem(ev.target)
        }
      })
    })
  }
  removeItem(target){     //递归
    let self=this;
    let findParent=function(node) {
      let parent=node.parentNode;
      let root =self.el.find(item=>item===parent);
      if(root) {
        root.removeChild(node);
      } else {
        findParent(parent)
      }
    };
    findParent(target);
  }
}
window.addEventListener('DOMContentLoaded',function(){
  new List(".list");
})
</script>
</html>

解决方案有点
1、es6
2、事件绑定和事件响应是解耦的
3、事件绑定使用了委托，性能优化
4、递归的方式明确点击的是那个dom结点
5、DOMContentLoaded

二、flat函数设计
在这里插入图片描述

解决方案1 递归

function flat (array){
	var result=[];
	var each=function(arr){
	arr.forEach(item=>{
	if(item  instanceof  Array)
		 each(item)
    else
		result.push(item)
})
}
each(array);
 return  result.join(',');
}

解决方案2 tostring

function flag(arr){
	  let toString=Array.prototype.toString();
	  Array.prototype.toString=function(){
      return this.join(',')
}
let result=arr+'';//调用toString方法
Array.prototype.toString=toString;
return result;
}

解决方案3

Array.prototype.valueOf=function(){
 return this.join(',')
}
function flag(arr){
return arr+'';
}

17年阿里敲门砖题目

猜你喜欢