68-解构赋值,迭代器,生成器函数,Symbol

1.解构赋值(针对数组array,字符串String及对象object以)

结构赋值是一种特殊的语法,通过将各种结构中的元素复制到变量中达到"解构"的目的,但是数组本身没有改变

1.1解构单层数组

    <script>
      let arr = [1,2,3,4,5];
      //获取数组中的第一个元素
      let ha = arr[0];
      //获取数组中的每一个元素
      //将数组arr中的元素一次赋值给变量a,b,c,d,e
      let [a,b,c,d,e] = arr;
      console.log(a,b,c,d,e);//输出1 2 3 4 5
      //取第3个值,数组中不想要的元素可以添加逗号把它丢弃
      let [a1,,c1] = arr;//等于let [,,c1] = arr;
      console.log(c1);//输出3
    </script>

1.2解构多层次的数组

    <script>
      let array = [[1,2,3],[4,5,6],[7,8,9]];
      //解构获取数组第3个元素的第2个元素
      let [,,[,b]] = array;
      console.log(b);//输出8
    </script>

1.3解构字符串类型String同上

    <script>
      let string = 'xyz';
      let [a,b,c] = string;
      console.log(a,b,c);//输出x y z
      [,,c] = string;
      console.log(c);//输出z
    </script>

1.4解构赋值对象Object

按对象中的属性名进行解构赋值,修改变量名

    <script>
      let obj = {
        name:'张三',
        age:18,
      };
      //按属性名进行解构
      let {name,age} = obj;
      console.log(name);//输出张三
      //修改变量名
      let {name:aaa,age:bbb} = obj;
      console.log(bbb);//输出18//aaa,bbb是重新声明的变量名称
    </script>

对已经存在的变量进行解构赋值

    <script>
      let obj = {
        name:'张三',
        age:18,
      };
      let name,age;
      //{name,age} = obj;//报错,语句被解析为对代码块进行赋值,代码块不允许被赋值
      ({name,age} = obj);//解决办法加一个()
      console.log(name,age);//输出 张三 18
    </script>

默认值属性值为undefined时默认值生效

    <script>
      let obj = {
        name:'张三',
        age:18,
      };
      let {name,age,_sex:sex='男'} = obj;
      console.log(name,age,sex);//输出 张三 18 男
      let abc = {
        name1:'李四',
        age1:'19',
        _sex1:'女',
      }
      let {name1,age1,_sex1:sex2='男'} = abc
      console.log(name1,age1,sex2);//输出 李四 19 女//默认值被覆盖
    </script>

嵌套解构赋值

    <script>
      let obj = {
        name:'张三',
        age:18,
        hobby:['足球'],//hobby是数组用[],作用是定位
      };
      let {name,hobby:[a]} = obj;
      console.log(name,a);//输出张三 足球
    </script>

2.迭代器

迭代器对象是由 可迭代协议([Symbol.iterator]方法) 和 迭代器协议(next方法) 构成

迭代器是一个对象,定义一个序列,并在终止时可能附带一个返回值;

2.1枚举for-in,会无序遍历对象里面的属性(没有办法自定义循环过程)

  <body>
    <script>
      let obj = {
        name:'zhangsan',
        age:19,
      };
      for(let index in obj){//index代表索引和属性
        console.log(index,obj[index]);
        //index代表所有属性名,obj[index]代表所有属性值
      }
    </script>

2.2可迭代协议

有一个[Symbol.iterator]方法,需要返回一个迭代器对象,具有唯一性

2.3迭代器协议

迭代器通过使用 next() 方法实现了迭代器协议的任何一个对象,该方法返回具有两个属性对象

value:迭代的值;

done:是否迭代完完成;(ture迭代完成)(false迭代完成)

2.4迭代for-of,自定义遍历过程 

    <script>
      let obj = {
        //obj是一个迭代器对象,因为里面拥有一个next方法并且返回了一个值
        name: "zhangsan",
        age: 19,
        count: 5,
        //可迭代协议 条件1
        [Symbol.iterator]: function () {  
          return this;//返回迭代器对象 条件2
        },
        //迭代器协议 条件1
        next() {
          if (this.count > 0) {
            return { value: this.count--, done: false };//迭代器协议 条件2
          }else{
            return{value:0,done:true};
          }
        },
      };
      //迭代
      for (let item of obj) {
        console.log(item);//输出5 4 3 2 1//item拿到的是if里面value的值
      }
    </script>

