ECMA6Script学习笔记(一)

【摘要】 本文是对自己学习ES6的学习笔记回顾,后面是概要内容neirECMAScript
6（ES6）是2015年发布的JavaScript语言重大更新，引入了箭头函数、模板字符串、let/const声明、解构赋值等特性，提升了开发效率.详细解释了let和const与var的差异，包括作用域、变量提升和全局作用域影响。同时，展示了模板字符串的多行和变量插入功能.
原创声明:文章首发地址:https://bbs.huaweicloud.com/blogs/431635,本文是由本作者在华为云社区的首发后搬运而来,不存在抄袭.

1. es6的介绍

ECMAScript 6，简称ES6，是JavaScript语言的一次重要革新，它在2015年正式发布，标志着ECMAScript标准的第六次迭代。ES6的推出为JavaScript带来了一系列创新特性，包括箭头函数、模板字符串、let和const声明关键字、解构赋值、默认参数以及模块系统等，极大地丰富了JavaScript的表达能力和开发效率。特别是Vue 3框架的广泛应用，使得ES6成为了掌握Vue 3的必经之路。
ES6对JavaScript的改进在以下几个方面：

1. 语法简洁性：ES6引入了箭头函数、类语法和模板字符串等新语法，使代码更加简洁明了。
2. 功能强化：通过新增的API、解构语法和迭代器等特性，ES6扩展了JavaScript的功能，使其更加强大。
3. 适用性提升：模块化功能的引入为JavaScript代码的组织和管理提供了更优的解决方案，提升了代码的可维护性，并使JavaScript在大型应用开发中更加得心应手。

综合来看，ES6在提升JavaScript语言的核心特性和功能性方面取得了显著进步。随着ES6成为JavaScript的现行标准，其新特性已获得现代浏览器的广泛支持，开发者可以放心地采用ES6特性进行前端应用的开发。

2.ES6发展的迭代版本

历史版本：

标准版本	发布时间	新特性
ES1	1997年	第一版 ECMAScript
ES2	1998年	引入setter和getter函数，增加了try/catch，switch语句允许字符串
ES3	1999年	引入了正则表达式和更好的字符串处理
ES4	取消	取消，部分特性被ES3.1和ES5继承
ES5	2009年	Object.defineProperty，JSON，严格模式，数组新增方法等
ES5.1	2011年	对ES5做了一些勘误和例行修订
ES6	2015年	箭头函数、模板字符串、解构、let和const关键字、类、模块系统等
ES2016	2016年	数组.includes，指数操作符（**），Array.prototype.fill等
ES2017	2017年	异步函数async/await，Object.values/Object.entries，字符串填充
ES2018	2018年	正则表达式命名捕获组，几个有用的对象方法，异步迭代器等
ES2019	2019年	Array.prototype.{flat,flatMap}，Object.fromEntries等
ES2020	2020年	BigInt、动态导入、可选链操作符、空位合并操作符
ES2021	2021年	String.prototype.replaceAll，逻辑赋值运算符，Promise.any等
… …

3. es6的变量和模板字符串

在展示之前首先介绍一下方便后续可以进行操作的web页面展示的插件Live Server 在VsCode中搜索安装即可,怎么使用,在要展示的html页面点击如图右下角所示的Golive即可打开一个类似tomcat的服务器进行使用

ES6 新增了let和const，用来声明变量,使用的细节上也存在诸多差异

 /*
        let 和var的差别:
            1、let 不能重复声明
            2、let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。
            3、let不会预解析进行变量提升
            4、let 定义的全局变量不会作为window的属性
            5、let在es6中推荐优先使用
*/

// 1、let 不能重复声明
         var i = 10;
         var i = "";
         let j = 10;
//  let j = ""; //再次声明会报错

//  2、let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。
        /*
            例如我们在java中常用的方法,作用域为在{}内
            if(){}
            for(){}
            while(){}
            {}
        */
         {
            var i = 10;
            let j = 10;
            let k = 9;
            console.log(k); //在块级作用域内可以正常输出
         }
         console.log(i); //可以正常输出
         console.log(j); // j is not defined 花括号外面无法访问

//  3、let不会预解析进行变量提升
        console.log(a); //没有定义先预解析变量可以先访问,顶多算没有赋值
        var a = 10;

        console.log(b); //  b is not defined  let没有预解析，不能先访问再定义
        let b = 9;

// 4、let 定义的全局变量不会作为window的属性
        var a = 10; // a会变成window对象的属性
        let b = 10; // b不会变成window对象的属性
        console.log(window.a); // 10
        console.log(window.b); // undefined

// 5、let在es6中推荐优先使用

• const和var的差异

  1、新增const和let类似，只是const定义的变量不能修改

  2、并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

// 6.const就是不可修改的let final修饰的变量
        let a = 10;
        a = 20; //可以修改

        const b = 10; //定义时必须赋值,不能先定义后赋值
        b = 20; //不能修改

//声明场景语法,建议变量名大写区分
        const PI = 3.1415926; 

        //不允许修改指向的地址,但是可以数组和对象元素进行修改
        const teachers = ["老张","老李","老刘"];
        //teachers =["","",""] //不可以指向新的地址
        teachers.push("老王"); //可以修改
        teachers[0] = "老张2"; //可以修改

模板字符串（template string）是增强版的字符串，用反引号（`）标识

// 1 多行普通字符串 直接写不可以以 通过+进行拼接
            let info =
                '<ul>'+
                '<li>JAVA</li>'+
                '<li>Python</li>'+
                '<li>VUE</li>'+
                '</ul>'
            console.log(info)    

// 2 多行模板字符串
//3. 展示变量内容直接使用${变量名}即可
        let pro = "html";
        let info = `
                <ul>
                    <li>JAVA</li>
                    <li>Python</li>
                    <li>VUE</li>
                    <li>${pro}</li>
                </ul>`
            console.log(info)