es6学习（五）

飞天小女侠~

已于 2022-04-17 13:23:31 修改

阅读量521

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-14 15:54:29 首次发布

本文链接：https://blog.csdn.net/xuan971130/article/details/124169344

版权

前端专栏收录该内容

30 篇文章 3 订阅

订阅专栏

本文详细介绍了ES6的多个核心特性，包括let和const声明变量、解构赋值、模板字符串、箭头函数、Promise、Set和Map等。通过实例展示了如何在实际编程中使用这些特性，如利用箭头函数实现异步编程，用Promise解决回调地狱问题，以及Set和Map在数据管理中的应用。此外，还探讨了类(class)、迭代器和生成器的概念和用法，以及模块化的导入导出机制。

摘要由CSDN通过智能技术生成

es6学习

1. es6新特性
1.1 let 声明变量：

不能重复声明，var可以重复声明
块级作用域{} 作用域：函数、全局、块级（es6新出的）、eval（严格模式下）
不存在变量提升。var存在变量提升。
不影响作用域链。（会向上一级作用域中去寻找）

下面的案例，用var会报错。因为var是函数作用域。因此，其实只定义了一个i，而let是块级作用域，定义了三个i

1.2 const 声明常量

一定要赋初值。
一般常量使用大写
常量的值不能修改
块级作用域
对于数组和对象的元素修改，不算对常量的修改，不会报错。因为进行修改时，数组和对象的地址没有变化。

1.3 变量解构赋值。

数组[ ]

对象{ } ，要与对象的属性名和方法名对应

1.4 模板字符串

` `

内容中可以直接出现换行符
可以进行变量的拼接。

1.5 对象的简化写法

等价于：

name: name,

change: change,

improve: function(){...} 使用上述方式更简单了。

1.6 箭头函数

this是静态的，this始终指向函数声明变量时所在作用域下的ths值。不会改变
不能作为构造函数。
不能使用arguments 变量
简写：形参只有一个变量时，可以省略小括号。代码体只有一条语句时，可以省略花括号，return，并且语句的执行结果就是函数的返回值。

1.7 es6允许给函数参数赋初始值

（1）一般位置要靠后（潜规则）

（2）可以与解构赋值结合使用。

1.8 es6 rest参数

rest参数放在函数的形参位置，用来接收多余的参数，并变为一个数组。

es6中引入rest参数，用于获取函数的实参，用来代替arguments

arguments是一个伪数组，而...args是一个真正的数组，可以使用Array的一些方法。

1.9 扩展运算符的使用 ...args

而扩展运算符不是放在形参的位置。可以将数组转化为逗号分隔的参数序列。

注意与rest参数的区别。

应用：

（1）数组的合并

（2）数组的克隆

如果数组中有引用对象的话，是浅拷贝。

（3）将伪数组转变为真正的数组。

1.10 Symbol基本使用

（1）symbol()和symbol.for()创建

（2）不能与其他数据进行类算。

七种数据类型

（3）symbol的应用

给对象添加属性和方法，表示独一无二的。

①给对象添加方法：法一：

法二：

② Symbol的内置属性

Symbol.hasInstance

Symbol.isConcatSpreadable

Symbol的内置属性主要是控制对象在特定场景下的表现：比如：数组不可以展开，

1.11 迭代器

1.11.1 什么是迭代器

这里的Interator接口，相当于一个属性：Symbol（Symbol.iterator）

1.11.2 迭代器工作原理

for of 返回的是value值， for in返回的是key值。

1.11.3 自定义迭代数据

<script>
        const banji = {
            name:'终极一班',
            stus: ['xiaoming', 'huahau', 'xiaohong', 'hanhan'],
            [Symbol.iterator](){
                // 索隐变量
                let index = 0;
                let _this = this;
                let s = {
                    next: function() {
                        if(index < _this.stus.length) {
                            const result =  {value: _this.stus[index], done:false};
                            index++;
                            return result;
                        } else {
                            return {value: undefined, done:true};
                        }
                        
                    }
                }
            }
        };
        for(let v of banji) {
            console.log(v);
        }
    </script>

1.12 生成器

生成器是一个特殊的函数。

不能直接调用函数，而是要调用函数的next方法。

yield：函数代码的分隔符