3.生成器函数

生成器对象(generator)是由一个generator function返回的,它同时符合可迭代协议和迭代器协议

 生成器函数是一种特殊类型的函数,它返回一个生成器对象,这个对象可以用来实现可迭代对象。它可以使用特殊的语法来控制生成器对象的输出,实现按需生成值序列,避免一次性生成大量的值,减少了内存的使用(都是为了构建可迭代对象,自定义迭代过程)

3.1生成器函数定义使用function*关键字,语法如下:

function* generator() {
  // 函数体
}
    <script>
      function*  generator(){
        console.log('run1');
        //return默认返回undefined
      }
      //调用生成器函数,返回生成器对象,--此时生成器函数的代码块并不执行
      
      let g = generator();//g是一个生成器对象
      console.log(g);
      
      g.next();//调用生成器函数当中的next()方法//此时生成器函数当中的代码块开始执行
      let r = g.next();
      console.log(r);//输出结果如下
    </script>

 3.2yield关键字,暂停代码执行,并将后面的值返回

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

3.3结束迭代.return()

    <script>
      function*  generator(){
        yield 1;
        yield 2;
        yield 3;
      }
      let g = generator();
      let r1 = g.next();
      g.return();
      let r2 = g.next();
      let r3 = g.next();
      console.log(r1,r2,r3);//{value: 1, done: false}
                            //{value: undefined, done: true}
                            //{value: undefined, done: true}
    </script>

3.4生成器函数的应用

yield*(展开可得迭代对象)

    <script>
      let obj = {
        name:'张三',
        age:18,
        sex:'男',
        *[Symbol.iterator](){
          yield [this.name,this.age,this.sex];//['张三', 18, '男']
          //yield this.name;
          //yield this.age;
          //yield this.sex;简约写法
          yield* [this.name,this.age,this.sex];
        },
      };
      //迭代对象
      for(const item of obj){
        console.log(item);
      }
    </script>

 内嵌式对象应用

    <script>
      let obj = {
        hobbies:['篮球','足球','品胖球'],
        *[Symbol.iterator](){
          //Object.values()是Object对象中的静态方法
          //返回对象自身的所有可枚举属性值的数组
          yield* Object.values(this);//和下行两种写法输出结果相同
          yield* [this.hobbies];
        },
      };
      for(const item of obj){
        console.log(item);
      }
    </script>

4.Symbol

一种基本的数据类型,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法。

Symbol不支持语法new Symbol();

4.1每个从Symbol返回的值都是唯一的,如有需要可以使用new Object(Symbol())

  <body>
    <script>
      let s1 = Symbol(1);
      let s2 = Symbol(1);
      //let s3 = new Symbol();//报错。不允许直接实例化
      console.log(s1 == s2);//false//产生一个唯一的值和其他值不等,和自身相等
      //把Symbol转换成对象
      let s4 = new Object(s1);
      console.log(s1,typeof s1);
      console.log(s4,typeof s4);
    </script>

4.2全局共享的Symbol 

Symbol.for()用于全局注册Symbol,存在则取值,不存在则创建

Symbol.keyFor()用于获取全局注册的Symbol的key

    <script>
      //键位a的Symbol值,是否存在全局注册表中,不存在则创建
    let s1 = Symbol.for('a');//创建
    let s2 = Symbol.for('b');
    let s3 = Symbol.for('c');
    console.log(s1,s2,s3);//Symbol(a) Symbol(b) Symbol(c)

    //键位a的Symbol值是否存在全局注册表中,存在则取值,返回Symbol值
    let s4 = Symbol.for('a');
    console.log(s4 == s1);//ture
    //根据Symbol 值获取key值
    let k1 = Symbol.keyFor(s1);
    console.log(k1);//a
    </script>

4.3内置的Symbol属性应用

Symbol.iterator用于定义对象的默认遍历器

Symbol.hasInstance用于判断对象是否为某个机构赞函数的事例

