面试中遇到的几个问题 | 朱阳星的日常

文章目录

1. 使用原生js在不添加属性的前提下给li添加click事件,返回当前li的index值
2. 至少使用两种方法写出每隔1秒输出0，1，2的函数（需包含es6的实现）
3. 使用vue写个计时器
4. Fibonacci 数列算法及复杂度解析

使用原生js在不添加属性的前提下给li添加click事件,返回当前li的index值

<!--html结构如下-->
<ul id="list">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
  <li>666</li>
</ul>

我当时想在不添加属性的情况下无法获取该li的index值，于是就想不起来解决办法了。
至于事件的话遍历所有li通过添加addEventListener和attachEvent添加。
也想过在li上直接绑定click事件即在li标签上添加onclick = "getIndex(this)"
但是这样不就相当于添加了属性了么？
后来看到别的网友的解决方案感觉蛮好的，方案如下

function bindClick() {
  var ul = document.getElementById("list"), li;
  for (var i = 0; i < ul.children.length; i++) {
    li = ul.children[i];
    li.index = i;
    // 长时间不用居然忘记了还有这种写法
    li.onclick = function hello() {
      alert(this.index);
    };
  }
}
bindClick();

我感觉还有更好的解决方法即事件代理，这个无法获取li元素的index值只能添加属性(与题意不符了)

function bindClick() {
  var ul = document.getElementById("list");
  ul.onclick=function hello(event){
     console.log(event.target.getAttribute("index"));
  }
  for(var i=0;i<ul.children.length;i++){
      ul.children[i].setAttribute("index",i);
  }
}
bindClick();

可以通过array.map方法获取到index值

function bindClick2() {
  var ul = document.getElementById("list");
  // Node.children is a read-only property that returns a live HTMLCollection of the child elements of Node
  // ul.children 获取的是HTMLCollection对象
  // 这个东西和arguments一样属于类数组对象需要转为数组才能使用数据的map方法（es5）
  // 因为map方法可以获取数组的index
  var lis = Array.prototype.slice.call(ul.children);
  ul.onclick = function hello(event) {
    lis.map(function(cur, index, array) {
      if (cur == event.target) {
        console.log(index);
      }
    });
  };
}
bindClick2();

至少使用两种方法写出每隔1秒输出0，1，2的函数（需包含es6的实现）

普通情况最简单，用setInterval函数即可.

var a=0;
function add(){
    console.log(a++);
}
var int = setInterval("add()",1000);
// clearInterval(int);

es6里我记得有个await和async我就胡乱写了下，回来查了下:
await表示紧跟在后面的表达式需要等待结果,await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。
await关键字只能出现在用async声明的函数体内
async函数返回一个 Promise 对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。

var sleep = (time)=>{
    return new Promise((reslove)=>{
        setTimeout(reslove, time);
    })
}

async function test() {
    for (let i = 0; i < 10; i++) {
        await sleep(1000);
        console.log(i);
    }
}
test();

使用vue写个计时器

要求：左边input输入毫秒数，中间开始按钮可以开始和暂停，右边输入框显示倒计时的值
input button input
demo 如下:

See the Pen vue 计时器 by openks (@openks) on CodePen.

Fibonacci 数列算法及复杂度解析

//递归调用
//空间复杂度O(n^2)
//时间复杂度
function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10) // 89
Fibonacci(100) // 堆栈溢出
Fibonacci(500) // 堆栈溢出

//尾递归优化过的 Fibonacci 数列实现如下
//时间复杂度
//空间复杂度 O(1)
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity