搜刮的questions

总结不易，希望多多支持

1. 以下代码，alert出来的值是多少，并说一下原因

window.val = 1
var json = {
  val: 10,
  dbl: function () {
    this.val *= 2
  }
}
json.dbl()  // 20s
var dbl = json.dbl
dbl() // 2
json.dbl.call(window)  // 4
alert(window.val + json.val)  // 24

这道题考察点如下

• this指向问题，具体请看这里

• JavaScript赋值运算符,如下：

  运算符	例子	等同于
  =	x = y	x = y
  +=	x += y	x = x + y
  -=	x -= y	x = x - y
  *=	x *= y	x = x * y
  /=	x /= y	x = x / y
  %=	x %= y	x = x % y

2. 在空白处加上css，让这个div在页面居中和div内的文字在div内居中。（上下左右都居中

<div style="border: 1px solid black; width: 200px; height: 200px; ___________"></div>

答案如下：

text-align: center;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;

实现效果如下：

3. 以下代码，打印出来的值是多少？简述一下原因

setTimeout(function () {
  console.log(1)
}, 0)

Promise.resolve(function () {
  console.log(2)
})

new Promise(function (resolve) {
  console.log(3)
  resolve()
}).then(() => {
  console.info(4)
})

console.log(5)

打印出的结果为：3，5，4，1

这道题考察的是JavaScript的事件循环机制，具体请看这里

4. 实现一个JavaScript函数，对指定的整数数组，返回任意两个数为10的所有结。例如：[-1, 9, 2, 8, 3, 11, 1, 7...]，返回[[-1, 11], [9, 1], [2, 8], [3, 7]...]

function sumFun (arr) {
  const arrResult = []
  const len = arr.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] + arr[j] == 10) {
        arrResult.push([arr[i], arr[j]])
      } 
    }
  }
  return arrResult
}

const arr = [-1, 9, 2, 8, 3, 11, 1, 7]
console.log(sumFun(arr))

这道题考察的是数组的操作和思维

5. 使用正则检查字符串，只允许6--20位，且只能包含数字，字母，下划线

function testStr (str) {
  const regExp = /^\w{6,20}$/
  return regExp.test(str)
}

console.log(testStr('132ded'))

这道题考察的是正则表达式的基础知识，详细的用法，后续会写一篇文章来介绍

6. 补充css样式实现如下图的效果，其中圆的直径为100px

<div id="ball"></div>

补充的CSS样式如下：

#ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: black;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
}
#ball:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  background-color: #fff;
}
#ball:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

7. 说一下以下的代码有什么问题，要怎么优化：

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

上述代码会打印出 10个10

如果想让它按意图打印出0-9，则需要下边的写法：

• 方法一

  for (let i = 0; i < 10; i++) {
    setTimeout(function () {
      console.info(i)
    }, 1)
  }
  

• 方法二

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

• 方法三

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

8. 简述跨域方式和实现原理

详细的后续会写文章补充，暂时可查看这里

9. 简述一下函数防抖动和函数节流的区别

• 函数防抖：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

  function debounce(fn, delay) {
      // 记录上一次的延时器
     var timer = null;
      return function() {
          // 清除上一次延时器
          clearTimeout(timer)
          timer = setTimeout(function() {
              fn.apply(this)
          }, delay)
      }
  }
  

• 函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。

  function throttle(fn, interval = 300) {
      let canRun = true;
      return function () {
          if (!canRun) return;
          canRun = false;
          setTimeout(() => {
              fn.apply(this, arguments);
              canRun = true;
          }, interval);
      };
  }
  

  详情请查看这里