ES6新特征

        ECMA-262_6th_edition_june_2015，也被称为ECMAScript 2015或ES6，为JavaScript语言带来了许多重要的升级和改进。它引入了许多新的语言特性和语法改进，为JavaScript开发者带来了更强大、更现代化的编程能力。以下是对ES6的一些主要特性的简要介绍：

一、ES6的变量和模板字符串

        ES6新增了let和const，用来声明变量

1.1、let和var的差别

<script>
        //声明变量
        let a;
        let b,c,d;
        let name="zs"
        let age = 18,sex='男',like=[]
        //变量不能重复
        let name;
        //不允许作用域范围外使用
         {
             let bookName = '葵花宝典'
             //var bookName = '葵花宝典'
         }
         console.log(bookName)
        //不允许提前使用(变量提升)
        console.log(goodsName)
        let goodsName = '牙膏'
        //不影响内部作用域的使用
        {
            let goodsSal = 900
            function fun() {
                console.log(goodsSal)
            }
            fun()
        }
    </script>

1.2、const和var差别

<script>
        //声明常量
        const PI = 3.14
        //必须赋初始值
        const a;
        //不允许重复赋值
        const PI = 1.12
        //作用域外无法访问
        {
             const MENU = 1
        }
         console.log(MENU)
        //const声明对象或数组可以重复赋值
        const MENU = ['首页','新闻列表','热门新闻']
        MENU.push('明星爆料')
        console.log(MENU)
    </script>

1.3、模板字符串是增强版字符串，用反引号(`)表示

<script>
        //创建字符串，单引号、双引号、`
        let str = `ES6中提供的新的字符串符号`
        //换行不需要拼接符号
        let str1 = `<ul>
                        <li>列表项一</li>
                        <li>列表项二</li>
                        <li>列表项三</li>
                    </ul>`
        let str2 = '星期天'
        //字符串插槽
        let outStr = `${str2},要玩的很开心`
        console.log(outStr)
    </script>

二、ES6的解构表达式

        ES6引入了解构赋值，这是一种表达式，它允许你将数组或对象中的数据解构到不同的变量中。这是一种从数组或对象中提取数据，并将其赋值给声明的变量的语法糖，可以大大简化数据访问的代码。

2.1、数组解构赋值

        对于数组，解构赋值允许你直接从数组中提取值赋给声明的变量。

// 对数组解构
        const names = ['小沈阳','刘能','赵四','宋小宝']
        let [a,b,c,d] = names
        console.log(a)
        console.log(b)
        console.log(c)
        console.log(d)

2.2、对象解构赋值

        对于对象，解构赋值同样强大，允许你根据对象的属性名来提取值。

//对象解构
        const goods = {
            name:'苹果',
            sal:10,
            message:function(){
                console.log("美容养颜抗衰老")
            }
        }
        let {name,sal,message} = goods
        console.log(name)
        console.log(sal)
        message()

三、ES6的箭头函数声明及特点

 3.1、箭头函数简易写法

       let add = n =>{}//参数列表中只有一个参数可以省略小括号
        let show = (n) => n*n //代码块中只有一行代码可以省略大括号
        console.log(show(10))

3.2、应用场景

<div id="div" style="width: 200px; height: 200px; background-color: aqua;">

</div>
<script>
    let divObj = document.getElementById("div")
        divObj.addEventListener("click",function(){
            let _this = this;
            //两秒后变色
            setTimeout(function(){
                _this.style.backgroundColor="pink"
            },2000)
        }) 

        let divObj = document.getElementById("div")
        divObj.addEventListener("click",function(){
            //两秒后变色
            setTimeout(()=>{
                this.style.backgroundColor="pink"
            },2000)
        }) 
</script>

3.3、rest和spread

        在JavaScript中，rest参数（也称为剩余参数）和spread操作符（也称为展开语法）是两个非常有用且强大的特性，它们分别用于函数参数和数组/对象操作中。虽然它们的作用不同，但它们都是基于ES6（ECMAScript 2015）引入的，并且都以某种方式处理数组（对于spread操作符，还包括对象）的多个元素。

//支持rest参数 接收不定数量的参数
        function date() {
            console.log(arguments)
        }
        date('小沈阳','赵四','刘能','宋小宝')
        function date(...args) {
            console.log(args)
        }
        date('小沈阳','赵四','刘能','宋小宝')
        function date(a,b,c,...args) {
            console.log(a)
            console.log(b)
            console.log(c)
            console.log(args)
        }

//其他对数组的操作
        const f1 = ['小沈阳','赵四']
        const f2 = ['刘能','宋小宝']
        // const username = f1.concat(f2)
        // console.log(username)
        const username = [...f1,...f2]
        console.log(username)

四、Symbol

Symbol是es6提供的新数据类型，是在es5的6种数据类型基础之上增加的第7种数据类型

es5的6种类型：string、number、Boolean、object、undefined、null

 es6的新数据类型： Symbol

特征： symbol的值是唯一的，解决命名冲突的问题

            symbol不能进行数学运算

            symbol定义的对象属性，无法使用for遍历

let name = Symbol('张三')
let name1 =Symbol('张三')
console.log(name == name1)

        let obj1 = {name:'zs',age:20}
        let obj2 = {name:'ls',sex:'男',address:'辽宁省沈阳市'}
        Object.assign(obj1,obj2)//assign将两个对象合并
        console.log(obj1)

五、迭代器

        迭代器协议定义了一个标准的迭代器必须具有next()方法，该方法返回一个对象，这个对象包含两个属性：

value：表示迭代器返回的当前值。

done：一个布尔值，表示迭代器是否已经遍历完其迭代对象

      const obj1 ={
            name:'小强',
            like:[
                '吃饭',
                '玩游戏',
                '旅游',
                'rap'
            ],
            [Symbol.iterator](){
                let index = 0;
                let _this = this;
                return{
                    next:function(){
                        if(index < _this.like.length){
                            const result = {value:_this.like[index],done:false}
                            index++
                            return result
                        }
                        else{
                            return{value:undefined,done:true}
                        }
                    }
                }
            }
        }
        for(let v of obj1){
            console.log(v)
        }
        console.log(obj1.name)

六、Promise封装读取文件

        在JavaScript中，使用Promise封装读取文件的功能可以让我们以异步的方式处理文件读取，并且以更加现代和优雅的方式处理回调地狱问题。这里以Node.js环境为例，因为Node.js原生支持文件系统（fs）模块，它提供了读取文件的异步API，尽管这些API已经返回了Promise（在Node.js的较新版本中），但我们仍然可以手动封装它们以展示如何构建自己的Promise。

<script>
        // Promise是es6中用于异步提交(局部提交)的工具，该工具内部Ajax
        const fs = require('fs')
        fs.readFile('new1.md',(err,data)=>{
            if(err) throw err;
            console.log(data.toString())
        })
   </script> 

const fs = require('fs')
// fs.readFile('new1.md',(err,data)=>{
//     if(err) throw err;
//     console.log(data.toString())
// })
//封装Promise
const p = new Promise(function (resolve,reject) {//参数一表示访问成功，参数二表示访问失败
    fs.readFile('new1.mda',(err,data)=>{
        if(err) reject(err);//如果出现异常则通过reject响应错误信息
        resolve(data)//如果没有异常则通过resolve响应正确数据
     })
})

//调用promise
//参数一：函数，用于接受正确的值
//参数二：函数，用于接收异常的值
p.then(function (value) {
    console.log(value.toString())
},function (reject) {
    console.log("读取失败~")
})