前端技术ES6新特性解构字符串扩展表达式箭头函数对象拓展运算符map 和 reduce Promise 模块化export import及Node.js

最新推荐文章于 2022-09-25 14:58:24 发布

Bug哆哆

最新推荐文章于 2022-09-25 14:58:24 发布

阅读量453

点赞数

分类专栏：全栈前端 js 文章标签： es6 node.js

本文链接：https://blog.csdn.net/baikunlong/article/details/113775756

版权

全栈同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

ES6

1、简介

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

每年一个新版本。
在这里插入图片描述

2、什么是 ECMAScript

来看下前端的发展历程：

web1.0 时代：

最初的网页以 HTML 为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端
单向流通。开发人员也只关心页面的样式和内容即可。

web2.0 时代：

1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。
1996 年，微软发布了 JScript，其实是 JavaScript 的逆向工程实现。
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组
织 ECMA，希望这种语言能够成为国际标准。
1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的
标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。JavaScript 和 JScript 都是
ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

所以，ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的 js 语言，如 JavaScript 则是规范的具体实现。

ES6 新特性

1、声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // var 声明的变量往往会越域
        // let 声明的变量有严格局部作用域
        {
            var a = 1;
            let b = 2;
        }
        console.log(a); // 1
        console.log(b); // ReferenceError: b is not defined
        // var 可以声明多次
        // let 只能声明一次
        var m = 1
        var m = 2
        let n = 3
        // let n = 4
        console.log(m) // 2
        console.log(n) // Identifier 'n' has already been declared
        // var 会变量提升
        // let 不存在变量提升
        console.log(x); // undefined
        var x = 10;
        console.log(y); //ReferenceError: y is not defined
        let y = 20;

        // 1. 声明之后不允许改变
        // 2. 一但声明必须初始化，否则会报错
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
    </script>
</body>
</html>

2、解构表达式

2.1 数组解构

let arr = [1,2,3];
//以前我们想获取其中的值，只能通过角标。ES6 可以这样：
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值
// 然后打印
console.log(x,y,z);

2.2 对象解构

    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    // 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
    const { name, age, language } = person;
    // 等价于下面
    // const name = person.name;
    // const age = person.age;
    // const language = person.language;
    // 可以分别打印
    console.log(name);
    console.log(age);
    console.log(language);
    //扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
    const { name: nn, age: aa, language:ll } = person;
    console.log(nn);
    console.log(aa);
    console.log(ll);

3、字符串扩展

3.1 几个新的 API

ES6 为字符串扩展了几个新的 API：

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

    let str = "hello.vue";
    console.log(str.startsWith("hello"));//true
    console.log(str.endsWith(".vue"));//true
    console.log(str.includes("e"));//true
    console.log(str.includes("hello"));//true

3.2 字符串模板

