ES6-ES13符号:单双引号、变量的解构赋值、占位符 、字符串模版`${} `、扩展运算符...、?,??,_,||=,=,in

原型、this、闭包,for四类循环,ES6-14(2023)_es6-es14-CSDN博客

目录

查看ES版本

单双引号:无区别

变量的解构赋值:声明变量+被数组/对象中的元素赋值

推荐用const,因为是从其他地方获取值

应用:useState等钩子

占位符

 ${}:字符串模板`str ${变量} `

空格:[a1, ,a2]=arr

扩展/展开运算符...

...rest=数组/对象:解构赋值

变量=... 数组/对象:浅拷贝(地址而非内容)

rest 参数语法 ...(ES6):作为函数最后一个参数,将剩余参数收集为数组

ES11

可选链运算符(?.):类似.,但引用为空时不报错,返回undefined

空位合并运算符(??):类似||,但只有undefined和null才算假值

ES12

数字_分隔符

逻辑或赋值||=

逻辑与赋值&&=

ES13:prop in obj属性在指定的对象或其原型链


查看ES版本

在浏览器的开发者工具中打开控制台(一般是按 F12),输入:
console.log('Current JavaScript version:', ES_VERSION); ​​​​​​​

单双引号:无区别

单引号(')、双引号(")注意嵌套字符串

:content=" '这是外部使用的双引号,而这里是内部的单引号' "
:content='"这是外部使用的双引号,而这里是内部的单引号"'
冲突:
:content=''这是外部使用的双引号,而这里是内部的单引号''

含局部变量时用模板字符串(反引号 ``` `)

变量的解构赋值:声明变量+被数组/对象中的元素赋值

推荐用const,因为是从其他地方获取值

  • [变量]=arr

  • {属性名:变量=默认值}=obj
  • {属性名:变量}=obj
  • {与属性同名的变量}=obj
  • {不存在的属性名=默认值}=obj <=> 声明不存在的属性名=默认值
  • {不存在的属性名}=obj <=> 声明不存在的属性名
  • 多层级的属性一样用{}
const nestedObject = {outer: {inner: {deep: 'Hello, nested!'}}
};const { outer: { inner: { deep } } } = nestedObject;
console.log(deep); // 输出: Hello, nested!

应用:useState等钩子

//对象解构{}
//解构对象的属性并赋值
const { trigger: connectionTrigger } = useCreateConnection(objectId)
//数组解构[]
const [threadIdDelete, setThreadIdDelete] = useState<string>('')function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

占位符

 ${}:字符串模板`str ${变量} `

动态插值

const name = "Alice";
const greeting = `Hello, ${name}!`;

空格:[a1, ,a2]=arr

扩展/展开运算符...

...rest=数组/对象:解构赋值

// 提取部分数组元素,其余元素放在剩余数组中
const numbers = [1, 2, 3, 4, 5];
const [first, , ...rest] = numbers;
console.log(first); // 输出: 1
console.log(rest);   // 输出: [3, 4, 5]let obj = { a: 1, b: 2, c: 3, d: 4 };
let { a, b, ...rest } = obj;
console.log(a, b, rest); // 输出: 1 2 { c: 3, d: 4 }

变量=... 数组/对象:浅拷贝(地址而非内容)

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };originalObject.b.c = 10; // 修改原始对象的属性值
originalObject.a = 10; // 修改原始对象的属性值console.log(originalObject); // Object { a: 10, b: Object { c: 10 } }
console.log(copiedObject);   // Object { a: 1, b: Object { c: 10 } }const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };originalObject.b.c = 10; // 修改原始对象的属性值
originalObject.a = 10; // 修改原始对象的属性值console.log(originalObject); // Object { a: 10, b: Object { c: 10 } }
console.log(copiedObject);   // Object { a: 1, b: Object { c: 10 } }

rest 参数语法 ...(ES6):作为函数最后一个参数,将剩余参数收集为数组

agruments已弃用

arguments 是一个类数组对象,

  • 具有类似数组的结构(包括 length 属性和索引),但不具备数组的方法,如 mapfilterreduce 等。这使得在处理参数时,需要转换成真正的数组或者通过迭代的方式处理,增加了代码的复杂性和不必要的操作。
  • arguments 对象会在函数的整个生命周期中存在,无论是否需要。这可能导致意外的行为或者内存泄漏,尤其是在大型应用程序中。
function sum(...numbers) {let total = 0;for (let number of numbers) {total += number;}return total;
}console.log(sum(1, 2, 3)); // 输出 6

