ECMAScript（ES6）

已于 2022-06-24 12:06:32 修改
阅读量1.3k 收藏 2
点赞数 1
分类专栏： ES6 文章标签： javascript es6 前端
于 2022-04-26 20:34:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_z/article/details/124436191
版权

ECMAScript

ECMAScrit 简介

  • ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为Ecma国际。
  • ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言
  • Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所有标准列表查看
  • http://www.ecma-international.org/publications/standards/Standard.htm

ECMA-262 历史

  • ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信

    第 1 版1997年制定了语言的基本语法
    第 2 版1998年较小改动
    第 3 版1999年引入正则、异常处理、格式化输出等。IE 开始支持
    第 4 版2007年过于激进、未发布
    第 5 版2009年严格模式、JSON、扩展对象、数组、原型、字符串、日期方法
    第 6 版2015年模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等
    第 7 版2016年幂运算符、数组扩展
    第 8 版2017年Async/await、字符串扩展
    第 9 版2018年对象解构赋值、正则扩展
    第 10 版2019年扩展对象、数组方法
    ES.next动态指向下一个版本

  • 注：从ES6开始，每年发布一个版本，版本号比年份最后一位大 1

为什么要学习ES6

  • ES6的版本变动内容最多，具有里程碑意义
  • ES6加入许多新的语法特性，编程实现更简单、高效
  • ES6是前端发展趋势，就业必备技能

let 关键字

  • let关键字用来声明变量，使用let声明的变量有几个特点：

    • 不允许重复声明

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 不允许重复声明
    let a = 10;
    // let a = "abc"; // 报错
    console.log(a); // 10
  </script>
</html>

    • 块儿级作用域

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 块儿级作用域 for if
    // var 是没有块级作用域的
    for (var i = 0; i < 10; i++) {}
    console.log(i); // 10
    if (true) {
      var f = "abc";
    }
    console.log(f); // abc
    // let 是有块级作用域的
    for (let index = 0; index < 10; index++) {}
    // console.log(index); // 报错 index is not defined
    if (true) {
      let n = false;
    }
    // console.log(n); // 报错 n is not defined
  </script>
</html>

    • 不存在变量提升

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // var 的变量提升
    console.log(a); //undefined
    var a = 10;

    // let 不存在变量提升
    // console.log(n); // 报错 Cannot access 'n' before initialization
    let n = false;
  </script>
</html>

    • 不影响作用域链

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // var 不影响作用域链
    function fn() {
      var a = 10;
      function fn1() {
        var b = 10;
        console.log(a + b); // 20
      }
      function fn2() {
        var c = 20;
        // console.log(a + b + c); // 报错 b is not defined
      }
      fn1();
      fn2();
    }
    // fn();

    // let 也不影响作用域链
    function foo() {
      let a = 10;
      function fn1() {
        let b = 10;
        console.log(a + b); // 20
      }
      function fn2() {
        let c = 20;
        // console.log(a + b + c); // 报错 b is not defined
      }
      fn1();
      fn2();
    }
    foo();
  </script>
</html>

  • 应用场景：以后声明变量使用let就对了

const 关键字

  • const关键字用来声明常量，const声明有以下特点

    • 声明必须赋初始值

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // const a; // 报错 Missing initializer in const declaration
    const a = 10;
    console.log(a); // 10
  </script>
</html>

    • 标识符一般为大写

    • 不允许重复声明

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const a = false;
    // const a = 10; // 报错 Identifier 'a' has already been declared
    console.log(a); // false
  </script>
</html>

    • 值不允许修改

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const a = false;
    // a = 10; // 报错 Assignment to constant variable.
    console.log(a);
  </script>
</html>

    • 块儿级作用域

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    for (let i = 0; i < 10; i++) {
      const a = 20;
      var b = 10; // var 定义的变量在for循环中是没有块级作用域的
    }
    // console.log(a); // 报错 a is not defined
    console.log(b); // 10

    if (true) {
      const foo = false;
    }
    console.log(foo); // 报错 foo is not defined
    // const 在 for 和 if 都是具有块级作用域的
  </script>
</html>

  • 注意: 对象属性修改和数组元素变化不会触发const错误

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 对象属性改变不会触发 const 错误
    const obj = {
      name: "张三",
      age: 10,
      sayHi: function () {
        console.log(this.name + ":hi");
      },
    };
    obj.name = "王五";
    obj.sayHi(); // 王五:hi
    obj.weight = "50";
    console.log(obj); // 也不会报错

    // 数组元素改变也不会触发 const 错误
    const arr = [];
    arr.push(10, 20, 30);
    console.log(arr); // [10, 20, 30]
  </script>
