JS(第二十五课)ES6语法Symbol-阿里云开发者社区

1 ES6 第七中数据类型 Symbol

  <!--  ES第七中数据类型 Symbol-->
  <script>
      // 创建 symbol
      let s = Symbol()
      console.log(s, typeof Symbol)
      console.log(s, typeof s)
      let s2 = Symbol("我要上高速")
      let s3 = Symbol("我要上高速")
      console.log(s2 == s3)
      console.log(s2 === s3)
      let s4 = Symbol.for("上高速")
      let s5 = Symbol.for("上高速")
      console.log(s4==s5)
      console.log(s4===s5)
      // 不能与其他数据类型使用
      // USONB  you are so niubility
      // JS数据类型
      // undefined string symbol object null number boolean

2 symbol表示独一无二的值

 <!--!symbol表示独一无二的值 -->
 <script>
     // 向对象中增加方法 up down
     let game = {
     }
     let methods = {
         up: Symbol(),
         down: Symbol(),
     };
     game[methods.up] = function () {
         console.log("我可以改变形状")
     }
     game[methods.down] = function () {
         console.log("我可以快速的下降")
     }
     console.log(game)
 </script>
 <script>
     let youxi = {
         name: "懒人山",
         [Symbol('say')]: function () {
             console.log("我可以讲话");
         },
         [Symbol('zibao')]: function () {
             console.log("我可以zaibao");
         },
         [Symbol('eat')]: function () {
             console.log("我可以zaibao");
         }
     }
     console.log(youxi)
 </script>

3 symbol案例

 <script>
     class Person{
         static[Symbol.hasInstance](param){
             console.log(param)
             console.log("我被用来查看数据类型")
         }
     }
     let o={};
     console.log(o instanceof Person)
     const arr=[2,3,4,5,6]
     const arr1=[6,5,4,3,2,1]
     arr1[Symbol.isConcatSpreadable]=false
     console.log(arr.concat(arr1))
 </script>

4 Promise对象

 <!-- ! Promise1.html -->
 <script>
     // 实例化代码的对象  成功失败
     const p=new Promise(function(resolve,reject){
         setTimeout(function(){
             let err="数据库中的用户的数据失败"
             // resolve(err);
             reject(err)
         },1000)
     })
     // 调用函数的then方法
     p.then(function(value){
         console.log(p)
     },function(reason){
         console.error(reason)
     })

5 Promise对象

 <script>
     // const fs=require('fs')
     // fs.readFile('./resources/index.md',(err,data)=>{
         // if(err) throw err
         // console.log(data.toString())
     // })
     // 封装
     const p=new Promise(function(resolve,reject){
         fe.readFile("./resources/index.md",(err,data)=>{
             if(err) reject(err);
             resolve(data)
         })
     });
     p.then(function(value){
         console.log("成功")
     },function(reaso){
         console.log("失败")
     })

6 Promise对象

 const xhr=new XMLHttpRequest() 
 xhr.open("GET","https://api.apiopen.top/get")
 xhr.send();
 xhr.onreadystatechange=function(){
  // 判断
  if(xhr.readyState===4){
      // 响应代码
      if(xhr.status>=200&&xhr.status<300){
          console.log(xhr.response)
      }else{
          console.error(xhr.status)
      }
  }
 }

7 ForEarch函数

  <!--Es5  数组方法forEach遍历数组 -->
  <!-- 数组方法filter过滤数组 -->
  <script>
    var arr = [12, 66, 4, 88, 3, 7];
    arr.forEach(function(value, index, array) {
      //参数一是:数组元素
      //参数二是:数组元素的索引
      //参数三是:当前的数组
      console.log(`值${value}数组下标索引${index}当前的数组${array}`)
      var newArr = arr.filter(function(a, b, c) {
        return a > 10;
      })
      console.log(newArr)
    })
  </script>
  <!-- some 查找数组中是否有满足条件的元素 -->
  <script>
    var arr = [10, 30, 4];
    var flag = arr.some(function(value, index, array) {
      //参数一是:数组元素
      //参数二是:数组元素的索引
      //参数三是:当前的数组
      return value < 3;
    });
    console.log(flag); //false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
  </script>

