JavaScript ES6部分语法

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的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);

 

let与var的区别是：通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
//计数器i只在for循环体内有效，在循环体外引用就会报错。

 

• 箭头函数

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

// 定义函数的一般方式
let log = function() { 
         alert('no param') 
}
// 通过箭头函数的写法定义
let log = () => { alert('no param') };
log();
=====================================
// 定义函数的一般方式
let show = function(response) { 
         alert(response) 
}
// 通过箭头函数的写法定义
let show = response => { alert(response) };
show('hello');   
=====================================
// 定义函数的一般方式
let show = function(a, b) { 
         alert(a +b) 
}
// 通过箭头函数的写法定义
let show = (a, b) => { alert(a+b) };

 

• 模块导入import和导出export

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

// model.js文件中导出
var person = {name:'tom',age:18}
export default {person}

// index.js文件夹中导入
import person from 'js/model.js'

// index.js中使用模块
person.name
person.age

/*
上面导出时使用了default关键字，如果不使用这个关键字，导入时需要加大括号：
import {person} from 'js/model.js'
*/

目前ES6的模块功能需要在服务器环境下才可以运行。

 

• 对象的简写 

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);
    }
}