• es6重点笔记:Symbol,Set,Map,Proxy,Reflect


    一,Symbol

    原始数据类型,不是对象,它是JavaScript第七种数据类型,表示独一无二的值。Symbol是通过Symbol函数生成的:

    let s = Symbol();
    
    typeof s
    // "symbol"

    不用new,因为Symbol不是对象,而是原始值。Symbol通常作为内置的值来使用,最重要的一个属性:

    Symbol.iterator,该属性指向该对象的默认遍历器方法,所以

    obj[Symbol.iterator]会返回该对象的默认遍历器,然后可以使用遍历器一些方法比如for...of

    Symbol的用途:

    let obj = {
       [Symbol('name')]: '一斤代码',
       age: 18,
       title: 'Engineer'
    }
    
    Object.keys(obj)   // ['age', 'title']
    
    for (let p in obj) {
       console.log(p)   // 分别会输出:'age' 和 'title'
    }
    
    Object.getOwnPropertyNames(obj)   // ['age', 'title']

    由上代码可知,Symbol类型的key是不能通过Object.keys()或者for...in来枚举的,它未被包含在对象自身的属性名集合(property names)之中。所以,利用该特性,我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。

    也正因为这样一个特性,当使用JSON.stringify()将对象转换成JSON字符串的时候,Symbol属性也会被排除在输出内容之外

    二,Set,Map

    1,Set

    类似于数组,但是成员的值都是唯一的,本身是构造函数,所以可以const s = new Set();

    Set函数接收一个数组,会进行去重,但是注意返回的是Set结构,不是数组,因此要转换一下

    [...new Set(array)],这就是最简单的数组去重。

    Set生成的对象有size属性(实际是Set.prototype.size属性),代表里面成员个数,都是不重复的。

    4个操作方法:

    add(value),添加某个值,返回Set结构本身,所以可以链式使用,连续add,但是如果add都是同一个,其实只算1个

    delete(value),删除某个值,返回布尔值,表示是否删除成功

    has(value),返回布尔值,表示是否为Set的成员

    clear(),清楚所有成员,没有返回值

    4个遍历方法:

    keys():返回键名的遍历器

    values():返回键值的遍历器

    entries():返回键值对的遍历器,entries不管是数组操作还是对象操作,还是其他操作,返回的都是['键名', '键值']这样的一个一个数组

    forEach():使用回调函数遍历每个成员

    返回遍历器的通常操作是for...of循环返回的遍历器

    利用Set实现数组的交集,并集和差集。

    let arr1 = [1,2,3];
    let arr2 = [4,2,1];
    
    let a = new Set(arr1);
    let b = new Set(arr2);
    
    // 并集
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // Set {1, 2}
    
    // 差集
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {3, 4}

    这里要注意的点:

    1,new Set只能传一个数组,在将a, b合并的时候用扩展运算符,外面要包上数组,

    2,扩展运算符是适用于所有的具有iterator接口的对象,所以用a,b或者arr1,arr2都一样。

    3,filter是数组方法,必须要把Set结构先转为数组结构

                                                                                            

    三,Map

    JavaScript的对象本质上是键值对的集合(Hash结构),但只能用字符串作为键,而ES6提供的Map结构,类似于对象,也是键值对的集合,但是它的键不局限于字符串,各种类型的值都可以当作键,包括对象,“值-值”

    cosnt m = new Map();
    const o = {p: 'hello world'};
    
    m.set(o, 'content')
    
    m.get(o)    // 'content'
    
    m.has(o)   // true
    m.delete(o)   // true
    m.has(o)   // false  

    注意:

    只有对同一个对象的引用,Map结构才将其视为同一个键!因为不同对象,内存地址是不同的,具体反例:

    const map = new Map();
    
    map.set([1], 'content')
    
    map.get([1])   // undefined
    

    Map的属性,方法和遍历方法跟Set一模一样。

    四,Proxy

    Proxy用于修改某些操作的默认行为,说白了,就是在目标对象前面设置一个“拦截层”,外界对该对象的访问必须先通过这层拦截,起到过滤和改写,Proxy译为代理,也就是“代理器”

    构造函数Proxy接受两个参数,第一个是所要代理的目标对象,第二个是一个配置对象,里面是很多处理函数,就是对该函数拦截对应的操作。

    主要的处理函数有:

    get(target, propKey, receiver):拦截对象属性的读取,你只要访问对象任何属性,就会触发它

    set(target, propKey, value, receiver):拦截对象属性的设置

    apply(target, object, args): 拦截实例,只要将其作为函数调用的话就会触发,注意,是作为调用

    construct(target, args): 拦截作为构造函数调用,就是用了new 

    var handler = {
       get: function(target, name){
          if (name === 'prototype'){
              return Object.prototype;
          }
          return 'hello' + name
       },
       apply: function(target, thisBlinding, args) {
          return args[0]
       },
       constructor: function(target, args) {
          return {value: args[1]}
       }
    };
    
    var fproxy = new Proxy(function(x, y){
        return x+y
    }, handler);
    
    fproxy(1, 2)   // 1
    new fproxy(1, 2)   // {value: 2}
    fproxy.prototype === Object.prototype   // true
    fproxy.foo  // 'Hello, foo'
    

      

    五,Reflect

    Reflect对象类似于Proxy对象,设计目的:

    1,将Object对象的属于语言内部的方法放到了Reflect对象上,如Object.defineProperty

    2,修改某些Object方法的返回结果

    3,让Object操作都变成函数行为

    4,Reflect对象的方法与Proxy对象的方法一一对应

  • 相关阅读:
    CF833 A The Meaningless Game
    [Noip2016]蚯蚓 (单调队列)
    [NOI2003]逃学的小孩 (贪心+树的直径+暴力枚举)
    [POI2014]FAR-FarmCraft (树规+贪心)
    洛谷P2566 [SCOI2009]围豆豆(状压dp+spfa)
    [POJ1852] Ants(思维题)
    树的深度(我觉得没毛病)
    HDU
    剑指offer相关问题
    CC150相关问题
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/7888992.html
Copyright © 2020-2023  润新知