ES6学习——ES6新增的类型和函数

1.Symbol

        ES5 的对象属性名都是字符串，这容易造成属性名的冲突。⽐如，你使⽤了⼀个他⼈提供 的对象，但⼜想为这个对象添加新的⽅法（mixin 模式），新⽅法的名字就有可能与现有⽅法产⽣冲突。如果有⼀种机制，保证每个属性的名字都是独⼀⽆⼆的就好了，这样就从根本上防⽌属性名的冲突。ES6 引⼊了⼀种新的原始数据类型 Symbol ，表示独⼀⽆⼆的值

1. ⽣成Symbol值

        通过调⽤Symbol函数⽣成⼀个Symbol值，这个值是独⼀⽆⼆的。注意，Symbol的值不是对象，不要给其添加属性，Symbol就是⼀个类似于字符串的值，Symbol是一个函数，不可以用new关键字生成一个对象

            let s1 = Symbol()
            let s2 = "name"
            let obj = {
                [s1]:"terry",    // 神秘的唯一值:"terry"
                [s2]:"tom" ,     // name:"terry"
                s3:"jacky"       // s3 :"jacky"
            }

2. ⽣成具有标识的Symbol值

        Symbol函数可以接受⼀个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，⽐较容易区分。 通过Symbol.prototype.description可以获取该描述信息。Symbol(flag)   flag字符串，表示标识

let s1 = Symbol('foo');
let s2 = Symbol('bar');

3.Symbol值的重复利用

                Symbol.for(flag)
                但是Symbol('a')不等于Symbol.for('a');

                let s1 = Symbol.for('foo');
                let s2 = Symbol.for('foo');
                s1 === s2 // true

                Symbol.keyFor() ⽅法返回⼀个已登记的（用Symbol.for('xxx')标识的） Symbol 类型值的 key
             

               let s1 = Symbol.for("foo");
                Symbol.keyFor(s1) // "foo"
                let s2 = Symbol("foo");
                Symbol.keyFor(s2) // undefined

4. Object.getOwnPropertySymbols()

                可以获取某个对象中所有的symbol属性名
 

let d = {name:'ding',[Symbol('age')]:23,girlfriend:'zha'}
> Object.getOwnPropertySymbols(d)
[ Symbol(age) ]

5. 系统内置Symbol

                1）Symbol.hasInstance()
                所有的构造函数都内置这个方法，当instanceof的时候会调用它

                let obj = {
                    [Symbol.hasInstance]:funciton(o){
                        return false
                    }
                }
                let o ={}
                {} instanceof obj;//false

                2)Symbol.iterator

对象的 Symbol.iterator 属性，指向该对象的默认遍历器⽅法。该迭代器可以被 for...of 循环使用。

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]

2. 集合

Set允许存储任何类型的唯⼀值，Set是ES6 提供了新的数据结构。它类似于数组，但是成员的值都是唯⼀的，没有重复的值。不可以通过索引访问，set是一种特殊的map

1.构造函数

                Set 函数可以接受⼀个数组（或者具有 iterable 接⼝的其他数据结构）作为参数，⽤来初始化。

                let  set = new Set();
                let set = new Set([1,2,3,3,4,5,5,6,7])
                > set
                Set(7) { 1, 2, 3, 4, 5, 6, 7 }

 2.方法

Set.prototype.size 获取容器中元素个数

Set.prototype.add(value) 向集合加⼊⼀个元素，不允许相同元素存在

Set.prototype.delete(value) 从集合中删除⼀个元素

Set.prototype.has(value) 判断集合中是否包含value

Set.prototype.clear() 清空set集合

Set.prototype.keys() 获取set集合key值的迭代器，由于set集合没有key所有与values⽅法返回结果⼀致

Set.prototype.values() 获取set集合的value值的迭代器

Set.prototype.entries() 获取set集合的entries迭代器

Set.prototype.forEach() 与数组类似的迭代⽅法

                    > set.keys()
                    [Set Iterator] { 1, 2, 3, 4, 5, 6, 7 }
                    > set.values()
                    [Set Iterator] { 1, 2, 3, 4, 5, 6, 7 }
                    > set.entries()
                    [Set Entries] {
                    [ 1, 1 ],
                    [ 2, 2 ],
                    [ 3, 3 ],
                    [ 4, 4 ],
                    [ 5, 5 ],
                    [ 6, 6 ],
                    [ 7, 7 ]
                    }

