前端基础：学习 ES6 新特性

目录

一、声明变量的两种方式

1）、let 声明变量(与var 声明变量的对比)

2）、const 声明常量（只读变量）

二、解构表达式

   1）、数组解构

   2）、对象解构

三、字符串处理

   1）、字符串扩展

   2）、字符串模板

四、函数优化

   1）、函数参数默认值

   2）、不定参数

   3）、箭头函数

   4）、实战：箭头函数结合解构表达式

五、对象优化

  1）、新增的API

  2）、声明对象简写

  3）、对象的函数属性简写

  4）、对象拓展运算符

六、map 和 reduce 的使用

七、Promise 编排

1）、前言

2）、案例

3）、Promise 创建

4）、Promise 改造以前嵌套方式

5）、使用Promise后的嵌套方式

6）、使用函数封装请求，优化处理后的方式

八、模块化

1）、什么是模块化？

2）、export

3)、import

---

---

一、声明变量的两种方式

1）、let 声明变量(与var 声明变量的对比)

 

2）、const 声明常量（只读变量）

---

二、解构表达式

   1）、数组解构

   2）、对象解构

---

三、字符串处理

 1）、字符串扩展

 2）、字符串模板

浏览器控制台打印效果：

---

四、函数优化

   1）、函数参数默认值

   2）、不定参数

   3）、箭头函数

   4）、实战：箭头函数结合解构表达式

---

五、对象优化

  1）、新增的API

  2）、声明对象简写

  3）、对象的函数属性简写

  4）、对象拓展运算符

---

六、map 和 reduce 的使用

  控制台打印： 

七、Promise 编排

  1）、前言

在JavaScript的世界中,所有代码都是单线程执行的。由于这个"缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求 a,bc,...后面的请求依赖前面的请求结果,就需要层层嵌套。这种缩进和层层嵌套的方式,非常容易造成上下文代码混乱,我们不得不非常小心翼翼处理内层函数与外层函数的数据,一旦内层函数使用了上层函数的变量,这种混乱程度就会加剧。总之,这种层叠上下文的层层嵌套方式,着实增加了神经的紧张程度。因此，ES6 推出了 “Promise”对象。

 

  2）、案例

实现功能：用户登录,并展示该用户的各科成绩，在页面发送两次请求。

• 查询用户,查询成功说明可以登录；
• 查询用户成功,则根据用户id，查询科目信息；
• 查询科目成功，则根据科目id,获取成绩。

分析

此时后台应该提供三个接口,一个提供用户查询接口,一个提供科目查询接口,一个提供各科成绩查询接口,为了渲染方便,最好响应Json数据。在这里就不编写后台接口了,而是提供三个 json文件，直接提供json数据，模拟后台接口。

3）、Promise 创建

//要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。
var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

//Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。


//对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。
promise.then(onFulfilled, onRejected)
//promise简化了对error的处理，上面的代码我们也可以这样写：
promise.then(onFulfilled).catch(onRejected)

4）、Promise 改造以前嵌套方式

        
        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数

        /* Promise 改造以前嵌套方式 : */    
        $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查询用户：", data);
                $.ajax({
                    url: `mock/user_corse_${data.id}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        $.ajax({
                            url: `mock/corse_score_${data.id}.json`,
                            success(data) {
                                console.log("查询到分数：", data);
                            },
                            error(error) {
                                console.log("出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });

 

5）、使用Promise后的嵌套方式

        /* 使用Promise后的嵌套方式(Promise可以封装异步操作) */
        let p = new Promise((resolve, reject) => {
            //异步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查询用户成功:", data)
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            });
        });

        p.then((obj) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${obj.id}.json`,
                    success: function (data) {
                        console.log("查询用户课程成功:", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                });
            })
        }).then((data) => {
            console.log("上一步的结果", data)
            $.ajax({
                url: `mock/corse_score_${data.id}.json`,
                success: function (data) {
                    console.log("查询课程得分成功:", data)
                },
                error: function (err) {
                }
            });
        })

6）、使用函数封装请求，优化处理后的方式

        /* 使用函数封装请求，优化处理后的方式: */
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: data => {
                        resolve(data);
                    },
                    error: err => {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            });

控制台打印：

---

八、模块化

1）、什么是模块化？

模块化就是把代码进行拆分，方便重复利用，类似java中的导包，要使用一个包，必须先导包；

在 JS 中没有包的概念，随之而来的是 “模块”。

 

模块功能主要由两个命令构成：“export” 和“import”。

• export 命令用于规定模块的对外接口。

• import 命令用于导入其他模块提供的功能。

2）、export

新建 hello.js 文件

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

/* 第一种写法： */
//声明util常量
const util = {
    sum(a, b) {
        return a + b;
    }
}
//导出 常量util
export { util }


/* 第二种写法： */
//导出常量util
export const util = {
    sum(a, b) {
        return a + b;
    }
}

/* 第三种写法： */
//导出默认default，导入时可以任意定义名称，比如叫：'util'
export default {
    sum(a, b) {
        return a + b;
    }
}

 

新建 user.js文件

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

export {name,age,add}

3)、import

新建 main.js 文件

//导入
import util from "./hello.js"
import {name,add} from "./user.js"

//使用导入其他js文件的函数、对象
util.sum(1,2);
console.log(name);
add(1,3);

 

参考资料：ES6 菜鸟教程