zoukankan      html  css  js  c++  java
  • ECMAScript 6 (浅显入门)

    1、let:

    ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
    var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。
    为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
    let不允许在相同作用域内,重复声明同一个变量。
    ES6 允许写成下面这样。
    let [a, b, c] = [1, 2, 3];
    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
    let实际上为 JavaScript 新增了块级作用域。
    function f1() {
        let n = 5;
        if (true) {
            let n = 10;
        }
        console.log(n); // 5
    }
    上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。

    2、const:

    const声明一个只读的常量。一旦声明,常量的值就不能改变。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
    对于const来说,只声明不赋值,就会报错。const的作用域与let命令相同:只在声明所在的块级作用域内有效。const声明的常量,也与let一样不可重复声明。

    3、传统的JavaScript语言,输出模板通常是这样写的。

    $('#result').append(
            'There are <b>' + basket.count + '</b> ' +
            'items in your basket, ' +
            '<em>' + basket.onSale +
            '</em> are on sale!'
    );
    上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。
     $('#result').append(`
      There are <b>${basket.count}</b> items
       in your basket, <em>${basket.onSale}</em>
      are on sale!
    `);


    4、map:

    最新的ES6规范引入了新的数据类型Map,是一组键值对的结构,具有极快的查找速度.
    var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95
    //alert( m.get('Michael'))
    var m = new Map(); // 空Map
    m.set('Adam', 67); // 添加新的key-value
    m.set('Bob', 59);
    m.has('Adam'); // 是否存在key 'Adam': true
    m.get('Adam'); // 67
    m.delete('Adam'); // 删除key 'Adam'
    m.get('Adam'); // undefined


    5、set:

    Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
    var s = new Set([1, 2, 3, 3, '3']);
    //console.log(s)   // Set {1, 2, 3, "3"}
     s.add(4)  //添加
     s.delete(3);//删除
     console.log(s)


    6、for ... of:

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    for (var x of m) { // 遍历Map
        alert(x[0] + '=' + x[1]);
    }
    7、ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

    function log(x, y = 'World') {
            console.log(x, y);
        }
    
        log('Hello') // Hello World
        log('Hello', 'China') // Hello China
        log('Hello', '') // Hello
    8、函数的 length 属性

    指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。
     (function (a) {}).length // 1
     (function (a = 5) {}).length // 0
     (function (a, b, c = 5) {}).length // 2
    上面代码中,length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。
    比如,上面最后一个函数,定义了3个参数,其中有一个参数c指定了默认值,因此length属性等于3减去1,最后得到2。

     9、rest :

    ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
    function add(...values) {
            let sum = 0;
    
            for (var val of values) {
                sum += val;
            }
    
            return sum;
        }
    
        add(2, 5, 3) // 10

    10、箭头函数

    如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
    var f = () => 5;
        // 等同于
        var f = function () { return 5 };
    
        var sum = (num1, num2) => num1 + num2;
        // 等同于
        var sum = function(num1, num2) {
            return num1 + num2;
        };
    如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
     var sum = (num1, num2) => { return num1 + num2; }
    箭头函数有几个使用注意点。
    (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

    (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

    (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

    (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

    11、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
    上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

    Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

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

    ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
     
     
     
  • 相关阅读:
    Swing中如何比较好的判断鼠标左键双击
    学习rsyslog
    学习rsync
    在线手册
    Linux开源镜像站大全
    Linux命令
    Android使用sqlite数据库的使用
    Android学习笔记-listview实现方式之BaseAdapter
    Android学习笔记-保存数据的实现方法2-SharedPreferences
    Android学习笔记-获取手机内存,SD卡存储空间。
  • 原文地址:https://www.cnblogs.com/xiaobaibubai/p/7201152.html
Copyright © 2011-2022 走看看