set

类似数组，但成员值都是唯一的，不能重复

1. 创建 new Set()

   1 2 3 4

   const s = new Set() const s1 = new Set([1, 2, 3, 3, 4]) // 可接受数组，可用于去重 for (let i of s) {}

2. 添加 add(val)

3. delete(val)

4. has(val) // return boolean

5. size // num

6. clear() // 清空，没有返回值

7. 遍历 set.keys() | set.values() | forEach | map | filter

8. 并集交集和差集

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

   weakSet

   WeakSet 的成员只能是对象，而不能是其他类型的值。
   WeakSet 中的对象都是弱引用，垃圾回收不会考虑，当外部没有引用时，会自动消失
   WeakSet 不能遍历

9. add | delete | has

map

哈希结构，Object 提供 "字符串: 值" ，Map 提供 "值: 值"

MVVM

1. 从 MVC 到 MVVM

   view(pages) <–> Controller(路由、控制器) <–> Model(数据 json)

   View(HTML) <–> ViewModel(DOM监听、数据绑定) <–> Model(数据 json)

• MVC
  Model 封装了一些逻辑和操作数据的接口
  View 视图用于展示页面
  Controller 作为控制器，通过调用接口对数据进行操作并返回给 View 层，承上启下的与 Model、View 双向交流

• MVVM
  Model 数据层，只关心数据方面
  ViewModel 事件监听和数据绑定，起到双向绑定的作用，响应式更新数据
  View 视图展示页面

数据变化驱动视图更新，视图变化数据也会同时响应 如 V-Model，是一个双向的过程

Vue 源码

TCP | IP | HTTP

HTTP    应用层      无状态，无连接，对于事务没有记忆能力      xml 明文 可解析       
TCP     传输层      数据传递，有序，可靠的，面向连接          二进制格式面向字节         一对一通信
UDP     传输层      无连接，快速但不安全，如写信              面向报文                  一对多 | 多对多
IP      网络层      网络路由和寻址

HTTP 1.0 默认使用短链接，客户和服务器每进行一次 HTTP 操作就建立一次连接，任务结束就中断

HTTP 1.1 起，使用长链接，用以保持 持续连接，响应头：Connection: keep-alive，可以设置保持时间

长连接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。对于频繁请求资源的客户端适合使用长连接。

链表

链表和数组

数组的内存是连续分配的，在使用数组之前需要分配固定大小的空间
链表的内存是不连续的，链表通过一个指向下一个元素地址的引用将链表中的元素串起来

单链表

是一种递归的数据结构，每个节点拥有一个元素（data）和一个指向下一个节点的引用（next）

设计模式是一套被反复使用的代码，作用是为了重用代码，工程化

proxy 代理

1
2

// (要代理的对象, 自定义操作方法的一个集合)
let p = new Proxy(target, handler);

p是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的.

handler 对象是由 get和set 两个函数方法组成的
这两个方法会在一个对象被 get 和 set 时被调用执行,
以代替原生对象上的操作

修饰符

• i: 对大小写不敏感
• g: 全局匹配
• m: 多行匹配

[] 范围

1. [a-z] | [0-9]
2. [asdad] 方括号之内的任何字符
3. [^asdad] 不在方括号之内的任何字符

元字符

安装

• 全局 npm install -g webpack webpack-cli

• 本地 npm install webpack webpack-cli -D

• 配置
  npm init -y
  “scripts”: {
  “build”: “webpack –mode production”
  },

• 概念

  webpack 是一个打包 (build) 工具，将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

为什么要打包？
常规的（落后的）开发方式 =》 jQuery、css、html =》将文件交付给后端

MVVM 时代 一切皆可打包

webpack 将现代 js 开发中的各种新型技术，集合打包，打包前无法运行，如（js es6 module、stylus 等不支持浏览器直接执行，.hbs 模板编译，.vue ）在目标容器上运行

函数 (Functions)

函数对象

JavaScript 中的函数就是对象，函数可以保存在变量、对象和数组中，可以被当做参数传递给其他函数，函数也可以再返回函数，函数可以拥有方法

通过字面量创建函数

1
2
3

var func = function(a) {
    return a;
}

当在 body 中使用了 filter(backdrop-filter) 滤镜属性的时候，会导致 fixed 元素定位发生错误
即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。

解决方案：

在 html 使用 filter 或 创建 伪元素/伪类 对其使用 filter

jsonp (json with padding)

跨域 ：跨域名、端口、协议

js 请求有一个同源机制，同源才能发起请求，ajax 无法跨域

后端解决跨域问题：koa-cors

前端方案：jsonp