zoukankan      html  css  js  c++  java
  • es6的基本用法

    1.es6中的let和const的区别

    (1) let

      在局部作用域有效

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10
    
    注释:
    上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。
    
    下面的代码如果使用var,最后输出的是10。
    上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。
    
    如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6
    
    上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
    
    另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
    
    for (let i = 0; i < 3; i++) {
      let i = 'abc';
      console.log(i);
    }
    // abc
    // abc
    // abc
    上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。
    let在局部作用域有效

      不会存在变量提升

    var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。
    
    为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
    
    // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
    
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;
    
    上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。
    不会存在变量提升

      变量不能重复声明

    let不允许在相同作用域内,重复声明同一个变量。
    
    // 报错
    function func() {
      let a = 10;
      var a = 1;
    }
    
    // 报错
    function func() {
      let a = 10;
      let a = 1;
    }
    
    因此,不能在函数内部重新声明参数。
    
    function func(arg) {
      let arg; // 报错
    }
    
    function func(arg) {
      {
        let arg; // 不报错
      }
    }
    变量不能重复的声明

    (2) const

      局部作用域

      不会存在变量的提升

      变量不能重复声明     只声明常量,不可变的量

    (3) 模板字符串

    table键上的反引号$(变量名)来实现字符串的拼接

    egg:

      let name = "张三";

      let str = `我是${name}`

    2.es6的箭头函数      this的指向发生了改变

    方式一:
    let add = (x) =>{ return x } console.log(add(20))
    方式二: let add2
    =x=>: console.log(add2(20))

    3.es6的对象

    let person ={
            name:"张三",
            age:30,
            fav:function () {
                console.log(this.name)//匿名函数this指向当前对象
            }
        }
        person.fav()
    
    
        let person={
            name:'张三',
            age:20,
            fav:() => {
                console.log(this),//指向定义 person的父类(上下文)
                console.log(this.name)
            }
        }



    对象的单体模式
    let person={
      name='张三',
      fav (){
      console.log(this.name) //指的当前的对象
    }
    }

    person.fav()


    //张三


    4.es6的类

    class person{
            constructor(name='alex',age=18){
                this.name=name;
                this.age=age;
            }
            showname(){
                console.log(this.name)
            }
            showage(){
                console.log(this.age)
            }
    
        }
        let v=new person();
        v.showname()
        v.showage()

     补充:es5中的函数this指向了使用该函数的对象

    var person = {
        name:'alex',
        fav:function(){
            console.log(this);//person
        }
    }
    person.fav()

    -箭头函数

    var person = {
        name:'alex',
        fav:()=>{
            console.log(this);//window
        },
        showName(){
            console.log(this);//person
        }
    }
    person.fav()

    有关this指向问题的总结:

      --this的指向和vm实例没有任何的关系,而是与箭头函数和普通函数的区别

      1.es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm。

      2、箭头函数的this指向它的调用者所在的上下文,也就是vm实例所在的上下文(定义vm的父类),即window.

  • 相关阅读:
    ACM ICPC 2008–2009 NEERC MSC A, B, C, G, L
    POJ 1088 滑雪 DP
    UVA 11584 最短回文串划分 DP
    POJ 2531 Network Saboteur DFS+剪枝
    UVa 10739 String to Palindrome 字符串dp
    UVa 11151 Longest Palindrome 字符串dp
    UVa 10154 Weights and Measures dp 降维
    UVa 10271 Chopsticks dp
    UVa 10617 Again Palindrome 字符串dp
    UVa 10651 Pebble Solitaire 状态压缩 dp
  • 原文地址:https://www.cnblogs.com/wqzn/p/10022687.html
Copyright © 2011-2022 走看看