JavaScript 之 let、模板字符串、箭头函数的一些冷知

[个人博客]：(https://github.com/zenglinan/blog)

如果对你有帮助，欢迎star。

一. let

1. for 循环中的父子作用域

当使用 let 初始化 i 时, for 括号内部是父作用域, {}内部是子作用域

故下面代码不会报重复声明的报错

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

2. 一直保存的初始化变量

用let初始的i会被一直保存着

事实上, 每轮循环重新声明的是 i < 2; i++中的 i, 这个i和let i = 0中的 i 不是一个 i

for(
    let i = (setTimeout(()=>{console.log(i)},2333), 0);
    i < 2; 
    i++
){
    console.log(i)
}

2333s后, 输出的 i 为 0 , 已经说明问题了.

所以在for循环中使用 let 大概会是这样子的:

{
  let i = 0
  {
    let i = 0
    funcs[0] = function() {
      console.log(i)
    };
  }

  {
    let i = 1
    funcs[1] = function() {
      console.log(i)
    };
  }

  {
    let i = 2
    funcs[2] = function() {
      console.log(i)
    };
  };
}

其实这也说明了第一点中父子作用域的问题 O(∩_∩)O

二. 模板字符串

1. 标签模板

在函数后面跟一个模板字符串, 这个函数可以用来处理模板字符串

function deal(items, ...values){
  console.log(items)
  console.log(values)
}
let value1 = '大头', value2 = '阿大'
deal`你好${value1}, 我是${value2}`
// ["你好", ", 我是", ""]
// ["大头", "阿大"]

第一个参数是一个数组, 里面保存着每一个模板变量左右两边的字符串, 如果为空则为 ""

剩余参数为模板变量, 可以用 ...扩展运算符获取

三. 箭头函数

1. 没有 this , 内部 this 绑定的就是最近一层非箭头函数的 this
2. 没有 arguments 参数
3. 不能作为构造函数
4. 箭头函数没有原型