面向对象

• 首先要明确, 面向对象不是语法, 是一个思想, 是一种 编程模式
• 面向: 面(脸), 向(朝着)
• 面向过程: 脸朝着过程 ---> 关注着过程的编程模式
• 面向对象: 脸朝着对象 ---> 关注着对象的编程模式
• 实现一个效果
  • 在面向过程的时候, 我们要关注每一个元素, 每一个元素之间的关系, 顺序...
  • 在面向过程的时候, 我们要关注的就是找到一个对象来帮我做这个事情, 我等待结果
• 例子: 我要吃面条
  • 面向过程
    • 用多少面粉
    • 用多少水
    • 怎么和面
    • 怎么切面条
    • 做开水
    • 煮面
    • 吃面
  • 面向对象
    • 找到一个面馆
    • 叫一碗面
    • 等着吃
  • 面向对象就是对面向过程的封装
• 我们以前的编程思想是: 每一个功能, 都按照需求一步一步的逐步完成
• 我们以后的编程思想是: 每一个功能, 都先创造一个 面馆, 这个 面馆 能帮我们做出一个 面 (完成这个功能的对象), 然后用 面馆 创造出一个 面, 我们只要等到结果就好了

创建对象的方式

• 面向对象就是一个找到对象的过程, 所我们需要先创建一个对象

1. 字面量创建对象

var obj = {}
obj.name = 'QF'

2. 内置构造函数创建对象

var obj = new Object()
obj.name = 'QF'

3. 使用工厂函数的方式创建对象

• 先写一个工厂函数
  • 这个工厂函数内可以创造出来一个对象, 并且给对象添加一些属性, 还能把对象返回
• 使用这个工厂函数创造对象

// 1. 创建一个工厂函数
function createObj() {
    // 1.1 手动创建对象
    var obj = new Object()

    // 1.2 手动向对象中添加成员
    obj.name = 'QF'
    obj.age = 18

    // 1.3 手动返回一个对象
    return obj
}

// 2. 使用工厂函数创建对象
var o1 = createObj()
var o2 = createObj()

4. 使用自定义构造函数创建对象

• 工厂函数需要经历三个步骤
  • 手动创建对象
  • 手动添加成员
  • 手动返回对象
• 构造函数会比工厂函数简单一些
  • 自动创建对象
  • 手动添加成员
  • 自动返回对象

• 先书写一个构造函数
• 在构造函数内向对象添加一些成员
• 使用这个构造函数创建一个对象 (和 new 连用)
• 构造函数可以创建对象, 并且创建一个带有属性和方法的对象
• 面向对象就是要想办法找到一个有属性和方法的对象
• 面向对象就是我们自己制造 构造函数 的过程

// 1. 先书写一个构造函数
function Person(name, gender) {
    // 1.2 在构造函数内向对象添加一些成员
    this.age = 18
    this.name = name
    this.gender = gender
}
// 2. 使用这个构造函数创建一个对象 (和 new 连用)
var p1 = new Person('jack', 'man')
var p2 = new Person('rose', 'woman')

构造函数详解

• 我们了解了对象的创建方式
• 我们的面向对象就是要么能直接得到一个对象
• 要么就弄出一个能创造对象的东西, 我们自己创造对象
• 我们的构造函数就能创造对象, 所以接下来就了了 构造函数

构造函数的基本使用

• 和普通函数一样, 只不过 调用的时候要和 new 连用 不然就是一个普通函数调用

1. 不写 new 的时候就是普通函数调用, 没有创造对象的能力

function Person () {}
var o1 = new Person()   // 一个对象
var o2 = Person()   // 什么也得不到, 就是一个普通函数的调用

2. 首字母不大些, 只要和 new 连用, 就有创造对象的能力

function person () {}
var o1 = new person()   // 一个对象

3. 当调用的时候, 如果不需要传递参数可以不写 (), 但是建议写上

function person () {}
var o1 = new person   // 一个对象

4. 构造函数内部的 this, 由于和 new 连用的关系, 是指向当前实例对象的

function Person () {
    console.log(this)
}
var o1 = new Person()   // this ---> o1
var o2 = new Person()   // this ---> o2

5. 因为构造函数会自动返回一个对象, 所以构造函数内部不要写 return
   • return 一个基本数据类型, 写了没有意义
   • return 一个引用数据类型, 那么构造函数本身的意义就没有了

使用构造函数创建一个对象

• 我们在使用构造函数的时候, 可以通过一些带啊吗和内容来向当前的对象中添加一些内容

function Person() {
    this.name = 'Jack'
    this.age = 18
}
var o1 = new Person()
var o2 = new Person()

• 我们得到的两个对象里面都有自己的成员 name 和 age
• 我们在写构造函数的时候其实也可以添加一些方法进去

function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
var o1 = new Person()
var o2 = new Person()

• 这样也是可以的, 但是有一点小缺点
  • 第一次 new 的时候, Person 这个函数要执行一遍, 执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
  • 第二次 new 的时候, Person 这个函数要执行一遍, 执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi

