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.mzph.cn/news/795360.shtml

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

相关文章

C语言中的字符与字符串:魔法般的函数探险

前言 在C语言的世界里,字符和字符串是两个不可或缺的元素,它们像是魔法般的存在,让文字与代码交织出无限可能。而在这个世界里,有一批特殊的函数,它们如同探险家,引领我们深入字符与字符串的秘境&#xff0…

Linux:进程等待究竟是什么?如何解决子进程僵尸所带来的内存泄漏问题?

Linux:进程等待究竟是什么?如何解决子进程僵尸所带来的内存泄漏问题? 一、进程等待的概念二、进程等待存在的意义三、如何进行进程等待3.1 wait()是实现进程等待1、wait()原型2. 验证wait()能回收僵尸子进程的空间 3.2 waitpid()实现进程等待…

560.和为K的子数组

560.和为K的子数组 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入&#xf…

Win10 下 git error unable to create file Invalid argument 踩坑实录

原始解决方案参看:https://stackoverflow.com/questions/26097568/git-pull-error-unable-to-create-file-invalid-argument 本问题解决于 2024-02-18,使用 git 版本 2.28.0.windows.1 解决方案 看 Git 抛出的出错的具体信息,比如如下都来自…

c51 单片机如何控制小灯闪烁?

目录 硬件电路设计 软件编程 烧录程序 测试 调整和优化 C51单片机是一种经典的8位微控制器,广泛应用于各种嵌入式系统和智能控制项目中。 C51单片机控制小灯闪烁主要涉及到硬件电路设计和软件编程两个方面。下面是一个基本的步骤说明: 硬件电路设计…

铸铁平台合理布局的重要性

铸铁平台合理布局的重要性是为了确保工作环境的安全和效率。以下是一些重要的原因: 安全性:合理布局可以最大限度地减少工作场所的事故和伤害。通过将设备和材料放置在正确的位置,可以降低工作人员被危险物体击中或跌倒的风险。此外&#xff…

【瑞萨RA6M3】1. 基于 vscode 搭建开发环境

基于 vscode 搭建开发环境 1. 准备2. 安装2.1. 安装瑞萨软件包2.2. 安装编译器2.3. 安装 cmake2.4. 安装 openocd2.5. 安装 ninja2.6. 安装 make 3. 生成初始代码4. 修改 cmake 脚本5. 调试准备6. 仿真 1. 准备 需要瑞萨仓库中的两个软件: MDK_Device_Packs.zipse…

Android 代码自定义drawble文件实现View圆角背景

简介 相信大多数Android开发都会遇到一个场景,给TextView或Button添加背景颜色,修改圆角,描边等需求。一看到这样的实现效果,自然就是创建drawble文件,设置相关属性shap,color,radius等。然后将…

基于单片机电流变送器系统仿真设计

**单片机设计介绍,基于单片机电流变送器系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机电流变送器系统的仿真设计,主要目标是利用仿真技术,模拟单片机与电流变送器之间…

二分答案 蓝桥杯 2022 省A 青蛙过河

有些地方需要解释: 1.从学校到家和从家到学校,跳跃都是一样的,直接看作2*x次过河就可以。 2.对于一个跳跃能力 y,青蛙能跳过河 2x 次,当且仅当对于每个长度为 y 的区间,这个区间内 h 的和都大于等于…

hololens 2 投屏 报错

使用Microsoft HoloLens投屏时,ip地址填对了,但是仍然报错,说hololens 2没有打开, 首先检查 开发人员选项 都打开,设备门户也打开 然后检查系统–体验共享,把共享都打开就可以了

计算机网络—HTTP协议:深入解析与应用实践

​ 🎬慕斯主页:修仙—别有洞天 ♈️今日夜电波:ヒステリックナイトガール 1:03━━━━━━️💟──────── 5:06 🔄 ◀️ ⏸ ▶️ ☰…

java算法day45 | 动态规划part07 ● 70. 爬楼梯 (进阶) ● 322. 零钱兑换 ● 279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 题目描述&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 输入描述&#xff1a;输入…

java对象是怎么在jvm中new出来的

java对象是怎么在jvm中new出来的 查看java对象字段属性在内存中的值 java 对象 创建 流程 附上java源码 public class MiDept {private int innerFiled999;public MiDept() {System.out.println("new MiDept--------------");}public String show(int data) {Sy…

[Win10] VMware Workstation Pro 17.5.1 Build 23298084 Win64安装教程

VMware Workstation Pro 17.5.1 Build 23298084 Win64安装教程 下载 https://download.csdn.net/download/u012621175/89088925 安装 激活 备注 如果激活不成功可以私信获取私钥

android APP monkey 测试

monkey 测试 一、电脑ADB安装及使用详解1、什么是 Monkey 测试2、什么是ADB3、ADB的作用4、安装前提条件5、ADB下载6、ADB安装与配置 二、连接安卓手机检查是否连接上安卓手机windows端安装ADB驱动 三、 monkey测试操作指令演示指令APP包名查看方式测试效果 一、电脑ADB安装及使…

画图理解JVM相关内容

文章目录 1. JVM视角下&#xff0c;内存划分2. 类内存分布硬核详解1. 获取堆内存参数2. 扫描堆内存&#xff0c;定位实例3. 查看实例所在地址的数据4. 找到实例所指向的类信息的地址5. 查看class信息6. 结论 3. Java的对象创建流程4. 垃圾判别算法4.1 引用计数法4.2 可达性分析…

ubuntu16如何使用高版本cmake

1.引言 最近在尝试ubuntu16.04下编译开源项目vsome&#xff0c;发现使用apt命令默认安装cmake的的版本太低。如下 最终得知&#xff0c;ubuntu16默认安装确实只能到3.5.1。解决办法只能是源码安装更高版本。 2.源码下载3.20 //定位到opt目录 cd /opt 下载 wget https://cmak…

Spring Boot 接入 Redis

Spring Boot 接入 Redis 简介 Redis 是一种访问速度非常快的内存数据结构存储&#xff0c;用作数据库、缓存、消息代理和流引擎。提供 strings、hashes、lists、sets 等数据结构。可以解决会话缓存、消息队列、分布式锁、定期将数据集存储到硬盘等功能。 通过 Redis 设计实现…

具身智能机器人实现新里程碑!新型3D世界模型问世

随着人工智能技术的不断进步&#xff0c;视觉-语言-动作&#xff08;VLA&#xff09;模型在机器人控制、自动驾驶、智能助手等领域展现出了广阔的应用前景。这类模型能够将视觉、语言、动作等多模态信息进行融合&#xff0c;实现从感知到决策的端到端学习。然而&#xff0c;现有…