3. Map

Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种 类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应， Map 结构提供了“值—值”的对应，是⼀种更完善的 Hash 结构实现。如果你需要“键值对”的数 据结构，Map ⽐ Object 更合适。

 1.构造函数

  let map = new Map();

   let map1 = new Map([
['obj','12'],['name','name'],['age','12']]);
console.log(map1);
//Map(3) { 'obj' => '12', 'name' => 'name', 'age' => '12' }

 

           

 如何将一个对象转换为map
            let obj = {
                name:"ter",
                age:12
            }
            let ent = Object.entries(obj)
            console.log(ent)
//现在是键值对的数组，[ [ 'name', 'ter' ], [ 'age', 12 ] ] 里边只能放这种格式

            let map =new Map(ent);
            console.log(map)//Map(2) { 'name' => 'ter', 'age' => 12 }

 2.原型方法

             Map.prototype.size
            获取集合键值对个数
            Map.prototype.set(key, value)
            向集合中设置⼀个键值对。返回新的map
             Map.prototype.get(key)
            从集合中通过key获取value
             Map.prototype.has(key)
            判断集合中是否包含key指定的键
             Map.prototype.delete(key)
            通过key删除⼀个键值对
             Map.prototype.clear()
            清空map集合
             Map.prototype.keys()
            获取map集合key值的迭代器
             Map.prototype.values()
            获取map集合value值的迭代器
             Map.prototype.entries()
            获取map集合entry的迭代器
             Map.prototype.forEach()
            迭代
           

迭代map！！！！
                let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

                for (let entry of iterable) {
                console.log(entry);
                }
                // ["a", 1]
                // ["b", 2]
                // ["c", 3]

                for (let [key, value] of iterable) {
                console.log(value);
                }
                // 1
                // 2
                // 3

4. 代理

Proxy 可以理解成，在⽬标对象之前架设⼀层“拦截”，外界对该对象的访问，都必须先通过 这层拦截，因此提供了⼀种机制，可以对外界的访问进⾏过滤和改写。 ES6 原⽣提供 Proxy 构造函数，⽤来⽣成 Proxy 实例。

1 对象

set/get 设置、获取属性值劫持
            let obj ={}//目标对象
            let proxy = new Proxy(obj,{//代理 面向代理使用
                set(target,key,val){
                    target[key]=val
                },
                get(target,key){
                    return target[key]
                }
            })
            proxy.name='terry'//面向代理使用

let obj = {
name:'terry',
age:12
}
let proxy = new Proxy(obj, {
get:function(target,key){
return target[key]
},
set:function(target,key,value){
arget[key] = value;
}
})
proxy.age = 13; // 将会触发set操作
console.log(proxy.name); // 将会触发get操作

  2. 函数 apply

                函数调⽤劫持，当通过代理执⾏函数的时候会触发apply函数的执⾏

                let foo = function(msg){
                    console.log(this.name,msg)
                }
                let proxy = new Proxy(foo,{
                        apply(target,that,args){
                            target.apply(that,args)
                        }
                })
                proxy.call({name:'tom'},'hello')
                proxy.apply({name:'tom'},['hello'])

3.构造函数 constructor 

构造函数劫持，当通过new来调⽤代理的时候会触发contructor函数的执⾏ 

function Foo(name){
this.name = name;
}
let pp = new Proxy(Foo,{
construct(target,args){
return new target(...args)
}
})
console.log(new pp('terry').name)

 5. 反射 Reflect

        是⼀个内置的对象，它提供拦截 JavaScript 操作的⽅法。这些⽅法与proxy的⽅法相同。与代理一一对应，为代理提供操作方法；操作set get apply construct

Reflect 不是⼀个函数对象，因此它是不可构造的。

Reflect.apply(target, thisArg, args) 和 Function.prototype.apply() 功能类似 

function foo(name){
console.log('hello',name);
}
let proxy = new Proxy(foo,{
apply(target,that,args){
Reflect.apply(target,that,args)
}
})
proxy('terry');
proxy.call({},'terry')
proxy.apply({},['terry'])

 Reflect.construct(target, args)

对构造函数进⾏ new 操作，相当于执⾏ new target(...args) 。 

function Foo(name){
this.name = name;
}
let proxy = new Proxy(Foo,{
construct(target,args){
return Reflect.construct(target,args)
}
})
console.log(new proxy('terry').name);

Reflect.get(target, name, receiver) 获取对象身上某个属性的值，类似于 target[name]。

Reflect.set(target, name, value, receiver) 将值分配给属性的函数。

返回⼀个 Boolean ，如果更新成功，则返回 true 。

let obj = {
name:'terry',
age:12
}
let proxy = new Proxy(obj, {
get:function(target,key){
return Reflect.get(target,key)
},
set:function(target,key,value){
return Reflect.set(target,key,value)
}
})
proxy.age = 13; // 将会触发set操作
console.log(proxy.name); // 将会触发get操作
console.log(proxy.age); // 将会触发get操作