ECMAScript
-
ES 与 JS
JS 为了让自己成为国际标准给了 ECMA 组织，ECMA 组织创立了浏览器脚本语言的标准，也就是 ES。
ES 是 JS 的标准；JS 是 ES 的实现。
-
ES6 与 ES2015
ES2015 是小版本迭代；ES6 泛指下一代 js 语言，也就是 ES2015、ES2016、ES2017 等。
let & const
概念：规定了变量的作用范围 {} ；
- let 声明的变量只在 let 声明的代码块内有效
- const 是常量，不能改变
特点：
- 暂存性死区，即：没有声明不能使用
- 不能重复声明
- 不存在变量提升
const 声明引用类型或者复杂类型的变量时，只能保证变量的内存地址不能被改变，并不能保证指向的值的改变。
解构赋值
Symbol
概念：新增的原始数据类型，表示独一无二的值。
特点： 1. 可以在外部访问，但是不能被遍历到
写法：
let sy = Symbol("KK"); // Symbol(KK)
typeof sy; // "symbol"
let sy1 = Symbol("kk");
sy == sy1; // false Symbol是独一无二的
应用：
-
作为对象的属性名，可以保证属性不重名
let name = Symbol("name"); let age = Symbol("age"); let persion = { [name]: "kk" }; persion[age] = 12; console.log(persion, persion[name], persion[age]); // {Symbol(name): "kk", Symbol(age): 12} "kk" 12
获取：for、keyFor
let copyName = Symbol.for("name");
console.log(copyName, Symbol.keyFor(copyName)); // Symbol(name) "name"
Map & Set
-
Map
-
概念
对象，以键值对的形式存储数据
-
使用
get 、set 、for...of、 new Map([...array]) -
vs object
- Map 的键可以是任意类型：原始类型、对象引用类型
- Map 有 size 表示个数
-
vs weakMap
- weakMap 的键只能是引用类型
- 键对于对象是弱引用的
- 不能被迭代
-
-
Set
-
概念
存储的数据是唯一的，不能重复的
-
vs weakSet
- 只能是引用类型的
- 不能被迭代
-
扩展字符串
- 识别 includes、startsWith、endsWith
- 重复 repeat
- 补全 padStart padEnd
- 模板字符串
${}
扩展对象
- 属性简写 name,
- 方法名简写 setName(){}
- 允许表达式作为属性名 [name]: ‘kk’
- 扩展运算符 { …person }
- 对象合并 Object.assign(target, source_1, ···) （浅拷贝）
// 对于数组的处理：1. 先转成对象{0:2,1:3} 2. 然后进行属性复制 Object.assign([2, 3], [5]); // [5,3] - 判断两个值是否严格相等 Object.is(value1, value2)
- 基本使用
Object.is(1, 1); // true 原始类型比较 Object.is([1], [1]); // false 引用类型比较 - vs
===//一是+0不等于-0 Object.is(+0, -0); //false +0 === -0; //true //二是NaN等于本身 Object.is(NaN, NaN); //true NaN === NaN; //false
- 基本使用
扩展数组
- Array.of 将参数中所有值作为元素形成数组
- Array.from 将类数组对象或可迭代对象转化为数组
- 查找 find findIndex
- 填充 fill copyWithin
- 遍历 entries keys values
- 包含 includes
- 将嵌套数组转成一维数组 flat flatMap
扩展函数
-
默认参数
-
不定参数 …变量名
-
箭头函数
需要严格注意的点：
-
箭头函数没有 this、super、arguments 和 new.target 绑定。
-
箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。即：this固化
-
箭头函数不能使用new命令去调用，否则会报错：fun is not a constructor
-
扩展：构造函数 vs 普通函数
唯一区别：是否使用new关键字调用
-
构造函数内部可以使用this关键字；普通函数内部不建议使用this
在构造函数内部，this指向的是构造出来的新对象；在普通函数内部，this指向的是window全局对象
-
构造函数首字母建议大写；普通函数首字母建议小写
-
需要使用动态this的时候不能使用箭头函数
-
迭代器 Iterator
新的遍历机制，是各种数据结构都能够被便捷的访问。
-
迭代的过程：
- 通过Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置
- 通过调用next方法向下迭代，next会返回当前位置的对象{value: 当前属性的值, done: 当前遍历是否结束}
- 当done为true的时候遍历结束
-
for…of循环
新引入的循环，支持新的迭代协议；用于可迭代的数据结构
-
可迭代的数据结构
Array String Map Set
生成器Generator 函数
-
- 、 yield表达式
-
vs 普通函数
- 调用 Generator 函数后，该函数并不立即执行
- 返回的不是函数运行的结果，而是指向内部状态的指针对象
Promise 对象
可以获取异步操作的消息
将异步操作通过链式调用的方法也就是then方法组织起来，避免了层层嵌套的回调函数。
状态：pending、fulfilled、rejected
缺点：
-
不能取消执行
-
如果不设置回调函数的话，Promise内部抛出的错误不会反映到外部
-
不能获取当前执行的进度信息
-
vs fetch
基于Promise设计的；相对比较底层的，不是那么的开箱即用。需要自己进行一层封装。
缺点：
- 当他接收到一个错误的状态码404或者500的时候，他的状态不会被标记为reject，而是被标记为resolve
- 只有放网络故障或者请求被拒绝时，才会标记为reject
- fetch不会从服务器接收或发送cookie，要发送cookie，必须设置credentials属性
- 参数需要手动拼接
-
vs axios
对原生XHR的封装，实现了Promise
优点：
-
可以在node.js中使用
-
提供了并发请求的接口 axios.all
-
支持Promise API
-
客户端支持防止CSRF
就是让每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到cookie中的key的
-
模块化
-
为什么需要模块化
js文件之间依赖关系不明显，不利于维护；变量之间命名冲突，污染全局作用域。
-
模块化的优势
确定模块之间的依赖关系；不污染全局作用域
-
ES6 模块化
特点：1. import引入，export导出 2. 编译时加载，按需加载 3. 只加载一次，之后直接从内存中取 4. 输出值的引用
-
CommonJs
服务器端模块化的规范。Node.js就采用了这个规范
特点：1. require引入，module.exports/exports导出 2. 运行时加载 3. 同步加载(这也是为什么不适用于浏览器的原因) 4. 输出值的拷贝
// 定义模块math.js function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, } // 引用自定义的模块时，参数包含路径，可省略.js var math = require('./math'); math.add(2, 5); -
AMD规范 RrequireJS
特点：1. define定义，require引入 2. 异步加载模块，指定回调函数 4. 提前加载所有的依赖
// m1.js define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { a.doSomething(); // a在被使用之前就被加载了，并且其他没有被使用的模块也被加载了 return { name: 'xxx' } }); require(['m1'], function (m1) { console.log(m1.name) }) -
CMD规范 seaJs
特点：1. define定义，require引入 2. 异步加载 3. 就近加载，按需加载依赖
// m1.js define(function(require,exports,module){ var a = require('./a'); //在需要时加载依赖a a.doSomething(); module.exports = {} }) // 同步 var module = require('xxx') //异步 var module = require.async('m1', function(m1){ ... })
class 类
ES6中，可以通过class关键字定义类；语法糖，可以让对象原型的写法更清晰，更像面向对象编程的写法。
-
decorator装饰器
是一个函数，用来修改类的行为
执行顺序：由外向内进入，由内向外执行。
-
getter / setter
-
extends
通过 extends 实现类的继承。
-
super
操作对象的 API：Reflect 与 Proxy （保留）
ES7
async函数
async函数会返回一个promise对象，通过then方法添加会回调函数。
-
await表达式
await只能在async函数中有效。
async函数执行时，遇到await，如果await表达式是：
- Promise 对象，await就会暂停执行，等待Promise返回resolve
- 非Promise 对象，直接返回对应的值