ES6笔记

作者: hjwang1024 | 来源:发表于2020-03-26 12:24 被阅读0次

    let 和 const

    • ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。即在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
    • 作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。
    typeof undeclared_variable // "undefined"
    

    解构赋值

    • 交换变量的值
    • 从函数返回多个值,函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
    // 返回一个数组
    
    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    
    // 返回一个对象
    
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example();
    
    • 函数参数的定义,解构赋值可以方便地将一组参数与变量名对应起来。
    // 参数是一组有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3]);
    
    // 参数是一组无次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1});
    
    • 提取 JSON 数据,解构赋值对提取 JSON 对象中的数据,尤其有用。
    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);
    // 42, "OK", [867, 5309]
    
    • 函数参数的默认值
    • 遍历 Map 结构,任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
    const map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    
    for (let [key, value] of map) {
      console.log(key + " is " + value);
    }
    // first is hello
    // second is world
    

    如果只想获取键名,或者只想获取键值,可以写成下面这样。

    // 获取键名
    for (let [key] of map) {
      // ...
    }
    
    // 获取键值
    for (let [,value] of map) {
      // ...
    }
    
    • 输入模块的指定方法

    Symbol

    • Symbol.prototype.description 返回 Symbol 的描述。
    • Object.getOwnPropertySymbols(obj)Symbol 作为属性名,遍历对象属性名的时候。
    • Reflect.ownKeys()方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。
    • Symbol.for()方法接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。
    • Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key
    • Symbol.hasInstance属性,指向一个内部方法。当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。比如,foo instanceof Foo在语言内部,实际调用的是FooSymbol.hasInstance
    • Symbol.isConcatSpreadable属性等于一个布尔值,表示该对象用于Array.prototype.concat()时,是否可以展开。
    let arr1 = ['c', 'd'];
    ['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
    arr1[Symbol.isConcatSpreadable] // undefined
    
    let arr2 = ['c', 'd'];
    arr2[Symbol.isConcatSpreadable] = false;
    ['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']
    

    类似数组的对象正好相反,默认不展开。它的Symbol.isConcatSpreadable属性设为true,才可以展开。

    let obj = {length: 2, 0: 'c', 1: 'd'};
    ['a', 'b'].concat(obj, 'e') // ['a', 'b', obj, 'e']
    
    obj[Symbol.isConcatSpreadable] = true;
    ['a', 'b'].concat(obj, 'e') // ['a', 'b', 'c', 'd', 'e']
    

    Proxy

    • ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
    var proxy = new Proxy(target, handler);
    

    Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

    • Proxy 支持的拦截操作一览,一共 13 种。

    get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy['foo']。
    set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
    has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
    deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
    ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
    getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
    defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
    preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
    getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
    isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
    setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
    apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
    construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。

    相关文章

      网友评论

          本文标题:ES6笔记

          本文链接:https://www.haomeiwen.com/subject/xhxbthtx.html