JavaScript权威指南(第7版) 笔记 - 扩展操作符总结

扩展操作符 ... ,不是真正意义上的JavaScript操作符。

let str = "0123ABC"
console.log(typeof ...str);// Uncaught SyntaxError: Unexpected token '...' 

上面的第2行代码会报错,扩展操作符 ... 只能在数组字面量、对象字面量、函数调用中使用。

在函数定义中, ... 称为剩余参数

.

一、扩展数组,复制数组内容

在数组中进行扩展,扩展的结果就是数组元素的形式

let a = [1, 2, 3];
let b = [0, ...a, 4];  // [0, 1, 2, 3, 4]

在对象中进行扩展,扩展的结果就是对象中属性-值的形式。
JavaScript中的数组是一种特殊的对象,索引是它的属性,索引位置的值是属性对应的值。

let a = [1, 2, 3];
let obj = {...a};  // {0: 1, 1: 2, 2: 3}

二、扩展普通对象,复制对象内容

⚠️(ES2018及之后版本)⚠️

在ES2018及之后,可以在对象字面量中使用“扩展操作符”…把已有对象的 属性和值 复制到新对象中:

let position = { x: 0, y: 0 };
let dimensions = { width: 100, height: 75 };
let rect = { ...position, ...dimensions }; // {x: 0, y: 0, width: 100, height: 75}
rect.x + rect.y + rect.width + rect.height // => 175

1、同名属性的值由后面对象决定

扩展对象和被扩展对象有一个同名属性,那么这个属性的值由后面的对象决定

let o = { x: 1 };
let p = { x: 0, ...o };
p.x   // => 1: the value from object o overrides the initial value
let q = { ...o, x: 2 };
q.x   // => 2: the value 2 overrides the previous value from o.

1.2、只扩展对象的自有属性

扩展操作符只扩展对象的自有属性,不扩展任何继承属性:

let o = Object.create({x: 1}); // o inherits the property x
let p = { ...o };
p.x                            // => undefined

三、扩展可迭代对象

可扩展迭代对象有:

  1. 字符串
  2. 数组
  3. Set
  4. Map

(1)扩展字符串

字符串也是可迭代对象

let str = "0123ABC"
let digits = [...str];
digits 	// => ['0', '1', '2', '3', 'A', 'B', 'C']
let obj = {...str}
obj 	// =>  {0: '0', 1: '1', 2: '2', 3: '3', 4: 'A', 5: 'B', 6: 'C'}

⚠️⚠️⚠️ 注意:扩展扩展到数组和扩展到对象的区别。

(2)扩展数组

参考:一、扩展数组

(3)扩展Set

let s = new Set();
s.add(1).add("1").add(1).add(2).add(3);
let arr = [...s]; // [1, '1', 2, 3]
let obj = {...s}; // {} ,空对象

(4)扩展Map

let m = new Map(); 
m.set("one", 1);   
m.set("two", 2);
let arr = [...m]; // [['one', 1], ['two', 2]]
let obj = {...m}; // {}

四、函数调用中使用扩展操作符

函数调用中使用扩展操作符,一般需要和剩余形参配合使用。如果形参不是剩余参数类型,则根据形参依次获取数组中的值。

⭐️⭐️⭐️ 在函数调用中使用扩展操作符,本质上传递的是数组类型的值。

(1)函数调用中使用扩展操作符,配合剩余参数使用

let str = "0123ABC"
console.log(getType(...str));// => object ,实际类型是数组,见下图1let set = new Set();
set.add(1).add(2).add(3);
console.log(getType(...set));// => object ,实际类型是数组,见下图2function getType(...p) {console.log("v:", p);return (typeof p);
}

图1:
在这里插入图片描述
图2:
在这里插入图片描述

(2)函数调用中使用扩展操作符,未配合剩余参数使用

let str = "0123ABC"
console.log(getType(...str));// => stringfunction getType(p) {console.log("v:", p);// v:'0'return (typeof p);
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟主机、VPS主机和云服务器的区别

