ES6语法详情

ES6语法

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且React库中大量使用了ES6的语法，所以掌握这些常用的ES6语法是必须的。

变量声明let和const

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

alert(iNum01) // 弹出undefined
// alert(iNum02); 报错，let关键字定义变量没有变量预解析
// alert(iNum03); 报错，const关键字定义变量没有变量预解析

var iNum01 = 6;
// 使用let关键字定义变量
let iNum02 = 12;
// 使用const关键字定义变量
const iNum03 = 24;

alert(iNum01); // 弹出6
alert(iNum02); // 弹出12
alert(iNum03); // 弹出24

iNum01 = 7;
iNum02 = 13;
//iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量

alert(iNum01)
alert(iNum02); 
alert(iNum03);

解构赋值

ES6 允许我们按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

1、数组的解构赋值

const arr = [1, 2, 3] 
let [a, b, c] = arr 
console.log(a, b, c); // 1 2 3

2、对象的解构赋值

const obj = { name: 'tom',address:'beijing', age: '100'} 
let {name, age} = obj  // 变量名称必须和对象的key同名
console.log(name, age); //tom 100

3、函数参数的解构赋值

const person = { name: '小明', age: 11}
function printPerson({name, age}) { // 函数参数可以解构一个对象
  console.log(`姓名：${name} 年龄：${age}`);
}
printPerson(person) // 姓名：小明 年龄：11

字符串模板

ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来

let name = '小明';
let age = 11;

alert(`我的名字是${name},我的年龄是${age}岁。`)

扩展运算符(...)

扩展运算符（...），它用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并等情形。

let arr = [1,2,3];
let arr2 = [...arr,4];
console.log(arr2)  // [1,2,3,4]

function fnAdd(a,b,c){
    alert(a + b + c);
}
fnAdd(...arr); // 6

function fnMyalert(...a){
    console.log(a);
    alert(a[0]);
    alert(a[1]);
}
fnMyalert(10,5); // [10,5]  10  5

箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。

// 定义函数的一般方式
/*
function fnRs(a,b){
    var rs = a + b;
    alert(rs);
}
fnRs(1,2);        
*/

// 通过匿名函数赋值来定义函数
/*
var fnRs = function(a,b){
    var rs = a + b;
    alert(rs);
}
fnRs(1,2);
*/

// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
    var rs = a + b;
    alert(rs);
}        
// fnRs(1,2);

// 一个参数可以省略小括号
var fnRs2 = a =>{
    alert(a);
}
fnRs2('haha!');

// 函数中如果只有一个return语句，return和大括号都可以省略
/*
var fnAdd = function(a,b){
    return a + b;
}
*/
var fnAdd = (a,b) => a+b;


// 函数的返回值如果是javascript对象时，对象需要加括号
/*
let fn = function(){
    return {"a":5};
}
*/
// fn = ()=>{"a":5}
// 上面这么写是错的，需要写成下面的形式，返回的对象要加括号
fn = ()=>({"a":5})

// 箭头函数的作用，可以绑定对象中的this
var person = {
    name:'tom',
    age:18,
    showName:function(){
        setTimeout(()=>{
            alert(this.name);
        },1000)            
    }
}
person.showName();

模块导入import和导出export

javascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，一个js文件就是一个模块，js文件中需要先导出(export)后，才能被其他js文件导入(import) 

ES6的导出分为名字导出和默认导出 1、名称导出
导入的变量名必须和导出的变量名一致

// mod01.js文件中导出
export let iNum01 = 12;
export let fnMyalert = function(){
    alert('hello');
}

// index.html文件中导入
<script type="module">
    import {iNum01,fnMyalert} from "./js/mod01.js";
    alert(iNum01);
    fnMyalert();
</script>

// mod01.js中还可以写成如下：
let iNum01 = 12;
let fnMyalert = function(){
    alert('hello');
}
export {iNum01,fnMyalert}

2、默认导出(default export) 一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。

// mod02.js文件中导出
export default {"name":"tom","age":18}