ES11

可选链运算符(?.):类似.,但引用为空时不报错,返回undefined

允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined

// 可选链
const obj = {cat: {name: '哈哈'}
}
const dog = obj?.dog?.name // undefined

空位合并运算符(??):类似||,但只有undefined和null才算假值

||逻辑运算符:'' 或 0也算假值

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

ES12

数字_分隔符

// 使用数字分隔符
const num = 1_000_000_000

逻辑或赋值||=

或等于(||=) :a ||= b 等同于 a || (a = b);

如果 a 是 falsy 值(false、null、undefined、空字符串、0、NaN),则将 b 的值赋给 a

逻辑与赋值&&=

且等于(&&=) : a &&= b 等同于 a && (a = b);

如果 a 是 truthy 值(不是 false、null、undefined、空字符串、0、NaN),则将 b 的值赋给 a

ES13:prop in obj属性在指定的对象或其原型链

属性是否是对象自身的属性: obj.prototype.hasOwnProperty()

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

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

相关文章

企业级移动门户平台是什么?

企业级移动门户平台是为企业提供移动应用和服务的一站式平台。它将企业内部的应用程序和数据集成在一个统一的界面中&#xff0c;方便员工使用&#xff0c;提高工作效率和增强企业的数字化转型能力。WorkPlus作为一种企业级移动门户平台&#xff0c;为企业提供了全面的移动应用…

网络流问题

文章目录 1. 网络流问题基础1.1 概述1.2 常规算法1.3 总结 2. Ford-Fulkerson Algorithm 链接&#xff1a; B站学习视频 1. 网络流问题基础 1.1 概述 最大流问题主要是关于有向图问题。有向图中有m个边&#xff0c; n个节点,其中有一个节点为s[source],还有一个终点 t [sink]…

2A高效率18V输入同步降压稳压器SY8120

前言 SOT23-6封装SY8120外观和丝印&#xff1a;qG 某创批量价格4毛多 概述 SY8120I是一款高效率、同步降压型 DC/DC 转换器&#xff0c;能够提供 2A 负载电流。该SY8120I可在 4.2V 至 18V 的宽输入电压范围内工作&#xff0c;并集成了主开关和同步开关&#xff0c;具有非常低的…

前端JS特效第34波:jQuery支持拖拽图片上传的图片批量上传插件

jQuery支持拖拽图片上传的图片批量上传插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>jQuery支持拖拽图片上传的图片批…

freertos源码分析DAY3(二值/计数信号量)

目录 1. 二值信号量 1.1. 二值信号量的创建 1.2 任务中二值信号操作函数 1.2.1 二值信号量的释放 1.2.2 等待二值信号量资源函数 1.3 中断中二值信号量操作函数 1.3.1 中断中释放二值信号量 1.3.2 中断中接收信号量 2. 计数信号量 2.1 计数信号量的创建 信号量&#xff08;Sem…

Backpropagation

在使用gradient descent的时候&#xff0c;神经网络参数θ有很多参数&#xff08;w&#xff0c;b&#xff09;。那gradient就会是一个有成千上万维的vector。所以&#xff0c;Backpropagation在做的事情就是有效的把它&#xff08;上图左侧的向量&#xff09;计算出来。 复习一…

C++初学者指南-5.标准库(第一部分)--标准算法介绍

C初学者指南-5.标准库(第一部分)–标准算法介绍 文章目录 C初学者指南-5.标准库(第一部分)--标准算法介绍C的标准算法是&#xff1a;第一个示例组织输入范围自定义可调用参数并行执行(C17)迭代器和范围的类别错误消息命名空间std::ranges中的算法 (C20)算法参数图标相关内容 C的…

TS真的比JS更好吗?

前言 在讨论TypeScript&#xff08;TS&#xff09;是否比JavaScript&#xff08;JS&#xff09;更好时&#xff0c;我们需要明确“更好”这一概念的上下文和衡量标准。TypeScript和JavaScript在多个方面有着明显的区别&#xff0c;但它们并不是简单的“好”与“不好”的关系&a…

国产数据库VastBase与C/C++程序适配

背景 2022年底的项目&#xff0c;记录一下。 某项目后台使用C程序开发&#xff0c;使用的是OCI连接Oracle数据库。现需要做去O国产化适配改造。 本文聊聊C/C应用程序如何使用VastBase替换Oracle。 编译适配 开发包获取 从VastBase官方或接口人处获取OCI开发包&#xff0c;包含…

线程池笔记

