知识回顾

数组

1m17
js本身并没有数组这个概念，数组本身也是对象，而对象，数组它的索引部分本质上是一个字符串，数组的索引是数字，JavaScript底层本身是在模拟字符串的样子

set

time 4m51s

  1. var set=new Set();//成员是唯一的“数组”
  2. /*map是一个对象，键名可以是一个对象，不必须是一个字符串
  3. * 先可以就这样简单的理解，以后可以看出区别*/

新增API

time 8:25

  1. const map=new Map();
  2. const set=new Set();
  3. const p=new Promise();
  5. const  p1=new Proxy();

新增API，无法通过Babel降级成、翻译成es5
可以用Babel插件降级，现在浏览器都支持了这些api

set数据

time 12m12s

  1.     const set = new Set();
  2.     console.log(set);

image.png

time 16m20s

  1.     const set = new Set();
  2.     set.add(5);
  3.     set.add(7);
  4.     console.log(set);//Set(2){5, 7}

image.png

  1.     var set = new Set([5,7]);
  2.     // var set = new Set({5,7});
  3. /*
  4.     不行 报错 必须具有迭代接口Uncaught SyntaxError: Unexpected number，
  5.     参数是具备iterator的接口的数据结构；[],类数组
  6. */
  7.     // set.add(5);
  8.     // set.add(7);
  9.     console.log(set);//Set(2){5, 7}

不能重复

time 21m07s
set中没有重复的值

  1.     var set = new Set([1, 2, 3, 4, 5, 5]);
  2.     // var set = new Set({5,7});
  3.     /*
  4.         不行 报错 必须具有迭代接口Uncaught SyntaxError: Unexpected number，
  5.         参数是具备iterator的接口的数据结构；[],类数组
  6.     */
  7.     set.add(5);
  8.     set.add(7);
  9.     console.log(set);

image.png

time 23m25s
与undefined、null

  1.    var set = new Set([undefined,undefined]);
  2.     console.log(set);//Set(1){undefined}
  1. var set = new Set([undefined, undefined]);
  2. console.log(set);//Set(1){undefined}
  4. var set = new Set([undefined, undefined, null, null]);
  5. console.log(set);//Set(2) { undefined, null }
  7. var set = new Set([undefined, undefined, null, null, 5, '5', true, 1, NaN, NaN]);
  8. console.log(set);//Set(7) { undefined, null, 5, '5', true, 1, NaN }
  10. /*数组、对象都是新的，new出来的，地址不一样*/
  11. var set = new Set([{}, {}, [], []]);
  12. console.log(set);//Set(4) { {}, {}, [], [] }
  13. console.log({}==={});//false

对象与set，链式调用

time 32m36s

  1. var set = new Set();
  2. var x = {id: 1}, y = {id: 2};
  4. /*可以链式调用
  5. * x指向的地址，再第二次添加时，添加的是同一个地址*/
  6. // set.add(x).add(y).add(x);//分开写比较好，容易读懂，易读性
  7. set.add(x)
  8.     .add(y)
  9.     .add(x);
  11. /*add方法返回值为set对象
  12. *添加值，返回是set结构本身 */
  13. console.log(set.add(x));//Set(2) { { id: 1 }, { id: 2 } }
  14. console.log(set);//Set(2) { { id: 1 }, { id: 2 } }

删除

time 37m

  1. var set = new Set();
  2. var x = {id: 1}, y = {id: 2};
  4. /*可以链式调用
  5. * x指向的地址，再第二次添加时，添加的是同一个地址*/
  6. // set.add(x).add(y).add(x);
  7. set.add(x)
  8.     .add(y)
  9.     .add(x);
  11. /*add方法返回值为set对象
  12. *添加值，返回是set结构本身 */
  13. console.log(set.add(x));//Set(2) { { id: 1 }, { id: 2 } }
  14. console.log(set);//Set(2) { { id: 1 }, { id: 2 } }
  16. console.log(set.size);//2
  17. console.log(set.delete(y));//true
  18. console.log(set);//Set(1) { { id: 1 } }
  19. console.log(set.delete(y));//false

has

time 38m49s

  1. var set = new Set();
  2. var x = {id: 1}, y = {id: 2};
  4. set.add(x)
  5.     .add(y)
  6.     .add(x);
  8. console.log(set.has(x));//true
  9. console.log(set);//Set(2) { { id: 1 }, { id: 2 } }
  10. set.clear();
  11. console.log(set);//Set(0) {}

