ECMAScript6 (ES6)

1 简介

ECMAScript 6.0是 JavaScript 语言的下一代标准，2015 年 6 月正式发布。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。

它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系

• 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。
• ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
• 因此，ECMAScript （宪法）和 JavaScript（律师） 的关系是，前者是后者的规格，后者是前者的一种实现。

2 搭建前端环境

Node.js

3 ES6基本语法

• ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
• 本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

let声明变量

• 与我们的JavaScript中var声明变量有什么区别？

  • 作用域不同：let声明的变量是局部变量

  • 声明次数不同：let只能声明一次

  • 声明与使用顺序不同：let 声明的变量只能在执行后才存储

    // var 声明的变量会全局存储
    // let 声明的变量只能在执行后才存储
    
    console.log( x ); //没有报错，输出：undefined
    var x = "苹果";
    
    console.log(y);  //y is not defined（y没有定义）
    let y = "香蕉";
    

const声明常量

const 声明常量，为只读变量

• 一旦声明之后，其值是不允许改变的
• 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

解构赋值

• 它是一种针对数组或者对象进行模式匹配，将集合型数据进行分解、拆分，把里面的值逐一遍历获取

数组解构

var arr = [1,2,3];

//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);

对象解构

var user = {
    username : "吕布",
    weapon:"方天画戟",
    horse:"赤兔马"
};

//es6的解构
let {username,weapon,horse} = user;  // 注意：解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

模板字符串

定义多行字符串

取代 \n

//直接回车即可输出换行效果
let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;

console.log(str);

字符串插入变量和表达式

let name = `吕布`;
let age = 24;

// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);

// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);

字符串中调用函数

function test(){
    return "吃喝玩乐";
}

let str = `悲催的人生，从${test()}开始`;
console.log( str );

对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

拷贝对象

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {...user1}; // 深拷贝（克隆）

console.log(user1);
console.log(user2);

合并对象

吞噬合并（两个对象合并成一个对象）

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {head:"诸葛亮"};

let user = {...user1,...user2};

console.log( user );

函数的默认参数

形参处已声明，但不传入实参会怎样？

function test(name , age = 18){
    console.log(`我叫${name}，我今年${age}岁`);
}

test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

函数的不定参数

定义方法时，不确定有几个参数？

function test( ...arg ){
    console.log(`传入了${arg.length}个参数`);
    for(var i = 0 ;i<arg.length;i++){
        console.log(arg[i]);
    }
}

test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

箭头函数

箭头函数提供了一种更加简洁的函数书写方式，基本语法是：参数 => 函数体

// 传统
var f1 = function(a){
    return a*10;
}
console.log( f1(10) );

// es6
var f2 = a=>a*10;
console.log( f2(20) );

// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回

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

// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );

模块化

• 类似java语言的import
• 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
• 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取

传统的模块化

创建user.js文件

function addUser(name){
    return `保存${name}成功！`;
}

function removeUser(id){
    return `删除${id}号用户！`;
}

// 声明模块并导出
// module.exports={
//     save:addUser,
//     delete:removeUser
// }

// 声明模块导出的简写
module.exports={
    addUser,
    removeUser
}

test.js

let user = require("./user.js"); //引入user模块

console.log( user );

let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);

console.log(result1);
console.log(result2);

ES6的模块化

user.js

let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name,
    age,
    fn
}

// 如果你不想暴露模块当中的变量名字，可以通过as来进行操作
// 声明模块并导出
export{
    name as a,
    age as b,
    fn as c
}

test.js

import {name,age,fn} from "./user.js"

console.log(name);
console.log(age);
console.log(fn);

// 通过*来批量接收，as来指定接收的名字
import * as info from "./user.js";   

console.log(info.a);
console.log(into.b);
console.log( into.c() );

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）

原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！

babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

安装babel客户端环境

输入命令：

npm install --global babel-cli

查看版本

babel --version

安装转码器

创建专属目录，在其中初始化项目

npm init -y

创建babel配置文件 .babelrc ，并输入代码配置：

{
  "presets": ["es2015"],
  "plugins": []
}

安装转码器

npm install --save-dev babel-preset-es2015

转码

创建dist目录，用来存放转码后的文件

babel user.js --out-file .\dist\user.js
# 或
babel user.js -o .\dist\user.js

运行转码后的文件

node .\dist\test.js

ES6模块化的另一种写法

默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/*****************导出****************************/
export default{
    name:"老孙",
    eat(){
        return "吃点啥！";
    }
}

/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6提供了重命名的方法

/*******************student1.js**************************/
export let name = "我是来自student1.js";

/*******************student2.js************************/
export let name = "我是来自student2.js";

/*******************test_student.js************************/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';

console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js