【小记】ES6

amuqiao 发布于2019-08-22 15:31 / 3419人阅读

摘要：前言来自阅读阮老师的入门的小结疑问先开个坑，慢慢填问题和循环先看书中的一段代码这个我们知道，是因为每个都被赋予了一个函数，输出作用域的，而是在全局作用域下调用的，所以输出的是全局变量，因为循环没有块作用域，所以输出。

前言

来自阅读阮老师的《ES6入门》的小结+疑问~先开个坑，慢慢填

问题

Q：let和for循环？
先看书中的一段代码：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

这个我们知道，是因为每个a[i]都被赋予了一个函数，输出作用域的i，而a[6]()是在全局作用域下调用的，所以输出的i是全局变量i，因为for循环没有块作用域，所以输出10。
改成let后：

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

其实我第一次看到这里是不能理解的，然后看到书上说：

变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。

好吧，还是感觉没清楚到底这个机制是啥样的(⊙﹏⊙)，那我就用小工具把它转为ES5语法了（虽然也不能当成完全等同吧(lll￢ω￢)）：

"use strict";
var a = [];

var _loop = function _loop(i) {
  a[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
a[6](); // 6

这个结果就很清楚啦，它类似在执行语句的外面包裹了一个函数，结果就是i当成参数传进去了，而且还形成了一个闭包：

再来看另一个例子：

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

原文说：

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个多带带的子作用域。

转换之后的结果（这里有小问题0_0，单纯转换出来会都是i，但是多复制一份，转出来就是下面这种，我个人觉得根据意思应该转成这样才是对的）：

for (var _i = 0; _i < 3; _i++) {
  var _i2 = "abc";
  console.log(_i2);
}

Q：let特性？
不存在变量提升
暂时性死区(temporal dead zone)

在代码块内，使用let命令声明变量之前，该变量都是不可用的

云服务器 GPU云服务器 thinking-in小记 thinking-in-小记 ES6 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93500.html

ES6小记

摘要：命令改变了这个行为，必须要在声明后使用，否则报错。值为临时锁区保证了命令不会受到外部影响。基本使用声明一个只读的常量。默认值解构允许指定默认值内部严格使用来判断是否有值，所以只有当一个数组成员严格等于，默认值才会生效。 ES6 ES6 就是ECMAScript 6是新版本JavaScript语言的标准。 1. let 和 const ES6 新增了 let 和 const 来声明变量和...

王晗 2019-08-22 15:37 评论0 收藏0
javascript小记

摘要：模板字面量相当于格式化字符串字符串用两个包含起来并且内部的占位符用标识一般用于标识多行文本或者配合函数使用与箭头函数用于数组是用于让数组每一个元素都调用函数的语法基本格式为其中为数组元素下标为当前元素所属的数组对象在实际调用时只需要箭头函数 1.模板字面量相当于格式化字符串,字符串用两个``包含起来,并且内部的占位符用${variable}标识.一般用于标识多行文本或者配合函数使用. ...

waltr 2019-08-23 16:23 评论0 收藏0
前端小白的面经小记

摘要：前端小白最近面试几家公司，写点面经分享给大家，同时记录下自己的缺点以供后期补足，各个公司的开发方向不同，请各位理性看待。直接现场手敲触发的样式。数组去重如何实现如果用的话，里面如何写排序算法。对象何时被修改心态需要调整好，不紧张不匆忙。前端小白最近面试几家公司，写点面经分享给大家，同时记录下自己的缺点以供后期补足，各个公司的开发方向不同，请各位理性看待。问题相关 Css 布局方式有...

FuisonDesign 2019-08-23 15:35 评论0 收藏0
前端小白的面经小记

摘要：前端小白最近面试几家公司，写点面经分享给大家，同时记录下自己的缺点以供后期补足，各个公司的开发方向不同，请各位理性看待。直接现场手敲触发的样式。数组去重如何实现如果用的话，里面如何写排序算法。对象何时被修改心态需要调整好，不紧张不匆忙。前端小白最近面试几家公司，写点面经分享给大家，同时记录下自己的缺点以供后期补足，各个公司的开发方向不同，请各位理性看待。问题相关 Css 布局方式有...

MSchumi 2019-08-30 15:55 评论0 收藏0
知识点小记

摘要：箭头函数我们来看一下箭头函数的效果箭头函数是无法通过来修改作用域的这个需要切记。所以切记在需要的时候使用箭头函数。这是一些小问题的记录和总结： 1. vue serve和build 在vue-cli3.0中可以快速的开发原型。通过全局安全@vue/cli-service-global npm i -g @vue/cli-service-global 那么就可以使用vue serve ...

shery 2019-08-23 16:49 评论0 收藏0