// 有缺点
function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
/**
 *  第一次 new 的时候, Person 这个函数要执行一遍
 *  执行一边就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o1 = new Person()
/**
 *  第二次 new 的时候, Person 这个函数要执行一遍
 *  执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o2 = new Person()

• 这样写的话, 我们两个对象内的 sayHi 函数就是一个代码一模一样, 功能一模一样
• 但却占用了两个内存空间
• 也就是说 o1.sayHi 是一个地址, o2.sayHi 是一个地址
• 所以我们执行 console.log(o1.sayHi === o2.sayHi) 的到的结果是 false
• 缺点: 一模一样的函数出现了两次, 占用了两个空间地址
• 要想解决的话, 就需要一个东西, 叫做原型

原型

• 原型的出现, 就是为了解决 构造函数的缺点
• 也就是给我们提供了一个给对象添加函数的方法
• 不然构造函数只能给对象添加属性, 不能合理的添加函数就太 low 了

prototype

• 每一个函数天生自带一个成员, 叫做 prototype, 是一个对象空间
• 既然每一个函数都有, 构造函数也是函数, 构造函数也有这个对象空间
• 这个 prototype 对象空间可以由函数名来访问

function Person () {}

console.log(Person.prototype)   // 是一个对象

• 既然是一个对象, 那么我们就可以向里面放入一些东西

function Person() {}
Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}

• 重点: 在函数的 prototype 里存储的内容, 不是给函数使用的, 是给函数的每一个实例化对象使用的

__proto__

• 每一个对象都天生自带一个成员, 叫做 __proto__, 是一个对象空间
• 既然每一个对象都有, 实例化对象也是对象, 那么每一个实例化对象也有这个成员
• 这个 __proto__ 对象空间是给每一个对象使用的
• 当你访问一个对象中的成员的时候
  • 如果这个对象自己本身有这个成员, 那么就会直接给你结果
  • 如果没有, 就回去 __proto__ 这个对象空间里面找, 里面有的话就会有结果
  • 未完待续...
• 那么这个 __proto__ 又指向哪里呢?
  • 这个对象是由那个构造函数 new 出来的
  • 那么这个对象的 __proto__ 就指向这个构造函数的 prototype

function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype)  // true

• 实例化对象的 __proto__ 和所属构造函数的 prototype 是一个对象空间
• 我们可以通过构造函数名称来向 prototype 中添加成员
• 对象在访问的时候自己没有, 可以自动去自己的 __proto__ 中查找
• 那么, 我们之前构造函数的缺点就可以解决了
  • 我们可以把函数放在构造函数的 prototype 中
  • 实例化对象访问的时候, 自己没有, 就会自动去 __proto__ 中找
  • 那么也可以使用了

function Person() {}

Person.prototype.sayHi = function () {
    console.log('hello Person')
}

var p1 = new Person()
p1.sayHi()

• p1 自己没有 sayHi 方法，就会去自己的 __proto__ 中查找

• p1.__proto__ 就是 Person.prototype

• 我们又向 Person.prototype 中添加了 sayHi 方法

• 所以 p1.sayHi 就可以执行了

• 到这里，当我们实例化多个对象的时候，每个对象里面都没有方法

• 都是去所属的构造函数的 prototype 中查找

• 那么每一个对象使用的函数，其实都是同一个函数

• 那么就解决了我们构造函数的缺点

function Person() {}

Person.prototype.sayHi = function () {
    console.log('hello')
}

var p1 = new Person()
var p2 = new Person()

console.log(p1.sayHi === p2.sayHi)

• p1 是 Person 的一个实例

• p2 是 Person 的一个实例

• 也就是说 p1.__proto__ 和 p2.__proto__ 指向的都是 Person.prototype

• 当 p1 去调用 sayHi 方法的时候是去 Person.prototype 中找

• 当 p2 去调用 sayHi 方法的时候是去 Person.prototype 中找

• 那么两个实例化对象就是找到的一个方法，也是执行的一个方法

• 结论

  • 当我们写构造函数的时候
  • 属性我们直接写在构造函数体内
  • 方法我们写在原型上

原型链

• 我们刚才聊了构造函数, 也聊了原型
• 构造函数的 prototype 是一个对象, 每一个对象又自带 __proto__ 属性
• 构造函数的 prototype 里面的 proto 属性又指向哪里?

一个对象所属的构造函数

• 每一个对象都有一个自己所属的构造函数
• 比如: 数组

  // 数组本身也是一个对象
  var arr = []
  var arr1 = new Array()
  

  • 以上两种方式都是创造一个数组
  • 我们就说数组所属的构造函数就是 Array
• 比如: 函数

  // 函数本身也是一个对象
  var fn = function () {}
  var fun = new Function()
  

  • 以上两种方式都是创造一个函数
  • 我们就说函数所属的构造函数就是 Function

constructor

• 对象的 __proto__ 里面也有一个成员叫做 constructor
• 这个属性就是指向当前这个对象所属的工造函数

链状结构

• 当一个对象我们不知道准确的是谁构造的时候, 我们就把他看成 Object 的实例化对象
• 也就是说, 我们的 构造函数 的 prototype 的 proto 指向的是 Object.prototype
• Object.prototype 也是个对象, 那么它的 __proto__ 又指向谁呢?
• 因为 Object 的 js 中的顶级构造函数, 我们有一句话叫 万物皆对象
• 所以 Object.prototype 就到顶了, Object.prototype 的 __proto__ 就是 null

原型链的访问原则

• 访问一个对象的成员时, 自己没有就会去 __proto__ 中找
• 接下来就是, 如果 __proto__ 里没有就再去 __proto__ 里面找
• 一直找到 Object.prototype 里面都没有, 那么就会返回 undefined

对象的赋值

• 到这里, 我们就会觉得, 如果是赋值的话, 那么也会按照原型链的规则来
• 但是: 并不是! 并不是! 并不是! 重要的事情说三遍
• 赋值的时候就是直接给对象本身赋值
  • 如果原先有就是修改
  • 如果原先没有就是添加
  • 不会和 __proto__ 有关系

总结

• 到了这里, 我们就发现了面向对象的思想模式
  • 当我想完成一个功能的时候
  • 先看内置构造函数有没有能给我提供一个完整功能对象的能力
  • 如果没有, 我们就自己写一个构造函数, 能创造出一个完成功能的对象
  • 然后再用我们写的构造函数 new 一个对象出来, 帮助我们完成功能就行了
• 比如: tab选项卡

• 运动函数

1. 初始版
2. 解决每次都从 0 开始运动
   • (获取元素的位置作为运动初始值)
3. 解决初始值和目标值不是 5 的整数倍
   1. 每次移动的距离为 1
      • 有缺点, 这样运动速度相同, 如果运动距离不同, 那么需要的时间时不同的
   2. 每次走总路程的 1/10
      • 假设当前位置 200, 要移动到 500, 移动的总路程为 301
      • 那么每次移动的值为 30.1
   3. 每次走剩余路程的 1/10
      • 每次移动距离 === (目标 - 当前值) / 10
4. 每次移动都没有移动到目标位置
   • 因为有小数, 比如当前位置 91, 要移动的就是 (100 - 91) / 10
   • 那么移动的距离就是 0.9, 但是浏览器的最小像素单位为 1, 所以移动到 91.9px 时, 实际位置还是 91
   • 那么下次获取到的时候, 还是 91px, 然后就一直重复上一步
   • 解决方式: 移动距离大于 0 时向上取整; 小于 0 时向下取整
5. 运动 opacity 的时候有问题
   1. 我们移动的时候都带有 px, 但是 opacity 不需要
      • 判断为 opacity 时不加 px
   2. 可以设置了, 但是没有运动过程
      • 计算的时候设置了取整, 所以只会存在 0~1 这两个值, 所以就没有了运动距离
      • 解决: 获取值的时候放大 100 被, 设置值的时候缩小 100 被
   3. 从 10 可以, 但是 01 不行
      • 因为计算区间是 0~100, 但是目标值为 1, 所以会导致计算移动距离时计算出 -0.1

        /**
            目标值: 1
            当前值: 0.1 * 100
            移动的值: (目标 - 当前) / 10    ---> (1 - 10) / 10  ---> -0.9
                    因为移动的值 小于 0 所以会向下取整为 -1
            设置值: (当前 + 移动的值) / 100 ---> (10 + -1) / 100  ---> -0.09
        */
        

      • 解决: 如果时设置 opacity 的话, 将目标值也放大 100 倍
