每日思考（2020/07/15）

题目概览

• HTML5中的datalist标签
• overflow: scroll不能平滑滚动怎么解决？
• 举例说明数组和对象的迭代方法分别有哪些？
• 对JWT的理解

题目解答

HTML5中的datalist标签

• datalist是html5新增的元素，与input输入框搭配使用，类似select下拉框，支持模糊搜索选项，支持键盘上下键操作，回车键可以触发onchange 事件，选中option可以触发onchange事件

  <input list="list" onchange="ahri(event)">
  <datalist id="list">
  	<option value="ahri">
  	<option value="annie">
  	<option value="akali">
  	<option value="leona">
  	<option value="dianna">
  </datalist>
  <script>
  function ahri(e) {
  	console.log(e.target.value)
  }
  </script>
  

overflow: scroll不能平滑滚动怎么解决？

• 对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题

• 解决办法：启用了硬件加速特性，所以滑动很流畅。可以解决ios5.0、android4.0以后系统的滑动卡顿问题

  -webkit-overflow-scrolling: touch;
  

• touch滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

• 兼容写法

  over-flow: auto;     /* winphone8和android4+ */
  -webkit-overflow-scrolling: touch;    /* ios5+ */
  

举例说明数组和对象的迭代方法分别有哪些？

• Array

  for (let value of arr) {}
  

  for (let index in arr) {}
  

  for (let index = 0; index < array.length; index++) {
      const element = array[index];
  }
  

  array.forEach(element => {});
  

  arr.some(item => {
    if (item == '终止条件') return true;
  });
  

  arr.every(item => {
    if (item == '终止条件') return false;
    return true;
  })
  

  • map、reduce、find、findIndex等

• Object

  • for in：转成数组后使用数组遍历方法遍历
  • Object.keys：返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
  • Object.values：返回一个由一个给定对象的自身可枚举属性值组成的数组
  • Object.getOwnPropertyNames：方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组
  • Object,values(obj) 直接获取到对象所有的value值
  • Object.entries(obj) 获取到对象的键值对数组，然后遍历数组就能遍历对象了

对JWT的理解

• JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案。服务器认证以后，生成一个 JSON 对象，由客户端保存，每次服务端通信只要但是这个json对象就可以。方便服务器拓展。

• JWT 由三部分组成Header（头部），Payload（负载），Signature（签名）。Header（头部），Payload（负载）都是json对象。Signature 部分是对前两部分的签名。

• 首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。

• 然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

  HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
  

• 算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。