0
点赞
收藏
分享

微信扫一扫

【ES】153-重温基础:ES6系列(四)

林塬 2022-08-29 阅读 23

【ES】153-重温基础:ES6系列(四)_数组

ES6系列目录

  • 1 let 和 const命令
  • 2 变量的解构赋值
  • 3 字符串的拓展
  • 4 正则的拓展
  • 5 数值的拓展
  • 6 函数的拓展
  • 7 数组的拓展
  • 8 对象的拓展
  • 9 Symbol
  • 10 Set和Map数据结构
  • 11 Proxy
  • 12 Promise对象
  • 13 Iterator和 for...of循环
  • 14 Generator函数和应用
  • 15 Class语法和继承
  • 16 Module语法和加载实现

所有整理的文章都收录到我《Cute-JavaScript》系列文章中,访问地址:http://js.pingan8787.com


10 Set和Map数据结构

10.1 Set

介绍:
​​Set​数据结构类似数组,但所有成员的值唯一
​​Set​​本身为一个构造函数,用来生成 ​Set​​数据结构,使用 ​add​方法来添加新成员。

  1. let a = new Set();
  2. [1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));
  3. for(let k of a){
  4.    console.log(k)
  5. };
  6. // 1 2 3 4 5

基础使用

  1. let a = new Set([1,2,3,3,4]);
  2. [...a]; // [1,2,3,4]
  3. a.size; // 4

  4. // 数组去重
  5. [...new Set([1,2,3,4,4,4])];// [1,2,3,4]

注意

  • 向 ​Set​​中添加值的时候,不会类型转换,即 ​​5​​和 ​​'5'​​是不同的。
  1. [...new Set([5,'5'])]; // [5, "5"]

属性和方法


  • 属性:
  • ​Set.prototype.constructor​​​:构造函数,默认就是 ​​Set​​函数。
  • ​Set.prototype.size​​​:返回 ​​Set​​实例的成员总数。

  • 操作方法:




  • ​add(value)​​:添加某个值,返回 Set 结构本身。

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

  • ​has(value)​​:返回一个布尔值,表示该值是否为Set的成员。

  • ​clear()​​:清除所有成员,没有返回值。

  1. let a = new Set();
  2. a.add(1).add(2); // a => Set(2) {1, 2}
  3. a.has(2);        // true
  4. a.has(3);        // false
  5. a.delete(2);     // true  a => Set(1) {1}
  6. a.clear();       // a => Set(0) {}

数组去重

  1. let a = new Set([1,2,3,3,3,3]);

10.2 Set的应用

数组去重

  1. // 方法1
  2. [...new Set([1,2,3,4,4,4])]; // [1,2,3,4]
  3. // 方法2
  4. Array.from(new Set([1,2,3,4,4,4]));    // [1,2,3,4]

遍历和过滤

  1. let a = new Set([1,2,3,4]);

  2. // map 遍历操作
  3. let b = new Set([...a].map(x =>x*2));// b => Set(4) {2,4,6,8}

  4. // filter 过滤操作
  5. let c = new Set([...a].filter(x =>(x%2) == 0)); // b => Set(2) {2,4}

获取并集、交集和差集

  1. let a = new Set([1,2,3]);
  2. let b = new Set([4,3,2]);

  3. // 并集
  4. let c1 = new Set([...a, ...b]);  // Set {1,2,3,4}

  5. // 交集
  6. let c2 = new Set([...a].filter(x => b.has(x))); // set {2,3}

  7. // 差集
  8. let c3 = new Set([...a].filter(x => !b.has(x))); // set {1}
  • 遍历方法:
  • ​keys()​​:返回键名的遍历器。
  • ​values()​​:返回键值的遍历器。
  • ​entries()​​:返回键值对的遍历器。
  • ​forEach()​​:使用回调函数遍历每个成员

Set​遍历顺序是插入顺序,当保存多个回调函数,只需按照顺序调用。但由于 ​Set​结构没有键名只有键值,所以 ​keys()​​和 ​values()​是返回结果相同。

  1. let a = new Set(['a','b','c']);
  2. for(let i of a.keys()){console.log(i)};   // 'a' 'b' 'c'
  3. for(let i of a.values()){console.log(i)}; // 'a' 'b' 'c'
  4. for(let i of a.entries()){console.log(i)};
  5. // ['a','a'] ['b','b'] ['c','c']

