• ES6 学习笔记 (1)


    笔记来源:廖雪峰老师的javascript全栈教程

    ES6:JavaScript的标准,ECMAScript在不断发展,最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了,不过大多数时候,我们还是用JavaScript这个词。如果你遇到ECMAScript这个词,简单把它替换为JavaScript就行了。

    1.strict模式

    为了修补JavaScript严重设计缺陷,ECMA在后续规范中推出了strict模式,在strict模式下运行的JavaScript代码,强制通过var申明变量,未使用var申明变量就使用的,将导致运行错误。

    启用strict模式的方法是在JavaScript代码的第一行写上:

    'use strict';
    

    2.模版字符串

    如果有很多变量需要连接,用+号就比较麻烦。ES6新增了一种模板字符串,它会自动替换字符串中的变量:

     

    var name = '小明';
    var age = 20;
    var message = `你好, ${name}, 你今年${age}岁了!`;
    alert(message);

    3.循环

    for ... in

    for循环的一个变体是for ... in循环,它可以把一个对象的所有属性依次循环出来:

    var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        alert(key); // 'name', 'age', 'city'
    }

    4.Met 与 Set

    最新的ES6规范引入了新的数据类型Map,Map是一组键值对的结构,具有极快的查找速度。

    举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array

    var names = ['Michael', 'Bob', 'Tracy'];
    var scores = [95, 75, 85];

    给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

    如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

    var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95

    初始化Map需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

    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

    由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

    var m = new Map();
    m.set('Adam', 67);
    m.set('Adam', 88);
    m.get('Adam'); // 88

    Set

    SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

    要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

    var s1 = new Set(); // 空Set
    var s2 = new Set([1, 2, 3]); // 含1, 2, 3

    重复元素在Set中自动被过滤:

    var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}

    注意数字3和字符串'3'是不同的元素。

    通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

    >>> s.add(4)
    >>> s
    {1, 2, 3, 4}
    >>> s.add(4)
    >>> s
    {1, 2, 3, 4}

    通过delete(key)方法可以删除元素:

    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}

    5.iterable

    
    

    遍历Array可以采用下标循环,遍历MapSet就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,ArrayMapSet都属于iterable类型。具有iterable类型的集合可以通过新的for ... of循环来遍历。

    
    
    用for ... of循环遍历集合,用法如下:
    
    var a = ['A', 'B', 'C'];
    var s = new Set(['A', 'B', 'C']);
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    for (var x of a) { // 遍历Array
        alert(x);
    }
    for (var x of s) { // 遍历Set
        alert(x);
    }
    for (var x of m) { // 遍历Map
        alert(x[0] + '=' + x[1]);
    }
    
    

    你可能会有疑问,for ... of循环和for ... in循环有何区别?

    for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

    当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:

    var a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (var x in a) {
        alert(x); // '0', '1', '2', 'name'
    }

    for ... in循环将把name包括在内,但Arraylength属性却不包括在内。

    for ... of循环则完全修复了这些问题,它只循环集合本身的元素:

    var a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (var x of a) {
        alert(x); // 'A', 'B', 'C'
    }

    这就是为什么要引入新的for ... of循环。

    6.arguments

    JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array

    function foo(x) {
        alert(x); // 10
        for (var i=0; i<arguments.length; i++) {
            alert(arguments[i]); // 10, 20, 30
        }
    }
    foo(10, 20, 30);

    7.rest参数

    ES6标准引入了rest参数:

    function foo(a, b, ...rest) {
        console.log('a = ' + a);
        console.log('b = ' + b);
        console.log(rest);
    }
    
    foo(1, 2, 3, 4, 5);
    // 结果:
    // a = 1
    // b = 2
    // Array [ 3, 4, 5 ]
    
    foo(1);
    // 结果:
    // a = 1
    // b = undefined
    // Array []

    8.局部作用域

    由于JavaScript的变量作用域实际上是函数内部,我们在for循环等语句块中是无法定义具有局部作用域的变量的:

    'use strict';
    
    function foo() {
        for (var i=0; i<100; i++) {
            //
        }
        i += 100; // 仍然可以引用变量i
    }

    为了解决块级作用域,ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量:

    'use strict';
    
    function foo() {
        var sum = 0;
        for (let i=0; i<100; i++) {
            sum += i;
        }
        i += 1; // SyntaxError
    }

     

    9.常量

    由于varlet申明的是变量,如果要申明一个常量,在ES6之前是不行的,我们通常用全部大写的变量来表示“这是一个常量,不要修改它的值”:

    var PI = 3.14;

    ES6标准引入了新的关键字const来定义常量,constlet都具有块级作用域:

    'use strict';
    
    const PI = 3.14;
    PI = 3; // 某些浏览器不报错,但是无效果!
    PI; // 3.14

  • 相关阅读:
    第08组 Alpha冲刺 (2/6)
    第08组 Alpha冲刺 (1/6)
    结对编程作业
    第01组 Alpha冲刺总结
    第01组 Alpha冲刺(6/6轮)
    第01组 Alpha冲刺(6/6)
    第01组 Alpha冲刺(5/6)
    第01组 Alpha冲刺(5/6轮)
    第01组 Alpha冲刺(4/6)
    第01组 Alpha冲刺(3/6)
  • 原文地址:https://www.cnblogs.com/shifu204/p/6372565.html
Copyright © 2020-2023  润新知