</html>
  • 应用场景：声明对象类型使用const，非对象类型声明选择let

变量的解构赋值

  • ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

    • 数组的解构赋值
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const arr = ["张学友", "刘德华", "黎明", "郭富城"];
    // 数组的解构赋值 => 根据数组的下标有顺序的进行赋值
    let [zhang, liu, li, guo] = arr;
    console.log(zhang, liu, li, guo); // 张学友 刘德华 黎明 郭富城
  </script>
</html>
    • 对象的解构赋值
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 对象的解构赋值
    const lin = {
      name: "林志颖",
      tags: ["车手", "歌手", "小旋风", "演员"],
      sayHi: function () {
        console.log("唱歌");
      },
    };
    // 对象的解构赋值是将对象中的各个属性取出来 变量名称必须与属性名称一致
    const { name, tags, sayHi } = lin;
    console.log(name, tags, sayHi); // 林志颖
    console.log(tags); // ['车手', '歌手', '小旋风', '演员']
    console.log(sayHi); // ƒ () {console.log("唱歌");}
    sayHi(); // 唱歌
  </script>
</html>
    • 复杂解构
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    let wangfei = {
      name: "王菲",
      age: 18,
      songs: ["红豆", "流年", "暧昧", "传奇"],
      history: [{ name: "窦唯" }, { name: "李亚鹏" }, { name: "谢霆锋" }],
    };

    const {
      name,
      age,
      // 数组的解构 => string,string,string,string
      songs: [one, two, three, four],

      // 数组的解构 => obj,obj,obj,obj
      history: [first, second, third],
    } = wangfei;

    console.log(name); // 王菲
    console.log(age); // 18
    console.log(one); // 红豆
    console.log(first); // {name: '窦唯'}
  </script>
</html>

  • 注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

模板字符串

  • 模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

    • 字符串中可以出现换行符
    • 可以使用${xxx}形式输出变量
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul>
  </body>
  <script>
    const books = ["JavaScript", "Vue", "React", "Es6"];
    let str = "";
    for (let i = 0; i < books.length; i++) {
      str += `
      <li>${books[i]}</li>
    `;
    }
    // 获取 DOM 对象
    document.querySelector("ul").innerHTML = str;
  </script>
</html>

  • 注意：当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

  • ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    let name = "张三";
    let age = 20;
    const sayHi = function () {
      console.log("hi");
    };

    // 原始写法
    let obj = {
      // key:value 的写法
      name: name,
      age: age,
      sayHi: sayHi,
    };
    console.log(obj); // {name: '张三', age: 20, sayHi: ƒ}

    // 简化写法
    let newObj = {
      // 当key与value一致时，就可以只写一个就可以了
      name,
      age,
      sayHi,
    };
    console.log(newObj); // {name: '张三', age: 20, sayHi: ƒ}

    const person = {
      sayHi: function () {
        console.log(11);
      },
    };
    // 对象中的方法后 :function 是可以省略的
    const newPerson = {
      sayHi() {
        console.log(11);
      },
    };
  </script>
</html>

  • 注意：对象简写形式简化了代码，所以以后用简写就对了

箭头函数

  • ES6允许使用「箭头」（=>）定义函数

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // => 代替 function()
    const oldFn = function () {
      console.log("oldFn"); // oldFn
    };
    oldFn();

    const fn = () => {
      console.log("fn"); // fn
    };
    fn();
  </script>
</html>

  • 箭头函数的注意点:

    • 如果形参只有一个，则小括号可以省略

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 箭头函数没有参数的情况
    const a = () => {
      console.log("没有参数的箭头函数");
    };
    a();

    // 箭头函数只有一个参数的情况(参数的括号可以省略)
    const b = (a) => {
      console.log("只有一个参数的箭头函数");
    };
    b();

    // 箭头函数的参数有多个时，不可以省略
    const c = (a, b) => {
      console.log(a, b); // 10 20
    };
    c(10, 20);
  </script>
</html>

      在这里插入图片描述

    • 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 代码函数只有一行，方法体的大括号可以省略
    const fo = () => console.log("代码函数只有一行，方法体的大括号可以省略");
    fo();

    // 代码行数只有一行，有返回值的情况，方法体的大括号和 return 可以省略的
    const sum = (a, b) => a + b;
    console.log(sum(10, 20));
  </script>
