es6的新增语法

 

 

 

 

什么是ECMAScript，以及es6的诞生？

1997年 ECMAScript 1.0 诞生

1999年12月 ECMAScript 3.0诞生，它 是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。直到今天，我们一开始学习JS，其实就是在学3.0版的语法

2000年的ECMAScript4.0是当下ES6的前身，但由于这个版本太过激烈，对ES3做了彻底升级，所以暂时被“和谐”了

2009年12月，ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月，ES5.1版发布，并且成为ISO国际标准

2013年，ES6草案冻结，不再添加新的功能，新的功能将被放到ES7中；2015年6月，ES6正式通过，成为国际标准

书籍参考：http://es6.ruanyifeng.com/

es6语法：let和const

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

在script中，{}内部叫做一个代码块

let与var作用一致

<script>
    {
        var a = 3;
    }
    console.log(a)
</script>

我们看到使用var在代码块内部定义的变量在代码块外也可以使用，这是不符合常理的

<script>
    {
        let a = 3;
    }
    console.log(a)
</script>

而let则不允许在代码块外调用代码块内定义的变量（报没有这个变量的错误）

区别2

<script>
    var a = [];
    for (var i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

看上面的代码，之所以会输出10是因为var定义的i在代码块外也可用，所以a循环10便i全部都在变，一直到i为10，此时a传几i都为10

<script>
    let a = [];
    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

而当我们使用let则不会出现这个问题，因为let定义的变量只存在于块内，每个块是独立的

不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

<script>
    console.log(a);
    var a = 3;
</script>

他并没有报错

<script>
    console.log(a);
    let a = 3;
</script>

使用let则会报错

不允许重复声明 

let不允许在相同作用域内，重复声明同一个变量。不能在函数内部重新声明参数。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

const命令（常量）

const定义常量，一旦定义则不可更改

用法同上，不做demo

模板语法

当我们使用传统的语法来拼接字符串时，通常使用

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

这种做法在长字符串的拼接的时候非常混乱且易出错，ES6 引入了模板字符串解决这个问题。

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

在普通的console中请使用普通拼接

注意模板中包裹字符串的是``

在模板中会保留格式

箭头函数

基本语法：

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

var f = a = > a

//等同于
var f = function(a){
   return a;  
}

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

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

使用箭头函数注意点：

<script>
    let person2 = {
        name:'a',
        age:18,
        fav: ()=>{
            // 当前this指向了定义时所在的对象（window）
            console.log(this);
        }
    };

    person2.fav();
</script>

 我们发现在箭头函数中this指的并不是当前函数而是在定义这个函数时的对象，即浏览器的当前窗口

那么怎么解决呢？需要用到单体模式

<script>
    let person2 = {
        name:'a',
        age:18,
        fav(){
            console.log(this);
        }
    };

    person2.fav();
</script>

当然也可以使用普通的function语法

面向对象

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。