[乐意黎]IE 10 不支持 let 和箭头函数

Love The Way You Lie 2022-01-31 02:17 582阅读 0赞

如题，由于后面维护修改了之前的某些JS 文件，导致  网页在 IE10下抛错。 折腾了半天，才研究明白。  
  
**鉴于此，把 let 修改为 var , 把 箭头函数修改为普通的 function name()\{\}函数。**  
如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

###    ECMAScript 2015(ECMAScript 6) 新特性     ###

**1. ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:  块级作用域的`let`和`const`**

**2. ES6中的箭头函数  => 箭头最神奇的地方在于他会让你写正确的代码。**  
  
下面介绍箭头函数  
比如，`this`在上下文和函数中的值应当是相同的，它不会变化，通常变化的原因都是因为你创建了闭包。

使用箭头函数可以让我们不再用`that = this`或者`self = this`或者`_this = this`或者`.bind(this)`这样的代码，比如，这些代码在ES5中就特别丑。

var _this = this
    $('.btn').click(function(event){
      _this.sendData()
    })

这是在ES6中去掉`_this = this`之后：

$('.btn').click((event) =>{
      this.sendData();
    })

可惜的是，ES6委员会觉得再加上瘦箭头(`-&>`)的话就对我们太好了，所以他们留下了一个老旧的`function`。（[瘦箭头在CoffeeScript中的作用][CoffeeScript]就像ES5/6中一样）

var logUpperCase = function() {
      var _this = this
      this.string = this.string.toUpperCase()
      return function () {
        return console.log(_this.string)
      }
    }
    
    logUpperCase.call({ string: 'es6 rocks' })();
    //ES6 ROCKS

在ES6中我们无需`_this`

var logUpperCase = function() {
      this.string = this.string.toUpperCase()
      return () => console.log(this.string)
    }
    
    logUpperCase.call({ string: 'es6 rocks' })();
    
    //ES6 ROCKS

注意，在ES6中你可以合理的把箭头函数和旧式 `function `函数混用。当箭头函数所在语句只有一行时，它就会变成一个表达式，它会直接返回这个语句的值。但是如果你有多行语句，你就要明确的使用`return`。

这是ES5中利用`messages`数组创建一个数组的代码：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
    
    var messages = ids.map(function (value) {
      return 'ID is ' + value // 显式返回
    });
    
    //["ID is 5632953c4e345e145fdf2df8", "ID is 563295464e345e145fdf2df9"]

在ES6中会变成这样：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
    var messages = ids.map(value => `ID is ${value}`) // 隐式返回
    
    //["ID is 5632953c4e345e145fdf2df8", "ID is 563295464e345e145fdf2df9"]

注意到我用了字符串模版吗，又一个从CoffeeScript中来的功能，我爱它们！

在只有一个参数的函数签名中，括号是可有可无的，但是如果多于一个参数时就要加上。

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
    // 隐式返回
    var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `) 
    
    //  ["ID of 0 element is 5632953c4e345e145fdf2df8 ", "ID of 1 element is 563295464e345e145fdf2df9 "]

--------------------

乐意黎

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220131/34b62fc57f3e428f96f689d6dcfdfd5b.png
[CoffeeScript]: https://www.udemy.com/coffeescript/?couponCode=a