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

news2025/1/21 1:04:37

扩展操作符 ... ,不是真正意义上的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]

在对象中进行扩展,扩展的结果就是对象

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 };
rect.x + rect.y + rect.width + rect.height // => 175

1.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 ,实际类型是数组,见下图1

let set = new Set();
set.add(1).add(2).add(3);
console.log(getType(...set));// => object ,实际类型是数组,见下图2

function getType(...p) {
    console.log("v:", p);
    return (typeof p);
}

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

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

let str = "0123ABC"
console.log(getType(...str));// => string

function getType(p) {
    console.log("v:", p);// v:'0'
    return (typeof p);
}

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

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

相关文章

JS详解-设计模式

工厂模式: 单例模式: // 1、定义一个类class SingleTon{// 2、添加私有静态属性static #instance// 3、添加静态方法static getInstance(){// 4、判断实例是否存在if(!this.#instance){// 5、实例不存在,创建实例this.#instance new Single…

Redis从入门到精通(七)Redis实战(四)库存超卖、一人一单与Redis分布式锁

↑↑↑请在文章开头处下载测试项目源代码↑↑↑ 文章目录 前言4.3 优惠券秒杀4.3.4 库存超卖问题及其解决4.3.4.1 问题分析4.3.4.2 问题解决 4.3.5 一人一单需求4.3.5.1 需求分析4.3.5.2 代码实现4.3.5.3 并发问题4.3.5.4 悲观锁解决并发问题4.3.5.5 集群环境下的并发问题 4.3.…

C语言【编译和链接】

1.程序执行过程 C语言的编译和链接是将源代码转换为可执行程序的过程。下面是C语言编译和链接的基本步骤: 预处理:在编译前,预处理器会对源代码进行。它会处理以"#"开头的预处理指令,#include和#define,并将…

【浅尝C++】继承机制=>虚基表/菱形虚继承/继承的概念、定义/基类与派生类对象赋值转换/派生类的默认成员函数等详解

🏠专栏介绍:浅尝C专栏是用于记录C语法基础、STL及内存剖析等。 🎯每日格言:每日努力一点点,技术变化看得见。 文章目录 继承的概念及定义继承的概念继承的定义定义格式继承关系与访问限定符 基类和派生类对象赋值转换继…

CSS样式计算

目录 用户代理样式表确认声明值层叠冲突重要性权重源次序 继承使用默认值关于a元素不能继承的问题 在网页中,每个 元素都有着许多 CSS属性,有些 属性我们对其 声明并赋值,有些 属性则没有,我们可能会想当然的以为一个 元素会…

如果在 Ubuntu 系统中两个设备出现两个相同的端口号解决方案

问题描述: 自己的移动机器人在为激光雷达和IMU配置动态指定的端口时,发现激光雷达和深度相机配置的 idVendor 和 idProduct 相同,但是两个设备都具有不同的ttyUSB号,如下图所示 idVendor:代表着设备的生产商ID,由USB设…

Vuex(vue 项目中实现 频繁、大范围数据共享的技术方案)

参考文档(点击查看) 好处 1.数据的存取一步到位,不需层层传递 2.数据的流动非常清晰 3.存储在Vuex中的数据都是响应式的(数据更新后,使用数据的组件都会自动更新) Vuex基础配置 npm i vuex3.6.2state中用来存储数据&#xff0c…

如何客观评价5G的现状?

前几天,在知乎上看到一个帖子,热度挺高: 看了一下帖子的回答,基本上都在骂5G。 作为通信行业从业者,我说说我自己的看法。大家姑且听听,一起交流一下。 我们目前所处的这个时代,有一个很大的特点…

移动Web学习05-移动端适配Less预处理器

7、移动端适配 7.1、什么是适配? 简单理解就是、同一个网页,在不同屏幕分辨率的设备下、显示还是一样的,你可以理解为、网页当中的图片,盒子之间的距离、文字的大小、随着屏幕分辨率的变化而变化 前面我们学习了flex布局的方式…

