ES6系统学习----对比var，let

ls0609 发布于2019-08-23 15:07 / 1004人阅读

摘要：对于，虽然之前也有过学习，但总的来说还是不够系统的，知识点非常的零碎。因此包括以为基础产生的语法糖在逐渐的趋近于强类型的语言。是创建，而不是的覆盖。因而称之为富一代。所以语法标准的更新将对良好编程习惯有着极大的利好。

对于ES6，虽然之前也有过学习，但总的来说还是不够系统的，知识点非常的零碎。现在结合之前遇到的问题把ES6中的知识点总结一下。
最初接触ES6时，明白ES5中声明变量的方式是使用var，在ES6中他是使用let的方式进行声明的。
JavaScript是一个弱类型的语言。他无法在编译时就提示一些语法错误，只能在运行时期才能够发现错误。因此ES6包括以ES6为基础产生的TypeScript语法糖在逐渐的趋近于强类型的语言。
进入正题，结合问题看一下var和let的区别

一：富二代和富一代

1：我们来看第一段代码（从前两篇博客中摘过来的）：

 1
 2
 3

var divArr = document.getElementsByTagName("div");
    for (var i = 0;i < divArr.length;i++){
        divArr[i].onclick = function(){
            console.log(i);
        }
    }

运行结果为：

分析：
首先声明一下：
ES5中只有全局作用域和函数作用域没有块级作用域
因此在这段使用var声明的i变量，i在全局范围内都有效，因此在全局范围内只有一个变量i。因此很清晰的就是只要循环一次，变量i的值都是需要发生变化的。他是覆盖而不是创建，因此我把它称之为富二代，啃老族
在代码1中增加一段代码：

var divArr = document.getElementsByTagName("div");
    for (var i = 0;i < divArr.length;i++){
        divArr[i].onclick = function(){
            console.log(i);
        }
    }
     console.log(i);  //输出3

上述代码就可以证明了在使用var声明了变量i之后，他的作用域是全局的。而不是在块级作用域中，所以他才可以在最后一行输出i的值。这样也验证了使用var声明的变量是不具备块级作用域的。

2：来看第二段代码：

 1
 2
 3

var divArr = document.getElementsByTagName("div");
    for (let i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        };

运行结果为：

从前面的博客中使用的是闭包进行处理代码1中的问题，现在使用的是ES6中的let进行处理。当使用let进行声明变量时，当前变量i只在本轮循环中有效，因此每一个循环中的i其实都是一个新的变量i，初始化本轮的变量i的值其实是上一轮循环的值（js引擎内部原理）。因此在编译后的执行阶段，每一个i都是不一样的变量。let是创建，而不是var的覆盖。因而称之为富一代。
既然上边谈到作用域的问题，就不得不说了ES6中的作用域的问题：
ES6中新增了块级作用域，在作用域中声明的变量只在当前作用域中有效

var divArr = document.getElementsByTagName("div");
    for (let i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        };
console.log(i);

最后一行的输出结果和前面的很不一样

很显然，在for循环外部，是获取不到变量i的，而这种变化正是ES6中的let赋予的。

二：总结

1：由于变量作用域的问题会导致两者声明的变量的适用范围有着极大的不同；
2：使用var声明的变量是一个覆盖，顶替的过程，而使用let声明变量是一个创建，并在原有基础上开拓的过程。
3：所以js语法标准的更新将对良好编程习惯有着极大的利好。

云服务器私有云机器学习平台对比 Lets Let js 中 let

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

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

ES6学习笔记--块级绑定

摘要：对比常量声明与声明常量声明与声明，都是块级声明。最后一点全局块级绑定与不同于的另一个方面是在全局作用域上的表现。块级绑定新的最佳实践在的发展阶段，被广泛认可的变量声明方式是默认情况下应当使用而不是。总结与块级绑定将词法作用域引入。 var变量与变量提升使用var关键字声明的变量，无论其实际声明位置在何处，都会被视为声明于所在函数的顶部（如果声明不在任意函数内，则被视为在全局作用域的顶...

wangshijun 2019-08-21 17:01 评论0 收藏0
ES6 常用新特性讲解

摘要：一共讲解了个常用的新特性，讲解过程也是由浅入深。最后一个新增的方法主要是为了弥补当做构造函数使用时产生的怪异结果。特性共享父级对象共享父级不能当做构造函数语法最简表达式前后对比很容易理解，可以明显看出箭头函数极大地减少了代码量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司组织了 ES6 新特性的分享会...

荆兆峰 2019-08-20 18:06 评论0 收藏0
ES6学习总结（一）

摘要：可以通过调用方法将创建一个新的类型的值，这个值独一无二，不与任何值相等。还可以使可扩展，在中，表达式被标准化为构造函数的一个方法，这意味着它是可扩展的。前端发展的太快了，快到ES6,ES7出来之后，今年已经是ES8了，但是纵然前端发展很快，我们除了马不停蹄的学习新的技术之外，也要沉下心来，好好的潜心磨砺自己，本文是整理了自己学习ES6之后相关的知识要点，寄希望于书之于笔，一来自己可以...

_ipo 2019-08-21 11:54 评论0 收藏0
箭头函数你想知道的都在这里

摘要：没有箭头函数没有自己的对象，这不一定是件坏事，因为箭头函数可以访问外围函数的对象那如果我们就是要访问箭头函数的参数呢你可以通过命名参数或者参数的形式访问参数不能通过关键字调用函数有两个内部方法和。 1、基本语法回顾我们先来回顾下箭头函数的基本语法。ES6 增加了箭头函数： var f = v => v; // 等同于 var f = function (v) { return ...

xiaoqibTn 2019-08-23 16:44 评论0 收藏0
学习ES6

摘要：第二章学习函数的参数和扩展点为键上面那个参数箭头函数数组合并解构使用解决回调地狱问题，使结构更加清晰。概念是在推广过程中对模块定义的规范化产出。通过引入依赖规范服务端使用的规范。带名字的输出默认输出概念上面有讲注意事项，需掌握的东西 (第二章)学习ES6 函数的Rest参数和扩展 //ES5 function sum(x,y,z){ let total = 0; if(...

canger 2019-08-23 11:37 评论0 收藏0