并且 还可以使用 ​for...of​​直接遍历 ​Set​。

  1. let a = new Set(['a','b','c']);
  2. for(let k of a){console.log(k)};   // 'a' 'b' 'c'

forEach​与数组相同,对每个成员执行操作,且无返回值。

  1. let a = new Set(['a','b','c']);
  2. a.forEach((v,k) => console.log(k + ' : ' + v));

10.3 Map

由于传统的 ​JavaScript​​对象只能用字符串当做键,给开发带来很大限制,ES6增加 ​Map​数据结构,使得各种类型的值(包括对象)都可以作为键。
​​Map​结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。基础使用

  1. let a = new Map();
  2. let b = {name: 'leo' };
  3. a.set(b,'my name'); // 添加值
  4. a.get(b);           // 获取值
  5. a.size;      // 获取总数
  6. a.has(b);    // 查询是否存在
  7. a.delete(b); // 删除一个值
  8. a.clear();   // 清空所有成员 无返回

注意

  • 传入数组作为参数,指定键值对的数组
  1. let a = new Map([
  2.    ['name','leo'],
  3.    ['age',18]
  4. ])
  • 如果对同一个键多次赋值,后面的值将覆盖前面的值
  1. let a = new Map();
  2. a.set(1,'aaa').set(1,'bbb');
  3. a.get(1); // 'bbb'
  • 如果读取一个未知的键,则返回 ​undefined​。
  1. new Map().get('abcdef'); // undefined
  • 同样的值的两个实例,在 Map 结构中被视为两个键。
  1. let a = new Map();
  2. let a1 = ['aaa'];
  3. let a2 = ['aaa'];
  4. a.set(a1,111).set(a2,222);
  5. a.get(a1); // 111
  6. a.get(a2); // 222

遍历方法: Map 的遍历顺序就是插入顺序。

  • keys()​:返回键名的遍历器。
  • values()​:返回键值的遍历器。
  • entries()​:返回所有成员的遍历器。
  • forEach()​:遍历 Map 的所有成员。
  1. let a = new Map([
  2.    ['name','leo'],
  3.    ['age',18]
  4. ])

  5. for (let i of a.keys()){...};
  6. for (let i of a.values()){...};
  7. for (let i of a.entries()){...};
  8. a.forEach((v,k,m)=>{
  9.    console.log(`key:${k},value:${v},map:${m}`)
  10. })

将Map结构转成数组结构

  1. let a = new Map([
  2.    ['name','leo'],
  3.    ['age',18]
  4. ])

  5. let a1 = [...a.keys()];   // a1 => ["name", "age"]
  6. let a2 = [...a.values()]; // a2 =>  ["leo", 18]
  7. let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]

10.4 Map与其他数据结构互相转换

  • Map 转 数组
  1. let a = new Map().set(true,1).set({f:2},['abc']);
  2. [...a]; // [[true:1], [ {f:2},['abc'] ]]
  • 数组 转 Map
  1. let a = [ ['name','leo'], [1, 'hi' ]]
  2. let b = new Map(a);
  • Map 转 对象 如果所有 Map 的键都是字符串,它可以无损地转为对象。
    如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
  1. function fun(s) {
  2.  let obj = Object.create(null);
  3.  for (let [k,v] of s) {
  4.    obj[k] = v;
  5.  }
  6.  return obj;
  7. }

  8. const a = new Map().set('yes', true).set('no', false);
  9. fun(a)
  10. // { yes: true, no: false }
  • 对象 转 Map
  1. function fun(obj) {
  2.  let a = new Map();
  3.  for (let k of Object.keys(obj)) {
  4.    a.set(k, obj[k]);
  5.  }
  6.  return a;
  7. }

  8. fun({yes: true, no: false})
  9. // Map {"yes" => true, "no" => false}
  • Map 转 JSON
    (1)Map键名都是字符串,转为对象JSON:
  1. function fun (s) {
  2.    let obj = Object.create(null);
  3.    for (let [k,v] of s) {
  4.        obj[k] = v;
  5.    }
  6.    return JSON.stringify(obj)
  7. }
  8. let a = new Map().set('yes', true).set('no', false);
  9. fun(a);
  10. // '{"yes":true,"no":false}'

