ES6与ES5比较

ECMAScript6（ES6）包含了ES5及之前的内容，顺带一提ECMA指欧洲计算机制造联合会，于1967年6月发布了ECMA-262第一版。

let于const变量以及块级作用域，解决var带来的变量提升。

1.let无变量提升

console.log(x);

var x =100; let x=100;

console.log(x);

2.ES5仅支持全局,函数作用域,ES6新增块作用域.代码块{ },仅let和const支持

{

let y =1000;

var z=10;

console.log(y);

{

console.log(y*2);

console.log(z*2);

}

}

console.log(y);

console.log(z);

//其中let定义更加严格,和const不允许同作用域下重复声明,var可能使用多了会出现命名冲突.

3.模板字符串

使用字符串拼接实现数据描述

let name = "xiaoming";

let age =20;

{

let info =name +"is"+age+"years old.";

console.log(info);

}

//使用模板字符串

{

let info =`${name} is ${age+1} years old.`;//插值运算

console.log(info);

}

4.解构赋值

//分为数组，对象解构

let student = {

name : "小明“，

age : 20 ,

};

let stu_name = student.name;

let stu_age = student.age;

let { name : s_name , age : s_age } = student ; //对象解构赋值

console.log(s_name , s_age) ;

let numbers = [22,33,44,55];

let [a,b,c,d] = numbers ; //数组解构赋值

console.log(a,b,c,d);

5.箭头函数

可以理解为一个语法简便的匿名函数

函数声明语法

function f1(n) {

return 10*n ;

}

//函数表达式

let f2 =function (n) {

return 10*n ;

}

//箭头函数

let f3 = (n)=>10*n ;

let f4 = (n)=>{

return 10*n ;

}

class类

class student{

constructor(name,age) {

this.name = name;

this.age =age;

}

show () {

console.log(`${this.name} is ${this.age} years old.`} ;

}

}

对象字面量简写法

let x = 20;

let y = 40;与下一行相同

let [x,y] = [20,40] //这里切记不是数组，只是套了一个数组的模型,其实是两个变量

let point = {x : x, y : y};

可以简写成： let point = {x , y};