Web大并发集群部署之集群介绍

一、传统web访问模型 传统web访问模型完成一次请求的步骤 1)用户发起请求 2)服务器接受请求 3)服务器处理请求(压力最大) 4)服务器响应请求 传统模型缺点 单点故障; 单台服务器资源有限&…

excel统计分析——多元线性回归

参考资料:生物统计学 多元线性回归(multiple linear regression)是具有一个因变量或多个(两个或以上)自变量的线性回归,是直线回归的拓展,其模型和计算过程与直线回归类似,只是在计算…

【软件工程】测试规格

1. 引言 1.1简介 本次的测试用例是基于核心代码基本开发完毕,在第一代系统基本正常运行后编写的,主要目的是为了后续开发与维护的便利性。 该文档主要受众为该系统后续开发人员,并且在阅读此文档前最后先阅读本系统的需求文档、概要设计文…

Qt事件学习案例

视频链接 https://www.bilibili.com/video/BV18B4y1K7Cs?p7&spm_id_frompageDriver&vd_sourcefa4ef8f26ae084f9b5f70a5f87e9e41bQt5跟着视频做即可,Qt6部分代码需要改动,改动的地方注释有写 素材 百度云 链接:https://pan.baidu.com/s/158j…

K8S - Deployment 的版本回滚

当前状态 先看deployment rootk8s-master:~# kubectl get deploy -o wide --show-labels NAME READY UP-TO-DATE AVAILABLE AGE CONTAINERS IMAGES …

蓝桥杯嵌入式(G431)备赛笔记——LED

cubeMX配置: 原理图,其中PD2高电平使能锁存器,PC8-15默认给高电平,放置上电初始化LED亮 74HC573是八路输出锁存器 1脚是使能,低电平有效,高电平输出高阻 2~9是输入,PC8-PC15 19~12是输出 11是锁存,即PD2: 高电平是同步,即输出跟随输入变化 低电平锁存,即输出不再改变 …

RUST Rover 条件编译 异常处理

按官方处理发现异常 会报异常 error: failed to parse manifest at C:\Users\topma\RustroverProjects\untitled2\Cargo.toml 修改模式如下才能正常编译 网上说明 这样处理 https://course.rs/cargo/reference/features/intro.html RUST 圣经里描述 [features] print-a []…

如何用putty通过ssh连接ubuntu

1. 下载和安装PuTTY 访问PuTTY官网下载PuTTY的最新版本。 2. 打开PuTTY 解压下载的文件后,找到PuTTY文件并双击打开。 3. 配置SSH连接 在ubuntu下安装ssh服务在安装ssh时,我一直遇到一个问题,原因是我的虚拟机连不上网,反复实…

Linux之shell脚本编辑工具awk

华子目录 概念工作流程工作图流程(按行处理) awk程序执行方式1.通过命令行执行awk程序实例 2.awk命令调用脚本执行实例 3.直接使用awk脚本文件调用实例 awk命令的基本语法格式BEGIN模式与END模式实例awk的输出 记录和域(记录表示数据行&#…

若依:一个基于Spring Boot、Spring Security、JWT、Vue和Element的全部开源快速开发平台

若依后台管理系统:一个基于Spring Boot、Spring Security、JWT、Vue和Element的全部开源快速开发平台 一、引言 随着软件开发技术的发展,前后端分离的开发模式逐渐成为主流。这种模式能够提高开发效率,降低维护成本,使前后端工程…

SketchUp Pro 2024 for mac 草图大师 专业的3D建模软件

SketchUp Pro 2024 for Mac是一款功能强大的三维建模软件,适用于Mac电脑。其简洁易用的界面和强大的工具集使得用户可以轻松创建复杂的3D模型。 软件下载:SketchUp Pro 2024 for mac v24.0.483 激活版下载 SketchUp Pro 2024 for Mac支持导入和导出多种文…