8 案例一

<!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>
    <style>
        .item {
            height: 60px;
            width: 120px;
            border: 1px solid red;
            margin-left: 20px;
            float: left;
        }
    </style>
    <div class="container">
        <h2 class="page_header">点击切换色彩</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let itemsEl = document.getElementsByClassName("item");
        for (let i = 0; i < itemsEl.length; i++) {
            itemsEl[i].onclick = function () {
                // 修改背景色彩
                // this.style.background='green'
                itemsEl[i].style.background = 'green'
            }
        }
        // {
            // let i = 0;
            // itemsEl[i].onclick = function () {
                // 修改背景色彩
                // this.style.background='green'
                // itemsEl[i].style.background = 'green'
            // }
        // }
    </script>
</body>
</html>

9 迭代器

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-08 22:10:07
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-08 22:19:32
 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\迭代器.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
        // 声明的数组
        const xiyouji = ['A', 'B', 'C', 'D']
        // 使用 for of 遍历
        for (let v in xiyouji) {
            console.log(v)
        }
        for (let v of xiyouji) {
            console.log(v)
        }
        console.log(xiyouji)
        let iterator=xiyouji[Symbol.iterator]();
        console.log(iterator)
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
    </script>
</body>
</html>

10 自定义遍历数据

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-08 22:20:41
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-08 22:36:23
 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\自定义遍历数据.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEc
-->
<!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>
        // 声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                '张三',
                '李四',
                '赵武',
                '李留',
                '照片',
                '少年',
                'why',
            ],
            [Symbol.iterator]() {
                // 声明变量
                let index = 0;
                // 
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { vale: _this.stus[index], done: false };
                            index++;
                            return  result;
                        }else{
                            return{value:undefined,done:true}
                        }
                    }
                }
            }
        }
        // 遍历对象
        for (let v of banji) {
            console.log(v)
        }
    </script>
</body>
</html>

11 生成器1

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-08 22:39:52
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 14:43:00
 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\生成器.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
        function * gen(){
            console.log("Hellow world")
            yield'一只没有耳洞';
            console.log("111")
            yield'一只没有硬件';
            console.log("112")
            yield'一只挂钩';
            console.log("113")
            yield'一只自由';
            console.log("114")
        }
        let iteratoe=gen();
        // console.log(iteratoe)
        //返回的函数 
        console.log(iteratoe.next())
        console.log(iteratoe.next())
        console.log(iteratoe.next())
        console.log(iteratoe.next())
        console.log(iteratoe.next())
        // for(let v of gen()){
            // console.log(v)
        // }
    </script>
</body>
</html>

12 生成器案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <<!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>
        function* gen(arg) {
            console.log(arg);
            // yield 123;
            let one = yield 1111;
            console.log(one)
            let two = yield 456;
            console.log(two)
            let three=yield 789;
            console.log(three)
        }
        let iterator = gen("AAA")
        console.log(iterator.next())
        console.log(iterator.next("BBB"))
        console.log(iterator.next("CCCC"))
        console.log(iterator.next("DDDD"))
    </script>
</body>
</html>eta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 参数的使用 -->
    <script>
        function* gen(arg) {
            console.log(arg);
            // yield 123;
            let one = yield 1111;
            console.log(one)
            let two = yield 456;
            console.log(two)
            let three=yield 789;
            console.log(three)
        }
        let iterator = gen("AAA")
        console.log(iterator.next())
        console.log(iterator.next("BBB"))
        console.log(iterator.next("CCCC"))
        console.log(iterator.next("DDDD"))
    </script>
</body>
</html>