// index.html文件中导入
<script type="module">
    import person from "./js/mod02.js";
    alert(person.name);
</script>

对象的简写

javascript对象在ES6中可以做一些简写形式，了解这些简写形式，才能方便我们读懂一些在javascript代码中简写的对象。

let name = '李思';
let age = 18;

/*
var person = {
    name:name,
    age:age,
    showname:function(){
        alert(this.name);
    },
    showage:function(){
        alert(this.age);
    }
}
*/

// 简写成下面的形式
var person = {
    name,
    age,
    showname(){
      alert(this.name);
    },
    showage(){
      alert(this.age);
    }
}

person.showname();
person.showage();

定义类及类的继承

ES6 封装了class语法来大大简化了类的创建和类的继承 

// 定义类，类的首字母要大写
class Person {
    // 定义构造函数
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    // 定义方法
    showname(){
        alert('我的名字是：' + this.name);
    }
    showage(){
        alert('我的年龄是：' + this.age);
    }
}

// 通过类实例化对象
let Andy = new Person('刘德华',55);

// 调用对象的方法
Andy.showname();
Andy.showage();

// 定义类继承Person类
class Student extends Person{
    constructor(name,age,school){
        super(name,age);
        this.school = school;
    }
    showschool(){
        alert('我的学校是：' + this.school);
    }
}

// 通过类实例化对象
let Tom = new Student('小明','16','北京一中');

// 调用对象的方法
Tom.showname();
Tom.showschool();

异步操作

es6新增了异步操作的写法，来解决异步操作函数回调的问题，这个新增的写法就是Promise对象，Promise实际上就是一个特殊的Javascript对象，反映了”异步操作的最终值”。”Promise”直译过来有预期的意思，因此，它也代表了某种承诺，即无论你异步操作成功与否，这个对象最终都会返回一个值给你。
在实际开发中，如果我们在写ajax程序时，我们如果希望两个ajax程序都执行完后，再去做一件事情，我们实现的方法可以是，在一个ajax中嵌套另外一个ajax程序：

$.ajax({
    url:'data01.json',
    type:'get',
    dataType:'json',
    success:function(dat1){
        $.ajax({
            url:'data01.json',
            type:'get',
            dataType:'json',
            success:function(dat2){
                console.log([dat1,dat2])
            }
        })
})

上面的写法不方便编写，也不方便阅读，Promise对象就可以解决这个问题

// 实例化一个Promise对象
var pro01 = new Promise(function(resolve,reject){
    $.ajax({
        url:'js/data01.json',
        type:'get',
        dataType:'json'
    }).done(function(dat){
        resolve(dat)
    }).fail(function(err){
        reject(err)
    })
});

var pro02 = new Promise(function(resolve,reject){
    $.ajax({
        url:'js/data02.json',
        type:'get',
        dataType:'json'
    }).done(function(dat){
        resolve(dat)
    }).fail(function(err){
        reject(err)
    })
});

// 通过Promise对象来处理回调
pro01.then(function(dat){
    console.log(dat);
}).catch(function(err){
    console.log(err)
})

上面将两个ajax请求分别放在两个promise对象中，其中resolve参数是处理请求成功的回调函数，reject是处理失败的回调函数，接着就可以通过这个对象，来处理ajax的回调，相当于把回调拆开了写。 如果希望两个ajax程序都执行完后，再去做一件事情，可以写成如下的形式：

Promise.all([pro01,pro02]).then(result=>console.log(result));

新增数组操作方法

map() 方法

map方法可以分别处理数组中的成员，返回一个新数组，也可以用于遍历数组

let aList = [1,2,3];

aList.map(function(a){
    alert(a);
})

//  弹出 1  2   3

concat() 方法

concat() 方法用于连接新的数组成员或者其他数组，返回一个新的数组

let aList01 = [1,2,3];
let aList02 = ['a','b'];
let aList03 = arr.concat(4,5);
let aList04 = aList01.concat(aList02);

console.log(aList03) // [1,2,3,4,5]
console.log(aList04) // [1,2,3,'a','b']