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.rhkb.cn/news/299623.html

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

相关文章

NASA数据集——北美地区永久冻土影响的冻原和北方生态系统内发生的土壤呼吸作用产生的二氧化碳(CO2)排放量(300 米的空间分辨率)

Soil Respiration Maps for the ABoVE Domain, 2016-2017 简介 文件修订日期:2022-04-20 数据集版本: 1 摘要 该数据集以 300 米的空间分辨率提供了 2016-08-18 至 2018-09-12 期间阿拉斯加和加拿大西北部受永久冻土影响的冻原和北方生态系统内发生的土壤呼吸作…

基于Springboot学生就业管理系统

采用技术 基于Springboot学生就业管理系统的设计与实现~ 开发语言:Java 数据库:MySQL 技术:SpringBootMyBatis 工具:IDEA/Ecilpse、Navicat、Maven 页面展示效果 前台功能 网站首页 学生注册 企业招聘 求职信息 个人中心…

4.1 JavaScript的使用

JavaScript有两种使用方式:一是在HTML文档中直接添加代码;二是将JavaScript脚本代码写到外部的JavaScript文件中,再在HTML文档中引用该文件的路径地址。 这两种使用方式的效果完全相同,可以根据使用率和代码量选择相应的开发方式。…

深度学习500问——Chapter05: 卷积神经网络(CNN)(4)

文章目录 5.18 卷积神经网络凸显共性的方法 5.18.1 局部连接 5.18.2 权值共享 5.18.3 池化操作 5.19 全连接、局部连接、全卷积与局部卷积 5.20 局部卷积的应用 5.21 NetVLAD池化 参考文献 5.18 卷积神经网络凸显共性的方法 5.18.1 局部连接 我们首先了解一个概念&#xff0c…

linux基础篇:Linux中磁盘的管理(分区、格式化、挂载)

Linux中磁盘的管理(分区、格式化、挂载) 一、认识磁盘 1.1 什么是磁盘 磁盘是一种计算机的外部存储器设备,由一个或多个覆盖有磁性材料的铝制或玻璃制的碟片组成,用来存储用户的信息,这种信息可以反复地被读取和改写…

Appium如何自动判断浏览器驱动

问题:有的测试机chrome是这个版本,有的是另一个版本,怎么能让自动判断去跑呢?? 解决办法:使用appium的chromedriverExecutableDir和chromedriverChromeMappingFile 切忌使用chromedriverExecutableDir和c…

mysql dublewrite 双写缓存机制

mysql dublewrite 双写缓存机制,像不像主板双bois系统, 在MySQL的InnoDB存储引擎中,当进行数据写操作时,会先将数据写入到内存中的缓冲池(Buffer Pool),然后异步刷新到磁盘上的数据文件。为了提…

YoloV8实战:使用YoloV8实现水下目标检测(RUOD)

摘要 水下目标检测技术在生态监测、管道检修、沉船捕捞等任务中发挥着重要作用。常用的检测方法包括高清视像、侧扫声呐等。光学图像检测因高分辨率和灵活性,在近距离检测中优势显著。但水下图像受水体吸收、衰减、光源分布等影响,呈现蓝绿色&#xff0…

第十四届蓝桥杯省赛大学C组(C/C++)填充

原题链接:填充 有一个长度为 n 的 01 串,其中有一些位置标记为 ?,这些位置上可以任意填充 0 或者 1,请问如何填充这些位置使得这个 01 串中出现互不重叠的 0 和 1 子串最多,输出子串个数。 输入格式 输入一行包含一…

Windows应急响应

1.排查隐藏账号 查看注册表 找到攻击者用户目录文件 排查用户异常 eventvwr.msc 分析用户登录日志 排查可疑端口 排查可疑进程 检查启动项、计划任务和服务 查看系统补丁信息 安装火绒,在安全工具里有火绒剑 计划任务 使用D盾对主机进行检测,发现隐藏账户…

面试题——JVM老年代空间担保机制(我的想法)

这里借用一下人家的图,来说一下我的想法,嘻嘻。。。。 原文链接:一道面试题:JVM老年代空间担保机制-CSDN博客? 嗯,我觉得老年代担保机制的主要作用就是避免频繁触发FULL GC,这其实也是因为年轻代Minor GC…

【C++】背包问题

目录 背包问题01 背包背包不装满问题背包必须满问题 完全背包 背包问题 背包问题属于动态规划的一类题型 01 背包 背包不装满问题 背包必须满问题 #include <iostream> using namespace std; const int N 1010; #include <vector> int main() {int n , V;int v[…

短视频素材去哪里找?短视频素材app排名

继续探索世界各地优质的视频素材网站&#xff0c;为您的视频创作注入新的活力和灵感。以下网站精选旨在提供多样化、高质量的视频资源&#xff0c;帮助您的作品更加出色和引人注目。 1&#xff0c;蛙学府&#xff08;中国&#xff09; 精选高质量视频素材&#xff0c;为创意项…

docker安装sentinel

文章目录 前言安装docker指令安装制作docker-compose.yaml文件 查看网站 前言 Sentinel 是阿里巴巴开源的一款轻量级流量控制和熔断降级工具&#xff0c;可用于保护分布式系统中的服务。它可以帮助开发人员解决在分布式架构中面临的流量管理、服务保护、性能优化等问题。 安装…

linux之文件系统、inode和动静态库制作和发布

一、背景 1.没有被打开的文件都在磁盘上 --- 磁盘级文件 2.对磁盘级别的文件&#xff0c;我们的侧重点 单个文件角度 -- 这个文件在哪里&#xff0c;有多大&#xff0c;其他属性是什么&#xff1f; 站在系统角度 -- 一共有多少文件&#xff1f;各自属性在哪里&#xff1f…

GitLab 新项目创建和使用

一、下载 Git 客户端 Git - Downloading Package (git-scm.com) 二、打开 Git Bash 配置 gitlab 账户 下面的信息可以登录gitlab查看 git config --global user.name "yourname"git config --global user.email "youremailXX.com" 生成ssh_key ssh-k…

【Spring】AOP——使用@around实现面向切面的方法增强

工作业务中&#xff0c;有大量分布式加锁的重复代码&#xff0c;存在两个问题&#xff0c;一是代码重复率高&#xff0c;二是容易产生霰弹式修改&#xff0c;使用注解和AOP可以实现代码复用&#xff0c;简化分布式锁加锁和解锁流程。 around注解是AspectJ框架提供的&#xff0c…

leetcode 13. 罗马数字转整数

代码&#xff1a; class Solution(object):def romanToInt(self, s):""":type s: str:rtype: int"""dict1 {I:1,V:5,X:10,L:50,C:100,D:500,M:1000}nums 0t len(s)i 0while i<t :if s[i]I:if i1 t:numsdict1.get(s[i])i1else:if s[i1] V…

关于C#操作SQLite数据库的一些函数封装

主要功能&#xff1a;增删改查、自定义SQL执行、批量执行&#xff08;事务&#xff09;、防SQL注入、异常处理 1.NuGet中安装System.Data.SQLite 2.SQLiteHelper的封装&#xff1a; using System; using System.Collections.Generic; using System.Data.SQLite; using System.…

【云计算】云数据中心网络(一):VPC

云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC 1.什么是 VPC2.VPC 的组成2.1 虚拟交换机2.2 虚拟路由器 3.VPC 网络规划3.1 VPC 数量规划3.2 交换机数量规划3.3 地址空间规划3.4 不同规模企业地址空间规划实践 4.VPC 网络高可靠设计4.1 单地域单可用区部署4.2 单地…