ES6详解

ES6

1. 什么是ECMAScript？

来看下前端的发展历程：

web1.0时代：

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

web2.0时代：

• 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
• 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
• 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

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

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。

3. 新特性

_1. let

在此之前js定义变量只有一个关键字：var，但var定义的变量有作用域混乱的问题

例如下代码

for (var i=0; i<10; i++) {
	console.log('循环内： ' + i);
}
console.log('循环外： ' + i);

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X7nWeKV9-1649414975771)(D:/%E7%BC%96%E7%A0%81/es6/es6/assets/1553300445313.png)]

从运行结果来看，变量i是全局变量

使用let就可以避免这样的问题

for (let i=0; i<10; i++) {
	console.log('循环内： ' + i);
}
console.log('循环外： ' + i);

_2. const

声明常量

_3. 字符串扩展

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

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

let msg = "hello es";
console.log(msg.includes('es'))

ES6中还提供了`来作为字符串模板标记，在两个``之间的部分都会被作为字符串的值，如果要拼接其它变量，可以${}引用变量

let name = '张三疯';
let msg = `hello ${name},
how are you?`;
console.log(msg);

_4. 解构表达式

1. 数组解构

   比如有一个数组：

   let arr = [1,2,3]
   

   ES6可以这样操作

   let arr = [1,2,3]
   let [x,y,z] = arr;// x、y、z将与arr中的每个位置对应来取值
   console.log(x,y,z);
   

2. 对象解构

   let person = {
       name:"张三",
       age:18,
       hobby: ['篮球','足球','钢琴']
   }
   // 解构表达式获取值，如过要用其它变量接收，需要额外指定别名
   let {name:userName,age,hobby} = person;
   console.log(userName);
   console.log(age);
   console.log(hobby);
   

_5. 函数优化

1. 函数参数默认值

   function sum(a , b = 1) {// 如果b值未传入则会使用默认值
       return a + b;
   }
   console.log(sum(5));
   

2. 箭头函数

   一个参数

   var print = obj => console.log(obj);
   print('hello es');
   

   多个参数，函数代码超过1行可用大括号括起来

   var sum = (a,b) => {
   	return a+b;
   }
   console.log(sum(3,5));
   

3. 对象的函数属性简写

   let person = {
       name: "zhangsan",
       test(score){
           console.log(this.name + "考试成绩：" + score);
       }
   }
   person.test(98);
   

_6. map和reduce

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

1. map

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

   let arr = ['3','9','-8'];
   console.log(arr)
   
   arr = arr.map(v => {
   	return parseInt(v)+1;//所有元素转成Int并加1
   });
   
   console.log(arr)
   

2. reduce

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

   let arr = [1,2,3,4,5];
   console.log(arr)
   
   let sum = arr.reduce((a,b) => a+b);
   
   console.log(sum)
   

_7. promise

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

语法

const promise = new Promise(function(resolve, reject) {
  // ... 执行异步操作

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

例

const p = new Promise(function (resolve, reject) {
    // 通过设置超时模拟异步
    setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出错了！num:" + num)
        }
    }, 300)
})

// 调用promise
p.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

_8. 模块化

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

而JS中没有包的概念，换来的是 模块。

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

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

1. export

   所有JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

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

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

   // 未声明对象的名字,当使用者导入时，可以任意起名字
   export default {
   	sum(a,b){
           return a + b;
       }
   }
   

2. import

   // 导入util
   import util from 'xxx.js'
   // 调用util中的属性
   util.sum(1,2)
   

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

   我们暂时不做测试，大家了解即可。

_9. 对象扩展

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

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

let person = {
	name: "zhangsan",
	age: 18
};

console.log(Object.entries(person));

_10. 数组扩展

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

• find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
• findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引
• includes（callback）：与find类似，如果匹配到元素，则返回true，代表找到了。