es6 Symbole入门理解

Posted 2020-10-16

Symbol

//我简单理解这个东西就是可以做唯一标识，也可以不是
    var s1 = Symbol(‘s1)         //这就是唯一的
    var s2 = Symbol.for(‘s2‘)   //这个就不是唯一的了
    var obj = {
        [s1] : ‘aaa‘
    }
    var obj2 = {}
    var obj[s1] = ‘bbb‘

内置Symbol的11个值？

    // 阮大师的话我真没理解啥意思。。。
    // 我理解这个就是对原生一些方法的拦截，不执行源生方法改执行自己的，所以如果想实现功能必须自己写代码完成
    
    // 1. hasInstance
    class MyClass {
      [Symbol.hasInstance](foo) {
        return foo instanceof Array;
      }
    }
    [1, 2, 3] instanceof new MyClass() // true
    //当MyClass被当作是否为另外一个实例的构造函数比较时，hasInstance会执行

    // 2. isConcatSpreadable
    var a = [1, 2]
    var b = [3, 4]
    var c = a.concat(b)    //[1, 2, 3, 4]
    b[Symbol.isConcatSpreadable] = false    // 这里属性有3个值  undefined和true 这俩是一个意思，  还有个false就是不分解合并。 
    a.concat(b)    // [1, 2, [3, 4]]                 // 不分解合并就成这样了

    // 3. species    通过这个函数的返回值来创建实例
    class MyArray extends Array {
      static get [Symbol.species]() { return Array; }
    }
    let a = new MyArray(1,2,3);
    let mapped = a.map(x => x * x);

    a instanceof MyArray // true
    a instanceof Array // true

    mapped instanceof MyArray // false
    mapped instanceof Array // true

    // 4. match
    class MyMatcher {
      [Symbol.match](string) {
        //实现match
        var reg = new RegExp(string)
        return ‘hello world‘.match(reg)        //内部必须实现match并把结果返回出去。
        //return ‘hello world‘.indexOf(string);  //阮前辈的案例  
      }
    }
    ‘e‘.match(new MyMatcher())

    // 5. replace
    const x = {};
    x[Symbol.replace] = (...s) => console.log(s);
    //能得到这个结果，说明...s结构了2个参数，一个是‘Hello‘，一个是‘World‘
    ‘Hello‘.replace(x, ‘World‘) // ["Hello", "World"]

    //为了完成替换功能，改了一下demo
     const x = {};
        x[Symbol.replace] = (s1, s2) => {
            var str = ‘__‘
            console.log(‘s1:‘, s1)    //Hello
            console.log(‘s2:‘, s2)   //World 
            return s1.replace(str, s2)
        };
        console.log(‘Hello __‘.replace(x, ‘World‘)) // ["Hello", "World"]

    // 6. search    //搜索时的  ‘foobar‘.search(new MySearch(‘foo‘)) // 0
    // 7. split        //分割时的    ‘foobar‘.split(new MySplitter(‘baz‘))
    // 8. iterator    //for..of   解构时的    [...myIterable]，    for(let value of myCollection) {}
    // 9. toPrimitive  //转为原始类型的值时会执行  Number，String， Default
            2 * obj // 246
            3 + obj // ‘3default‘
            obj == ‘default‘ // true
            String(obj) // ‘str‘