javascripts es6规则

刚开始用vue或者react，那还用说！！当然需要熟悉es6了!!!.

接下来我们就聊聊ES6那些可爱的新特性吧，我在这里写的所有示例代码都是伪代码.

1.变量声明const和let.

我们都知道在ES6以前用 var 声明的变量 无论声明在何处 都会在函数顶部 如果不在函数内就会被视为全局作用域的顶部.

俗称自顶向上.

function demo(){

if(boll){

var test="toll man";

}else{

console.log(test);

}

}

实际上这段代码是.

function demo(){

var test; //变量提升

if(boll){

test ="toll man";

}else{

console.log(test); //此处访问test 值为undefined

}

}

所以不管boll是什么 这个变量都已经被声明了.

如果在es6中 可以这么写

function demo(){

if(boll){

let test="composer";

}else{

console.log(test); //此处test无法访问到 会抛出一个错误

}

}

let的作用域是块作用域 比起var 他可以避免很多的麻烦.

const怎么用 很简单 看以下代码:

const name="composer";

name="info"; //此处会直接报错

const 声明的变量无法被轻易更改. 但是也不是没有办法更改. 但是并不建议那么使用.

2.为函数定义默认值.

ES6以前给函数默认的参数

function action(num){

var num = num || 200;

//当传入num的时候 值为num 当没有传入时 num就有了默认值200

return num;

}

如果传入的是0这样就没办法生效了.

但是在ES6可以这么写

function action(num=200){

console.log(num);

}

action();//200

action(300);//300

3.箭头函数.

es6最有意思的就是箭头函数.

箭头函数最有意思的三个特点.

1.不需要function关键字来声明函数.

2.省略return 关键字.

3.继承当前上下文的this关键字.

请看以下代码;

[1,2,3].map(x=>x+1);

//等同于:

[1,2,3].map(function(x){

return x+1;

}).bind(this));

但是箭头函数是为了简写诞生的 个人认为 当函数有且仅有一个参数的时候比较适合使用箭头函数. 反之则根本无法使用.

es5为对象添加方法:

const people={

name: 'lux',

getName :function(){

console.log(this.name);

}

},

//es6可以这么写

const people ={

name: 'lux',

getName(){

console.log(this.name);

}

},

4.更方便的访问数据的方式 解构.

数组和对象 是js中最重要的表达形式.为了简化提取信息 es6新增加了解构,这是一个将一个数据结构分解为更小部分的过程

es5中 我们会这么写

const people={

name : "lux",

age: 20

},

const name =people.name;

const age =people.age;

//es6可以这么写

const {name,age} =people;

我目前完全理解的es6特性暂时只有这么多.

es6还有export 和 import等特性