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

news2024/9/28 9:31:14

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()​​​​​​​调用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++之queue和deque

1、queue queue&#xff08;队列&#xff09;&#xff0c;一种数据结构&#xff0c;可以让某些数据结构的操作变得简单。队列&#xff08;queue&#xff09;最大的特点就是先进先出。就是说先放入queue容器的元素一定是要先出队列之后&#xff0c;比它后进入队列的元素才能够出…

【python】遵守 robots.txt 规则的数据爬虫程序

程序1 编写一个遵守 robots.txt 规则的数据爬虫程序涉及到多个步骤&#xff0c;包括请求网页、解析 robots.txt 文件、扫描网页内容、存储数据以及处理异常。由于编程语言众多&#xff0c;且每种语言编写爬虫程序的方式可能有所不同&#xff0c;以下将使用 Python 语言举例&am…

Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图…

Topaz Gigapixel AI:让每一张照片都焕发新生mac/win版

Topaz Gigapixel AI 是一款革命性的图像增强软件&#xff0c;它利用先进的人工智能技术&#xff0c;能够显著提升图像的分辨率和质量。无论是摄影爱好者还是专业摄影师&#xff0c;这款软件都能帮助他们将模糊的、低分辨率的照片转化为清晰、细腻的高分辨率图像。 Topaz Gigap…

每日五道java面试题之mysql数据库篇(三)

目录&#xff1a; 第一题. 百万级别或以上的数据如何删除&#xff1f;第二题. 前缀索引第三题. 什么是最左前缀原则&#xff1f;什么是最左匹配原则?第四题. B树和B树的区别第五题. 使用B树和B树好处 第一题. 百万级别或以上的数据如何删除&#xff1f; 关于索引&#xff1a;…

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

目录 一、前言 二、登录认证安全问题 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…

【IDEA+通义灵码插件】实现属于你的大模型编程助手

目录 1.前言 2.下载安装 3.解释代码 4.生成单元测试 5.生成注释 6.智能补全 1.前言 大模型到底该以一种什么方式落地&#xff0c;从而嵌入我们的工作当中&#xff0c;助力我们工作效率的提升&#xff0c;其实最好的方式也许就是虚拟助手的方式&#xff0c;就像钢铁侠的&…

无极低码:无极低码部署版操作指南

无极低码 &#xff1a;https://wheart.cn 无极低码是一个面向开发者的工具&#xff0c;旨在为开发者、创业者或研发企业&#xff0c;提供快速&#xff0c;高效&#xff0c;标准化&#xff0c;可定制&#xff0c;私有化部署的平台&#xff0c;在兼顾开发速度的同时&#xff0c;兼…

ChemDraw Pro 2022:呈现专业化学绘图的极 致之作 mac/win版

PerkinElmer ChemDraw Pro 2022是一款功能强大的化学绘图软件&#xff0c;专为化学家、科研工作者和教育者设计。这款软件凭借其卓越的性能和丰富的功能&#xff0c;已经成为化学绘图领域的领导者。 PerkinElmer ChemDraw Pro 2022软件获取 ChemDraw Pro 2022提供了广泛的化学…

可重入锁-隐式锁与显式锁

可重入锁 隐式锁&#xff08;即synchronized关键字使用的锁&#xff09;&#xff0c;默认是可重入锁 在一个synchronized修饰的方法或者代码块的内部调用本类的其他synchronized修饰的方法或者代码块时&#xff0c;是永远可以得到锁。 显式锁&#xff08;即Lock&#xff09;也…

【yolov8部署实战】VS2019环境下使用Onnxruntime环境部署yolov8目标检测|含源码

一、前言 部署yolo项目&#xff0c;是我这几个月以来做的事情&#xff0c;最近打算把这几个月试过的方法&#xff0c;踩过的坑&#xff0c;以博客的形式&#xff0c;分享一下。关于下面动态中讲到的如何用opencv部署&#xff0c;我在上一篇博客中已经详细讲到了&#xff1a;【…

【C++】const成员

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. const成员3. 取地址及const取地址操作符重载 1. 前言 在之前已经已经分享过了关于 【C】类和对象之常引用与运算符重载&#xff0c;这次分享的有关const的内容&#xff0c;话不多说&#xff0c;正文开始。…

Mybatis 框架 基础语法

Mybtais 中文网站 Maven 仓库 考点&#xff1a; SQL 注入 #{}最终生成预编译sql&#xff0c;预编译Sql语句中?替换#{}内容 一个#{} 替换一个? 在模糊查询时要使用 &#xff0c; ′ {}&#xff0c;% &#xff0c;′{}%’ &#xff0c;因为&#xff1f;不能出现在‘’中&…

2024最新算法:鹦鹉优化算法(Parrot optimizer,PO)求解23个基准函数

一、鹦鹉优化算法 鹦鹉优化算法&#xff08;Parrot optimizer&#xff0c;PO&#xff09;由Junbo Lian等人于2024年提出的一种高效的元启发式算法&#xff0c;该算法从驯养的鹦鹉中观察到的觅食、停留、交流和对陌生人行为的恐惧中汲取灵感。这些行为被封装在四个不同的公式中…

2024年自动化测试五大趋势

目录 2024年QA自动化趋势&#xff1a;塑造软件开发的未来 1.自动化测试中的AI和ML集成 2.DevOps中的持续测试 3.无代码自动化工具的使用 4.更加重视安全测试 5.定制化测试解决方案 有效实施2024年QA自动化趋势 1.集成AI和ML实现更智能的测试 2.在敏捷和DevOps文化中嵌入…

5.STL源码解析-算法、仿函数、适配器

算法 STL算法总览 仿函数与适配器 C标准模板库&#xff08;STL&#xff09;是C程序员的得力工具&#xff0c;提供了许多强大而高效的数据结构和算法。在STL中&#xff0c;仿函数&#xff08;Functor&#xff09;和适配器&#xff08;Adapter&#xff09;是两个重要的概念…

windows上elasticsearch的ik分词器的安装

下载 下载地址 在elasticsearch下的plugins文件夹下创建ik的文件夹 下载的ik压缩包解压到plugins/ik 重启elasticsearch 验证 http://ip:9200/_cat/plugins

OSCP靶场--Squid

OSCP靶场–Squid 考点(1.squid代理绕过 2.phpmyadmin写webshell 3.受限服务账户【LOCAL SERVICE或NETWORK SERVICE】恢复特权 4.SeImpersonatePrivilege提权) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.188.189 --min-rate 2000 Starti…

05-Linux部署MySQL

Linux部署MySQL 在今后的使用过程中&#xff0c;需要频繁使用Linux系统&#xff0c;所以在Linux上安装软是必不可少的操作 。 前置要求 需要学习前四章知识&#xff0c;初识Linux、Linux基础命令、Linux权限管理、Linux高阶技巧这4个章节。需要开启多态虚拟机&#xff0c;电…

LeetCode 热题 100 | 图论(三)

目录 1 前缀树 1.1 什么是前缀树 1.2 如何构建前缀树 2 208. 实现 Trie&#xff08;前缀树&#xff09; 菜鸟做题&#xff0c;语言是 C 1 前缀树 1.1 什么是前缀树 前缀树&#xff0c;也被称作字典树&#xff08;Trie&#xff09;或者键树&#xff0c;是一种用于检…