</html>

      在这里插入图片描述

    • 箭头函数this指向声明时所在作用域下this的值

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const obj = {
      name: "张三",
      age: 20,
      sayHi() {
        // this
        const _this = this;
        setTimeout(function () {
          // 计时器里面的 this 永远指向于 window
          console.log(`你好，${_this.name}`);
        }, 2000);
      },
    };
    obj.sayHi();

    const obj2 = {
      name: "李四",
      age: 18,
      sayHi() {
        setTimeout(() => {
          // 箭头函数没有 this 指向，指向最近的 this
          // 这里受箭头函数的影响 this 指向 obj2
          console.log(`你好，${this.name}`);
        }, 2000);
      },
    };
    obj2.sayHi();
  </script>
</html>

      在这里插入图片描述

    • 箭头函数不能作为构造函数实例化

    • 不能使用arguments

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const fo = function () {
      console.log(arguments);
    };
    fo(1, 2, 3, 4);

    const foo = () => {
      // console.log(arguments); // 报错 arguments is not defined
    };
    foo(1, 2, 3);
  </script>
</html>

      在这里插入图片描述

  • 注意：箭头函数不会更改this指向，用来指定回调函数会非常合适

rest 参数

  • ES6引入rest参数，用于获取函数的实参，用来代替arguments

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const bar = function () {
      console.log(arguments instanceof Array); // false
    };
    bar(10, 20, 30, 40, 50, 60);

    // 箭头函数 rest 参数
    // 使用 ... 将剩余没有接收的参数放在数组中
    const foo = (...args) => {
      console.log(args instanceof Array); // true
    };
    foo(10, 20, 30, 40, 50, 60);

    const fn = (a, b, ...args) => {
      console.log(a, b, args);
    };
    fn(10, 20, 30, 40, 50, 60);
  </script>
</html>

    在这里插入图片描述

  • 注意：rest参数非常适合不定个数参数函数的场景

spread 扩展运算符

  • 扩展运算符（spread）也是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 展开数组
    let tfboys = ["德玛西亚之力", "德玛西亚之翼", "德玛西亚皇子"];
    function fn() {
      console.log(arguments);
    }
    fn(...tfboys);

    // 展开对象
    let skillOne = { q: "致命打击" };
    let skillTwo = { w: "勇气" };
    let skillThree = { e: "审判" };
    let skillFour = { r: "德玛西亚正义" };
    const gailun = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };
    console.log(gailun);

    // 数组的合并
    const a = [1, 2, 3, 4];
    const b = [5, 6, 7, 8];
    const c = a.concat(b);
    console.log(c); // [1, 2, 3, 4, 5, 6, 7, 8]
    const d = a.push(...b);
    console.log(d); // 8

    // 对象的合并
    const p1 = {
      name: "李四",
      age: 18,
    };
    const p2 = { ...p1, age: 30 }; // 在合并对象的时候 重复的属性会以最后一个出现的为准
    console.log(p2);
  </script>
</html>

    在这里插入图片描述

迭代器

  • 遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

  • ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费

  • 原生具备iterator接口的数据(可用for of遍历)

    • Array
    • Arguments
    • Set
    • Map
    • String
    • NodeList（DOM节点）

  • 工作原理

    • 创建一个指针对象，指向当前数据结构的起始位置
    • 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
    • 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
    • 每调用next方法返回一个包含value和done属性的对象
    • 注: 需要自定义遍历数据的时候，要想到迭代器
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </body>
  <script>
    // const divs = document.querySelectorAll("div");

    // 获取到的 HTMLCollection 集合，没有办法 forEach
    const divs = document.getElementsByTagName("div");
    // divs.forEach((item) => {
    //   console.log(item); // 报错 divs.forEach is not a function
    // });
    for (const item of divs) {
      console.log(item); // 这个是可以遍历的
    }

    const objArr = [
      {
        name: "Vuejs",
        price: 18,
      },
      {
        name: "React",
        price: 10,
      },
      {
        name: "Angular",
        price: 28,
      },
    ];
    for (const item of objArr) {
      console.log(item);
    }
  </script>
</html>

    在这里插入图片描述

