ES6学习笔记（第四天）

ES6学习笔记（第四天）

1.模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
好处：
(1) 防止命名冲突
(2) 代码复用
(3) 高维护性
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能

暴露方式：

//准备一个模块文件m.js
//通过export向外暴露
//方式一：分别暴露
export let name="wangwenhui"
export function send(){
    console.log("发微信");
}
//方式二：统一暴露
 let name="wangwenhui"
 function send(){
    console.log("发微信");
}
export{name,send}
//方式三：默认暴露（export default 直接加想暴露的数据，任意类型，字符串/对象比较多）
//返回的是一个对象，对象里面的default属性存着name,send
//如：console.log(m1.name);//wangwenhui
export default{
    name:"wangwenhui",
    send:function() {
       console.log("发微信");
       }
   }
//另外一个文件想使用模块里的内容
<script type="module">
    //引入m.js模块内容
    import *as m1 from "./m.js";
    console.log(m1.name);//wangwenhui
</script>

直接在引入模块方式：

<script type="module">

//方式一：通用的引入方式（那种暴露方式都可以用）
    import *as m1 from "./m.js";

//方式二：解构赋值形式
//分别暴露和统一暴露都可以这样
import{name,send}from "./m.js"
//但是默认暴露一定要给default起一个别名
import{default as m2}from "./m.js"
console.log(m2)//{name: 'wangwenhui', send: ƒ}

//方式三：简便形式（只针对默认暴露）
import m from "./m.js"
console.log(m);//{name: 'wangwenhui', send: ƒ}

</script>

在入口文件引入模块，再在HTML文件引入入口文件，进而引入模块是方式（这种方式有兼容性的问题）

//在一个入口文件app.js中引入模块
    import *as m1 from "./m.js";
    console.log(m1);
//在html文件中引入入口文件
    <script src="./app.js" type="module">

Babel引入方式(一个javascript编译器)
实际工作中一般用Webpack

   <!-- 
        1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
        2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
        3. 打包 npx browserify dist/js/app.js -o dist/bundle.js
     -->
     <script src="dist/bundle.js"></script>

2.ES7的新特性

(1)Array.prototype.includes
Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

var arr=['a','b','c']
console.log(arr.includes('a'));//true
console.log(arr.includes('d'));//false

(2)指数操作符
在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

console.log(2**10);//1024
console.log(Math.pow(2,10));//1024

3.ES8的新特性

async 和 await 两种语法结合可以让异步代码像同步代码一样

3.1 async函数

(1) async 函数的返回值为 promise 对象，
(2) promise 对象的结果由 async 函数执行的返回值决定

        //正常函数前加一个async就变成了async 函数
        async function fn(){
            // 返回一个字符串
            // return '尚硅谷';
            // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
            // return;
            //抛出错误, 返回的结果是一个失败的 Promise
            // throw new Error('出错啦!');
            //返回的结果如果是一个 Promise 对象
            return new Promise((resolve, reject)=>{
                resolve('成功的数据');
                // reject("失败的错误");
            });
        }

        const result = fn();
        console.log(result);

3.2 await函数

(1) await 必须写在 async 函数中
(2) await 右侧的表达式一般为 promise 对象
(3) await 返回的是 promise 成功的值
(4) await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

        //创建 promise 对象
        const p = new Promise((resolve, reject) => {
            // resolve("用户数据");
            reject("失败啦!");
        })

        // await 要放在 async 函数中.
        async function main() {
            //Promise失败
            try {
                let result = await p;
                //
                console.log(result);//用户数据
            } catch (e) {
                console.log(e);//失败啦！
            }
        }
        //调用函数
        main();

3.3 对象方法的扩展

(1) Object.values()方法返回一个给定对象的所有可枚举属性值的数组
(2) Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
(3) Object.getOwnPropertyDescriptors
该方法返回指定对象所有自身属性的描述对象

 //声明对象
        const school = {
            name:"wangwenhui",
            cities:['北京','上海','深圳'],
            xueke: ['前端','Java','机器学习','C++']
        };

        //获取对象所有的键
        console.log(Object.keys(school));//['name', 'cities', 'xueke']
        //获取对象所有的值
        console.log(Object.values(school));// ['wangwenhui', Array(3), Array(4)]
        //entries返回一个数组
         console.log(Object.entries(school));

        //对象属性的描述对象
        console.log(Object.getOwnPropertyDescriptors(school));
                                //原型对象，描述对象
        const obj = Object.create(null, {
            //Object.getOwnPropertyDescriptors()返回的就是类似这个的描述对象
            name: {
                //设置值
                value: 'wangwenhui',
                //属性特性
                writable: true,  //是否可写
                configurable: true, //是否可以删除
                enumerable: true    //是否可以枚举
            } 
        });