ECMAScript6 ES6语法

　　2015年6月份，在es5的基础上扩展了很多新的功能， 称为es6/es2015， ES7将在2017年6月份出来。我们要学习的仅仅只是es6中的部分常用新功能，这些功能在使用的时候一定要慎重，因为他们中有一部分js代码在部分浏览器不能兼容，但是所有写在服务器端的代码基本上都支持ES6的写法。

 

1.0开启严格模式

如何开启：

如果需要在函数中开启，在函数的第一行加上这段字符串”use strict”，如果需要整js代码中开启，在js第一行加上这段字符”use strict”。

;这是es5中的一个特性，设立"严格模式"的目的，主要有以下几个：

"use strict";//开启了严格模式

A.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

B.消除代码运行的一些不安全之处，保证代码运行的安全；

C.提高编译器效率，增加运行速度；

D.为未来新版本的Javascript做好铺垫。

注意：

1）正常模式下可以使用直接使用未声明的变量，但是严格模式不行

//1.0严格模式下变量必须定义以后才能使用
 name = "jhon";
 console.log(name);

2）正常模式下可以在一个函数中传入两个同名参数，但是严格模式下不行

//2.0严格模式下方法 不能定义多个同名参数
 function fn(aa,aa,bb){
   return aa + aa + bb;
 }
 fn("11","22","33");

 

2.0定义变量：let （类似于var）

在javascript一直有一个bug式的取在var：

1）var声明的变量会有变量提升

console.log(name);//undeinfed
var name = "jhon";

2）var 没有块级作用域

var name = "jhon";
{
   var name = "tom";
}
console.log(name);//tom
3）var 可以多次重复定义一个变量
var name = "jhon";
var age = 18;
var name = "tom";
var name = "rose";
console.log(name);

这些声明在后台开发语言中是绝对不被允许的，为了规范变量的声明es6推出新的关键字let代替var申明变量，let的特点：

1）let声明的变量不会有变量提升，只有在前面定义了在后面才能使用

console.log(name);//报错
let name = "jhon";

2）let存在块级作用域（当大括号结束时，块级作用域中的变量都会被销毁）

let name = "jhon";
{
   let name = "tom";
}
console.log(name);//jhon

3）let不能多次重复定义一个变量

let name = "jhon";
let age = 18;
let name = "tom";
console.log(name);

应用小案例：给多个li标签设置点击输入文本内容事件。

注意点：使用let最后加上”use strict”关键字

 

3.0定义常量const

常量：常量指的是不会改变的数据（Window Linux Unix）

作用：一旦申明一个常量：

1）值不能再改变

"use strict";
 const banben = "window";
banben = "linux";//会报错

2）常量具有块级作用域

{
   const banben = "window";
}
console.log(banben);//报错

3）不要在块中申明常量

4）没有变量提升，先声明后使用

console.log(banben);//报错
const banben = "window";

5）不可以算不算申明同名的常量

const banben = "window";
const banben = "linux";//报错

6）一定要赋初始值，否则报错

const banben;
banben = "window";//报错
console.log(banben);

7）如果声明的是对象，对象的地址不能改变，但是可以改变其内部的属性。

const obj = {
   name: "jhon",
   age: 18
};
console.log(obj.name);//jhon
obj.name = "tom";
console.log(obj.name);//tom

应用场景：

var path = require('path');
var path = "123";

在nodejs中加载完模块时，模块的指针一般是不会改变的，可以使用常量来接收，可以防止将来在导入模块时多次模块。

const path = require('path');

 

4.0字符串的扩展：

问题：如果要判断字符串”hello word”中是否存在”word”，用字符串中的方法只有indexOf：

var str = "hello word";
 var result = str.indexOf("word")
 console.log(result);//6

在ES6中又为我们提供了其它的方法：

Includes()：返回布尔值，用于判断字符串是否包含某些字符

var bool = str.includes('word');
console.log(bool);//true

startsWith(str[,num])：返回布尔值，用于判断字符串是否以某些字符开头

var bool = str.startsWith("hello");
console.log(bool);//true
//2.1给这个方法传入两个参数
 var bool = str.startsWith("word",6);
 console.log(bool);//true

endsWith(str[,num])：返回布尔值，用于判断字符串是否以某些字符结尾

var bool = str.endsWith("d");
console.log(bool);//true
//3.1给这个方法传入两个参数
 var bool = str.endsWith('o',5);
 console.log(bool);

