ES6经常使用语法

时间 2019-12-14

原文原文链接

ES6 经常使用语法

新增 let、const 命令来声明变量，和var 相比，let 声明的变量不存在变量提高问题，但没有改变JS弱类型的特色，依然能够接受任意类型变量的声明；const 声明的变量不容许在后续逻辑中改变，提升了JS语法的严谨性。
新增解构赋值、rest 语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
新增模块化机制，这是 JavaScript 走向规范比较重要的一步，让前端更方便的实现工程化。
新增类和继承的概念，配合模块化，JavaScript 也能够实现高复用、高扩展的系统架构。
新增模板字符串功能，高效简洁，结束拼接字符串的时代。
新增 Promise 机制，解决异步回调多层嵌套的问题。
更多学习：点击

1、声明变量const let var

var，变量提高,是全局做用域或函数做用域，var声明的变量存在覆盖现象
let，表示变量，是块级做用域，好比一个函数内部，代码块{}内部，let不容许在相同做用域内，重复声明同一个变量。
const，表示常量,是块级做用域，好比一个函数内部，代码块{}内部，常量一旦声明不可修改
ES5 只有全局做用域和函数做用域，没有块级做用域

<script>
{
    let x = 10;
    var y = 20;
}
console.log (x);  // ReferenceError: x is not defined
console.log (y);  // 20

console.log(a);  // undefined，var声明变量以前可使用该变量
var a = 10;
console.log(b);  // ReferenceError: b is not defined，let声明变量以前不可使用该变量
let b = 10;

//注意：let不容许在相同的做用域内重复声明同一个变量。
function foo(){
    let x = 10;
    var x = 20;
}  // 报错

function foo(){
    let y = 10;
    let y = 20;
}  // 报错


//ES5中只有全局做用域和函数做用域，并无块级做用域。
var name = 'Tom';

function foo(){
    console.log(name);
    if (false){
        var name = 'Bob'
    }
}
foo();  // undefined

/*出现上述现象的缘由就是在函数内部，因为变量提高致使内存的name变量覆盖了外层的name变量。
相似的状况还出如今 for循环的计数变量最后会泄露为全局变量。*/

for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5

// ES6中的let声明变量的方式实际上就为JavaScript新增了块级做用域。

var name = 'Tom';

function foo(){
    console.log(name);
    if (false){
        let name = 'Bob'
    }
}
foo();  // Tom

// 此时，在foo函数内容，外层代码块就再也不受内层代码块的影响。因此相似for循环的计数变量咱们最好都是用let来声明。

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[6]();  //10

//===============
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[6]();  //6

//===============
var a = [];
for (let i = 0; i < 4; i++) {
    console.log(i)  // 0,1,2,3
}


/*
const用来声明常量。const声明变量必须当即初始化，而且其值不能再改变。
const声明常量的做用域与let相同，只在声明所在的块级做用域内有效。
ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；
let命令、const命令和class命令声明的全局变量不属于全局对象的属性。
*/
const PI = 3.14;
var x1 = 10;
let y1 = 20;
window.x1  // 10
window.y1  // undefined
</script>

let&const

2、模板字符串