6. 当前运动函数只能运动一个属性, 如果多个属性的话需要调用多次 因为参数是固定的
   • 解决 1: 多写几个参数(不友好, 比较死板)
   • 解决 2: 将参数更改为对象格式, 所有的属性都写在对象中, 通过对象有多少 key 决定执行几次
7. 没法完全不或真正的运动结束
   • 因为开启多个运动函数的时候, 就会开启多个定时器, 没有一个运动函数结束时都会关闭一个定时器, 有多少样式就会关闭多少次
   • 解决, 写一个变量作为计数器, for...in 循环没开启一次自增 1, 没结束 1 次自减 1, 当变量==0 时, 表明所有的定时器全都结束了
8. 在运动函数全都结束后做一些事情, 但是没法做
   • 因为运动函数是异步的, 可能需要 5~10 秒才能完成, 但我们并不知道每一次需要多长时间
   • 在调用 move 函数的时候给 move 函数一个 锦囊, 在 move 内的运动完全结束的时候, 把锦囊执行掉, 锦囊内就是我们想要在运动完全结束的时候做的事
   • 其实就是利用回调函数
     • 把函数 A 以实参的形式传递到 函数 B 内
     • 在函数 B 内以形参的方式调用 函数 A
     • 此时我们可以把 函数 A 叫做 函数 B 的 回调函数(callback)
     • 我们在封装异步代码的时候经常会用到回调函数

左右轮播图

1. 静态结构
   • 创建一个 DIV 作为 轮播图可视区域, 内部放置一个很宽的 ul, ul 内部横放 5 个 li, 内部可以添加图片
   • 后续只需要移动 ul 就可以达到滚动轮播图的功能
2. 根据轮播图效果对页面进行调整 (无缝滚动)
   1. 复制最后一张图到插入到开始位置, 复制开始位置的图插入到结束位置
   2. 根据 li 数量调整 ul 宽度
   3. 调整 ul 的定位

function copyEle() {
    // 1.1 复制第一个 li 放到ul最后
    const fakeFitst = imgBox.firstElementChild.cloneNode(true);
    const fakeLast = imgBox.lastElementChild.cloneNode(true);

    imgBox.appendChild(fakeFitst);
    imgBox.insertBefore(fakeLast, imgBox.firstElementChild);

    // 1.2 处理 ul 宽度
    imgBox.style.width = imgBox.children.length * bannerWidth + "px";

    // 1.3 处理 ul 定位
    imgBox.style.left = -(index * bannerWidth) + "px";
}
copyEle();

3. 对焦点进行调整
   • 应该进行动态的根据 li 数量生成焦点

function setFoucs() {
    // 2.1 获取到 li 的数量
    const liNum = imgBox.children.length - 2; // 因为有两张假图, 所以需要 - 2
    // 2.2 根据 li 的数量, 去创建节点
    for (let i = 0; i < liNum; i++) {
        // 2.2.1 创建节点
        const newLi = document.createElement("li");
        // 2.2.2 默认给首个 li 添加一个选中状态
        if (i == 0) newLi.className = "active";
        // 2.2.3 将创建好的节点, 插入到 ol内部
        focus.appendChild(newLi);
    }
}
setFoucs();

4. 自动轮播
   1. 每间隔一段时间(5000ms) 切换到下一张(按照索引计)
      • 0 对应 假的最后一张
      • 1 对应 第 1 张
      • 2 对应 第 2 张
      • 3 对应 第 3 张
      • 4 对应 第 4 张
      • 5 对应 第 5 张
      • 6 对应 假的第一张
   2. 目前是在 [1] 这一张; 此时定位 -600px
      • 5000ms 后应该是在 [2] 这一张; 此时定位 -1200px
      • 10000ms 后应该是在 [3] 这一张; 此时定位 -1800px
      • 15000ms 后应该是在 [4] 这一张; 此时定位 -2400px
      • 若干毫秒后 应该是在 [x] 这一张; 此时定位 - (x * 可视窗口的宽度) + 'px'
   3. 核心: 跟随定时器 让 index++

function autoPlay() {
    setInterval(() => {
        // 3.1 改变 index
        index++;
        // 3.2 让 ul 移动
        move(imgBox, { left: -(index * bannerWidth) }, moveEnd);
    }, 2000);
}
autoPlay();