对于每个建站新手来说,首先要解决的就是服务器购买的问题,目前市面有很多类型的服务器,常见的有:阿里云、腾讯云、Vultr云服务器,也有RackNerd、Cloudways等提供的VPS,还有SiteGround、ChemiCloud 、 Hosti…

selenium 遮罩层

之前写智联自动投简历 和boss自动投简历的时候 发现操作到上限之后就有个遮罩层,会在当前页面有个顶层得div 没办法获取下面的内容 # 假设遮罩层元素有一个特定的ID或者其他属性 没有id xpath 或者class 都可以mask_element WebDriverWait(driver, 10).until(EC.…

SV学习笔记(七)

类型转换 写在前面 类型转换可以分为 静态转换和动态转换 。静态转换即需要在转换的表达式前 加上单引号 即可,该方式并不会对转换值做检查。如果发生转换失败,我们也无从得知。动态转换即需要使用 系统函数$cast(tgt, src) 做转换。静态转…

python文件打包找不到文件路径

引用:【将Python代码打包成exe可执行文件】 https://www.bilibili.com/video/BV1P24y1o7FY/?p4&share_sourcecopy_web&vd_sourced5811f31a0635dfc69a182c7bf1adb8b 在代码中,我们想读取文件a,一般使用如下方法。 import osdir os…

如何保护大模型API安全

大模型的崛起正在改变着我们对机器学习和人工智能的理解,它们不仅提供了令人惊叹的预测和分析能力,还在各行各业的应用中发挥着重要作用。通过提供 API,用户无需了解底层实现细节,使大型模型能够更好地与用户和应用程序进行交互&a…

13 - 关于存储器读写的问题

---- 整理自B站UP主 踌躇月光 的视频 1. 存储器存在的问题 前面章节存储器存在问题,读取和写入分开,会造成读写冲突,所以设计要改成写时没法读。 1.1 单字节存储器 片选 CS1,WE1 时,EN0,写入 片选 CS1&am…

Unknown redis exception; event execu tor terminated;解决

最近查看服务器日记是不是报发现有台服务器报错: rocessing failed; nested exception is org.springframework.data.redis.RedisSystemException: Unknown redis exception; nested exception is java.util.concurrent.RejectedExecutionException: event execu …

深入理解计算机系统 家庭作业 2.90

查一下书本的82页图2-36的表就行了 float u2f(unsigned u) {return *(float *) &u; }float fpwr2(int x) {unsigned exp, frac;unsigned u;// 小于最小的非规格化数if (x < -149) {exp 0;frac 0;}// 非规格化数else if (x < -126) {exp 0;frac 1 << (x 1…

文件夹批量重命名,高效翻译支持中文转日语,轻松管理文件

在信息爆炸的时代&#xff0c;我们每天都在与大量的文件打交道。你是否曾为如何高效管理这些文件而苦恼&#xff1f;是否曾在中文与日语文件之间转换时感到无助&#xff1f;今天&#xff0c;我要为大家介绍一款神奇的工具——文件批量改名高手&#xff0c;它能帮助你批量重命名…

Linux:权限篇

文章目录 前言1.用户2.文件的权限管理2.1 修改文件的权限2.2 修改文件的拥有者2.3 修改文件的所属组 3.file指令4.umask指令4.目录的权限管理总结 前言 Linux权限在两个地方有所体现&#xff0c;一种是使用用户&#xff1a;分为root超级用户员与普通用户。另一个是体现在文件的…

简单介绍css及其代码样式

css简介 css用于前端开发&#xff0c;负责对界面进行美化。让页面更美观。 他可以改变html代码的样式&#xff0c;让html代码的网页不那么死板。 css代码格式 选择器 {属性:值; 属性:值&#xff1b;} css的模版架构 css代码放到<style>标签中。 而<style>通常是…

网络原理 - HTTP / HTTPS(5)——https协议

目录 一、HTTPS是什么 为什么要进行加密 二、“加密” 是什么 三、HTTPS的工作过程 &#xff08;1&#xff09;引入对称加密 对称密钥的特点&#xff1a; &#xff08;2&#xff09;引入非对称加密 非对称加密的特点&#xff1a; &#xff08;3&#xff09;中间人攻击…