Symbol.isConcatSpreadable用于判断对象是否可以展开

    <script>
      let arr1 = [1,2,3,4,5];
      let arr2 = ['a','b','c','d','e'];
      // let arr3 = arr1.concat(arr2);
      // console.log(arr3);//[1, 2, 3, 4, 5, 'a', 'b', 'c', 'd', 'e']
      arr2[Symbol.isConcatSpreadable] = false;//关闭展开
      let arr3 = arr1.concat(arr2);
      console.log(arr3);//[1, 2, 3, 4, 5, Array(5)]
    </script>

Symbol.spacies用于指定对象的构造函数

Symbol.split指向一个正则表达式的索引处分割字符串的方法,这个方法通过String.prototype.split()​​​​​​​调用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/425083.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【微服务】微服务中常用认证加密方案总结

目录 一、前言 二、登录认证安全问题 3.1 认证方式选择 三、常用的加密方案 3.1 MD5加密算法 3.1.1 md5特点 3.1.2 md5原理 3.1.3 md5使用场景 3.2 AES加密算法 3.2.1 AES简介 3.2.2 AES加解原理 3.2.3 AES算法优缺点 3.2.4 AES算法使用场景 3.3 RSA加密算法 3.3…

【每日一题】找到字符串中所有字母异位词

目录 题目&#xff1a;思路&#xff1a;暴力枚举&#xff1a;滑动窗口&#xff1a; 代码实现&#xff1a;一些优化&#xff1a;代码实现&#xff1a; 题目&#xff1a; 找到字符串中所有字母异位词 思路&#xff1a; 暴力枚举&#xff1a; 对于有关子串的题目我们使用暴力枚…

1.2 在卷积神经网络中,如何计算各层感受野的大小

1.2 在卷积神经网络中&#xff0c;如何计算各层感受野的大小 分析与解答&#xff1a; 在卷积神经网络中&#xff0c;由于卷积的局部连接性&#xff0c;输出特征图上的每个节点的取值&#xff0c;是由卷积核在输入特征图对应位置的局部区域内进行卷积而得到的&#xff0c;因此这…

Sora惊艳出世,AI能否给人类带来新的“视界”?

2月16日&#xff0c;OpenAI公司公布了其首个文生视频大模型Sora&#xff0c;同时展示了多个由Sora生成的最长时间达一分钟的视频&#xff0c;引起科技圈震动。 钢铁侠马斯克对其发出“人类愿赌服输”的感叹&#xff0c;360董事长周鸿祎也作出“Sora意味着AGI实现将从10年缩短到…

【探索Linux】—— 强大的命令行工具 P.24(网络基础)

阅读导航 引言一、计算机网络背景1. 网络发展历史 二、认识 "协议"1. 网络协议概念2. 网络协议初识&#xff08;1&#xff09;协议分层&#xff08;2&#xff09;OSI参考模型&#xff08;Open Systems Interconnection Reference Model&#xff09;&#xff08;3&…

k8s-kubeapps图形化管理 21

结合harbor仓库 由于kubeapps不读取hosts解析&#xff0c;因此需要添加本地仓库域名解析&#xff08;dns解析&#xff09; 更改context为全局模式 添加repo仓库 复制ca证书 添加成功 图形化部署 更新部署应用版本 再次进行部署 上传nginx 每隔十分钟会自动进行刷新 在本地仓库…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的教室人员检测与计数(Python+PySide6界面+训练代码)

摘要&#xff1a;开发教室人员检测与计数系统对于优化教学资源和提升教学效率具有重要意义。本篇博客详细介绍了如何利用深度学习构建此系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5的性能&#xff0c;展示…

vue2本地开发环境正常,生产环境下this.$router.push({ name: ‘login‘ })不跳转

如果在Vue.js 2中在本地开发环境下正常运行,但在生产环境下使用​​this.$router.push({ name: login })​​不起作用,可能有几个原因需要检查和解决: 路由配置问题: 确保你的路由配置正确,特别是确保在生产环境中,路由的配置和本地开发环境一致。检查是否正确设置了name…

以目标检测和分类任务为例理解One-Hot Code

