变量

1. var 声明变量
   没有块级作用域
   可以重复声明
   不能限制
2. let 声明变量
   支持块级作用域
   禁止重复声明
3. const 声明常量
   支持块级作用域
   禁止重复声明
   控制修改

作用域

1. 传统
   没有块级作用域
   函数级作用域
2. ES6
   有块级作用域的概念，针对let和const
   语法块包括：{}、if(){}、for(){}

解构赋值

let {a,b,c}={a: 12, b: 55, c: 99};
let [a,b,c]=[12,5,8];

1. 左右两边一样
2. 右边是一种数据格式

函数

1. 箭头函数
   传统：function (参数){}
   ES6：(参数)=>{}
   如果，有且仅有1个参数，()也可以省
   如果，有且仅有1条return语句，{}可以省
   箭头修复this指向问题，在声明中就已经定义好
2. 参数展开
   剩余参数——必须放在函数形参的最后一个位置

   function show(a, b, ...arr) {
       console.log(a, b, arr); // arr === [44, 7, 85, 34, 33]
   }
   show(12, 5, 44, 7, 85, 34, 33);
   

   展开数组——就跟把数组的东西写在那儿一样

   let arr=[12,5,8,99,27]; // ...arr === 12,5,8,99,27
   function sum(a, b, c, d, e) {
       return a + b + c + d + e;
   }
   sum(arr[0], arr[1],  arr[2], ..., arr[n-1], arr[n]) === sum(...arr) === sum(12, 5, 8, 99, 27);
   let arr1 = [1,2,3];
   let arr2 = [4,5,6];
   let arr = [...arr1, ...arr2];
   arr === [1, 2, 3, 4, 5, 6];
   

系统对象

1. Array
   map——形参(value, index, array) 映射 1对1
   forEach 遍历 循环一遍
   filter 过滤
   reduce——形参(tmp, value, index, array) 减少 多对1

   let arr = [12, 66, 81, 92];
   let res = arr.reduce((tmp, item, index) => {
       if (index < arr.length - 1) {
           return tmp + item;
         } else {
           return (tmp + item) / arr.length;
       }
   });
   

2. String
   字符串模板

   let age= 18;
   let str = `我的年龄是:${age}`
   

   startsWith: url.startsWith("http://")
   endsWith: url.endsWith(".com")
3. JSON
   标准写法: {"key": "aaa", "key2": 12}
   JSON对象: JSON.stringify()、JSON.parse()

异步处理

1. 什么是异步操作？
   异步——多个操作可以一起进行，互不干扰
   同步——操作一个个进行
2. Promise
   封装异步操作的对象
   Promise.all()

   let p1 = $.ajax('data/1.json');
   let p2 = $.ajax('data/2.json');
   let p3 = $.ajax('data/3.json');
   Promise.all([p1, p2, p3]).then(([data1, data2, data3]) => {  // 形参用到了解构赋值
       console.log(data1, data2, data3);
   });
   

3. async/await
   async函数是可以暂停的，在等待promise完成之前会被暂停

   async function show(){
       // 部分成功，部分失败的时候
       try{}catch() {}
       // 一般情况下
       let data1 = await $.ajax({url: 'data/1.json', dataType: 'json'});
       if (data1.a < 10) {
           let data2 = await $.ajax({url: 'data/2.json', dataType: 'json'});
           alert('a');
       } else {
           let data3 = await $.ajax({url: 'data/3.json', dataType: 'json'});
           alert('b');
       }
   }
   show();
   

兼容性

1. babel
   Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
2. 在线编译（不推荐使用）
   引用babel
   设置页面脚本script标签type="text/babel"
   在线编译会给浏览器造成负担，导致页面的卡顿
3. 提前编译
   npm i @babel/core @babel/cli @babel/preset-env -D
   添加脚本——package.json中加入"scripts": {"build": "babel src -d dest"},
   添加.babelrc——声明preset，{ "presets": ["@babel/preset-env"]}

ES其他版本新增特性

1. ES7(ECMA 2016)
   ** 求幂
   Array.includes()
2. ES8(ECMA 2017)
   await/async
3. ES9(ECMA 2018)
   rest/spread，替代await/async
   异步迭代
   Promise.finally()
   正则

面向对象

1. 语言发展
   机器语言 -> 汇编 -> 低级语言(面向过程) -> 高级语言(面向对象) -> 模块 -> 框架 -> API
2. 面向对象特性
   封装性
   继承性
   多态性
3. ES6中的面向对象基本写法
   关键字 class、constructor、extends、super

   class Person {
       constructor(name, age) {
           this.name = name;
           this.age = age;
     }
       show() {
           alert(this.name);
           alert(this.age);
       }
   }
   class Worker extends Person {
       constructor(name, age, job) {
           super(name, age);
           this.job = job;
       }
       showJob() {
           alert(this.job);
       }
   }
   let w = new Worker('wj', 18, 'worker');
   w.show();
   w.showJob();
   