Promise

  • Promise是ES6引入的异步编程的新解决方案

  • 语法上Promise是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    // 创建Promise的对象
    // 在创建Promise对象的时候，需要传入一个回调函数，
    // 这个回调函数会产生两个参数
    // 这两个参数是两个函数 resolve() 表示成功  reject() 失败
    const p = new Promise(function (resolve, reject) {
      setTimeout(() => {
        let a = 10;
        if (a == 10) {
          // 表示成功
          resolve(++a);
        } else {
          // 表示失败
          a = 20;
          reject(a);
        }
      }, 2000);
    });

    const p2 = new Promise((resolve, reject) => {
      // then表示成功
      // cath表示失败
      p.then((a) => {
        console.log(a); // 11
        if (a == 11) {
          resolve(++a);
        } else {
          reject(a);
        }
      }).catch((error) => {
        console.log(error);
      });
    });

    // p2.then(a=>{
    //   console.log(a);
    // })

    // p2.catch(error => {
    //   console.log(error);
    // })
  </script>
</html>

  • Promise构造函数:Promise (excutor) {}

  • Promise.prototype.then方法

  • Promise.prototype.catch方法

  • Promise.prototype.all

Promise封装Ajax

  • Ajax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    let xhr;
    // 创建XMLHttpRequest对象
    if (XmlHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XML");
    }
    // 监听状态
    xhr.onreadystatechange = () => {
      // post 201
      // get 200
      if ((xhr.readyState == 4) & (xhr.status == 200) || xhr.status == 201) {
        // 处理操作
      }
    };
    // 开启连接
    xhr.open("get", "xxxx", true);
    xhr.send();
  </script>
</html>
  • Promise封装Ajax
    function $http(params) {
      const { method, url, body, header } = params;
      return new Promise((resolve, reject) => {
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4 && xhr.status == 200) {
            const { code, data } = JSON.parse(xhr.responseText);
            resolve(data);
          }
        };
        xhr.open(method, url);
        try {
          for (const key in header) {
            xhr.setRequestHeader(key, header[key]);
          }
        } catch (error) {
          console.log(error);
        }
        xhr.send(JSON.stringify(body));
      });
    }

Set

  • ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script src="./http.js"></script>
  <script>
    let s1 = new Set();
    console.log(s1);

    // 成员的值都是唯一的 所以可以做数组的去重
    let s2 = new Set([22, 2, 22, 34, 34, 22, 5]);
    // 得到一个去重的对象
    console.log(s2); // {22, 2, 34, 5}
    let newArr = [...s2];
    console.log(newArr); // [22, 2, 34, 5]
  </script>
</html>

    在这里插入图片描述

    • size返回集合的元素个数

    • add增加一个新元素，返回当前集合

    • delete删除元素，返回boolean值

    • has检测集合中是否包含某个元素，返回boolean值

    • clear清空集合，返回undefined

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script src="./http.js"></script>
  <script>
    // size 返回集合的元素个数
    let s2 = new Set([10, 20, 20, 30, 40, 30]);
    console.log("size:" + s2.size); // size:4

    // add 增加一个新元素，返回当前集合
    console.log(s2.add(5)); // {10, 20, 30, 40, 5}

    // delete 删除元素，返回 boolean 值
    // .delete(某一个元素)
    console.log(s2.delete(20)); // true
    console.log(s2); // {10, 30, 40, 5}

    // has 检测集合中是否包含某个元素，返回 boolean 值
    console.log(s2.has(10)); // true

    for (const iterator of s2) {
      console.log(iterator);
    }

    // clear 清空集合，返回 undefined
    console.log(s2.clear()); // undefined
  </script>
</html>

      在这里插入图片描述

Map

  • ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map的属性和方法：

    • size返回Map的元素个数
    • set增加一个新元素，返回当前Map
    • get返回键名对象的键值
    • has检测Map中是否包含某个元素，返回boolean值
    • clear清空集合，返回undefined
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script src="./http.js"></script>
  <script>
    const map = new Map([
      ["name", "网星软件"],
      ["slogon", "不断提高行业标准"],
    ]);
    console.log(map); // {'name' => '网星软件', 'slogon' => '不断提高行业标准'}

    // size 返回 Map 的元素个数
    console.log(map.size); // 2

    // set 增加一个新元素，返回当前 Map
    console.log(map.set("old", 13));

    // get 返回键名对象的键值
    console.log(map.get("old")); // 13

    // has 检测 Map 中是否包含某个元素，返回 boolean 值
    console.log(map.has("name")); // true

    for (const item of map) {
      console.log(item);
    }

    // clear 清空集合，返回 undefined
    console.log(map.clear()); // undefined
  </script>