在目标检测和分类任务中&#xff0c;每一个类别都需要一个编码来表示&#xff0c;同时&#xff0c;这个编码会用来计算网络的loss。比如有猫&#xff0c;狗&#xff0c;猪三种动物&#xff0c;这三种动物相互独立&#xff0c;在分类中&#xff0c;将其中任意一种分类为其他都同…

【大数据Hive】hive 多字段分隔符使用详解

目录 一、前言 二、hive默认分隔符规则以及限制 2.1 正常示例&#xff1a;单字节分隔符数据加载示例 2.2 特殊格式的文本数据&#xff0c;分隔符为特殊字符 2.2.1 文本数据的字段中包含了分隔符 三、突破默认限制规则约束 3.1 数据加载不匹配情况 1 3.2 数据加载不匹配…

力扣 第 125 场双周赛 解题报告 | 珂学家 | 树形DP + 组合数学

前言 整体评价 T4感觉有简单的方法&#xff0c;无奈树形DP一条路上走到黑了&#xff0c;这场还是有难度的。 T1. 超过阈值的最少操作数 I 思路: 模拟 class Solution {public int minOperations(int[] nums, int k) {return (int)Arrays.stream(nums).filter(x -> x <…

Premiere Pro:视频制作的瑞士军刀,让创意飞翔!

Premiere Pro&#xff0c;由Adobe公司推出的专业非线性视频编辑软件&#xff0c;已成为众多视频制作人员的首选工具。其功能之强大、操作之便捷&#xff0c;为视频制作带来了革命性的改变。 首先&#xff0c;Premiere Pro支持多种视频格式的导入和编辑&#xff0c;从剪辑、修剪…

【微服务】在Java体系中SpringCloud和SpringCloud Alibaba各通过哪些具体组件来实现微服务架构呢?

前面我们介绍了微服务架构的各个组件以及各组件的职责&#xff0c;在Java领域中&#xff0c;Spring可以说是无人不知无人不晓的&#xff0c;我们现代的企业级应用和互联网应用&#xff0c;很大一部分都是构建在Spring生态体系上的&#xff0c;同样&#xff0c;实现微服务架构的…

Redis常用指令,jedis与持久化

1.redis常用指令 第一个是key的常用指令&#xff0c;第二个是数据库的常用指令 前面的那些指令都是针对某一个数据类型操作的&#xff0c;现在的都是对所有的操作的 1.key常用指令 key应该设计哪些操作 key是一个字符串&#xff0c;通过key获取redis中保存的数据 对于key…

GCN原理回顾论文导读

Cora_dataset description Cora数据集是一个常用的学术文献用网络数据集&#xff0c;用于研究学术文献分类和图网络分析等任务。 该数据集由机器学习领域的博士论文摘要组成&#xff0c;共计2708篇论文&#xff0c;涵盖了7个不同的学科领域。每篇论文都有一个唯一的ID&#xf…

c++之旅——第四弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 本篇文章的主…

【css面试题】BFC

参考文章1 参考文章2 什么是BFC BFC全称是Block Formatting Context&#xff0c;意思就是块级格式化上下文。你可以把BFC看做一个容器&#xff0c;容器里边的元素不会影响到容器外部的元素。 BFC的特性 BFC是一个块级元素&#xff0c;块级元素在垂直方向上依次排列。 BFC是…

QT 网络编程 8

1 基础知识 udp tcp 2 UDP 框架 客户端: QUdpSocket x; qint64 writeDatagram( const char *data, qint64 size, const QHostAddress &address, quint16 port );服务器: void Server::initSocket(){udpSocket new QUdpSocket(this);udpSocket->bind(QHostAddress…

【Redis | 第七篇】Redis过期策略、内存淘汰策略

文章目录 7.Redis过期策略、内存淘汰策略7.1过期策略7.2内存淘汰策略 7.Redis过期策略、内存淘汰策略 7.1过期策略 我们在set key的时候&#xff0c;可以给它设置一个过期时间&#xff0c;比如expire key 60。指定这key60s后过期。 60s后&#xff0c;redis是如何处理的嘛&am…

性别和年龄的视频实时监测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 性别和年龄检测 Python 项目 首先介绍性别和年龄检测的高级Python项目中使用的专业术语 什么是计算机视觉&#xff1f; 计算机视觉是使计算机能…