闭包

1. 闭包涉及到GC——垃圾回收，释放不用的缓存
2. 闭包的底层：栈
   计算机执行函数的时候，每调用一次函数，计算机就会替这个函数分配一个空间，这个空间叫做栈。函数所有的局部变量都在这个栈里面。函数执行结束的时候，回收这个栈。闭包可以使这个函数执行结束的时候，这个栈不会被回收。
3. 闭包的上层：函数当作对象处理
   调用函数的时候，会创建一个对象，这个对象包含这个函数里面各种执行的细节。
4. 闭包——留着别删

ES6的模块化

1. js模块发展
   没有模块 -> CMD -> AMD -> ES6语言提供的模块化支持
   ES6的模块化 -> 浏览器还不支持 -> webpack
2. webpack编译
   entry——入口地址
   output——输出 (path：绝对路径) (filename：文件名)
   mode——模式
   所有当前路径前面加./

   // webpack.config.js
   const path = require('path');
   module.exports = {
       mode: 'production',
       entry: './index.js',
       output: {
           path: path.resolve(__dirname, 'build'),
           filename: 'bundle.js'
       }
   };
   

3. export
   export let a = xx;
   export const b = xx;
   export function xxx () {};
   export class xxx {}
   export {a, b, c, ...};
   export default memberName;
   //从另一个模块导出
   export * from './m2';
   export {x, x, x, x} from './m2';
   export {default} from './m2';
4. import
   import * as mod from "./xxx";
   import {a, b, c, ...} from "./xxx";
   //引入默认成员
   import memberName from './mod';
   //模块的代码引入进来，不引入内部成员
   import "./1.jpg";
   import "./1.css";
   //异步引入
   let promise=import("./mod1");

正则

1. 定界符
   //
2. 修饰符
   i 不区分(ignore)大小写，例如: /abc/i 可以匹配 abc、aBC、Abc
   g 全局(global)匹配，如果不带g，正则过程中字符串从左到右匹配，找到第一个符合条件的即匹配成功，返回。如果带g，则字符串从左到右，找到每个符合条件的都记录下来，直到字符串结尾位置。

   var str = 'aaaaaaaa'
   var reg1 = /a/;  str.match(reg1)  // 结果为：["a", index: 0, input: "aaaaaaaa"]
   var reg2 = /a/g; str.match(reg2)  // 结果为：["a", "a", "a", "a", "a", "a", "a", "a"]
   

3. 元字符[]
   任何一个——例子：/a[abc]q/，可以匹配aaq，abq，acq，不能匹配abbq
   范围——例子：/[a-z]/i，/[0-9]/，/[a-z0-9]/，可以匹配任意一个字母或者任意一个数字
   排除——例子：[^a-z0-9]，匹配除了字母和数字以外的字符
4. 转义
   \d，匹配任意一个数字，等价于[0-9]
   \w，匹配任意一个数字或者字母或者下横线，等价于[a-z0-9_]
   \s，匹配任何空白字符，包括空格、制表符、换页符等等，等价于[ \f\n\r\t\v]。
   . ，匹配任意一个字符
   \D，匹配非数字字符，等价于[^0-9]
   \W，匹配非数字或者字母或者下横线字符，等价于[^a-z0-9_]
   \S，匹配 非空白
5. 量词——数量
   {n}，匹配符合左边规则的字符n次，例如：/a{6}/匹配a6次，/\d{11}/匹配数字11次
   {n,m}，匹配符合左边规则的字符n到m次，例如：/\d{5,12}/，匹配数字5到12之间的任意次数
   {n,}，匹配符合左边规则的字符最少n次，例如：/\w{6,}/，匹配任意一个数字或者字母或者下横线，最少6次
   +，匹配符合左边规则的字符最少1次，等价于{1,}
   ?，匹配符合左边规则的字符0到1次，等价于{0,1}，例如/.jsx?/，匹配.js或者.jsx
6. 修饰符=>条件
   ^ 行首，从开始就要符合右边的规则。在[]里面是排除
   $ 行尾，结束的时候要符合左边的规则。
7. 逻辑或运算符符 |
   或的运算优先级最低
   /.jpg|gif|png$/，等价于匹配包含.jpg或者包含gif或者以png结尾的字符
   ()，可以提升优先级。/.(jpg|gif|png)$/，匹配以.jpg或者.gif或者.png结尾的字符。例子：/^\d|[1-9]\d{1,3}$/，可以匹配开始和结尾是数组，但是有或|，无法限制中间的字符，应该写成/^(\d|[1-9]\d{1,3})$/。