05.TypeScript箭头表达式与for of循环

1. 箭头表达式

   用来声明匿名函数，消除传统匿名函数的this指针问题
   arrowFunction.ts文件内容如下

   /**单行的匿名函数，不需要写大括号和return */
   var sum1 = (arg1, arg2) => arg1 + arg2;
   
   /**单个参数的匿名函数 */
   var sum2 = arg1 => arg1;
   
   /**没有参数的匿名函数 */
   var sum3 = () => {
       return;
   }
   /**匿名函数实例 */
   var arr = [1, 2, 3, 4, 5];
   console.log(arr.filter(value => value % 2 == 0));

     编译后的arrowFunction.js文件内容如下

   /**单行的匿名函数，不需要写大括号和return */
   var sum1 = function (arg1, arg2) { return arg1 + arg2; };
   /**单个参数的匿名函数 */
   var sum2 = function (arg1) { return arg1; };
   /**没有参数的匿名函数 */
   var sum3 = function () {
       return;
   };
   /**匿名函数实例 */
   var arr = [1, 2, 3, 4, 5];
   console.log(arr.filter(function (value) { return value % 2 == 0; }));

     消除传统匿名函数的this指针问题例子arrowFunction2.ts文件内容如下

   /**传统匿名函数关于this指针问题 */
   function getStock(name: string) {
       this.name = name;
       setInterval(function () {
           console.log('name is :' + this.name);
       },1000);
   }
   
   var stock = new getStock("Microsoft");
   
   /**箭头表达式消除this指针问题 */
   function getStock2(name: string) {
       this.name = name;
       setInterval(()=> {
           console.log('name is :' + this.name);
       },1000);
   }
   
   var stock2 = new getStock2("Google");

     编译后的arrowFunction2.js文件内容如下

   /**传统匿名函数关于this指针问题 */
   function getStock(name) {
       this.name = name;
       setInterval(function () {
           console.log('name is :' + this.name);
       }, 1000);
   }
   var stock = new getStock("Microsoft");
   /**箭头表达式消除this指针问题 */
   function getStock2(name) {
       var _this = this;
       this.name = name;
       setInterval(function () {
           console.log('name is :' + _this.name);
       }, 1000);
   }
   var stock2 = new getStock2("Google");

    

2. for of循环

   forOf.ts文件内容如下

   var arr = [1, 2, 3, 4, 5];
   arr.desc = "five numbers";
   
   /**传统forEach循环，不可中断 */
   arr.forEach(value => console.log(value));
   
   /**传统for in循环 */
   for (var key in arr) {
       console.log(`key is:${key},value is:${arr[key]}`);
   }
   
   /**for of循环数组等集合*/
   for (var value of arr) {
       if (value > 2) break;
       console.log(`value is : ${value}`);
   }
   /**for of循环字符串*/
   for (var value2 of 'five number') {
       console.log(`value is : ${value2}`);
   }
   
   

   编译后的forOf.js文件内容如下  

   var arr = [1, 2, 3, 4, 5];
   arr.desc = "five numbers";
   /**传统forEach循环，不可中断 */
   arr.forEach(function (value) { return console.log(value); });
   /**传统for in循环 */
   for (var key in arr) {
       console.log("key is:" + key + ",value is:" + arr[key]);
   }
   /**for of循环数组等集合*/
   for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
       var value = arr_1[_i];
       if (value > 2)
           break;
       console.log("value is : " + value);
   }
   /**for of循环字符串*/
   for (var _a = 0, _b = 'five number'; _a < _b.length; _a++) {
       var value2 = _b[_a];
       console.log("value is : " + value2);
   }