04 Es6

最新推荐文章于 2024-03-16 16:51:14 发布

pziwang

最新推荐文章于 2024-03-16 16:51:14 发布

阅读量174

点赞数

分类专栏： # 2.Nodejs

本文链接：https://blog.csdn.net/u014736082/article/details/103883300

版权

2.Nodejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

4. ES

ES6？就是ECMAScript第6版标准。

4.1. 什么是ECMAScript?

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了Object.create()、Object.deﬁneProperty()、getters和setters、严格模式以及 JSON对象。

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得 JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

4.2. ECMAScript的快速发展

而后，ECMAScript就进入了快速发展期。

1998年6月，ECMAScript 2.0 发布。
1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。
2007年10月。。。。ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。 ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的 ECMAScript5和6版本中
2009年12月，ECMAScript 5 发布。
2011年6月，ECMAScript 5.1 发布。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

4.3. ES6的一些新特性

这里只把一些常用的进行学习，更详细的大家参考：阮一峰的ES6教程

4.3.1. 创建测试工程

在这里插入图片描述

4.3.2. let 和 const 命令

之前，js定义变量只有一个关键字： var

var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。

例如这样的代码：

在这里插入图片描述
打印的结果：

let

let 所声明的变量，只在 let 命令所在的代码块内有效。

把刚才的 var 改成 let 试试：

for(let i = 0; i < 5; i++){  
console.log(i); 
} 
console.log("let 循环外：" + i)

结果：
在这里插入图片描述

const 声明的变量是常量，不能被修改；在浏览器控制台进行如下操作：
在这里插入图片描述

4.3.3. 模板字符串

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5   
let name = 'itcast'   
console.log('hello ' + name)    
//es6    
const name = 'itcast'   
console.log(`hello ${name}`) 
//hello itcast

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

 // es5    
var msg = "Hi \    man!"    
// es6    
const template = `<div>       
   <span>hello world</span>   
</div>`

4.3.4. 对象初始化简写

ES5对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如

 function person5(name, age) {       
     return {name:name, age:age};   
 }   
console.log("es5 => " + JSON.stringify(person5("itcast", 13)))

以上代码可以简写为：

  function person6(name, age) {       
      //属性和值是同名的则可以省略为如下：      
      return {name, age}    
  }   
console.log("es6 => " + JSON.stringify(person6("itcast", 13)))

4.3.5. 解构表达式

1）数组解构

比如有一个数组：

let arr = [1,2,3]

想获取其中的值，只能通过角标。ES6可以这样:

const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z);

结果：
在这里插入图片描述

2）对象解构

例如有个person对象：

const person = {    
name:"jack",    
age:21,   
language: ['java','js','css'] 
}

可以这么做:

// 解构表达式获取值 
const {name,age,language} = person; 
// 打印 
console.log(name); 
console.log(age); 
console.log(language);

结果：
在这里插入图片描述

如果想要用其它变量接收，需要额外指定别名：
在这里插入图片描述

{name:n}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

3）拷贝对象属性

比如有一个person对象：

const person = {    
name:"jack",    
age:21,   
language: ['java','js','css'] 
}

想获取它的 name 和 age 属性，封装到新的对象，该怎么办？
在这里插入图片描述

在解构表达式中，通过 language 接收到语言，剩下的所有属性用 … obj 方式，可以一起接收，这样 obj 就是一个新的对象，包含了 person 中，除了 language 外的所有其它属性

数组也可以采用类似操作。

4.3.6. 函数优化

1）箭头函数

ES6中定义函数的简写方式：在es-demo.html中测试；一个参数时：

<!DOCTYPE html>
<html lang="en"> 
    <head>    
        <meta charset="UTF-8">  
        <title>es6 测试</title>    
        <script type="text/javascript">     
            /*for(var i = 0; i < 5; i++){   
            console.log(i);       
            }       
            console.log("var 循环外：" + i)*/ 
            /*        for(let i = 0; i < 5; i++){  
            console.log(i);        
            }        
            console.log("let 循环外：" + i) */ 
            /*        let name = "itcast";    
            console.log("hello " + name);        
        //es 6        
        console.log(`es6 hello ${name}`); */ 
            /*    //es 5    
            const str = "hello " +        "itcast";    
            //es 6    const template = `<div>   
            <span>hello itcast</span>   
            </div>` */ 
            /*    function person5(name, age) {     
            return {name:name, age:age};    }   
            console.log("es5 => " + JSON.stringify(person5("itcast", 13)))            
    function person6(name, age) {        
    return {name, age}  
    }    
    console.log("es6 => " + JSON.stringify(person6("itcast", 13))) */
