一起学习一下ES6的一些新特性

     ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标砖，已经在2015年6月正式发布了，它的目标，是使得JavaScript语言可以用来编写负责的大型应用程序 ，成为企业级开发语言。

       ES6里面出了很多的新特性和新语法,nodejs和reactjs里面很多都是引用的esmascript6的语法，因此熟悉esmascript的语法是十分重要的，下面我们一起来简单了解吧。

1  let和const定义变量

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

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

        ES6存在{}这样的块级别作用域,在作用域内申明的let变量不可以在其他作用域类获取到。

{
var a ='haha';
let  b='hehe';
}
console.log(a);//haha
console.log(b);//ReferenceError: a is not defined.
const c=100;
c=200;//Uncaught TypeError: Assignment to constant variable.

2 变量的解构赋值  

        ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。以前，为变量赋值，只能直接指定值。

let a = 1;let b = 2;let c = 3;

        ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

3 字符串的扩展-模板字符串  

      传统的 JavaScript 语言，输出模板通常是这样写的。

$('#result').append(
 'There are ' + basket.count + ' ' +
 'items in your basket, ' +
 '' + basket.onSale +
 ' are on sale!');

   上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。模板字符串的换行就会直接显示换行。

$('#result').append(`
 There are ${basket.count} items   in your basket, ${basket.onSale}
 are on sale!`);

    这样使得模板的输出字符串的拼接变得更加简单。

4  箭头函数  

       ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

      上面的箭头函数等同于：

var f = function(v) {
 return v;};

     如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于
var f = function () { return 5 };
sum = (num1, num2) => num1 + num2;// 等同于
var sum = function(num1, num2) {
   return num1 + num2;
};

      函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。用箭头函数可以避免对象内部this指向改变的问题,既简化了书写，同时解决了头疼的this指向问题。

5 Set数据结构 

     ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。可以自动去除重复的数据

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
 console.log(i);
}// 2 3 5 4

6  Map数据结构  

      ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content');
m.get(o) // 'content'
m.has(o); // true
m.delete(o) // true
m.has(o) // false

    ES6新增的很多新的特性，今天就介绍到这里了,有兴趣的小伙伴们可以百度看看更多的特性。