</html>

    在这里插入图片描述

class 类

  • ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。知识点

    • class声明类
    • constructor定义构造函数初始化
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script src="./http.js"></script>
  <script>
    // 创建类
    class Person {
      // 静态属性 可以直接被类名调用
      static type = "human";

      /**
       * 构造函数(构造方法) 不能写出箭头函数
       * 做初始化的
       */
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      /**
       * 普通函数
       * 关于对象的行为操作
       */
      // sayHi() {
      //   console.log(`${this.name}:hi`);
      // }
      sayHi = () => {
        console.log(`${this.name}:hi`);
      };

      /**
       * 静态方法 被 static 修饰
       * 频繁使用的一些方法
       */
      static talk() {
        console.log("讲话");
      }
    }

    const person = new Person("张三", 18);
    console.log(person);
    person.sayHi();

    // 静态方法可以直接被类名调用 无需创建对象
    Person.talk();
    console.log(Person.type); // human
  </script>
</html>

    在这里插入图片描述

    • extends继承父类
    • super调用父级构造方法
    • static定义静态方法和属性
    • 父类方法可以重写
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script src="./http.js"></script>
  <script>
    // 定义 Person 类
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      sayHi = () => {
        console.log(`${this.name}:hi`);
      };
      static talk() {
        console.log("讲话");
      }
    }

    // 定义 Student 类，并继承 Person，只能继承一个
    class Student extends Person {
      constructor(name, age, score) {
        // 交给父类
        super(name, age);
        // 自己的参数
        this.score = score;
      }
      // 子类可以重写父类中的方法
      sayHi = () => {
        console.log("hello");
      };
      static talk() {
        console.log("spack");
      }
    }

    const stu = new Student("张三", 18, 66);
    console.log(stu);
    stu.sayHi();
    Student.talk();
  </script>
</html>

    在这里插入图片描述

没有模块化产生的问题

  • 结构目录

    在这里插入图片描述

  • 代码展示

    • bar.js

      var a = true;

    • foo.js

      var a = false;

    • index.html

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./bar.js"></script>
  <script src="./foo.js"></script>
  <script>
    if (a) {
      // 没有内容打印 前面的var a把后面的var a给覆盖了，导致最后执行了foo.js里面的var a = false
      // 但是当你把 俩个文件引入的顺序换一下就会打印出来
      // 当你把这俩个文件看成俩个不同的人写的项目，这样就会造成项目之间的互相影响 也会使后期的代码不好维护
      console.log("a == true");
    }
  </script>
</html>

  • 早期解决的办法：（闭包）

    • bar.js

      var bar = (function () {
  // 返回一个对象 这样我们就可以使用 对象.属性 的方式获取
  return {
    a: true,
  };
})();

    • foo.js

      var foo = (function () {
  // 返回一个对象 这样我们就可以使用 对象.属性 的方式获取
  return {
    a: false,
  };
})();

    • index.html

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./bar.js"></script>
  <script src="./foo.js"></script>
  <script>
    if (bar.a) {
      console.log("a == true"); // a == true
    }
  </script>
</html>

    • 这样虽然可以解决问题，但是当你一直在bar.js和foo.js的return里面写代码，会发现非常臃肿。所以让我们看看下面ES6中的模块化。

模块化

  • 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
  • 模块化的优势有以下几点：
    • 防止命名冲突
    • 代码复用
    • 高维护性
    • 2.18.2.模块化规范产品
    • ES6之前的模块化规范有：
      • CommonJS=> NodeJS、Browserify
      • AMD => requireJS
      • CMD => seaJS

ES6 模块化语法

  • 模块功能主要由两个命令构成：export和import。

  • export命令用于规定模块的对外接口

    • export导出 将需要给别人使用的变量或者方法暴露出去

  • import命令用于输入其他模块提供的功能

    • import导入 将别人导出的变量和方法引入使用

  • 导出导入的方式(输出打印需要开启一个服务)

    • 目录结构

      在这里插入图片描述

    • 单独导出

      • foo.js

        export const a = 10;

      • main,js

        // 程序的入口(主文件)

// 导入方式一
import * as foo from "./foo.js";
console.log(foo.a); // 10

        // 程序的入口(主文件)

// 导入方式二
import { a } from "./foo.js";
console.log(a); // 10

      • index,html

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./main.js" type="module"></script>
</html>

    • 统一导出

      • bar,js

        const name = "张三";