var print = function (obj) {       
    console.log(obj);       
};       
            print("print");          
        var print2 = obj => console.log(obj);   
            print2("print2");
    </script> 
    </head> 
    <body>
</body>
</html>

多个参数

// 两个参数的情况： 
var sum = function (a , b) {   
    return a + b; 
} 
console.log(sum(1, 2)); // 简写为： 
var sum2 = (a,b) => a+b;
console.log(sum2(1, 2));

代码不止一行，可以用 {} 括起来

var sum3 = (a,b) => {    
    console.log(a+b)    
    return a + b; } 
console.log(sum3(1, 2));

2）对象的函数属性简写

比如一个Person对象，里面有eat方法：

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">  
        <title>es6 测试</title>    
        <script type="text/javascript">     
            /*for(var i = 0; i < 5; i++){            console.log(i);        }        console.log("var 循环外：" + i)*/ 
            /*        for(let i = 0; i < 5; i++){ console.log(i);        }        console.log("let 循环外：" + i) */
            /*        let name = "itcast";        console.log("hello " + name);
        //es 6        console.log(`es6 hello ${name}`); */
            /*    //es 5    const str = "hello " +        "itcast";    //es 6    const template = `<div>    <span>hello itcast</span>    </div>` */ 
            /*    function person5(name, age) {        return {name:name, age:age};    }    console.log("es5 => " + JSON.stringify(person5("itcast", 13)))
    function person6(name, age) {        return {name, age}    }    console.log("es6 => " + JSON.stringify(person6("itcast", 13))) */ 
            /*        var print = function (obj) {            console.log(obj);        };        print("print");
        var print2 = obj => console.log(obj);        print2("print2"); */     
            // 两个参数的情况：        
            var sum = function (a , b) {   
                return a + b;        }     
            console.log(sum(1,1))
            
        // 简写为：       
            var sum2 = (a,b) => a+b;     
            console.log(sum2(1,2))
            
        var sum3 = (a,b) => {     
            console.log(a+b)        
            return a + b;
  }        console.log(sum3(1,3))
        let person = {       
            "name":"jack",         
            //以前，也可以给food默认值      
            eat1: function (food="肉") {   
                console.log(this.name + "在吃" + food);       
            },            
            //箭头函数版      
            eat2: (food) => console.log(person.name + "在吃" + food),
            //不能使用this            
            //简版          
            eat3(food){           
                console.log(this.name + "在吃" + food)            }        }       
        person.eat1("111")     
            person.eat2("222")  
            person.eat3("333")  
        </script> 
    </head> 
    <body>
      
</body>
</html>

3）箭头函数结合解构表达式

比如有一个函数：

 const person = {            
     name:"jack",            
     age:21,            
     language: ['java','js','css']    
 }
        function hello(person) {  
            console.log("hello," + person.name)    
        }
        
hello(person);

如果用箭头函数和解构表达式

 var hello2 = ({name}) => console.log("hello2," + name);
        hello2(person);

4.3.7. map和reduce

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

1)map

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

举例：有一个字符串数组，希望转为int数组

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

在这里插入图片描述

2)reduce

reduce(function(),初始值（可选）) ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例：

let arr = [1,20,-5,3]
# 没有初始值 
arr.reduce((a, b) => a+b) 
# 设置初始值为1 
arr.reduce((a, b) => a+b, 1)

arr.reduce((a, b) => a*b)

arr.reduce((a,b) => a*b, 0)

执行结果：

在这里插入图片描述

4.3.8. promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

语法：

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

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

如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：

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

如果想要处理promise异步执行失败的事件，还可以跟上catch：

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

示例：

 const promise = new Promise(function(resolve, reject){      
     setTimeout(()=>{           
         let num = Math.random();       
         if (num < 0.5) {              
             resolve("成功！num = " + num)    
         } else {              
             reject("失败！num = " + num)     
         }      
     }, 300)   
 });
        promise.then(function (msg) {           
            console.log(msg)     
        }).catch(function (msg) {   
            console.log(msg)       
        })