repeat(num)：传入一串数字，将来这个方法会将字符串重复数字对应的次数

var str1 = "我爱我家
";
 console.log(str1.repeat(10));

注意：

A.传入的数字可以是正小数，那么将来这个数字会被向下取整

console.log(str1.repeat(2.6));

B.不能传入负数，会报错

console.log(str1.repeat(-3));

C.可以传入一个字符串类型的数值

console.log(str1.repeat("12a"));

 

5.0模板语法：`模板字符串`

问题：通过对象完成一个自我介绍的方法：自我介绍中包含对象的年龄，姓名，性别，爱好，体重。

"use strict";
var obj = {
   name: "zhuiming",
   age: 18,
   sex: "男",
   hobby: "女",
   weight: 126,
   height: 180
};
 var str = "大家好，我叫" + obj.name + ",今年" + obj.age + ",性别" + obj.sex + ",爱好" +                     obj.hobby +".";
 console.log(str);

但是字符串的拼接太麻烦了，有没有简单的方法来解决这个问题呢，有的，模板字符串就可以了

结构：`模板内容${code}`;

1)定义一个模板，并且给模板加一些占位，注意占位有自己的格式：${}
var temp = `大家好，我叫${obj.name}，今年${obj.age}，性别${obj.sex}，爱好${obj.hobby}`;
//2)将模板中的一些变量赋值
console.log(temp);

注意：code可以是变量，可以是方法名，还可以是js表达式。

//1.0可以放变量
 let name = "jhon"
 let temp1 = `我叫${name}`;
 console.log(temp1);
//2.0可以放方法
 function getName(){
   return "jhon";
 }
 let temp2 = `我叫${getName()}`;
 console.log(temp2);
//3.0可以放表示式
let a = 1;
let b = 2;
let temp3 = `a + b 的和是${a + b}`;
console.log(temp3);

 

6.0箭头函数:()=>{}

js中使用匿名函数的位置太多了，固定结构为function(){}，为了方便书写，es6规定了一种新的写法来简化匿名函数：去掉function改为=>,结构为()=>{}

//箭头函数的演变规则

//箭头函数的演变规则
var arr = [2,3,5,1,24];
//最原始的匿名函数
 $(arr).each(function(index,item){
   console.log(item);
 });

演变过程：

//改造一：匿名函数中的funtion关键字我们可以省略，参数与方法体之间中=>
 $(arr).each((index,item)=>{console.log(item);})
//改造二：如果方法体中的代码只有一句我们可以去掉{},并且代码结尾的分号要去掉
 console.log("_--------------------------------_");
 $(arr).each((index,item)=>console.log(item));
//改造三：如果匿名函数中的参数只有一个可以将参数的括号去掉
 $(arr).each(index=>console.log(arr[index]));
//改造四：如果匿名函数中有返回值，并且只有一句代码，我们可以去掉return关键字。
 $(arr).sort(function(m,n){
   return n - m;
 });
 $(arr).sort((m,n)=>n-m);

总结：

参数特点：

1)参数只有一个，可以去掉()

2)参数多个，不能去掉

3)参数没有，不能去掉

方法体特点：

1)方法体只有一句，可以省略{}

2)方法体只有一句，如果有return，也可以省略return

3)如果有多句代码，不能省略

箭头函数没有固定的写法，它是根据当前方法的参数和方法的返回值来的。

注意：

1）箭头函数中的this指向问题：

   箭头函数没有自己的this，函数体内部写的this,会顺着作用域去找最近真实存在的this。

function aa(){
//this.b=1;
setTimeout(()=>{
//this.b=2;
console.log(this.b);
});
}
aa();

2）箭头函数内部的this是定义时所在的对象，而不是使用时所在的对象，并且不会改变。

function foo(){
   this.name = "jhon";
   return ()=>{
      console.log(this.name);
   }
}
var fo = foo();//返回的是一个函数对象
foo.name = "tom";
fo();//jhon 说明一旦箭头函数声明完成以后，this指向不会发生改变

3）箭头函数不能作为构造函数：

var foo = function(name,age){
   this.name = name;
   this.age = age;
}
var foo = (name,age)=>{
   this.name = name;
   this.age =age;
}
var obj = new foo("jhon",18);

4)箭头函数中不存在arguments，箭头函数中的argument指向的是外层的arguments.

function foo(){
   setTimeout(()=>{
      console.log(arguments);
   })
}
foo("aa","bb","cc");//{ '0': 'aa', '1': 'bb', '2': 'cc' }