【JS】ES6开篇

最新推荐文章于 2025-05-28 19:34:53 发布

贺情

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量148

点赞数

文章标签： javascript 前端开发语言 es6

本文链接：https://blog.youkuaiyun.com/m0_50947589/article/details/125311440

版权

ES6的出现弥补了ES5的一些不足，例如内置对象不够灵活、模块化的实现不够完善等问题。

ES6与ES5的用法有一些差别，下面就给大家简单介绍一下。

变量声明

ES6语法要求使用let声明变量，使用const声明常量。

使用let声明与var声明的不同：

1、let声明的变量不能重复声明
2、let是声明的变量不能变量提升
3、块状作用域（eg. 点击button弹出第对应下标）
4、使用let声明的变量不属于顶层对象

什么是变量提升？

比如写一个简单的if判断，观察输出结果：

    if(true){
        var a = 1;
    } 
    console.log(a);

输出结果：

证明console读取到了a。

如果使用let声明变量

    if(true){
       let a = 2;
    }  
    console.log(a);

输出结果：

变量提升简单来说就是在函数外能访问到函数里的内容。它的本质相当于在全局先声明了一个变量，就本例来讲，相当于先声明了一个var a；然后在if中为a赋值1。

如何理解块状作用域？

首先构造5个button按钮，

<body>
    <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
</body>

实现点击输出对应下标。

    var buts = document.querySelectorAll("button");
    for(var i=0;i<buts.length;i++){
        buts[i].onclick = function(){
            console.log(i+1);
        }
    }

实践后发现无论点击哪个按钮都输出6，是因为当点击事件实现时，for循环已经完成，i已达到判断临界值5，var i = 0作为全局变量，执行console之后输出6。

解决方法1：使用闭包函数

var buts = document.querySelectorAll("button");
    for(var i=0;i<buts.length;i++){
        (function(index){
            buts[index].onclick = function (){
                console.log(index+1);
            } 
        })(i)   //自执行函数，i做参数
    }

使用闭包后，变量i局部变量数据持久化。

解决方法2：oop面向对象

为buts添加属性

    var buts = document.querySelectorAll("button");
    for(var i=0;i<buts.length;i++){
        buts[i].index = i;
        buts[i].onclick = function(){
            console.log(this.index+1);
        }
    }

解决方法3：块状作用域

    var buts = document.querySelectorAll("button");
    for(let i=0;i<buts.length;i++){
        buts[i].onclick = function (){
            console.log(i+1);
        }
    }

let形成了块状作用域，执行几次for循环就生成了几个独立的内存，i不再是全局变量，而是独立的一块内存。

什么是顶层对象？

顶层对象：“顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。”在此提到的顶层对象指的是window。

    var aaa = 3;
    console.log(window.aaa);
    let bbb = 6;
    console.log(window.bbb);

使用var定义的变量相当于是window的属性，使用let声明的变量不属于window。

const用于声明常量
1、声明常量用大写（不是规则，是习惯）
2、常量不能修改
3、块状作用域
4、使用const声明的常量也不属于顶层对象