结果：
在这里插入图片描述

4.3.9. 对象扩展

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

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

let p2 = {"name":"jack","age":21} 
Object.keys(p2) 
Object.values(p2) 
Object.entries(p2)
//测试覆盖问题 
let obj = {"name":"rose"} 
Object.assign(obj, p2)

Object.assign(obj, p2, {"address":"China"})

在这里插入图片描述

4.3.10. 数组扩展

ES6给数组新增了许多方法：

ﬁnd(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
ﬁndIndex(callback)：与ﬁnd类似，不过返回的是匹配到的元素的索引
includes（element）：判断指定元素是否存在

let arr = [1, 20, -5, 3]
//元素能整除2的 
arr.find(i => i%2===0)
//查询元素能整除2的索引号
arr.findIndex(i => i%2===0)
arr.includes(3) arr.includes(4)

在这里插入图片描述

4.3.11. export和import

ES6 在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过 import命令输入。遗憾的是export和import命令不能在浏览器直接使用，不过可以通过babel转换为es5再运行。 import导入模块、export导出模块。

1）安装babel

babel是JavaScript 语法的编译器。
（1）babel转换配置,项目根目录添加 .babelrc 文件；注意不要忘记了这个文件中的 .

{  "presets" : ["es2015"] }

在这里插入图片描述

（2）安装es6转换模块

cnpm install babel-preset-es2015 --save-dev

在这里插入图片描述

（3）全局安装命令行工具

# 管理员身份 执行 cnpm install  babel-cli -g

在这里插入图片描述

（4）使用

babel-node js文件名

2）命名导出（Named exports）

此方式每一个需要输出的数据类型都要有一个name，统一输入一定要带有 {} ，即便只有一个需要输出的数据类型。

export导出模块：编写export1.js

//方式一 
export let name = "itcast";
export let age = 13; 
export let gender = "男"; 
export let say = function(str){   
    console.log(str); 
}

//方式二；更推荐 
let name = "itcast"; 
let age = 13; let gender = "男"; 
let say = function(str){    
    console.log(str);
} export {name, age, gender, say}

import导入模块：编写import1.js

import {name, age, gender, say} from "./export1"
console.log(name, age, gender)
//import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接 口。 //name = "heima" //会报错 "name" is read-only
//上面代码中，脚本加载了变量name，对其重新赋值就会报错，因为name是一个只读的接口。但是，如果name是一 个对象，改写name的属性是允许的。也就是name.abc = xxx 这样是可以的

say("hello itcast")

//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。 
import {name as abc, say as hello} from "./export1" 
console.log(abc)
hello("hello heima")

在这里插入图片描述

3）默认导出（Default exports）

默认输出不需要name，但是一个js文件中只能有一个export default。 export导出模块：编写export2.js

//方式一
export default function(str){    console.log(str) }

//方式二；一个文件只能一个export default，不能1个以上同时存在 
/* export default {    
eat(sth){      
console.log("eat " + sth)    },    
drink(sth) {
    console.log("drink " + sth)    } } 
    */

import导入模块：编写import2.js

//导入default的模块文件不需要使用{} 
import itcast1 from "./export2"

itcast1("hello itcast");

/* import abc from "./export2"
abc.eat("meat") abc.drink("water") */


[外链图片转存中...(img-QJ19TC4r-1578409681286)]

#### 3）默认导出（Default exports） 

默认输出不需要name，但是一个js文件中只能有一个export default。 export导出模块：编写export2.js

```js
//方式一
export default function(str){    console.log(str) }

//方式二；一个文件只能一个export default，不能1个以上同时存在 
/* export default {    
eat(sth){      
console.log("eat " + sth)    },    
drink(sth) {
    console.log("drink " + sth)    } } 
    */

import导入模块：编写import2.js

//导入default的模块文件不需要使用{} 
import itcast1 from "./export2"

itcast1("hello itcast");

/* import abc from "./export2"
abc.eat("meat") abc.drink("water") */

需要注意 export default 在一个模块（文件）中只能使用一次；并且不能放置在函数或条件代码里面