-es6的部分语法

es6的语法

一 . let 和 var 的区别 :

1 . let 和 val 的区别 : 　　

　　ES6新增了let命令 , 用来声明变量,它的用法类似于 var (ES5), 但是所声明的变量,只在let命令所在的代码快内有效(局部),如下代码 :

　　上面代码在代码块之中,分别用 let 和 var 声明了两个变量,然后在代码块之外调用这两个变量,结果 let 声明的变量报错,var 声明的变量返回了正确的值. 这表明,let 声明的变量只在它所在的代码块有效.

　　for循环的计时器,就很适合使用 let 命令,如下代码 :

　　上面代码中,计时器 i 只在for 循环体内有效,在循环体外引用就会报错 .

2 . var 变量提升现象

　　代码如下 :

　　上面代码中,变量 i 是var 命令声明的,在全局范围内都有效, 所有全局只有一个变量 i ,每一次循环,变量 i 的值就会发生改变, 而循环内被赋值给数组 a 的函数内部的 console.log(i) ,里面的 i 指向的就是全局变量的 i.也就是说,所有数组 a 的成员里面的 i ,指向的都是同一个 i ,导致运行时输出的是最后一轮的 i 的值,也就是 10 ,如果使用 let,声明的变量仅仅在块级作用域内有效,左后输出的是 6.

3 . for循环的作用域

　　另外,for循环还有个特别之处,就是设置循环变量的那部分是一个父作用域,而循环内部是个单独的子作用域.

　　上面代码的正确运行,输出了 3 次 abc . 这表明函数内部的变量 i 与循环变量 i 不在同一个作用域,有各自单独的作用域.

4 . let 不存在变量提升

　　var 命令会发生" 变量提升 " 现象,即变量可以在声明之前使用,值为 undefined.而 let 命令改变了语法行为,它所表明的变量一定要在声明后使用,否则报错,如下代码 :

　　上面代码中, 变量 foo 用 var 命令声明,会发生变量提升,即脚本开始运行时,变量 foo 已经存在了,但是没有值,所有会输出 undefined .变量 bar 用 let 命令声明,不会发生变量提升.这表示在声明它之前,变量 bar 是不存在的,这时如果用到它,就会抛出个错误 .

5 . let 不允许在相同作用域内重复声明同一个变量

　　代码如下 :

　　所以,在相同作用内重复声明同一个变量要用 var

二 . const 命令

　　ES6 还添加了const 命令,const 声明了一个只读的常量 , 一旦声明,常量的值就不能改变,如下 :

　　const 声明的变量不得改变值,这意味着 , const 一旦声明变量 , 就必须立即初始化,不能留到以后赋值,也就是说, const 只声明不赋值,就会报错

　　const 的作用域与 let 命令相同,即只在声明所在的块级作用域内生效,不能重复声明,并且不存在变量提升.

三 . ES6 模板字符串

　　模板字符串(template string) 是增强版的字符串,用反引号( `  ` ) 标识. 它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,模板字符串中嵌入变量,需要将变量名写在 ${} 之中

四 . 变量的解构赋值 , 函数 , 对象

1 . 变量的解构赋值

　　ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 (Destructuring) . 　　

　　ES6 允许写成下面这样 :

　　上面代码表示 , 可以从数组中提取值,按照对应的位置,对变量赋值.

　　本质上,这种写法属于 "模式匹配" ,只要等号两边的模式相同,左边的变量就会被赋予响应的值,如果解构不成功,变量的值就等于 undefined .

2 . 函数

　　⑴ es5的普通函数, function 声明函数,如下 :

function add(x){
     return x;
};
add(10);   //

　　⑵ 函数对象的写法, 如下 :

let add = function(x){
    return x;
};
add(10);     //

　　⑶ es6箭头函数 , 如下 :

let add = (x) => {
     return x;
};
add(10);      //

　　⑷ 箭头函数的简写 :

let add = x => x;
add(10);     //

　　如果箭头函数的代码块部分多余一条语句,就要使用大括号将他们括起来,并且使用 return 语句返回. 如下 :

　　如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错,如下 :

3 . es6的对象 (this的指向问题)

　　⑴ 匿名函数中的 this 指向

// 字面量方式声明一个对象 person

let person = {
    name:"tom",
    age:18,
    fav:function(){
        console.log(this);   // this 指向 当前的调用者 person对象
        console.log(this.name);
 }
};
person fav()

// {name:"tom",age:18,fav:f}
// tom

　　⑵ 对象的单体模式,本质上与上个示例一样 :

let person = {
     name:"tom",
     age:18,
     fav(){
           console.log(this);       // this 指向 当前调用者 person 对象
           console.log(this.name);
 }

};
person fav()

// {name:"tom",age:18,fav:f}
// tom

　　⑶ 箭头函数中 this 的指向 :

let person = {
     name:"tom",
     age:18,
     fav:() => {
         console.log(this);    // this 指向person 的父级对象(上下文),即 window
         console.log(this.name)
 }
};
person fav()

//  Window {postMessage:f,blur:f,focus:f,close:f,parent:Window,......}

4 . es6 的类

　　⑴ es5

function Person(name,age) {
       this.name = name;
       this.age = age;
}
// 基于原型给对象声明方法,原型 prototype 是当前类的父类(继承性)

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

let p1 = new Person("tom",18);
p1.showName()   // to

　　⑵ es6

class Person{
   constructor(name="tom",age=18){    //单体模式
       this.name = name;
       this.age = age;
  }
  showname(){        // 单体模式
       console.log(this,name);       // this 指向当前对象 Person
  }
  showage(){
       console.log(this.age);
  }
}

let p1 = new Person();
p1.showname();    // tom