const sum = function (a, b) {
  return a + b;
};

// 导出
export { name, sum };

      • foo.js

        const a = 10;

const sum = (a, b) => console.log(a + b); // 30

export { a, sum };

      • main.js

        // 程序的入口(主文件)

import * as bar from "./bar.js";
import * as foo from "./foo.js";

console.log(bar.name); // 张三
console.log(bar.sum(10, 30)); // 40
console.log(foo.a); // 10
foo.sum(10, 20);

      • index,html

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./main.js" type="module"></script>
</html>

    • 默认导出（一个）

      • bar,js

        export default 10;

      • foo,js

        // 这里 a 前面不能加 const
// 这里默认导出只能有一个 不可以写多个默认导出

export default () => 10 + 20;

      • main,js

        // 程序的入口(主文件)

import bar from "./bar.js";
import foo from "./foo.js";

console.log(bar); // 10
console.log(foo()); // 30

      • index,html

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./main.js" type="module"></script>
</html>

    • 默认导出（多个）

      • foo.js

        const a = 10;
const sum = () => 10 + 20;
export default { a, sum };

      • main,js

        // 程序的入口(主文件)

import foo from "./foo.js";

console.log(foo.a); // 10
console.log(foo.sum()); // 30

      • index,js

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./main.js" type="module"></script>
</html>

ES10 新增的模块化

  • 目录结构

    在这里插入图片描述

  • 代码展示

    • data.js

      export const formatDate = () => new Date();

    • math.js

      export const radom = () => Math.random();

    • index.js

      // 统一导出
// * 表示所有

export * from "./data.js";
export * from "./math.js";

    • main.js

      import { formatDate, radom } from "./index.js";

console.log(formatDate());
console.log(radom());

    • index.html

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./main.js" type="module"></script>
  </body>
</html>

      在这里插入图片描述

async 和 await

  • async和await两种语法结合可以让异步代码像同步代码一样
  • async函数的返回值为promise对象
  • promise对象的结果由async函数执行的返回值决定
  • await必须写在async函数中
  • await右侧的表达式一般为promise对象
  • await返回的是promise成功的值
  • await的promise失败了, 就会抛出异常, 需要通过try...catch捕获处理

Rest/Spread 属性

  • Rest参数与spread扩展运算符在ES6中已经引入，不过ES6中只针对于数组， 在ES9中为对象提供了像数组一样的rest参数和扩展运算符

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function connect({ host, port, ...user }) {
      console.log(host, port); // 127.0.0.1 8080
      console.log(user); // {username: 'admin', password: '123456', type: 'master'}
    }
    connect({
      username: "admin",
      password: "123456",
      host: "127.0.0.1",
      port: 8080,
      type: "master",
    });
  </script>
</html>

    在这里插入图片描述

