1 let 和const

<script type="text/script">
//let声明的变量是块级作用域，不能重复声明
{
	let gkate=12;
}
console.log(a)
</script>

const命令
基本语法
const声明一个只读的常量，一旦声明，常量的值就不能改变

const = PI = 3.14;
PI = 3;

上面的代码表明改变变量的值会报错
const声明的变量不得改变值，这意味着const一旦声明变量，就必须立即初始化，不能留到以后赋值

const的作用域与let命令不同，只在声明

2模板字符串

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

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

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

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

模板字符串（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}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

let greeting = `\`Yo\` World!`;

输入结果：`Yo` World!

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

3箭头函数

//传统的 
	//无形参
var f = function(a){
	return a;
	}
	//有形参
var sum=function(num1,num2){
	return num1+num2;
	}
//箭头函数
	//无形参
var f = (a) => 5
	//有形参
var sum = (num1,num2) =>num1+num2;

使用箭头函数注意点：

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

扫描二维码关注公众号，回复： 5520447 查看本文章

var name = 'Twiss'；   
 var person = {
        name:'Gkate',
           age:18,　　
        fav:function(){        
            console.log(this)
            console.log(this.name)
        }
    }

    person.fav();

此时this指向的是使用它的对象，也就是person对象

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

 person2.fav();

使用箭头函数，它表示定义时所在的对象window。
2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

4对象的单体模式

为了解决箭头函数this指向的问题推出来一种写法对象的单体模式

var person = {
        name:'Twiss',
        age:23a,
        fav(){
            console.log(this.name,this.age);
        }
      }
 person.fav();

5面向对象

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

function Animal(name,age){
            this.name = name;
            this.age = age;

        }
        Animal.prototype.showName = function(){
            console.log(this.name);
            console.log(this.age);
        }

        var a = new Animal('dog",5);
        a.showName();

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样

class Animal{
            
            // 构造器  当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            showName(){
                console.log(this.name);
            }
        }
        var a2 = new Animal('cat',3);

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Animal，对应 ES6 的Animal类的构造方法。

Animal类除了构造方法，还定义了一个showName方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

console.log(Animal2===Animal2.prototype.constructor);//true

上面代码表示，类本身就指向了类的构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

5.1constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Animal {
}

// 等同于
class Animal {
  constructor() {}
}

上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。

python前后端分离-Vue框架一