5. 运动结束
   1. 某一张需要在 运动结束以后 拉回到 第一张
      • index == imgBox.children.length - 1 时 拉回
   2. 调整对应的焦点高亮
      • focus.children[index - 1].classList.add('active')

function moveEnd() {
    // 4.1 当运动结束后, 在某一张的时候, 需要拉回到第一张
    if (index === imgBox.children.length - 1) {
        imgBox.style.left = -600 + "px";
        index = 1;
    }

    // 4.2 欠着

    // 4.3 调整焦点高亮
    for (let i = 0; i < focus.children.length; i++) {
        focus.children[i].className = "";
    }
    focus.children[index - 1].className = "active";
}

6. 移入移出事件
   1. 移入时停止定时器
   2. 移出时开启定时器

function mouseMove() {
    // 5.1 移入暂停定时器
    banner.onmouseover = () => clearInterval(timer);
    // 5.2 移出重新开始移动
    banner.onmouseout = () => autoPlay();
}
mouseMove();

7. 绑定事件
   1. 左右按钮
   2. 各个焦点
   3. 因为都在 banner 中, 所以可以利用事件委托

function clickBtn() {
    // 6.1 将事件委托给 banner
    banner.onclick = function (e) {
        if (e.target.className == "left") {
            index--;
            move(imgBox, { left: -(index * bannerWidth) }, moveEnd);
            console.log(imgBox, -(index * bannerWidth));
        }

        if (e.target.className == "right") {
            index++;
            move(imgBox, { left: -(index * bannerWidth) }, moveEnd);
        }

        if (e.target.className == "focus_item") {
            index = e.target.dataset.id - 0 + 1;
            move(imgBox, { left: -(index * bannerWidth) }, moveEnd);
        }
    };
}
clickBtn();

8. 离开页面时页面会抖动
   • 离开页面后定时器没有停止, 但是 DOM 停止了, 所以后续回到页面就出现了抖动
   • 解决: 离开页面停止执行; 回到页面继续执行

overOutDoucment();
function overOutDoucment() {
    document.onvisibilitychange = function () {
        if (document.visibilityState == "hidden") {
            // 离开页面
            clearInterval(timer);
        }
        if (document.visibilityState == "visible") {
            // 回到页面
            autoPlay();
        }
    };
}

9. 快速点击时 DOM 会抖动
   1. 原因
      • DOM 的每次移动都需要时间, 在他第一次还没完成时, 我添加了多次时间, 所以每个函数执行的时候移动的位置都不太一样, 所以就产生了抖动
   • 解决方法: 函数节流

seiper 插件

* 插件: 别人用 JS 代码封装好的内容, 是为了实现页面某一单一类功能

正则

• 正则表达式, 又名 "规则表达式"
• 由我们自己来书写 "规则", 专门用来检测 字符串 是否符合 "规则" 使用的
• 我们使用一些特殊的字符或者符号定义一个 "规则公式", 然后用我们定义好的 "规则公式" 去检测字符串是不是合格

var reg = /\d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false

• 上面的变量 reg 就是定制好的规则
• 检测 str1 这个字符串的时候, 符合规则
• 检测 str2 这个字符串的时候, 不符合规则

创建一个正则表达式

• 想制定 "规则", 就必须要按照人家要求的方式来制定
• 把一些字母和符号写在 // 中间的东西, 叫做正则表达式, 比如 \abcdefg\
• 创建正则表达式有两个方式 字面量 和 构造函数创建

字面量创建

// 字面量创建一个正则表达式
var reg = /abcdefg/

构造函数创建

var reg = new RegExp('abcdefg')

正则表达式里面的符号

元字符

• .: 匹配非换行的任意字符
• \: 转译符号, 把有意义的 符号 转换成没有意义的 字符, 把没有意义的 字符 转换成有意义的 符号
• \s: 匹配空白字符(空格/制表符/...)
• \S: 匹配非空白字符
• \d: 匹配数字
• \D: 匹配非数字
• \w: 匹配数字字母下划线
• \W: 匹配非数字字母下划线

利用元字符制定一些简单的规则

var reg = /\s/
var str = 'a b'
var str2 = 'ab'
console.log(reg.test(str))  // true
console.log(reg.test(str2)) // false

var reg = /\d/
var str = 'abc1'
var str2 = 'abc'
console.log(reg.test(str))  // true
console.log(reg.test(str2)) // false

var reg = /\w/
var str = 'a1'
var str2 = '#$%'
console.log(reg.test(str))  // true
console.log(reg.test(str2)) // false

限定符

• *: 前一个内容重复至少 0 次, 也就是可以出现 0~正无穷 次
• +: 前一个内容重复至少 1 次, 也就是可以出现 1~正无穷 次
• ?: 前一个内容重复 0 或者 1 次, 也就是可以出现 0~1 次
• {n}: 前一个内容重复 n 次, 也就是必须出现 n 次
• {n,}: 前一个内容至少出现 n 次, 也就是出现 n ~ 正无穷 次
• {n, m}: 前一个内容至少出现 n 次至多出现 m 次, 也就是出现 n~m 次

限定符一般是配合元字符使用

var reg = /\d*/ // 验证数字出现 0~正无穷次
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str))  // true
console.log(reg.test(str2))  // true
console.log(reg.test(str3))  // true

var reg = /\d+/ // 验证数字出现 1~正无穷次
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str))  // false
console.log(reg.test(str2))  // true
console.log(reg.test(str3))  // true

var reg = /\d?/ // 验证数字出现 0~1 次都可以
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str))  // true
console.log(reg.test(str2))  // true
console.log(reg.test(str3))  // true

var reg = /\d{3}/ // 验证数字出现 3 次
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str))  // false
console.log(reg.test(str2))  // false
console.log(reg.test(str3))  // true