(2)Map键名有非字符串,转为数组JSON:

  1. function fun (map) {
  2.  return JSON.stringify([...map]);
  3. }

  4. let a = new Map().set(true, 7).set({foo: 3}, ['abc']);
  5. fun(a)
  6. // '[[true,7],[{"foo":3},["abc"]]]'
  • JSON 转 Map
    (1)所有键名都是字符串:
  1. function fun (s) {
  2.  let strMap = new Map();
  3.  for (let k of Object.keys(s)) {
  4.    strMap.set(k, s[k]);
  5.  }
  6.  return strMap;
  7.  return JSON.parse(strMap);
  8. }
  9. fun('{"yes": true, "no": false}')
  10. // Map {'yes' => true, 'no' => false}

(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组:

  1. function fun2(s) {
  2.  return new Map(JSON.parse(s));
  3. }
  4. fun2('[[true,7],[{"foo":3},["abc"]]]')
  5. // Map {true => 7, Object {foo: 3} => ['abc']}

11 Proxy

proxy​ 用于修改某些操作的默认行为,可以理解为一种拦截外界对目标对象访问的一种机制,从而对外界的访问进行过滤和修改,即代理某些操作,也称“代理器”。

11.1 基础使用

proxy​​实例化需要传入两个参数, ​target​​参数表示所要拦截的目标对象, ​handler​参数也是一个对象,用来定制拦截行为。

  1. let p = new Proxy(target, handler);

  2. let a = new Proxy({}, {
  3.    get: function (target, handler){
  4.        return 'leo';
  5.    }
  6. })
  7. a.name; // leo
  8. a.age;  // leo
  9. a.abcd; // leo

上述 ​a​​实例中,在第二个参数中定义了 ​get​​方法,来拦截外界访问,并且 ​get​方法接收两个参数,分别是目标对象所要访问的属性,所以不管外部访问对象中任何属性都会执行 ​get​​方法返回 ​leo​​。
注意

  • 只能使用 ​Proxy​实例的对象才能使用这些操作。
  • 如果 ​handler​没有设置拦截,则直接返回原对象。
  1. let target = {};
  2. let handler = {};
  3. let p = new Proxy(target, handler);
  4. p.a = 'leo';
  5. target.a;  // 'leo'

同个拦截器函数,设置多个拦截操作

  1. let p = new Proxy(function(a, b){
  2.    return a + b;
  3. },{
  4.    get:function(){
  5.        return 'get方法';
  6.    },
  7.    apply:function(){
  8.        return 'apply方法';
  9.    }
  10. })

这里还有一个简单的案例:

  1. let handler = {
  2.    get : function (target, name){
  3.        return name in target ? target[name] : 16;
  4.    }
  5. }

  6. let p = new Proxy ({}, handler);
  7. p.a = 1;
  8. console.log(p.a , p.b);
  9. // 1   16

这里因为 ​p.a=1​​ 定义了 ​p​​中的 ​a​​属性,值为 ​1​​,而没有定义 ​b​​属性,所以 ​p.a​​会得到 ​1​​,而 ​p.b​​会得到 ​undefined​​从而使用 ​nameintarget?target[name]:16;​​返回的默认值 ​16​;

Proxy​支持的13种拦截操作
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)。

11.2 取消Proxy实例

使用 ​Proxy.revocale​​方法取消 ​Proxy​实例。

  1. let a = {};
  2. let b = {};
  3. let {proxy, revoke} = Proxy.revocale(a, b);

  4. proxy.name = 'leo';  // 'leo'
  5. revoke();
  6. proxy.name;  // TypeError: Revoked

11.3 实现 Web服务的客户端

  1. const service = createWebService('http://le.com/data');
  2. service.employees().than(json =>{
  3.    const employees = JSON.parse(json);
  4. })

  5. function createWebService(url){
  6.    return new Proxy({}, {
  7.        get(target, propKey, receiver{
  8.            return () => httpGet(url+'/'+propKey);
  9.        })
  10.    })
  11. }


【ES】153-重温基础:ES6系列(四)_json_02


举报

相关推荐

0 条评论