ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串

最新推荐文章于 2023-08-28 19:41:44 发布

不爱吃菜的蔡菜

最新推荐文章于 2023-08-28 19:41:44 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6~ES11 文章标签： javascript 开发语言 ecmascript es6

本文链接：https://blog.csdn.net/muziqwyk/article/details/125256708

《阮一峰 ECMAScript 6 (ES6) 标准入门教程第三版》

https://www.bookstack.cn/read/es6-3rd/docs-intro.md

我愿称他为我的神！！！里面解释的好详细

ECMASript 相关介绍

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言
TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席；

ECMASript 6 新特性

let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1) 不允许重复声明
2) 块儿级作用域
3) 不存在变量提升
4) 不影响作用域链

应用场景：以后声明变量使用 let 就对了

        // let 声明变量的格式
        let a;
        let b, c;
        let d = 100;
        let e = 200, f = 'HAHA', g = [];

        // 1. let 不能重复声明变量  var 可以
        let star = 'pink';
        let star = '刘德华'; //Uncaught SyntaxError: Identifier 'star' has already been declared

        // 2.let 声明的变量是块级作用域里的变量  if else  while  for
        // 之前的有 全局变量，函数，eval(严格模式)
        {
            let girl = '蒋依依';
        }
        console.log(girl);  // 报错 not defined

        // 3. let 不存在变量提升
        // 使用var 声明变量时，会把var声明的变量提前，但是不赋值
        console.log(song); // undefined
        var song = 'HAHA';
        console.log(sing); // undefined
        let sing = 'HAHA'; // 报错

        // 4. 不影响作用域链
        {
            let school = 'zcst';
            function fn() {
                console.log(school); // 向上一级找school变量
            }
            fn();
        }

let 经典案例

    <script>
        // 获取div元素对象
        let items = document.querySelectorAll('.item');

        // 遍历并绑定事件
        // for (var i = 0; i < items.length; i++) {
        //     // 这里用var声明变量，i 会先增加到3 然后再执行下面的
        //     items[i].onclick = function () {
        //         // 修改当前元素的背景颜色
        //         items[i].style.backgroundColor = 'blue'; // 报错
        //     }
        // }

        for (let i = 0; i < items.length; i++) {
            // 计数器i只在for循环体内有效，在循环体外引用就会报错。
            // 这里用let 声明变量，具有块级作用域，所以items[i]里面的i是根据let i 来变化
            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                // this.style.backgroundColor = 'blue';
                items[i].style.backgroundColor = 'blue'; // 报错
            }
        }
    </script>

变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量

const关键字

const声明一个只读的常量。一旦声明，常量的值就不能改变。 const 声明有以下特点

1) 声明必须赋初始值
2) 标识符一般为大写
3) 不允许重复声明
4) 值不允许修改
5) 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误

const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

应用场景：声明对象类型使用 const，非对象类型声明选择 let

        // 声明常量
        const SCHOOL = 'zcst';
        console.log(SCHOOL); // zcst
        // 1. 一定要初始值
        const A; // 错误
        // 2. 一般常量使用大写(潜规则)
        // 3. 常量的值不能修改
        // 4. 块级作用域
        {
            const PLAYER = 'HAHA';
        }
        console.log(PLAYER); // 报错
        // 5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错
        const TEAM = [1, 3, 5, 7];
        TEAM.push(7);
        console.log(TEAM); // [1,3,5,7,7]

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

        // 1. 数组的结构
        const F4 = ['小沈阳', '刘能', '赵四'];
        let [xiao, liu, zhao] = F4;
        console.log(xiao); //小沈阳
        console.log(liu);  // 刘能
        console.log(zhao); // 赵四

可以从数组中提取值，按照对应位置，对变量赋值。

        // 2. 对象的解构
        const shan = {
            name: '赵本山',
            xiaopin: function () {
                console.log('我可以演小品');
            }
        };
        shan.xiaopin(); // 我可以演小品
        // 相当于
        let { xiaopin } = shan;
        xiaopin();

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果解构失败，变量的值等于undefined。

模板字符串

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

1) 字符串中可以出现换行符
2) 可以使用 ${xxx} 形式输出变量

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

        // ES6 引入新的声明字符串的方式
        // 1. 声明
        let str = `我也是一个字符串`;
        console.log(str, typeof str); //我也是一个字符串 string
        // 2. 内容中可以直接出现换行符
        let str1 = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>艾伦</li>
            </ul > `;
        // 3. 变量拼接
        let loveset = 'pink';
        let out = `${loveset}xxx是我心中最帅的颜色`;
        console.log(out); // pinkxxx是我心中最帅的颜色

注意：