var reg = /\d{3,}/ // 验证数字出现 3~正无穷次
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc1234567890'
console.log(reg.test(str))  // false
console.log(reg.test(str2))  // false
console.log(reg.test(str3))  // true
console.log(reg.test(str4))  // true

var reg = /\d{3,5}/ // 验证数字出现 3~5 次
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc1234567890'
console.log(reg.test(str))  // false
console.log(reg.test(str2))  // false
console.log(reg.test(str3))  // true
console.log(reg.test(str4))  // true

边界符

• ^: 表示开头
• $: 表示结尾

边界符是限定字符串的开始和结束的

var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str))  // false
console.log(reg.test(str2))  // false
console.log(reg.test(str3))  // false
console.log(reg.test(str4))  // false
console.log(reg.test(str5))  // true
console.log(reg.test(str6))  // true

特殊符号

• (): 限定一组元素
• []: 字符集合, 表示写在 [] 里面的任意一个都行
• [^]: 反字符集合, 表示写在 [^] 里面之外的任意一个都行
• -: 范围, 比如 a-z 表示从字母 a 到字母 z 都可以
• |: 或, 正则里卖弄的或 a|b 表示字母 a 或者 b 都可以

/**
 * 书写一个简单的邮箱验证
 * 
 *  验证规则:
 *      非 _$开头, 任意字符出现至少6次, 一个@符号, (163|126|qq|sina)中的任意一个, 一个点, (com|cn|net) 中的任意一个
*/
var reg = /^[^_$].{5,}@(163|126|qq)\.(com|cn|net)$/

标识符

• i: 表示忽略大小写
  • 这个 i 是写在正则的最后面的, 例如: /\w/i
  • 这就是在匹配的时候匹配数字字母下划线, 并且不区分大小写
• g: 表示全局匹配
  • 这个 g 是写在正则的最后面的, 例如: /\w/g
  • 就是全局匹配数字字母下划线

重复元字符

• \数字: 表示重复第 n 个小括号的内容, 要求和第 n 个小括号的内容一摸一样

/**
 * 表示 \1 位置需要出现一个 和 第1个 小括号 一模一样的额呢绒
 *  小括号位置出现的是 abc, \1 位置也带是 abc
 *  小括号位置出现的是 def, \1 位置也带是 def
*/
var reg = /^(abc|def)\1$/
console.log(reg.test('abcabc')) // true
console.log(reg.test('defdef')) // true
console.log(reg.test('defabc')) // false

正则的两大特性 (懒惰与贪婪)

• 懒惰
  • 每次捕获都会从字符串 [0] 的位置开始检索
  • 解决:
    • 给正则添加全局标识符
• 贪婪
  • 每次捕获内容的时候会尽可能地多的去捕获内容
  • 解决:
    • 使用非贪婪限定符(在原有限定符后面多加一个 ?)
  • 贪婪限定符
    • *; +; ?; {n,}; {n,m}
  • 非贪婪限定符
    • *?; +?; ??; {n,}?; {n,m}?

var str = `<div class="box" id="box"><span></span></div>`

// 贪婪捕获
var reg = /<div.*>/
console.log(reg.exec(str))

// 非贪婪捕获
var reg1 = /<div.*?>/
console.logIreg1.exec(str)

正则表达式的方法

test 用来检测字符串是否符合我们正则的标准

• 语法: 正则.test(字符串)
• 返回值: boolean

console.log(/\d+/.test('123'))

exec 把字符串中符合条件的内容捕获出来

• 语法: 正则.exec(字符串)
• 返回值:
  1. 当原始字符串内没有符合正则规范的片段的时候, 返回值为 null
  2. 当原始字符串内有符合正则规范的判断的时候
     • 返回值一定是一个数组: 数组内的 [0] 是捕获出来的字符串片段
     • 没有 () 没有标识符g
       • 只能获取第一组匹配到的字符串片段
       • 不管匹配多少回, 都是从字符串 [0] 的位置开始检索
     • 有 () 会在返回值数组的 [1] 开始依次是每一个 () 内的单独内容
     • 有 g
       • g 叫做全局标识符
       • 第二次捕获会从第一次捕获的结束位置开始进行检索
       • 直到找不到内容, 返回 null
       • 在下一次捕获的时候, 会从字符串 [0] 开始检索
• 扩展: 匹配但不捕获
  • 当我们需要使用 () 的一个整体这个作用的时候, 但是又不想单独捕获出来
  • 可以这样书写: (?:)

var reg = /\d{3}/
var str = 'hello123word456你好789'
var res = reg.exec(str)
console.log(res)
/*
    ['123', index: 5, input: 'hello123word456你好789', groups: undefined]
        0: "123"
        groups: undefined
        index: 5
        input: "hello123word456你好789"
        length: 1
*/

• 数组第 0 项就是匹配到的字符串内容
• index 属性表示从字符串的索引几 开始是匹配到的字符串

字符串的方法

字符串中有一些方法是可以和正则一起使用

search: 查找字符串中是否有满足条件的内容

• 语法: 字符串.search(正则)
• 返回值: 有的话返回开始索引, 没有返回 -1

var reg = /\d{3}/
var str1 = 'hello123'
var str2 = 'hello'
console.log(str1.search(reg))   // 5
console.log(str2.search(reg))   // -1

match: 找到字符串中符合正则条件的内容返回

• 语法: 字符串.match(正则)
• 返回值:
  • 没有标识符 g 的时候, 是和 exec 方法一样
  • 有标识符 g 的时候, 是返回一个数组, 里面是匹配到的每一项, 没有匹配到内容是返回的是 null

var reg = /\d{3}/
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.match(reg))
/*
['123', index: 5, input: 'hello123world456', groups: undefined]
    0: "123"
    groups: undefined
    index: 5
    input: "hello123world456"
    length: 1
*/
console.log(str2.match(reg))    // -1

var reg = /\d{3}/g
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.match(reg))    // ['123', '456']
console.log(str2.match(reg))    // null

replace: 是将字符串中满足正则条件的字符串替换掉

