es6新增方法

rest 方法

es6中的rest方法代替了es5中的argments实参列表
es5的实参列表代码如下：

<!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>
    <style>
      
    </style>
  </head>
  <body>
    <script>
     function getUser(a,b,c){
      console.log(arguments);
     }
     getUser(1,2,3,4,5,6)
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果是一个对象
在这里插入图片描述
rect方法

<!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>
    <style>
      
    </style>
  </head>
  <body>
    <script>
     function getUser(...args){
      console.log(args);
     }
     getUser(1,2,3,4,5,6)
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

返回的是一个数组，方便对实参进行操作
在这里插入图片描述

特别注意：就是说rect方法接收实参必须放到形参的最后面

symbol

symbol是新的数据类型,他所定义的变量是独一无二的(定义相同的数据值，二者相互比较但是两者结果为false)

定义的格式

<!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>
    <style>
      
    </style>
  </head>
  <body>
    <script>
    // 方式一:通过Symbol("数据值")
     let number = Symbol("这是一个Symbol数据");
     console.log(number,  typeof number);
    // 方式二:通过Symbol.for("数据值")
      let number1 = Symbol.for("第二个Symbol数据值");
      console.log(number1, typeof number1);
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果：
在这里插入图片描述

内置方法

代码：

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>Documenttitle>
    <style>style>
  head>
  <body>
    <script>
     class prerson{
       static[Symbol.hasInstance](param){
         console.log(param);
         console.log("我是用来检测类型的");
       }
     }
    let obj ={}
    console.log(obj instanceof prerson);
    script>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行结果：
在这里插入图片描述

迭代器

定义:迭代器就是能自定义遍历数据，需要通过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>
    <style></style>
  </head>
  <body>
    <script>
      let obj = {
        name: "小明",
        interest: ["唱歌", "跳舞", "游泳", "画画", "唱歌"],
        [Symbol.iterator]() {
          let count = 0;
          return {
            next: () => {
              if (count < this.interest.length) {
                const result= { value: this.interest[count], done: false };
                count++;
                return result;
              } else {
                return { value: undefined, done: true };
              }
            },
          };
        },
      };
      for(let v of obj){
        console.log(v);
      }
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

结果：
在这里插入图片描述

生成器

这是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>Documenttitle>
    <style>style>
  head>
  <body>
    <script>
      //iterartor就是迭代器
     function * iterartor(){
       console.log('A');
       yield "第一个阶段"//yield是函数的分隔符
       console.log('B');
       yield "第二个阶段"
       console.log('C');
       yield "第三个阶段"
       console.log('D');
     }
     let iterator = iterartor();
     iterator.next();//A
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果
在这里插入图片描述

迭代器也可以传参：

例子：我们实际开发中电商系统在订单中拿到我们的商品信息流程一般为：先拿到用户信息=》订单信息=》商品信息

传参代码如下：

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>Documenttitle>
    <style>style>
  head>
  <body>
    <script>
      function getUserInfo(){
        setTimeout(()=>{
          let data="用户信息"
          iterator.next(data);
        },1000)
      }
      function getOrderList(){
        setTimeout(()=>{
          let data ="订单信息"
          iterator.next(data);
        },1000)
      }
      function getGoodsList(){
        setTimeout(()=>{
          let data = "商品信息"
          iterator.next(data);
        },1000)
      }
      //迭代器
      function * iteratem(){
        let one =yield getUserInfo();
        console.log(one);
        let two = yield getOrderList();
        console.log(two);
        let three = yield getGoodsList();
        console.log(three);
      }
      let iterator = iteratem();
      iterator.next();
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

相关阅读:
VMware设置共享文件夹
 【Java 进阶篇】Java会话技术之Cookie的存活时间
 String工具类
 第六十章 IIS 7 或更高版本的替代选项 (Windows) - 替代选项 3：将 ISAPI 模块与 NSD (CSPcms.dll) 一起使用
 【机器学习 | 回归问题】超越直线:释放多项式回归的潜力 —— 详解线性回归与非线性（含详细案例、源码）
Auto.js脚本程序打包
 金仓数据库 KingbaseES 插件参考手册(17. dbms_metadata)
[21天学习挑战赛——内核笔记]（六）——在debugfs中添加一个调试目录
 HCIE Routing&Switching之MPLS LDP理论
 logback1.3.x配置详解与实践
原文地址：https://blog.csdn.net/weixin_51666715/article/details/126759799