13 生成器案例3

 <script>
     // 模拟数据 用户数据 订单数据 商品数据
     function getUsers() {
         setTimeout(() => {
             let data = '用户的数据信息'
             iteratoe.next(data)
         }, 1000)
     }
     function getOrder() {
         setTimeout(() => {
             let data = '订单的数据信息'
             iteratoe.next(data)
         }, 1000)
     }
     function getGoods() {
         setTimeout(() => {
             let data = '商品的数据信息'
             iteratoe.next(data)
         }, 1000)
     }
     // 生成器的函数
     function* gen() {
        let userUser = yield getUsers();
        console.log(userUser)
        let userOrder=yield getOrder();
        console.log(userOrder)
        let userGoods =yield getGoods();
        console.log(userGoods)
     }
     // 调用生成器
     let iteratoe = gen();
     iteratoe.next();
 </script>

14 异步编程技术

<script>
    // 异步编程技术
    // 定时器的案例 生成器的的遍历
    // 回调的地域
    function one() {
        setTimeout(() => {
            console.log(11111)
            iteratoe.next();
        }, 1000)
    }
    function two() {
        setTimeout(() => {
            console.log(21111)
            iteratoe.next();
        }, 2000)
    }
    function three() {
        setTimeout(() => {
            console.log(31111)
            iteratoe.next();
        }, 3000)
    }
    function *gen(){
        yield one();
        yield two();
        yield three();
    }
    // 调用的生成器的函数
    let iteratoe=gen();
    iteratoe.next();
</script>

15 Map

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 16:21:36
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 17:14:58
 * @FilePath: \com.Html\JavaScript\JS高级Es6语法\JS中的的集合对象\Map.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
    <!-- MAP集合 -->
    <script>
        let m=new Map();
        m.set('name','上高速')
        m.set('reading',function(){
            console.log("YYDS")
        });
        // 增加
        let key={
            school:'ASDFG'
        };
        m.set(key,['山海','升职',"加强"])
        for(let v of m){
            console.log(m)
        }
        console.log(m)
        console.log(m.size)
        console.log(m.delete('name'))
        console.log(m.get(key))
        console.log(m.clear())
        console.log(m)
    </script>
</body>
</html>

16 Set

<script>
    // 声明的集合
    let e=new Set();
    let s2=new Set(["1+1","2+2","3+3","4+4","1+1"])
    // 去重
    console.log(e,typeof e)
    // 增加
    s2.add('5+5')
    console.log(s2.size);
    // console.log(s2)
    s2.delete('1+1')
    console.log(s2)
    // 测试
    console.log( s2.has("5+5"))
    console.log( s2.has("5+4"))
    // 清空
    // s2.clear();
    console.log(s2)
    for(let v of s2){
        console.log(v)
    }
    let arr=[1,2,3,4,5,6,7,8,9,0,0,1,2,1,2,3,4,5,5]
    // 数组的去重复
    let result=[...new Set(arr)];
    console.log(result)
    // 交集
    let arr2=[2,3,4,6,7,8];
    let rs=[...new Set(arr)].filter(item=>{
        let s2=new Set(arr2);
        if(s2.has(item)){
           return true
        }else{
            return false
        }
    })
    // 并集
    let user=[...new Set([...arr,...arr2])];
    console.log(user)
</script>

JS(第二十五课)ES6语法Symbol

1 ES6 第七中数据类型 Symbol

2 symbol表示独一无二的值

3 symbol案例

4 Promise对象

5 Promise对象

6 Promise对象

7 ForEarch函数

8 案例一

9 迭代器

10 自定义遍历数据

11 生成器1

12 生成器案例2

13 生成器案例3

14 异步编程技术

15 Map

16 Set

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JS(第二十五课)ES6语法Symbol

1 ES6 第七中数据类型 Symbol

2 symbol表示独一无二的值

3 symbol案例

4 Promise对象

5 Promise对象

6 Promise对象

7 ForEarch函数

8 案例一

9 迭代器

10 自定义遍历数据

11 生成器1

12 生成器案例2

13 生成器案例3

14 异步编程技术

15 Map

16 Set

热门文章

最新文章

相关课程

相关电子书

相关实验场景