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

发布时间：2024-11-15 09:01

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操作

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

1.Symbol

1. ⽣成Symbol值

2. ⽣成具有标识的Symbol值

3.Symbol值的重复利用

4. Object.getOwnPropertySymbols()

5. 系统内置Symbol

2. 集合

1.构造函数

2.方法

3. Map

1.构造函数

2.原型方法

4. 代理

1 对象

2. 函数 apply

3.构造函数 constructor

5. 反射 Reflect

相关推荐