• 语法: 字符串.replace(正则, 要替换的字符串)
• 返回值: 替换后的字符串

var reg = /\d{3}/
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.replace(reg, '哈哈哈哈'))    // hello哈哈哈哈world456
console.log(str2.replace(reg, '哈哈哈哈'))    // hello world

var reg = /\d{3}/g
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.replace(reg, '哈哈哈哈'))    // hello哈哈哈哈world哈哈哈哈
console.log(str2.replace(reg, '哈哈哈哈'))    // hello world

ES5和ES6

• 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已
• 比如我们使用的微信
  • 最早的版本没有支付功能
  • 随着时间的流逝, 后来的某一个版本中, 内部增加了 支付功能
• ECMAScript 就是 js 的语法
  • 以前的版本没有某些功能
  • 在 ES5 这个版本的时候增加了一些功能
  • 在 ES6 这个版本的时候增加了一些功能
• 因为浏览器是浏览器厂商生产的
  • ES 发布了新功能以后, 浏览器厂商需要让自己的浏览器支持这些功能
  • 这个过程需要一定的时间
  • 不过到现在, 基本上大部分的浏览器都可以比较完善的支持了
  • 只不过有些浏览器还不能全部支持
  • 这就出现了兼容问题
  • 所以我们写代码的时候要考虑哪些方法是 ES5 或者 ES6 的, 看看是不是浏览器都支持

JSON 字符串

• json 是一种特殊的字符串格式, 本质上还是一个字符串

var jsonObj = '{ "name": "Jack", "age": 18, "gender": "男" }'
var jsonArr = '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]'

• 对象内部的 key 和 value 都用双引号包裹的字符串(必须是双引号)

JSON 的两个方法

JSON.parse 将 json 格式的字符串转换为 js 的对象或者数组

var jsonObj = '{ "name": "Jack", "age": 18, "gender": "男" }'
var jsonArr = '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]'

var obj = JSON.parse(jsonObj)
var arr = JSON.parse(jsonArr)

console.log(obj)
console.log(arr)

JSON.stringify 是将 json 格式的字符串转换为 js 的对象或者数组

var obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
}
var arr = [
    {
        name: 'Jack',
        age: 18,
        gender: '男'
    },
    {
        name: 'Jack',
        age: 18,
        gender: '男'
    },
    {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
]

var jsonObj = JSON.stringify(obj)
var jsonArr = JSON.stringify(arr)

this 关键字

• 每一个函数内部都有一个关键字是 this
• 重点: 函数内部的 this 之和函数的调用有关, 和函数的定义方式没有关系
• 函数内部的 this 指向谁, 取决于函数的调用方式
  • 全局定义的函数直接调用: this == window

  function fn(){
      console.log(this)
  }
  fn()
  // 此时 this 指向 window
  

  • 对象内部的方法调用, this == 调用者

  var obj = {
      fn: function () {
          console.log(this)
      }
  }
  obj.fn()
  // 此时 this 指向 obj
  

  • 定时器的处理函数, this == window

  setTimeout(function () {
      console.log(this)
  }, 0)
  // 此时定时器处理函数里面的 this 指向 window
  

  • 事件处理函数, this == 事件源

  div.onclick = function () {
      console.log(this)
  }
  // 当点击 div 的时候, this 指向 div
  

  • 自调用函数, this == window

  (function(){
      console.log(this)
  })()
  // 此时 this 指向 window
  

call; apply; bind

刚才说过的都是函数的基本调用方式里面的 this 指向 我们还有三个可以忽略函数本身 this 指向 转而指向别的地方 这三个方法就是 call / apply / bind 这三个方法是强行改变 this 指向的方法

call

• 该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
• 语法: 函数名.call(要改变的 this 指向, 要给函数传递的参数1, 要给函数传递的参数1, ...)

var obj = {name: 'Jack'}
function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
}
fn(1, 2)
fn.call(obj, 1, 2)

• fn() 的时候, 函数内部的 this 指向 window
• fn.call(obj, 1, 2) 的时候, 函数内部的 this 就指向了 obj 这个对象
• 使用 call 方法的时候
  • 会立即执行函数
  • 第一个参数是我们要改变函数内部的 this 指向
  • 第二个参数开始, 依次是向函数传递的参数

apply

• 该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
• 语法: 函数名.apply(要改变的 this 指向, [要给函数传递的参数1, 要给函数传递的参数2, ...])

var obj = {name: 'Jack'}
function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
}
fn(1, 2)
fn.apply(obj, [1, 2])

• fn() 的时候, 函数内部的 this 指向 window
• fn.apply(obj, [1, 2]) 的时候, 函数内部的 this 就指向了 obj 这个对象
• 使用 apply 方法额时候
  • 会立即执行函数
  • 第一个参数是我们改变的函数内部的 this 指向
  • 第二个参数是一个 数组, 数组里面的每一项依次是向函数传递的参数

bind

• 该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
• 和 call / apply 有一些不一样, 就是 bind 不会立即执行函数, 而是返回一个已经改变了 this 指向的函数
• 语法: var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)

var obj = {name: 'Jack'}
function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
}
fn(1, 2)
var newFn = fn.bind(obj)
newFn(1, 2)

• bind 调用的时候, 不会执行 fn 这个函数, 而是返回一个新的函数
• 这个新的函数就是一个改变了 this 指向以后的 fn 函数
• fn(1, 2) 的时候 this 指向了 window
• newFn(1, 2) 的时候执行的是一个和 fn 一模一样的函数, 只不过里面的 this 指向改成了 obj

ES6 新增内容

之前我们聊得都是 ES5 的内容, 现在聊一下 ES6 的内容

let 和 const 关键字

• 我们以前声明变量一直使用的是 var 关键字来声明变量的
• 在 ES6 的时候, 多了两个关键字 let 与 const, 也是用来声明变量的
• 语法: let 变量名

