个人总结之es6相关知识点及例子

最新推荐文章于 2024-10-15 15:44:22 发布

原创

最新推荐文章于 2024-10-15 15:44:22 发布 · 370 阅读

7 ·

CC 4.0 BY-SA版权

本文总结了ES6的一些核心特性，包括let和const的块级作用域、箭头函数、类与继承、解构赋值、数组方法、字符串新方法、Promise以及generator等，并通过实例展示了它们的用法，帮助开发者更好地理解和应用ES6。

最近，看了一些es6的相关知识点，有时候看完就忘记了，所以写下该博客，以此记录。

1、变量（let,const）

es6使用let定义变量，const定义常量。

变量可重复赋值，但常量重复赋值会报错（报错信息如下：Uncaught TypeError: Assignment to constant variable.）。

使用let,const定义的变量有块级作用域，使用var定义的变量没有块级作用域。

let是用来声明块级作用域，它所声明的变量，只是在let命令所在的那个代码块中有效。

const也是用来声明块级作用域，但它声明的是常量。就是一旦声明，常量的值就不能改变并且必须直接赋值。

但是声明对象是可以改变的：

const obj = { age:10 } obj.age = 20; // obj = {};改变内存地址

//const 对象属性不能修改 Object.freeze冻结对象

const obj2 = Object.freeze({age:20});

//不起作用 obj2.age = 10;

console.log(obj2.age)//20

具体的例子:

使用var定义的变量：

使用let定义的变量：

下面用一个例子来说明使用var和let（无块级作用域和有块级作用域的区别）：点击每个li ，弹出相应的下标。

方式1：使用闭包的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--实现点击每个li,弹出相应的下标-->
    <!--用闭包形式-->
    <script>
        window.onload=function () {
            var oLi=document.getElementsByTagName("li");
            for(var i=0;i<oLi.length;i++){
                (function (i) {
                   oLi[i].onclick=function () {
                       alert(i);
                   }
                })(i)
            }
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
</html>

方式2：使用块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--实现点击每个li,弹出相应的下标-->
    <!--用的是es6的let定义变量-->
    <script>
        window.onload=function () {
            var oLi=document.getElementsByTagName('li');
            for(let i=0;i<oLi.length;i++){
                oLi[i].onclick=function () {
                    alert(i);
                }
            }
        }

    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
</html>

记录1：再看书的时候看到一个点，所以记录如下：（面试的时候有可能会问到哦）

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