zoukankan      html  css  js  c++  java
  • 《JavaScript高级程序设计》笔记:附录A ECMAScript Harmony

    一般性变化

    常量

    用const关键字声明常量,声明的变量在初始赋值后,就不能进行修改了,如下代码:

    const MAX_SIZE = 25;
    MAX_SIZE = 10;  //报错

    块级作用域及其他作用域

    for(let i = 0; i < 10; i++){
        //执行某些操作
    }
    console.log(i);  //错误! i is not defined

    函数

    剩余参数与分布参数

    剩余参数的语法是三个点后跟一个标识符,如下例子:

    function sum (num1, num2, ...nums){
        var result = num1 + num2;
        for(let i = 0, len = nums.length; i < len; i++){
            result += nums[i];
        }
        return result;
    }
    var result = sum(1,2,3,4,5,6);
    console.log(result); //21

    分布参数:可以向函数中传入一个数组,然后数组中的元素会映射到函数的每个参数上。如下代码:

    var result = sum(...[1,2,3,4,5,6]);

    以上代码跟下面等价:

    var result = sum.apply(this,[1,2,3,4,5,6]);

    默认参数值

    要为参数指定默认值,可以在参数名后面直接加上等于号和默认值,如下代码:

    function sum(num1,num2 =2){
        return num1 + num2;
    }
    var result1 = sum(5);
    var result2 = sum(5,5);
    console.log(result1,result2); //7,10

    生成器

    所谓生成器,其实就是一个对象,它每次能生成一系列值中的一个。要创建生成器,可以让函数通过yield操作符返回某个特殊的值。对于使用yield操作符返回值的函数,调用它时就会创建并返回一个新的Generator实例。然后在这个实例上调用next()方法就能取得生成器的第一个值。此时,执行的是原来的函数,但执行流到yield语句就会停止,只返回特定的值。从这个角度看,yield和return很相似。如果再次调用next()方法,原来函数中位于yield语句后的代码会继续执行,知道再次遇见yield语句时停止执行,此时再返回一个新值,如下代码:

    function* myNumbers(){
        for(var i =0 ; i < 10; i++){
            yield i * 2;
        }
    }
    var generator = myNumbers();
    try{
        while(true){
            document.write(generator.next() + "<br/>")
        }
    }catch(ex){
        //有意没有写代码
    }finally{
        generator.close();
    }

     执行上面代码浏览器卡死。来看下面例子:

    function* a(){
        console.log(11)
        yield 'kevin';
    
        console.log(22);
        yield 'ivan';
        
        console.log(33);
        yield 'wuhan';
        return 'yes';
    }
    
    var b =  a();
    console.log(b.next())
    console.log(b.next())
    console.log(b.next())
    console.log(b.next())

    结果:

    //打印结果:
    11
    Object { value: "kevin", done: false }
    22
    Object { value: "ivan", done: false }
    33
    Object { value: "wuhan", done: false }
    Object { value: "yes", done: true }

     在需要一系列值,而每一个值又与前一个值存在某种关系的情况下,可以使用生成器。

    数组及其他结构

    迭代器

    普通的对象并没有内置的@@iterator。当然,你也可以给任何想遍历的对象定义@@iterator,如下代码:

    var myObject = {
        a:2,
        b:3
    };
    Object.defineProperty(myObject,Symbol.iterator,{
        enumerable:false,
        writable:false,
        configurable:true,
        value:function(){
            var o = this,
                idx = 0,
                ks = Object.keys(o);
            return {
                next:function(){
                    return {
                        value:o[ks[idx++]],
                        done:(idx > ks.length)
                    }
                }
            }
        }
    });
    
    //手动遍历myObject
    var it = myObject[Symbol.iterator]();
    var next1 = it.next();
    var next2 = it.next();
    var next3 = it.next();
    console.log(next1); //{value: 2, done: false}
    console.log(next2); //{value: 3, done: false}
    console.log(next3); //{value: undefined, done: true}
    
    //用for...of遍历myObject
    for(var v of myObject){
        console.log(v);
    }
    //2
    //3

    注:我们使用Object.defineProperty()定义了我们自己的@@iterator(主要是为了让它不可枚举),不过注意,我们把符号当做可计算属性名。此外,也可以直接在定义对象时进行声明,比如:

    var myObject = {
        a:2,
        b:3,
        [Symbol.iterator]:function(){
            /*..*/
        }
    };

    为数组创建迭代器,如下代码:

    var colors = ["red","green","blue"];
    var iterator = colors[Symbol.iterator]();
    console.log(iterator.next());  //{value: "red", done: false}
    console.log(iterator.next());  //{value: "green", done: false}
    console.log(iterator.next());  //{value: "blue", done: false}
    console.log(iterator.next());  //{value: undefined, done: true}

    数组领悟

    所谓数组领悟,指的是用一组符合某个条件的值来初始化数组。JS中数组领悟的基本形式:

    array = [value for each (variable  in values) condition];

    其中,value是实际会包含在数组中的值,它源自values数组。for each结构会循环values中的每一个值,并将每个值保存在变量variable中,如果保存在variable中的值符合condition条件,就会将这个值添加到结果数组中,如下例子:

    var numbers = [0,1,2,3,4,5,6,7,8,9,10];
    
    //把所有元素复制到新数组
    var duplicate = [i for each (i in numbers)];
    
    //只把偶数复制到新数组
    var evens = [i for each (i in numbers) if (i % 2 == 0)];
    
    //把每个数乘以2后的结果放到新数组中
    var doubled = [i*2 for each (i in numbers)];
    
    //把每个奇数乘以3后的结果放到新数组中
    var tripledOdds = [i*3 for each (i in numbers) if (i %2 > 0)];

    firefox2+是唯一支持数组领悟的浏览器。而且要使用这个功能,必须将<script>的type属性值指定为“application/javascript;version=1.7”

    解构赋值

    var [name,value] = ["color","red"];
    console.log(name,value); //color red
    
    var [,value] = ["color","red"];
    console.log(value); //red
    
    var person = {
        name:"Nice",
        age:29
    };
    var {name:personName,age:personAge} = person;
    console.log(personName,personAge); //Nice 29

    新对象类型

     Harmony为JS定义了几个新的对象类型。

    代理对象

    要创建代理对象,可以使用Proxy.create()方法,传入一个handler(处理程序)对象和一个可选的prototype()原型对象。

    var proxy = Proxy.create(handler);
    
    //创建一个以myOjbect为原型的代理对象
    var proxy = Proxy.create(handler,myObject);

     待续

  • 相关阅读:
    Net core 关于缓存的实现
    2018年自己的技术心得
    DataSet
    弹错:正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码
    c#中结构与类的区别
    TEQC使用说明
    TEQC软件及使用方法
    <深度工作>笔记
    Gtest学习系列三:断言
    Gtest学习系列二:Gtest基本介绍
  • 原文地址:https://www.cnblogs.com/moqiutao/p/10280415.html
Copyright © 2011-2022 走看看