• 和 var 有一些区别
  1. let 和 const 不允许重复声明变量

  var num = 100
  var num = 200   // 重复声明没问题, 后一个会覆盖前一个
  

  let num = 100
  let num = 200   // 这里会报错
  

  const num = 100
  const num = 200   // 这里会报错
  

  2. let 和 const 声明的变量不会再预解析的时候解析(也就是没有变量提升)

  // 因为预解析(变量提升) 的原因, 在前面是有这个变量的, 只不过没有赋值
  console.log(num)    // undefined
  var num = 100
  

  // 因为 let 不会进行预解析(变量提升), 所以直接报错了
  console.log(num)    // 报错
  let num = 100
  

  // 因为 const 不会进行预解析(变量提升), 所以直接报错了
  console.log(num)    // 报错
  const num = 100
  

  3. let 和 const 声明的变量会被所有代码块{} 限制作用范围

  // var 声明的变量只有函数能限制其作用域, 其他的不能限制
  if (true) {
      var num = 100
      console.log(num)    // 100
  }
  console.log(num)    // 100
  

  // let 声明的变量除了函数可以限制, 所有的代码块都可以限制其作用域(if/while/for/ ...)
  if (true) {
      let num = 100
      console.log(num)    // 100
  }
  console.log(num)    // 报错
  

  // const 声明的变量除了函数可以限制, 所有的代码块都可以限制其作用域(if/while/for/ ...)
  if (true) {
      const num = 100
      console.log(num)    // 100
  }
  console.log(num)    // 报错
  

• let 和 const 的区别
  1. let 声明的变量的值可以改变, const 声明的时候必须赋值

  let num = 100
  num = 200
  console.log(num)    // 200
  

  const num = 100
  num = 200   // 这里就会报错了, 因为 const 声明的变量值不可以改变(我们也叫做常量)
  

  2. let 声明的时候可以不赋值, const 声明的时候必须赋值

  let num
  num = 100
  console.log(num)    // 100
  

  const num   // 这里就会报错了, 因为 const 声明的时候必须赋值
  

箭头函数

• 箭头函数是 ES6 里面一个简写函数的语法方式
• 重点: 箭头函数只能捡些函数表达式, 不能简写声明式函数

function fn() {}    // 不能简写
const fun = function () {}  // 可以简写
const obj = {
    fn: function () {}  // 可以简写
}

• 语法: (函数的形参) => {函数体内要执行的代码}

const fn = function (a, b) {
    console.log(a)
    console.log(b)
}
// 可以使用箭头函数写成
const fn1 = (a, b) => {
    console.log(a)
    console.log(b)
}

const obj = {
    fn: function (a, b) {
        console.log(a)
        console.log(b)
    }
}
// 可以使用箭头函数写成
const obj1 = {
    fn: (a, b) => {
        console.log(a)
        console.log(b)
    }
}

箭头函数的特殊性

1. 箭头函数内部没有 this, 箭头函数的 this 是上下文的 this

   /**
    *  在箭头函数定义的位置往上数, 这一行是可以打印出 this 的
    *  因为这里的 this 是 window
    *  所以箭头函数内部的 this 就是 window
   */
   const obj = {
       fn: funtion () {
           console.log(this)
       },
       // 这个位置是箭头函数的上一行, 但是不能打印出 this
       fn1: () => {
           // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
           console.log(this)
       }
   }
   obj.fn()
   obj.fn1()
   

   • 按照我们之前的 this 指向来判断, 两个都应该指向 obj
   • 但是 fun 因为是箭头函数, 所以 this 不指向 obj, 而是指向 fun 的外层, 就是 window
   • 箭头函数内部没有 arguments 这个参数集合

   const obj = {
       fn: function () {
           console.log(arguments)
       },
       fn1: () => {
           console.log(arguments)
       }
   }
   obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
   obj.fn1(1, 2, 3)    // 会直接报错
   

2. 函数的形参只有一个的时候可以不写 () 其余情况必须写

   const obj = {
       fn: () => {
           console.log('没有参数, 必须写小括号')
       },
       fn1: a => {
           console.log('一个参数, 可以不写小括号')
       },
       fn2: (a, b) => {
           console.log('两个参数, 必须写小括号')
       }
   }
   

3. 函数体只有一行代码的时候, 可以不写 {}, 并且会自动 return

   const obj = {
       fn: a => {
           return a + 10
       },
       fn1: a => a + 10
   }
   console.log(obj.fn(10)) // 20
   console.log(obj.fn1(10)) // 20
   

函数传参的默认值

• 我们在定义函数的时候, 有的时候需要一个默认值出现
• 就是当我不传递参数的时候, 使用默认值, 传递参数了就使用传递参数的参数

