ES6语法

ES6语法介绍

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

变量声明

var:它是用来声明变量的。如果在方法中声明，则为局部变量；如果在全局中声明，则为全局变量。

var num=10

 

 

 let:ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

 

 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {}
计数器i只在for循环体内有效，在循环体外引用就会报错。

const:const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;

 

 

Javascript对象的写法

ES5的写法

 

var people= { 
    name:'xiaoming',
    age:15,
    say:function(){
        alert('hello')
    }
}

people.say()

也可以写

var people = {};
people.name = 'xiaoming';
people.age = 15
people.say = function (){alert('hello')}
people.say();

ES6的语法

//定义变量
var name='xiaoming';
var age=15
//创建对象
var people={
      name,
      age,
      say:function(){
            alert('hello');
      } 
};
//调用
people.say()

注意：变量名和属性名一致

ES6的箭头函数

作用：

• 新的方式定义函数
• 改变this的指向

新的方式定义函数：

 

//无参数,无返回值
var say = ()=> {
    alert('我是无参数无返回值函数');
}
//有参数,无返回值（当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。）
var eat = food => {
    alert('我喜欢吃'+food);
}
//有参数,有返回值
var total = (num1,num2) => {
    return num1+num2;
}

 

this指向：

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。