模板字符串相当于加强版的字符串，用反引号 ` ,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

    // 1、多行字符串
    let ss = `
        <div>
            <span>hello world<span>
        </div>
        `;
    console.log(ss);
    
    // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    let name = "张三";
    let age = 18;
    let info = `我是${name}，今年${age}了`;
    console.log(info);

    // 3、字符串中调用函数
    function fun() {
        return "这是一个函数"
    }
    let sss = `O(∩_∩)O 哈哈~，${fun()}`;
    console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

4、函数优化

4.1 函数参数默认值

    //在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
    function add(a, b) {
    // 判断 b 是否为空，为空就给默认值 1
        b = b || 1;
        return a + b;
    }
    // 传一个参数
    console.log(add(10));
    //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
    function add2(a , b = 1) {
        return a + b;
    }
    // 传一个参数
    console.log(add2(10));

4.2 不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。
具名参数只能放在参数列表的最后，并且有且只有一个不定参数

    function fun(...values) {
        console.log(values.length)
    }
    fun(1, 2) //2
    fun(1, 2, 3, 4) //4

4.3 箭头函数

ES6 中定义函数的简写方式：
一个参数时：

    //以前声明一个方法
    // var print = function (obj) {
    // console.log(obj);
    // }
    // 可以简写为：
    var print = obj => console.log(obj);
    // 测试调用
    print(100);

多个参数：

    var sum = function (a, b) {
        return a + b;
    }
    // 简写为：
    //当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
    var sum2 = (a, b) => a + b;
    //测试调用
    console.log(sum2(10, 10));//20
    // 代码不止一行，可以用`{}`括起来
    var sum3 = (a, b) => {
        c = a + b;
        return c;
    };
    //测试调用
    console.log(sum3(10, 20));//30

4.4 箭头函数结合解构表达式

    //需求，声明一个对象，hello 方法需要对象的个别属性
    //以前的方式：
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    function hello(person) {
        console.log("hello," + person.name)
    }
    //现在的方式
    var hello2 = ({ name }) => { console.log("hello," + name) };
    //测试
    hello2(person)

5、对象优化

5.1 新增的 API

ES6 给 Object 拓展了许多新的方法，如：

keys(obj)：获取对象的所有 key 形成的数组
values(obj)：获取对象的所有 value 形成的数组
entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1,v1],[k2,v2],...]
assign(dest, …src) ：将多个 src 对象的值拷贝到 dest 中。（第一层为深拷贝，第二层为浅
拷贝）

    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    console.log(Object.keys(person));//["name", "age", "language"]
    console.log(Object.values(person));//["jack", 21, Array(3)]
    console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
    const target = { a: 1 };
    const source1 = { b: 2 };
    const source2 = { c: 3 };
    //Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
    Object.assign(target, source1, source2);
    console.log(target)//{a: 1, b: 2, c: 3}

5.2 声明对象简写

    const age = 23
    const name = "张三" // 传统
    const person1 = { age: age, name: name }
    console.log(person1)
    // ES6：属性名和属性值变量名一样，可以省略
    const person2 = { age, name }
    console.log(person2) //{age: 23, name: "张三"}

5.3 对象的函数属性简写

    let person11 = {
        name: "jack",
        // 以前：
        eat: function (food) {
            console.log(this.name + "在吃" + food);
        },
        // 箭头函数版：这里拿不到 this
        eat2: food => console.log(person11.name + "在吃" + food),
        // 简写版：
        eat3(food) {
            console.log(this.name + "在吃" + food);
        }
    };
    person11.eat("apple");
    person11.eat2("烤鸭");
    person11.eat3("香蕉");

5.4 对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

    // 1、拷贝对象（深拷贝-->参考https://segmentfault.com/a/1190000018874254）
    let person12 = { name: "Amy", age: 15 }
    let someone = { ...person12 }
    console.log(someone) //{name: "Amy", age: 15}
    // 2、合并对象
    let age = { age: 15 }
    let name = { name: "Amy" }
    let person21 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
    console.log(person21) //{age: 15, name: "Amy"}

6、map 和 reduce

数组中新增了 map 和 reduce 方法。

6.1 map

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

    let arr = ['1', '20', '-5', '3'];
    console.log(arr)
    arr = arr.map(s => parseInt(s));
    console.log(arr)

6.2 reduce

语法：
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元
素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
currentValue （数组中当前被处理的元素）
index （当前元素在数组中的索引）
array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数(即第一个previousValue)）

示例：

    let arr2=[1,2,3,4];
    //不带初始值
    console.log(arr2.reduce((a,b)=>a+b));//10
    //带初始值
    console.log(arr2.reduce((a,b)=>a+b,100));//110

7、Promise

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

案例：用户登录，并展示该用户的各科成绩。在页面发送三次请求：

查询用户，查询成功说明可以登录
查询用户成功，查询科目
根据科目的查询结果，获取去成绩

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

user.json：
{ "id": 1, "name": "zhangsan", "password": "123456"}

user_course_1.json:
{ "id": 10, "name": "chinese"}

course_score_10.json:
{ "id": 100, "score": 90}

使用原来的嵌套查询：

    //回调函数嵌套的噩梦：层层嵌套。
    $.ajax({
        url: "mock/user.json",
        success(data) {
            console.log("查询用户：", data);
            $.ajax({
                url: `mock/user_course_${data.id}.json`,
                success(data) {
                    console.log("查询到课程：", data);
                    $.ajax({
                        url: `mock/course_score_${data.id}.json`,
                        success(data) {
                            console.log("查询到分数：", data);
                        },
                        error(error) {
                            console.log("出现异常了：" + error);
                        }
                    });
                },
                error(error) {
                    console.log("出现异常了：" + error);
                }
            });
        },
        error(error) {
            console.log("出现异常了：" + error);
        }
    });

简直是魔鬼嵌套，不利于维护。

接下来使用Promise进行改进。

7.1 Promise的语法：

    const promise = new Promise(function (resolve, reject) {
        // 执行异步操作
        if (/* 异步操作成功 */) {
            resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
        } else {
            reject(error);// 调用 reject，代表 Promise 会返回失败结果
        }
    });

使用箭头函数可以简写为：

    const promise = new Promise((resolve, reject) =>{
        // 执行异步操作
        if (/* 异步操作成功 */) {
            resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
        } else {
            reject(error);// 调用 reject，代表 Promise 会返回失败结果
        }
    });

这样，在 promise 中就封装了一段异步执行的结果。

7.2 处理异步结果

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。
如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

	promise.then(function (value) {
		// 异步执行成功后的回调
	}).catch(function (error) {
		// 异步执行失败后的回调
	})

7.3 Promise 改造以前嵌套方式

    new Promise((resolve, reject) => {
        $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查询用户：", data);
                resolve(data.id);
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });
    }).then((userId) => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `mock/user_course_${userId}.json`,success(data) {
                    console.log("查询到课程：", data);
                    resolve(data.id);
                },
                error(error) {
                    console.log("出现异常了：" + error);
                }
            });
        });
    }).then((courseId) => {
        console.log(courseId);
        $.ajax({
            url: `mock/course_score_${courseId}.json`,
            success(data) {
                console.log("查询到分数：", data);
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });
    });

可以看到已经从嵌套变成了链式了，更加符合人类的习惯。

7.4 优化处理

上边的重复代码很多，所以可以优化，优化后有点axios的味道了。

优化：通常在企业开发中，会把 promise 封装成通用方法，如下，封装了一个通用的 get 请求方法：

    let get = function (url, data) { // 实际开发中会单独放到 common.js 中
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: "GET",
                data: data,
                success(result) {
                    resolve(result);
                },
                error(error) {
                    reject(error);
                }
            });
        })
    };
    // 使用封装的 get 方法，实现查询分数
    get("mock/user.json").then((result) => {
        console.log("查询用户：", result);
        return get(`mock/user_course_${result.id}.json`);
    }).then((result) => {
        console.log("查询到课程：", result);
        return get(`mock/course_score_${result.id}.json`)
    }).then((result) => {
        console.log("查询到分数：", result);
    }).catch((error) => {
        console.log("出现异常了：" + error);
    });

8、模块化

8.1 什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先
导包。而 JS 中没有包的概念，换来的是模块。

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

export命令用于规定模块的对外接口。
import命令用于导入其他模块提供的功能。

8.2 export

比如我定义一个 js 文件:hello.js，里面有一个对象，就能用export导出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export {util}

当然，也可以简写为：

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。
当要导出多个值时，还可以简写。比如我有一个文件：user.js：

var name = "jack"
var age = 21
export {name,age}

省略名称
上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。
因此 js 提供了default关键字，可以对导出的变量名进行省略。
例如：

export default {
    sum(a,b){
        return a+b;
    }
}

这样，当使用者导入时，可以任意起名字。

8.3 import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这
个模块。

例如我要使用上面导出的 util：

    import util from 'js/hello'
    console.log(util.sum(1,2));

    import {name,age} from 'js/hello'
    console.log(name,age);

但是上面的代码暂时无法测试，因为浏览器目前还不支持 ES6 的导入和导出功能。除非借
助于工具，把 ES6 的语法进行编译降级到 ES5，比如Babel-cli工具。

Node.js

官网：http://nodejs.cn/api/
前端开发，少不了 node.js；Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

我们关注与 node.js 的 npm 功能就行；

NPM 是随同 NodeJS 一起安装的包管理工具，JavaScript-NPM，Java-Maven；

官网下载安装 node.js，并使用 node -v 检查版本
配置 npm 使用淘宝镜像
npm config set registry http://registry.npm.taobao.org/
如果 npm install 安装依赖出现 chromedriver 之类问题，先在项目里运行下面命令
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
然后再运行 npm install

Bug哆哆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端技术ES6新特性解构字符串扩展表达式箭头函数对象拓展运算符map 和 reduce Promise 模块化export import及Node.js

ES61、简介ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。它的目标.
复制链接

扫一扫

专栏目录