模板字符串（template string）是加强版的字符串，用反引号（`）标识。它能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量javascript

 
       <script type= 
       "text/javascript" 
       > 
      
       var 
       imgSrc =  
       './1.jpg' 
       ; 
      
       $( 
       function 
       () { 
      
       $( 
       'ul' 
       ).append(`<li> 
      
       <a href= 
       "javascript:void(0);" 
       > 
      
       <img src=${imgSrc} alt= 
       "" 
       > 
      
       </a> 
      
       </li>`) 
      
       }); 
      
       </script>

3、箭头函数

若是参数只有一个，能够省略小括号
若是不写return，能够不写大括号
没有arguments变量
不改变this指向
其中箭头函数中this指向被固定化，不是由于箭头函数内部有绑定this的机制。实际缘由是箭头函数根本没有本身的this，致使内部的this就是外层代码块的this。
箭头函数，this指向外层代码块的this
普通函数，this指向调用它的对象，也就是person对象

<script>
var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
};
person.func()  // person对象   普通函数，this指向调用它的对象

var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
};
person.func()  // window对象   箭头函数，this指向外层代码块的this

</script>

View Code

<script type="text/javascript">
  
        // 普通函数
        function add(a,b) {
            return a+b;
        };
        alert(add(1,2));   
          
        // 函数对象
        var add  = function (a,b) {
            return a+b;
        };
        alert(add(3,4))
          
        // 箭头函数
        var add = (a,b)=>{
            return a+b;
        };
        alert(add(3,7))
          
        var f = a => a
        //等同于
        var f = function(a){
           return a; 
        }
          
        //无形参
        var f = () => 5;
        // 等同于
        var f = function () { return 5 };
  
        //多个形参
        var sum = (num1, num2) => num1 + num2;
        // 等同于
        var sum = function(num1, num2) {
          return num1 + num2;
        };
  
        var person = {
            name:"alex",
            age: 20,
            fav:function () {
                // this指的是当前的对象，即便用它的对象 person对象
                console.log(this.age);
                console.log(arguments[0])
            }
        };
        person.fav();
       
        var person = {
            name:"alex",
            age: 20,
            fav: () => {
                // this的指向发生了改变,指向了定义时所在的对象window
                console.log(this);   //window
                console.log(arguments) //报错
            }
        };
        person.fav();
         
        //这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。若是是普通函数，执行时this应该指向全局对象window，这时应该输出21。可是，箭头函数致使this老是指向函数定义生效时所在的对象（本例是{id: 42}），因此输出的是42。
        function foo() {
          setTimeout(() => {
            console.log('id:', this.id);
          }, 100);
        }
        var id = 21;
        foo.call({ id: 42 });
        // id: 42
 
        function foo() {
          setTimeout(function(){
            console.log('id:', this.id);
          }, 100);
        }
        var id = 21;
        foo.call({ id: 42 });
        // id: 21
</script>

View Code

4、对象

一、属性简洁表示法

<script>

// 属性简洁表示法  ES6容许直接写入变量和函数做为对象的属性和方法。
function(x,y){
    return {x, y}
}
//上面的写法等同于：

function(x,y){
    return {x: x, y: y}
}



//对象的方法也可使用简洁表示法：
var o = {
    method(){
        return "Hello!";
    }
};
//等同于：
var o = {
    method: function(){
        return "Hello!";
    }
}
</script>

View Code

二、Object.assign()

Object.assign方法用来将源对象（source）的全部可枚举属性复制到目标对象（target）。它至少须要两个对象做为参数，第一个参数是目标对象，第二个参数是源对象。
参数必须都是对象，不然抛出TypeError错误。
Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。

var x = {name: "Q1mi", age: 18};
var y = x;
var z = Object.assign({}, x);
x.age = 20;

x.age  // 20

y.age  // 20

z.age  // 18

View Code

<script type="text/javascript">
     
    // 字面量方式建立对象
    var person = {
        name:"alex",
        age: 20,
        fav:function () {
            console.log('喜欢AV');
            // this指的是当前的对象
            console.log(this.age);
        }
    };
    person.fav();       
 
    // es6中对象的单体模式,为了解决箭头函数this指向的问题 推出来一种写法
    var person = {
        name:"alex",
        age: 20,
        fav(){
        // this指的是当前的对象，即便用它的对象 person对象，和普通函数同样的效果
            console.log(this);
            console.log(arguments);
        }
    };
    person.fav('21312');
 
     
    // JavaScript 语言中，生成实例对象的传统方法是经过构造函数。
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
 
    Person.prototype.showName = function(){
        alert(this.name);
    };
 
    // 使用new关机字来建立对象
    var p = new Person('alex',19);
    p.showName()
 
 
    // ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，做为对象的模板。经过class关键字，能够定义类。
    class Person{
        // 构造器  当你建立实例以后 constructor()方法会马上调用 一般这个方法初始化对象的属性
        // 这就是构造方法，而this关键字则表明实例对象。
        constructor(name,age){
            this.name = name;
            this.age = age;
        }  
        //方法之间不须要逗号分隔，加了会报错。
        showName(){
            alert(this.name)
        }
    };
 
    var p2 = new Person('张三',20);
    p2.showName();
     
</script>

对象

<script>
//ES5的构造对象的方式 使用构造函数来创造。构造函数惟一的不一样是函数名首字母要大写。
function Point(x, y){
    this.x = x;
    this.y = y;
}

// 给父级绑定方法
Point.prototype.toSting = function(){
    return '(' + this.x + ',' + this.y + ')';
};

var p = new Point(10, 20);
console.log(p.x);  //10
p.toSting();

// 继承
function ColorPoint(x, y, color){
    Point.call(this, x, y);
    this.color = color;
}
// 继承父类的方法
ColorPoint.prototype = Object.create(Point.prototype);
// 修复 constructor
ColorPoint.prototype.constructor = Point;
// 扩展方法
ColorPoint.prototype.showColor = function(){
    console.log('My color is ' + this.color);
};

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);   // 10
console.log(cp.toSting());  //(10,20)
cp.showColor();    //My color is red



//ES6 使用Class构造对象的方式：
class Point{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }  // 不要加逗号
    toSting(){
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(10, 20);
console.log(p.x);
p.toSting();

class ColorPoint extends Point{
    constructor(x, y, color){
        super(x, y);  // 调用父类的constructor(x, y)
        this.color = color;
    }  // 不要加逗号
    showColor(){
        console.log('My color is ' + this.color);
    }
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
cp.toSting();
cp.showColor()
</script>

View Code

5、类

ES6 引入了关键字class来定义一个类，constructor是构造方法，this表明实例对象。前端

类之间经过extends继承，继承父类的全部属性和方法。java

super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，es6

不然新建实例时会报错，由于子类没有本身的this对象。调用super()获得this，才能进行修改。编程

 
       <script type= 
       "text/javascript" 
       > 
      
       class 
       Animal{ 
      
       constructor(){ 
      
       this 
       .type =  
       "animal" 
      
       } 
      
       says(say){ 
      
       console.log( 
       this 
       .type +  
       "says" 
       + say ) 
      
       } 
      
       } 
      
       let 
       animal =  
       new 
       Animal() 
      
       animal.says( 
       "hello" 
       ) 
      
       class 
       Dog  
       extends 
       Animal{ 
      
       constructor(){ 
      
       super 
       (); 
      
       this 
       .type =  
       "dog" 
       ; 
      
       } 
      
       } 
      
       let 
       dog =  
       new 
       Dog() 
      
       dog.says( 
       "hi" 
       ) 
      
       </script>

6、import和export

import 导入模块、export导出模块数组

 
       // main.js 
      
       // 导出多个声明 
      
       export 
       var 
       name =  
       "alex" 
      
       export 
       var 
       age =  
       "18" 
      
       export 
       function 
       aa() { 
      
       return 
       1 
      
       } 
      
       // 批量导出 
      
       export 
       {name, age, aa} 
      
       // test.js 
      
       import 
       {name, age, aa} from  
       "./main" 
      
       console.log(name) 
      
       console.log(age) 
      
       console.log(aa()) 
      
       // 整个模块导入 把模块当作一个对象 
      
       // 该模块下全部的导出都会做为对象的属性存在 
      
       import 
       * as obj from  
       "./main" 
      
       console.log(obj.name) 
      
       console.log(obj.age) 
      
       console.log(obj.aa())        
      
       // 一个模块只能有一个默认导出 
      
       // 对于默认导出 导入的时候名字能够不同 
      
       // main.js 
      
       var 
       app =  
       new 
       Vue({ 
      
       }); 
      
       export 
       default 
       app 
      
       // test.js 
      
       // import app from "./main" 
      
       import 
       my_app from  
       "./main"

7、解构赋值

ES6容许按照必定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。promise

 
       <script type= 
       "text/javascript" 
       > 
      
       const people = { 
      
       name:  
       "tom" 
       , 
      
       age: 18, 
      
       }; 
      
       const person = [ 
       "rose" 
       ,  
       "jack" 
       ] 
      
       const { name, age } = people 
      
       console.log(name)   
       //tom 
      
       console.log(age)    
       //18 
      
       const [name1, name2] = person 
      
       console.log(name1)   
       //rose 
      
       console.log(name2)   
       //jack 
      
       </script>

8、字符串函数

在此以前，JavaScript中只有str.indexOf(char)方法可用来肯定一个字符串是否包含在另外一个字符串中。
ES6中又提供了3种新方法：
includes()：返回布尔值，表示是否找到了参数字符串。
stratsWith()：返回布尔值，表示参数字符串是否在源字符串的开始位置。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾位置。

<script>
var s = "Hello world!";

s.includes("o");  // true
s.startsWith("Hello");  // true
s.endsWith("!");  // true

//这三个方法都支持第2个参数，表示开始匹配的位置。
s.includes("o", 8);  // false
s.startsWith("world", 6);  // true
s.endsWith("Hello", 5);  // true

</script>

View Code

9、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。它由社区最先提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
使用Promise的优点是有了Promise对象，就能够将异步操做以同步操做的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操做更加容易。
Promise构造函数接受一个函数做为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用本身部署。
Promise实例生成之后，能够用then方法分别指定resolved状态和rejected状态的回调函数。
then方法能够接受两个回调函数做为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不必定要提供。这两个函数都接受Promise对象传出的值做为参数。
其实Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

const promiseObj = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

<script>
promiseObj.then(function(value) {
  // success
}, function(error) {
  // failure
});

//还能够将上面的代码写成下面这种方式：
promiseObj
.then(function(value) {
  // success
})
.catch(function(error) {
  // failure
});
</script>

View Code