笔记梳理 前言.PHONYC标准库头文件C/C通用或C特有头文件mkdirc_str()snprintfvsnprintfumaskopen函数可变参数列表va_startva_endfunctionalstatic_castpthread_cond_init_threads.emplace_backstd::bindstd::placeholdersThreadPool(const ThreadPool<T> &tp) dele…

博客前端项目学习day01

这里写自定义目录标题 登录创建项目配置环境变量&#xff0c;方便使用登录页面验证码登陆表单 在VScode上写前端&#xff0c;采用vue3。 登录 创建项目 检查node版本 node -v 创建一个新的项目 npm init vitelatest blog-front-admin 中间会弹出询问是否要安装包&#xff0c…

ISA95-Part5-安全和权限管理的设计思路

1、具体要求: 在MES/MOM系统中实现ISA-95标准的安全和权限管理,具体要求通常包括以下几个方面: 1. --数据保护--:确保敏感数据通过加密和安全存储来保护,防止数据泄露或被未授权访问。 2. --访问控制--:实施基于角色的访问控制(RBAC),确保只有授权用户才能访问相应资…

前端Vue组件化实践:打造自定义等宽tabs标签组件

在前端开发的世界里&#xff0c;随着业务复杂度的提升和需求的多样化&#xff0c;传统的整体式开发方式已经难以满足快速迭代和高效维护的需求。组件化开发作为一种重要的解决方案&#xff0c;正逐渐受到广大开发者的青睐。本文将结合Vue框架&#xff0c;探讨如何通过组件化开发…

标签-镜像拉取策略-重启策略-pod优雅终止-pod中容器资源限制-容器类型-容器守护进程-日志排错-容器命令exec-cp

一.标签 1.概述&#xff1a; 标签是附加到kubernets对象&#xff08;比如pod&#xff09;上的键值对&#xff0c;标签可以在创建时附加到对象&#xff0c;随后也可以随时添加修改&#xff1b;标签不支持唯一性。 在k8s中大多数资源都是通过标签进行关联的&#xff08;如pod与s…

DP(3) | 0-1背包 | Java | LeetCode 1049, 494, 474 做题总结

1049. 最后一块石头的重量 II 和 LC 416.分割等和子集 类似 思路&#xff08;我没有思路&#xff09;&#xff1a; 两块石头相撞&#xff0c;这里没有想到的一个点是&#xff0c;相撞的两个石头要几乎相似 以示例1为例&#xff0c;stones [2,7,4,1,8,1]&#xff0c;如果从左到…

行人越界检测 越线 越界区域 多边形IOU越界判断

行人越界判断 越界判断方式&#xff1a;&#xff08;1&#xff09;bbox中心点越界&#xff08;或自定义&#xff09;&#xff08;2&#xff09;交并比IoU判断 越界类型&#xff1a;&#xff08;1&#xff09;越线 &#xff08;2&#xff09;越界区域 1.越线判断 bbox中心点xc、…

【数组、特殊矩阵的压缩存储】

目录 一、数组1.1、一维数组1.1.1 、一维数组的定义方式1.1.2、一维数组的数组名 1.2、二维数组1.2.1、二维数组的定义方式1.2.2、二维数组的数组名 二、对称矩阵的压缩存储三、三角矩阵的压缩存储四、三对角矩阵的压缩存储五、稀疏矩阵的压缩存储 一、数组 概述&#xff1a;数…

HyperSD - 会画草图就能玩AI绘画,AI一键手绘,实时同步 本地一键整合包下载

字节跳动的Lightning团队发布的新图像模型蒸馏算法Hyper-SD&#xff0c;是一项在图像处理和机器学习领域的重要进展。这项技术通过创新的方法提升了模型在不同推理步骤下的性能&#xff0c;同时保持了模型大小的精简。 基于这个算法模型&#xff0c;一个很实用的功能出现了&am…

绝区零 双闪 双闪-三轴 工具

绝区零 双闪 双闪-三轴 工具 0. 演示视频 绝区零&#xff1a;≈100%的极致双闪和双闪-三轴 绝区零&#xff1a;手残党也能打双闪-三轴 1. 基本信息 作者: GMCY系列: 工具系列仓库: GitHub | Gitee话题(GitHub): Tools \ ZenlessZoneZero创建时间: 2024/07/14 2. 声明 !!! 使…

力扣题解(回文子串)

647. 回文子串 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 思路&#xff1a; 首先&#xff0c;本题要求的是数目&#xff0c;而且不要求没…