BloggerM
关注
专栏目录
ECMAScript（ES6+）
m0_61044901的博客
06-12 710
ECMAScript（ES6+）
angular-es6-sample：带有ECMAScript 2015ES6，Bootstrap 4和Webpack的AngularJS 1.5+示例
02-03
"angular-es6-sample" 是一个项目名称，表明这是一个关于AngularJS的示例项目，且它使用了ECMAScript 2015（也称为ES6）的特性。Bootstrap 4是一个流行的前端框架，用于创建响应式和移动优先的网页设计。Webpack是一...
es6：ECMAScript:registered:2016语言规范中文版
02-26
es6 ECMAScript:registered:2016语言规范中文版 在线文档 相关文章： ECMAScript6词法： ://www.cnblogs.com/mufc-go/p/7886527.html
ES6 (ECMAScript 6 简明教程)
weixin_43885779的博客
02-21 300
ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 1. let、const 和 block 作用域 let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var： var a = 2; { let a = 3; console.log(a); // 3 } console.log(a); // 2 同样在块
ES6_尚硅谷—谷粒学院项目es6相关小结
小叶子的博客
03-05 445
es61. let变量作用范围2.let定义变量特点3.const声明常量（只读变量）4.数组解构5.对象解构6.模板字符串 `7.声明对象简写8.定义方法简写9.对象扩展运算符10.箭头函数 概述 es6是JavaScript的一套标准，规范 es6代码简单，浏览器兼容性差，部分低版本浏览器不支持 es5代码复杂，浏览器兼容性好，大部分浏览器支持 写的时候用es6，然后用工具把es6变成es5执行 基本语法 ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关
ECMAScript知识点整理 - ES6（一）
JHY97的博客
03-29 582
目录 一、ECMAScript 1.1 什么是ECMAScript 1.2 什么是ECMA-262 1.3 ES6兼容性 二、ES6关键词 2.1 let变量声明以及声明特性 2.1.1 let关键字 2.1.2 let关键字特性 2.1.3 let关键字 - 案例练习 2.2 const声明常量以及特点 2.2.1 const关键字 2.2.2const声明的特点 三. 变量的解构赋值 3.1什么是变量解构赋值 3.2数组的结构 3.3 对象的解构 四、模板字符...
ECMAScript es6 基础
as1205697836的博客
07-20 725
es是js的标准 js是es的实现 浏览器对新标准的支持 let 与 块级作用域 let与var是一样的用来声明变量，不同的是let声明的变量只能作用于块级作用域 块级作用域： 除了对象的字面量声明，其他的花括号（if，for。。。）或者一个单独的花括号，都是块级作用域 块级作用域可以嵌套 ...
ECMAScript6 ES6教程.zip_zip压缩包
01-10
ECMAScript6 ES6教程.zip
ES6：EcmaScript2015（ES6）
01-31
**ES6： EcmaScript 2015详解** ECMAScript 2015，简称ES6，是JavaScript语言的一个重要版本更新，为开发者带来了许多新的特性和改进，极大地提升了开发效率和代码质量。本篇文章将深入探讨ES6的核心知识点。 ### ...
web前端开发工程师 ECMAScript 6.0 简称ES6 Typora学习笔记
08-16
### ES6 (ECMAScript 2015) 前端开发基础知识详解 #### 一、ES6简介 - **定义与历史**: ECMAScript 6 (简称ES6) 是JavaScript语言的一个新版本，正式名称为ECMAScript 2015（ES2015），于2015年6月发布。它的目标...
ES6（ECMAScript）快速使用
心有谦谦结
01-06 2426
ECMAScript有很多个版本，每个版本的特征都有所不同，这里只对ECMAScript 6的部分常用知识做一定的小结。 一、什么是ECMAScript 6
ECMAScript 6 (ES6) 入门笔记
qq_41045128的博客
06-20 436
PromiseECMAScript 6.0（简称ES6）是JavaScript语言（现在是遵循ES5标准）的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言...
ECMAScript 6 简明教程（一文搞懂ES6）_ecmascript教程
最新发布
2401_84434954的博客
04-26 645
/ “value 与 ‘a string’ 关联”// “value 与 keyFunc 关联”// “value 与 keyObj 关联”myMap.set(keyString, “value 与 ‘a string’ 关联”);myMap.set(keyFunc, “value 与 keyFunc 关联”);myMap.set(keyObj, “value 与 keyObj 关联”);model, // 等同于 model: model。value, // 等同于 value: value。
Javascript ES6 特性概述（即ECMAScript 6和ES2015+）
李子无为的杂货铺
10-26 7149
Javascript在过去的一年里变化了很多，从现在开始，有12个新的特性可以开始用了！
ECMAScript 6.0基础入门教程（一）-ES6基础入门教程
hexinyu_1022的博客
06-23 1万+
主要写了ES6的一些新知识和与ES5的区别，对ES6的变量、函数、数组、字符串、面向对象、json的一些使用方法进行了总结。
1.ES6简介
小雨的博客
11-15 741
ECMAScript和JavaScript的关系         ECMAScript（简称ES6)是JavaScript语言的下一代标准，于2015.6正式发布；         ECMAScript和JavaScript的关系，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。  ECMAScript6的兼容(推
ECMAScript和JavaScript的区别
热门推荐
pan_junbiao的博客
05-18 1万+
1、ECMAScript的简介 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA...
1.ECMAScript 6简介（阮一峰ES6）
我的博客简介
10-21 859
1
ES6 与 ECMAScript 2015 的关系
歪脖先生的博客
01-13 4477
ES6 与 ECMAScript 2015 的关系 ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？ 2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。 但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很
探索ECMAScript 2015：深入理解ES6
"深入浅出ES6 - 一本关于ECMAScript 6的详细解析书籍，探讨了新标准带来的变化，如迭代器、生成器、不定参数、默认参数、解构赋值、代理、新数据类型等。由InfoQ中文站免费提供。" 《深入浅出ES6》是一本专注于探讨...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值