这是我参与「第四届青训营」笔记创作活动的第3天

前言

都2022年了，你还不知道es6，真的都ouuut了把！

es6介绍

ES6->全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准 ,ES6提供了大量的语法糖，让你写代码的时候简直不要太爽！
你必须要知道的是：现在各企业都普遍使用，不会ES6意味着你很难找到工作，上班了你连别人的代码都看不懂

你必须知道的es6新特性

在面试或者上班之后，es6都会充斥着你的生活，尤其是面试当中，你要是碰到了一个慈眉善目的面试官问到你"你来说说es6的新特性"，你真的应该发出邪魅一笑:)

1. let 与 const

let，作用与var类似，用于声明变量

特性：

let 不能重复声明变量，var 可以重复声明变量；
块级作用域，es5中存在全局作用域、函数作用域、eval作用域；
es6中引入了块级作用域，let声明的变量在块级作用域{}内有效 let声明的变量不存在var的变量提升问题

const 用于声明常量

注意事项：

一定要赋初始值
一般常量使用大写(属于编程规范)
常量值不能修改
存在块级作用域

2. 解构赋值

解构赋值分为对数组的解构和对对象的解构

数组的解构

        const Web = ['html', 'css', 'javascript']
        let [tool1, tool2, tool3] = Web

        console.log('tool1-----', tool1) // html
        console.log('tool2-----', tool2) // css
        console.log('tool3-----', tool3) // javascript

对象的解构

        const liMing = {
            name: 'liMing',
            age: '22',
            tell: function(){
                console.log(`I am liMing`)
            }
        }

        let {name, age, tell} = liMing

        console.log(name) // 'liMing'
        console.log(age) // '22'
        console.log(tell) // f(){...}
        tell() // I am liMing

3. 模板字符串

多行html ${} 数据绑定的动态DOM字符串表达更好看
++ 不好看写起来很烦

4. 简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁

        let name = 'LiMing'
        let tell = function(){
            console.log('I am LiMing')
        }
        const liMing = {
            name,
            tell,
            sayHi(){
                console.log('hello')
            }
        }
        // 等效于
        // const liMing = {
        //     name: name,
        //     tell: tell,
        //     sayHi: function(){
        //         console.log('hello')
        //     }
        // }
        console.log(liMing)
        liMing.tell()
        liMing.sayHi()

5. 箭头函数

与function声明的区别：

箭头函数this是静态的。
- 箭头函数内的this指向上层对象；始终指向函数声明时所在作用域下的this的值，无法被call改变
- 普通函数内的this指向调用其函数的对象
箭头函数不能作为构造函数实例化对象
箭头函数不能使用arguments变量，但是可以使用....rest
箭头函数的简写
① 当形参有且只有一个的时候，可以省略()
② 当代码体只有一条语句的时候，可以省略{}，此时return必须省略，而且语句的执行结果就是函数的返回值

7. rest参数

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

8. 扩展运算符

...能将「数组」转为逗号分隔的「参数序列」
注：虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置

        const STUDENTS = ['小明','小芳','小红']
        function printStudent(){
            console.log(arguments)
        }

        printStudent(STUDENTS) // 参数为一个数组，数组内包含3个元素
        printStudent(...STUDENTS) // 参数为3个元素

9. Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7种数据类型，是一个类似字符串的数据类型

Symbol特点：

Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算，也不能与自己进行运算，譬如+、-、*、/、比较运算
Symbol定义的对象属性不能使用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

10. 迭代器

工作原理：

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
每调用next方法返回一个包含value和done属性的对象，done属性表示遍历是否结束

        const food = ['鱼香肉丝','糖醋里脊','酸菜鱼']
        for(let item of food){
            console.log(item)
        }

        let iterator = food[Symbol.iterator]()

        console.log(iterator.next()) // {value: "鱼香肉丝", done: false}
        console.log(iterator.next()) // {value: "糖醋里脊", done: false}
        console.log(iterator.next()) // {value: "酸菜鱼", done: false}
        console.log(iterator.next()) // {value: undefined, done: true} true 表示遍历已经结束

11. 生成器

生成器本身是一个特殊的函数，生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数不同

12. Promise

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

Promise构造函数：Promise(excutor){} Promise.prototype.then方法 Promise.prototype.catch方法

13. set（集合）

ES6提供了新的数据结构set(集合)，本质上是一个对象。它类似于数组
集合的属性和方法：

size，返回集合的元素个数
add，增加一个新元素，返回当前集合
delete，删除元素，返回Boolean值
has，检测集合中是否包含某个元素，返回Boolean值

14. Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合

结语

es6说难不难，希望你能通过这一篇文章总结，能学有所成，最后祝我在即将迎来的面试当中遇到此题^-^，顺利顺利!

ES6新特性这一篇就够了 | 青训营笔记

前言