JS面试题

一、定时器

1.1语法

循环定时器语法

//创建定时器

var timer=setInterval(function() {
        // 循环执行的代码
      }, 1000);

清除定时器

clearInterval(timer)

一次性定时器用法

var timer=setTimeout(function() {
        // 执行的代码
      }, 1000);

清除定时器

clearTimeout(timer)

1.2定时器面试题

setTimeout的执行原理——Javascript事件处理器在线程空闲之前不会运行。

for (var i = 1; i <= 3; i++) {
        setTimeout(function() {
          console.log(i);
        }, 0);
  }//4 4 4 

让结果输出123？

立即执行函数

    for (var i = 1; i <= 3; i++) {
        setTimeout(
          (function() {
            console.log(i);
          })(i),
          0
        );
      }

闭包

for (var i = 1; i <= 3; i++) {
        setTimeout(
          (function(i) {
            return function() {
              console.log(i);
            };
          })(i),
          0
        );
      }

二、window对象上常用方法

2.1页面跳转

window.location.href="网址"

2.2返回锚点

window.location.hash

2.3返回搜索参数

window.location.search返回的是？号后面的参数

2.4刷新当前页面

window.location.reload() 

三、ES6新特性

3.1let和var的区别

let是块级作用域，var是函数作用域

var arr = [];
for( var i= 0;i<2;i++){
    arr[i] = function(){
        console.log(i)
    }
}
arr[0]();
arr[1]();

先创建了一个空数组，然后执行for循环，然后将函数存储到数组中。这时候函数并没有被调用。然后for循环结束，arr0和arr1调用函数。注意var 声明的变量的作用域是全局作用域，而在执行调用函数之前，for循环早就执行完了，这个时候的i变成了2，被调用的函数的i去找值只能上全局作用域中去找，然后两个函数找到的都是2.所以输出的结果都为2。

var arr = [];
for( let i= 0;i<2;i++){
    arr[i] = function(){
        console.log(i)
    }
}
arr[0]();
arr[1]();

代码执行的顺序都是一样的，不同的点是let声明的关键字，在每一次执行for循环的时候，都会产生一个块级作用域。然后当函数被调用去找i的值的时候，是去上一级对应的作用域去找i值，这时候找到的i值分别是0和1.所以输出的结果就是0和1

3.2变量解构

数组解构

 let [a, b, c] = [1, 2, 3];
 console.log(a, b, c);//123
 //设定默认值
 let [a, b = 5] = [10];
 console.log(a, b); //10 5

对象解构

      let res = {
        code: 200,
        data: {
          message: [
            { id: 1, name: "冰箱", price: 2000 },
            { id: 2, name: "彩电", price: 1000 }
          ]
        }
      };
      const {
        code,
        data: { message }
      } = res;
      console.log(code, message); //200 []

字符串解构

      const [a, b, c, d, e] = "hello";
      console.log(a, b, c, d, e); // "h"  "e" "l" "l" "o"

3.3模板字符串

      var y = 2022;
      var m = 5;
      var d = 15;
      var str = `今年是${y}年${m}月${d}日`;
      console.log(str); // 今年是2022年5月15日

3.4箭头函数

函数默认值

 function log(x, y = "World") {
        console.log(x, y);
      }

      log("Hello"); // Hello World

箭头函数

• 箭头函数没有自己的this对象。
• 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

上面几点中，最重要的是第一点。对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};


var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};


由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

剩余参数代码示例

     function fn(a, ...b) {
        console.log(a, b);
      }
      fn(2, 3, 4, 5);

代码示例

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout()的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以打印出来的是42。