迭代器

time 48m57s

set没有键名，键名键值都一样

  1.    let set = new Set(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  2.     console.log(set);//Set(7) { 'a', 'b', 'c', 'd', 'e', 'f', 'g' }
  3.     // console.log(set.keys());
  4.     // console.log(set.values());
  5.     console.log(set.entries());
  6.    /* for(let i of set.keys()){
  7.         console.log(i)
  8.     }
  10.     for(let i of set.values()){
  11.         console.log(i)
  12.     }*/
  14.     for(let i of set.entries()){
  15.         console.log(i)
  16.     }

image.png

单独遍历set
54m39s

  1.     let set = new Set(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  2.     for (let i of set) {
  3.         console.log(i);
  4.     }
  5.     /*迭代set运行的是set.value上面的迭代方法*/
  6.     console.log(Set.prototype[Symbol.iterator]===Set.prototype.values);

image.png

foreach

time 57m55s
es6箭头函数简化写法

  1.     let set = new Set(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  2.     set.forEach((value, keys, set)=>console.log(value,keys,set))

应用，与展开运算符等的结合

time 1h00m55s

数组去重

把数组放在set中，利用set的特性，可以去重，之后再展开数组

  1.     let set = new Set(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  2.     console.log(...set);//a b c d e f g
  3.     console.log([...set]);//['a', 'b', 'c', 'd', 'e', 'f', 'g']

set、map翻倍

time 1h5m32s

  1.     let set=new Set([1,2,3,4,5,6,7]);
  2.     let set1=new Set([...set].map(value => value*2));
  3.     console.log(set1);

parseInt

time 1h8m

  1.    var arr = [1, 2, 3, 4];
  2.     var arr1=arr.map(parseInt);
  3.     console.log(arr1);//[1, NaN, NaN, NaN]

fillter

time 1h15m
image.png

交集、并集、差集

time 1h17m39s
image.png

并集

time 1h20m27s
image.png

from
time 1h29m
与map意思一样
映射一个新的解构
image.png

Map

time 1h30m47s

不能实现键与值一一对应，进行了Object原型上面的toString方法转化
image.png
bar

map使用

time 1h39m

  1.     let m = new Map();
  2.     var x = {id: 1},
  3.         y = {id: 2};
  4.     m.set(x,'foo');
  5.     m.set(y,'bar');
  7.     console.log(m.get(x));
  8.     console.log(m.get(y))
  9.     console.log(m);

image.png

迭代

time 1h41m
双源数据结构 【键名，键值】

  1.     let m=new Map([
  2.         ['name','zhangsan'],
  3.         ['name1','lisi']
  4.     ])
  5.     console.log(m);

image.png

map.set添加

time 1h46m26s
image.png

  1.     let m = new Map();
  2.     m.set('name', 'zhangsan');
  3.     m.set('title', 'lisi');
  5.     console.log(m);

覆盖

  1.     let m = new Map();
  2.     m.set('name', 'zhangsan');
  3.     m.set('name', 'zhangsan11');
  4.     m.set('title', 'lisi');
  6.     console.log(m);

image.png

set 分析

time 1h51m47s
image.png
map（【】）等同于把数组循环之后，再set(数组的item，每一项)，底层是这样实现的，类似于这样实现的
上面代码模拟map（参数），传参过程

覆盖

time 1h59m
image.png

get

time 2h1m

  1. var map=new Map();
  2. map.set(1,'map');
  3. map.set(1,'bar');
  5. console.log(map.get(1));//bar

引用值
time 2h3m

  1.     var map = new Map();
  2.     /*map.set(1,'map');
  3.     map.set(1,'bar');
  5.     console.log(map.get(1));//bar*/
  7.     map.set([5], 555);
  8.     console.log(map.get([5]));//undefined
  10.     map.set({}, 555);
  11.     console.log(map.get({}));//undefined

这样就行了，需要变量指向地址，变量储存地址
image.png

探究原始值、引用值的覆盖情况

time 2h6m
image.png

其它方法

image.png

set、map基本上是一样的
image.png

总结

time 2h17m
set没有键名，所以只需要add往里面添加，取值把它变成数组，该怎么取就怎么取值

map
time 2h21m
image.png