es6入门教程

最新推荐文章于 2020-06-22 22:59:40 发布

weixin_30338743

最新推荐文章于 2020-06-22 22:59:40 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SunShineM/p/6694109.html

版权

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用var 两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。

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

面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值

1.ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

2.长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。

用箭头函数可以很简单的解决这个问题

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

3.字符串模板

　　es6中允许使用反引号来创建字符串.

var num = Math.floor(Math.random()*100);
console.log('your num is '+ num);
console.log(`your num is ${num}`);

4.不定参数

　　不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，…x代表了所有传入add函数的参数。

function add(...x){
   return x.reduce((m,n)=>m+n);
 }
  console.log(add(1,2,3));//6
  console.log(add(4,5,6,7,8));//30

5.拓展参数

　　拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people =['john','mike','lily'];
//sayHello 本来要接受三个独立的参数
function sayHello(people1,people2,people3){
   console.log(`hello ${people1},${people2},${people3}`);
}
 //但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
 sayHello(...people);//hello john,mike,lily
 //在以前,如果需要传递数组当参数,需要使用函数的apply方法
 sayHello.apply(null,people);

let map = new Map([
   ['one','han'],
   ['two','shuai'],
   ['three','ming']
 ]);
 let arr2 = [...map.keys()];
 let arr3 = [...map.values()];
 console.log(arr2);//['one'.'two','three']
 console.log(arr3);//['han','shuai','ming']

6.map

    var map = new Map();
    map.set('first','hello');
    map.set('second','world');
    console.log(map.get('first'));//hello
    for(let [key,value] of map){
      console.log(key + " is " +value);
    }//first is hello second is world
    for(let [key] of map){
      console.log(key);
    }//first second
    for(let [,value] of map){
      console.log(value);
    }//hello world

var arr=[1,2,3];
    console.log(arr.map(item=> item+1));//[2,3,4]

7.默认参数值

　　现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了

function sayHello(name) {
      var name = name||'dude';
      console.log('hello '+name );
    }
    function sayHello2(name='lily'){
      console.log(`hello ${name}`);
    }
    sayHello();// hello dude
    sayHello2();//hello lily
    sayHello('jack');//hello jack
    sayHello2('tom');//hello tom

8.遍历

  var arr = ['name','john','lily'];
  for (var x in arr) {
    console.log(x);// 0,1,2
  }
  for (x of arr) {
    console.log(x);// name john lily
  }

9.class, extends, super

这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承...你还在为它们复杂难懂的语法而烦恼吗？你还在为指针到底指向哪里而纠结万分吗？

有了ES6我们不再烦恼！

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

10.箭头函数

  class Animals {
    constructor(){
      this.type = 'animal'
    }
    eat(food){
      setTimeout(function(){
        console.log(`${this.type} eat food`); //undefined eat meal
      },1000)
    }
  }
  let dog = new Animals();
  dog.eat('meal');

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象

用箭头函数就可以简单的解决问题

  class Animals {
    constructor(){
      this.type = 'animal'
    }
    eat(food){
      setTimeout(() => {
        console.log(`${this.type} eat ${food}`);//animal eat meal
      },1000)
      setTimeout(function(){
        console.log(`${this.type} eat food`); //undefined eat meal
      },1000)
    }
  }
  let dog = new Animals();
  dog.eat('meal');

转载于:https://www.cnblogs.com/SunShineM/p/6694109.html

weixin_30338743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6入门教程

var name = 'zach'while (true) { var name = 'obama' console.log(name) //obama break}console.log(name) //obama使用var 两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不...
复制链接

扫一扫