ES6快速入门

1.什么是ES6？

编程语言JavaScript是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是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进。

 

2.ES6语法新特性

2.1  变量声明let

在ES6之前，我们使用var关键字声明变量，无论声明在何处，都会被视为声明在函数的最顶部(不在函数内既在全局作用域的最顶部)，看一个例子来理解变量提升的概念：

function hello(boolean){
      //var hello;
    if(boolean){
      //使用var则自动提升到了最顶部相当于: hello = 'Hello World'
      var hello = 'Hello World';
    }
      console.log(hello);
 }
 hello(true);

如果改为let  hello则不会自动提升变量，日常使用最好使用let，控制值的作用域。

 

2.2  常量声明

const关键字用于声明常量，详情请看下面的例子

const name = 'JavaScript';
name = 'Java';  //此时如果再次赋值会报错,因为声明的是常量

 

2.3  模板字符串

用途1：基本的字符串格式化，将表达式嵌入到字符串中进行拼接，使用${}来界定

//es5
var name = 'Script';
console.log('Java' + name);

//es6
let name1 = 'Script';
console.log(`Java${name1}`); //JavaScript

 

用途2：

//ES5
var info = "你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn\
            你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn";
//ES6
let info2 = `你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn
            你好,欢迎来到itcats_cn你好,欢迎来到itcats_cn`;

 

2.4  函数默认参数

ES6为参数提供了默认值，在定义函数时便默认初始化了这个参数，以便在参数没有被传递进去时进行使用。

function getNum(num = 200){
   console.log(num);
}
getNum();      //输出200
getNum(300);   //输出300

 

2.5  箭头参数

ES6引入了一个十分牛逼的写法，那就是箭头函数

箭头函数最直观的三个特点：

(1)不需要function关键字来构建函数

(2)省略return关键字

(3)继承当前上下文的this关键字

//ES5写法
function add(a,b){
    return a+b;
}
console.log(add(100,100));

//-----add就是一个参数(变量),也可以写成
add = function(a,b){
    return a+b;
}
console.log(add(100,100));

//ES6写法————箭头函数
add = (a,b) => {
    return a+b;
}
console.log(add(100,100));

//如果只有一句话且作为返回值,ES6还可以继续简化
add = (a,b) => a+b;
console.log(add(100,100));

 

2.6  对象初始化简写

ES5中我们对对象都是以键值对的方式进行书写，是有可能出现键值相等的情况，如：

//ES5的写法
function student(name,scope){
    return {
       name:name,
       scope:scope
    };
}
console.log(JSON.stringify(student('张三',100)));

//在ES6中,如果键值相等则可以简写为
function student1(name,scope){
   return {
      name,
      scope
   };
}
console.log(JSON.stringify(student('李四',95)));

 

2.7  解构

数组和对象是JS中最常用也是最重要的表达方式，为了简化提取信息，ES6中引入了解构，这将是一个数据结构分解为更小部分的过程。

ES5中我们提取对象中的信息形式如下：

const student = {
    name : '张三',
    scope : 100
 };
 const name = student.name;
 const scope = student.scope;
 console.log(`name = ${name} , scope = ${scope}`);

ES6中通过解构提取对象

const student = {
    name : '张三',
    scope : 100
 };
 const name = student.name;
 const scope = student.scope;
 console.log(`name = ${name} , scope = ${scope}`);


 const student1 = {
    name1 : '张三',
    scope1 : 100
 };
const {name1,scope1} = student1;
 console.log(`name = ${name1} , scope = ${scope1}`);

 

2.8  Spread Operator

Spread Operator也就是三个点...   组装对象或数组 ，例如：

//数组
const str = ['a','b'];
const str_spread = [...str , 'c', 'd'];
console.log(JSON.stringify(str_spread));

//对象
const student = {name:'张三' , age : 18};
const student_spread = {...student , scope:100};
console.log(JSON.stringify(student_spread));

输出：

["a","b","c","d"]
{"name":"张三","age":18,"scope":100}

 

2.9  模块导入及导出(import/export)

(1)按变量或函数名称导入导出

//lib.js文件中
let bar = 'StringBar';
let foo = 'StringFoo';
let fn0 = function(){
   console.log('fn0');
}
let fn1 = function(){
   console.log('fn1');
}
export {bar , foo , fn0 , fn1};

//main.js文件中
import {bar , foo , fn0 , fn1} from './lib';
console.log(bar + "_" + foo);
fn0();
fn1();

此时如果直接运行node main，则会报错，因为node支持大部分的ES6语法，仍有少部分语法node是不支持的，此时需要安装babel插件转化为ES5

1、babel转换配置，项目根目录添加.balbelrc文件

{
    "presets":['es2015']
}

2、安装es6转化模块

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

3、安装全局命令行工具 

cnpm install babel-cli -g

4、使用

babel-node js文件名