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]

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

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);
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python-基础篇-字符串、列表、元祖、字典-字符串

文章目录 2.3字符串、列表、元祖、字典2.3.1字符串2.3.1.1字符串介绍2.3.1.1.1python中字符串的格式:2.3.1.1.2字符串在内存中的存储方式 2.3.1.2字符串的输入输出2.3.1.2.1字符串输出2.3.1.2.2字符串输入2.3.1.2.3组字符串的方式 2.3.1.3下标和切片2.3.1.3.1下标索…

vscode 连接远程服务器 服务器无法上网 离线配置

离线配置 vscode 连接远程服务器 .vscode-server 1. .vscode-server下载 使用vscode连接远程服务器时会自动下载配置.vscode-server文件夹,如果远程服务器无法联网,则需要手动下载 1)网址:https://update.code.visualstudio.com…

AttributeError: ‘Text‘ object has no property ‘FontSize‘

在学习《机器学习理论与实践》——1 机器学习编程语言基础中,使用Matplotlib画图(在坐标轴或绘图区显示中文)时,产生AttributeError: Text object has no property FontSize 错误解决。 AttributeError: Text object has no prop…

响应跨域的两种方式

第一种: Configuration public class CorsConfication {Beanpublic CorsWebFilter corsWebFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();//1、配置跨…

【随笔】Git 高级篇 -- 整理提交记录(上)(十五)

💌 所属专栏:【Git】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大…

蓝桥集训之垒骰子

蓝桥集训之垒骰子 核心思想&#xff1a;矩阵乘法 f[i]存顶面数值 构造a矩阵 使得*f[i] f[i-1]a 则f[i] f[1] * an 快速幂优化 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;const int N 6,m…

虚良SEO-蜘蛛池的作用与工作原理

蜘蛛池是一种SEO优化工具&#xff0c;其主要作用是吸引搜索引擎蜘蛛到特定网站进行爬行和索引&#xff0c;从而提高网站的可见性和排名。下面分别介绍蜘蛛池的作用和工作原理。 蜘蛛池的作用&#xff1a; 提高网站收录&#xff1a; 当一个网站新发布时&#xff0c;或者长时间…

Revit模型进入虚幻引擎UE5教程

一、背景 小伙伴们是否有Revit进入虚幻引擎交互的需求呢&#xff1f; 二、实现功能 1.Revit进入虚幻UE5,包含模型属性&#xff0c;材质等 2.实现BIM构件点选&#xff0c;高亮&#xff0c;属性展示 3.实现BIM模型分层显示&#xff0c;爆炸等效果 三、教程地址 教程&#x…

前端三剑客 —— CSS (第四节)

目录 内容回顾&#xff1a; 1.常见样式 2.特殊样式 特殊样式 过滤效果 动画效果 动画案例&#xff1a; 渐变效果 其他效果&#xff1a; 多列效果 字体图标&#xff08;icon&#xff09; 内容回顾&#xff1a; 1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的…

C++设计模式:策略模式(二)

1、定义与动机 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换&#xff08;变化&#xff09;&#xff0c;该模式使得算法可独立于使用它的客户程序&#xff08;稳定&#xff09;而变化&#xff08;扩展&#xff0c;子类化&#xff09; 在软…

【QT入门】 Qt代码创建布局综合运用:仿写腾讯会议登陆界面

往期回顾&#xff1a; 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局综合运用&#xff1a;仿写腾讯会议登陆界面 一、界面分…

YOLO V8-Detection 【单张图片】 推理详解及部署实现

前言 在实际处理过程中&#xff0c;我们使用YOLO V8进行推理时&#xff0c;通常会针对一张图片进行推理。如果需要对多张图片进行推理&#xff0c;则可以通过一个循环来实现对图片逐张进行推理。 单张图片推理时&#xff0c;需要注意图片的尺寸必须是32的倍数&#xff0c;否则…

【氮化镓】缓冲层结构对GaN HEMT射频性能的影响

【Effect of different layer structures on the RF performance of GaN HEMT devices】 研究总结&#xff1a; 本研究探讨了不同缓冲层结构对氮化镓高电子迁移率晶体管&#xff08;GaN HEMT&#xff09;射频性能的影响。通过对比三种不同缓冲层结构的GaN HEMT设备&#xff0…

海外问卷调查项目拆解(操作全流程演示)保姆级攻略具体操作

海外问卷调查是怎么做的&#xff1f;好做吗&#xff1f; 关于这个问题&#xff0c;不管我说好做、或者不好做&#xff0c;都并不能解决问题&#xff1b; 所以&#xff0c;这篇文章直接把做题的全过程展现给你看&#xff0c;你自己去真实地感受一下&#xff0c;这个玩意儿到底…

【电商API数据采集接口接入】如何搭建电商数据指标体系?

01 什么是好的数据指标&#xff1f; 电商商品数据采集API接口接入 01 前言 做数据分析的工作已经将近6年了&#xff0c;形形色色的业务方也合作了不少。大部分业务方都给我一个感觉就是我什么数据指标都要看&#xff0c;越多越多好&#xff0c;即使看了这些指标之后什么事…

智慧开发平台免!费!申请试用

原创 F学社 F学社 2024-04-01 17:13 江苏 扫描二维码即可申请试用 01 智慧开发平台简介 F1 WIFI智慧教育平台是可支持线上线下联动的基于FPGA的口袋式数字系统学习平台。其采用了AMD、Altera、安路、高云等国外国内主流公司的FPGA进行数字系统方向的教学实验设计&#xff0c…

【力扣刷题日记】1421.净现值查询

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1421.净现值查询 表&#xff1a;NPV 列名类型idintyearintnpvint (id, year) 是该表主键(具有唯一值的列的…

策略模式图

策略模式 小小的图解 主要的三个角色 Strategy—抽象策略角色ConcreateStrategy—具体策略角色Context—上下文角色 封装了对具体策略的调用可以使用set的依赖注入也可以使用构造方法 核心是上下文角色 只要调用上下文角色就行&#xff0c;实现解耦 策略 工厂 将上下文角…

【滑动窗口】Leetcode 最小覆盖子串

题目解析 76. 最小覆盖子串 本题将意思转换一下&#xff1a;寻找最小可重复字符的字串 算法讲解 使用滑动窗口哈希表&#xff0c;进行入窗口->判断哈希表中的元素是否符合最小可重复子串的条件->出窗口 class Solution { public://检查两个hash表中的字符bool check…

【快捷部署】011_PostgreSQL(16)

&#x1f4e3;【快捷部署系列】011期信息 编号选型版本操作系统部署形式部署模式复检时间011PostgreSQL16Ubuntu 20.04Docker单机2024-03-28 一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1…