今天来说说 es6 的语法, 最基础的也就是 var,let,const 的用法与区别了, 我们来看看他们之间的恩怨情仇.
首先来说说 var, 这个只要是学过 JS 的都知道, 它是用来声明一个变量的, 但是它在开发中也会遇到一些问题, 比较难解决. 先来看看下面的代码:
- var str="hello world";
- function testVar(){
- var str="hello";
- }
- testVar();
- console.log(str);
这段代码的结果是 "hello world", 这说明在 var 申明的变量, 即使是同样的名字, 在不同的块中, 在外层块中的变量优先级更高, 也就是说, 在外层优先使用并且只能使用当前块中的变量; 而在他的内部块中的变量, 比如说这个函数里面的 str, 他其实也是优先使用块内的 str 变量, 会屏蔽掉外面的 str 变量, 这是一点. 再来看看下面一段代码
- function variableHoisting(){
- if(condition){
- var test="hello javaScript";
- }else{
- console.log(test)
- // 这里可以访问到 test, 但是它是 undefined, 因为初始化为它赋值成了 undefined
- }
- // 这里也可以访问到 test
- }
可能你会感到奇怪, 我的 var 申明的变量在 if 代码块里面, 为什么我的 else 里面也能访问呢, 其实上面这段代码相当于下面这段代码
- function variableHoisting(){
- var test;
- if(condition){
- test="hello javaScript";
- }else{
- console.log(test)
- // 这里可以访问到 test, 但是它是 undefined, 因为初始化为它赋值成了 undefined
- }
- // 这里也可以访问到 test
- }
现在知道了吧? 这就是所谓的变量提升, 我在 if 里面申明的变量, 其实浏览器在预解析的时候就对 var , 以及 function 关键字的变量或者方法进行了处理, 处理后的代码就是上面这段代码 (当然, 我之前讲过一篇函数声明与函数表达式的区别, 你可以看看, 你会知道更多.) 看到这里, 也许你不会感觉 var 有什么不好的地方, 再往下看看:
- ```JavaScript
- var funcs = [];
- for (var i = 0; i < 10; i++) {
- funcs.push(function() {
- console.log(i);
- });
- }
- funcs.forEach(function(func) {
- func(); // 输出数值 "10" 十次
- });
可能你想的是输出 0,1,2,3,4,5,6,7,8,9 但是这不是正确答案, 这只能输出 10 个 10, 为什么呢? 因为循环完成过后, i 已经是 10 了, 再次调用的时候, 这个 i 值在每次迭代过程中共享了.
下面我们就来引入一下 let, 以及 const.let 也是用来申明变量的, 但是他申明的变量是块级作用域, 什么意思呢, 看下面
- function testLet(){
- if(condition){
- let str="hello let"
- }else{
- // 这里访问不到 str
- }
- // 这里也访问不到 str
- }
看了上面, 你也许就知道了什么是块级作用域, 也就是一个大括号嘛, 括号里面就是一块. 用 let 申明的变量是没有之前所说的变量提升这一说的, 所以在外部块里面是访问不到 let 申明的变量的. 这样, 之前说 var 缺陷的哪一块代码经过小小的改变就能正常输出 0..9 了, 你看看
- var funcs = [];
- for (let i = 0; i < 10; i++) {
- funcs.push(function () {
- console.log(i);
- });
- }
- funcs.forEach(function (func) {
- func(); // 输出数值 0-9
- });
这就是 let, 与 var 的一个小区别, 当然如果说你申明变量的时候不指名是用的 var, 还是 let, 编译的时候会将这个变量解析为 var 申明的变量.
不管是 var, 还是 let, 他们是不能重复申明的, 比如像下面这样
- var str="var";
- let str="let";
这样是会报错的, 编译的时候, 不能重复定义.
然后就是 const 了, 这个其实就是常量的单词的英文缩写(constant), 没错, 这是用来申明一个常量的. 什么事常量呢, 顾名思义, 就是一旦赋值就不能再改变了. 比如说:
- const MAX=3.1415926;
- MAX=3.14;
这样是不行的, 会报错, 常量不能改变的. 来看看 const 的循环, 在最基础的 for -i 的循环里面, 他是会报错的, 运行一次过后就会报错, 但是在 for-in 循环里面他是不会报错的, 当然在 for-of 循环里面也不会
- var funcs = [],
- object = {
- a: true,
- b: true,
- c: true
- };
- // 不会导致错误
- for (const key in object) {
- funcs.push(function () {
- console.log(key);
- });
- }
- funcs.forEach(function (func) {
- func(); // 依次输出 "a", "b", "c"
- });
这样是不会报错的, 来看看究竟是为什么呢?
上面说了, const 申明的变量是不能改变的, 但是, 我们试试申明一个对象呢, 然后改变对象里面的属性的值.
- const object={
- name:"学习笔记",
- age:18
- }
- console.log(object.name)
- object.name="hello world"
- console.log(object.name)
这段代码, 第一个会打印出来 "学习笔记", 第二个会打印出来 "hello world", 为什么呢? 原因在这, 其实, 这段代码改变的不是 object 这个对象变量, 而是这个变量的属性, 知道了这个就不难理解为什么在 for-in ,for-of 循环里面, const 不会报错了吧? 如果对你有帮助的话, 记得点个关注哦, 如果你发现文中有错误, 记得帮我指出来.
微信公众号
来源: https://www.cnblogs.com/swzx-1213/p/12468786.html