function fn(a) {
    a = a || 10
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 在 ES6 中我们可以直接把默认值写在函数的形参位置

function fn(a = 10) {
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 默认值的方式箭头函数也可以使用

const fn = (a = 10) => {
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 注意!!! 箭头函数如果你需要使用默认值的话, 那么一个参数的时候也需要写()

解构赋值

就是快速的从对象或者数组中去除成员的一个语法方式

解构对象

快速的从对象中获取成员

// ES5 的方法想得到对象中的成员
const obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
}
let name = obj.name
let age = obj.age
let gender = obj.gender

// 解构赋值的方式从对象中获取成员
const obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
}
let { name, age, gender } = obj
/**
 *  前面的 {} 表示我要从 obj 这个对象中获取成员了
 *  name age gender 都带是 obj 中有的成员
 *  obj 必须是一个对象
*/

解构数组

快速的从数组中获取成员

// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]

// 解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let [a, b, c] = arr
/**
 *  前面的 [] 表示要从 arr 这个数组中获取成员了
 *  a b c 分别对应这个数组中的索引 0 1 2 的值
 *  arr 必须是一个数组
*/

解构时的注意点

• {} 是专门解构对象使用的
• [] 是专门解构数组使用的
• 不能混用

模板字符串

• ES5 中我们表示字符串的时候使用 '' 或者 ""
• 在 ES6 中, 我们还有一个东西可以表示字符串 `` (反引号)

let str = `hello world`
console.log(typeof(str))    // string

• 反引号与之前的区别
  1. 反引号可以换行书写

     let str = 'hello world' // 使用单引号或者双引号不能换行书写, 换行会报错
     
     // 使用反引号不会报错, 这样写也不会报错
     let str = `
         hello
         world
     `
     

  2. 反引号可以直接在字符串里拼接变量, 不过需要借助 ${}

     // ES5 需要使用字符串拼接变量的时候
     let num = 100
     let str = 'hello' + num + 'world' + num
     console.log(str)
     
     let str2 = 'hellonumworldnum'
     console.log(str2)
     
     // 使用模板字符串
     let num = 100
     let str = `hello${num}world${num}`
     console.log(str)
     

展开运算符

• ES6 里面新增了一个运算符 ..., 叫做扩展运算符
• 作用是把数组展开

  let arr = [1, 2, 3, 4, 5]
  console.log(...arr) // 1 2 3 4 5
  

• 合并数组的时候可以使用

  let arr = [1, 2, 3, 4]
  let arr1 = [...arr, 5, 6, 7]
  console.log(arr1)
  

• 也可以合并对象使用

  let obj = {
      name: 'Jack',
      age: 18
  }
  let obj1 = {
      ...obj,
      gender: '男'
  }
  console.log(obj1)
  

• 在函数传递参数的时候也可以使用

  let arr = [1, 2, 3]
  function fn(a, b, c) {
      console.log(a)
      console.log(b)
      console.log(c)
  }
  fn(...arr)
  // 等价于 fn(1, 2, 3)
  

Map和Set 数据结构

• ES6 新增的两种数据结构
• 共同点: 都不接受重复数据

Set 数据结构

• 类似于数组的数据结构
• 按照索引排列的数据结构

• 创建 Set 数据结构
  • 语法: var s = new Set([数据1, 数据2, 数据2, 数据3, ... ])
• Set 数据结构的属性和方法
  1. size 属性
     • 语法: 数据结构.size
     • 返回值: 该数据结构内有多少个数据
  2. add() 方法
     • 语法: 数据结构.add(数据)
     • 作用: 向该数据结构内添加数据
  3. has() 方法
     • 语法: 数据结构.has(数据)
     • 返回值: true---表示数据结构内有该数据; false---表示数据结构内没有该数据
  4. delete() 方法
     • 语法: 数据结构.delete(数据)
     • 作用: 删除该数据结构内的某一个数据
  5. clear() 方法
     • 语法: 数据结构.clear()
     • 作用: 清除该数据结构内所有数据
  6. forEach() 方法
     • 语法: 数据结构.forEach(function (value, key, origin) {})

Map 数据结构

• 类似于对象的数据结构, 但是他的 key 可以是任何数据类型
• 可以被叫做一个 值=值 的数据结构

• 创建一个 Map 数据结构
  • 语法: var m = new Map({[ [key, value], [key, value] ]})
• Map 数据结构的属性和方法
  1. size 属性
     • 语法: 数据结构.size
     • 得到: 该数据内有多少个数据
  2. set() 方法
     • 语法: 数据结构.set(key, value)
     • 作用: 想该数据内添加数据
  3. get() 方法
     • 语法: 数据结构.get(key)
     • 作用: 数据结构内该 key 对应的 value
  4. has() 方法
     • 语法: 数据结构.has(key)
     • 返回值: true---数据结构内有该数据; false---数据结构内没有该数据
  5. delete() 方法
     • 语法: 数据结构.delete(key)
     • 作用: 删除该数据结构内的某一个数据
  6. clear() 方法
     • 语法: 数据结构.clear()
     • 作用: 清除该数据结构内所有数据
  7. forEach() 方法
     • 语法: 数据结构.forEach(function (value, key, origin) {})

对象简写语法

1. 当你的对象 key 和 value 一摸一样的时候
   • 并且 value 是一个变量
   • 那么可以省略一个不写

   var name = 'XXX'
   var obj = {
       name: name
   }
   
   var obj1 = {
       name
   }
   

2. 当对象内 key 对应的值是一个函数
   • 并且, 不是箭头函数的时候
   • 可以省略 function 关键字和冒号 不写

   var obj = {
       fn: function () {
           console.log(123)
       },
       fn1() {
           console.log(456)
       }
   }
   

模块化开发(重点)

• 就是把我们的完整功能, 拆开成为一个一个的独立功能(模块)
  • 一个 JS 文件就是一个独立模块
• 根据业务需求, 来进行模块整合
• 当模块化开发的时候
  • 我们需要把多个逻辑书写在多个 JS 文件内
  • 此时, 每一个文件都是独立的文件, 都是一个独立的模块作用域(文件作用域)
  • 该文件内, 只能使用自己文件内的变量, 不能使用其他文件内的变量
• 导出/导入
  • 导出: 在一个文件内向外暴露一些内容
  • 导入: 导入该文件的同时, 拿到它向外暴露的内容
• 浏览器使用 ES6 模块化语法的要求
  • script 标签必须要有一个 type=module 的属性
  • 页面必须要在服务器上打开(可以借助 live server)

• 导出语法
  1. 语法1: export default 你要导出的数据
     • 一个文件只能导出一个 default 数据

     const num = 100
     const fn = () => {
         console.log('我是 header.js')
     }
     const obj = {
         num: num,
         fn: fn
     }
     export default obj
     

  2. 语法2: export 定义变量 = 值
     • 一个文件可以导出多个新定义的变量

     export const s = 100
     export let a = 200
     

• 导入语法
  1. import 变量 from '文件'
     • 这个语法必须对应导出语法1

     import myObj = from './index.js'
     

  2. import { 导出的内容 } from '文件'
     • 这个语法必须对应导出语法2

     import {s, a} from './index.js'