前端面试二之运算符与表达式

目录

1.JavaScript 中的 == 和 === 运算符

2.|| (逻辑或) 运算符

与 ES6 默认参数的区别

与 ?? (空值合并运算符) 的区别 

3.?.(可选链)运算符

(1). 安全访问深层嵌套属性

(2). 安全调用可能不存在的函数

(3). 安全访问数组元素

4.展开运算符 (...)

(1). 数组展开

(2). 对象展开 (ES2018)

注意事项

浅拷贝特性:

5.解构赋值

(1)数组解构

(2)对象解构


1.JavaScript 中的 == 和 === 运算符

== 运算符会在比较前进行类型转换,然后再比较值。

5 == '5'      // true (字符串'5'转换为数字5)
true == 1     // true (true转换为1)
false == 0    // true (false转换为0)
null == undefined // true
'0' == false  // true (两边都转换为数字0)
[] == false   // true (空数组转换为0,false转换为0)
'' == 0       // true (空字符串转换为0)

=== 运算符不会进行类型转换,如果类型不同直接返回 false。

5 === '5'     // false (数字不等于字符串)
true === 1    // false (布尔值不等于数字)
false === 0   // false (布尔值不等于数字)
null === undefined // false
'0' === false // false (字符串不等于布尔值)
[] === false  // false (数组不等于布尔值)
'' === 0      // false (字符串不等于数字)

2.|| (逻辑或) 运算符

JavaScript 的 || 运算符实际上返回的是第一个"真值"(truthy)的操作数,或者最后一个操作数(如果所有操作数都是"假值"(falsy))。

在 JavaScript 中,以下值被认为是 假值(falsy)

  • false
  • 0
  • "" (空字符串)
  • null
  • undefined
  • NaN
    function greet(name) {name = name || "访客";console.log(`你好, ${name}!`);
    }greet("张三");  // 输出: 你好, 张三!
    greet();       // 输出: 你好, 访客!

    与 ES6 默认参数的区别

ES6 的函数默认参数提供了更精确的默认值设置方式:

function greet(name = "访客") {console.log(`你好, ${name}!`);
}greet(undefined);  // 输出: 你好, 访客!
greet(null);       // 输出: 你好, null!

 || 会对所有假值使用默认值,而 ES6 默认参数只在参数为 undefined 时使用默认值。

与 ?? (空值合并运算符) 的区别 

ES2020 引入了 ?? 运算符,它只在左侧为 nullundefined 时返回右侧值: 

0 || "默认值"    // "默认值" (因为0是假值)
0 ?? "默认值"    // 0 (因为0不是null或undefined)"" || "默认值"   // "默认值"
"" ?? "默认值"   // ""false || "默认值" // "默认值"
false ?? "默认值" // false

3.?.(可选链)运算符

?. 是 JavaScript 的可选链运算符(Optional Chaining Operator),于 ES2020 引入。它允许你安全地访问嵌套对象属性或调用函数,而无需验证每个引用是否有效。当 ?. 左侧为 null/undefined 时,右侧不会执行。可选链运算符极大简化了深层属性访问的代码,使代码更简洁且更安全,是处理不确定结构数据的理想选择。

obj?.prop       // 访问属性
obj?.[expr]     // 通过表达式访问属性
func?.(args)    // 调用函数

(1). 安全访问深层嵌套属性

const street = user?.address?.street;
// 如果 user 或 address 是 null/undefined,返回 undefined 而不会报错

(2). 安全调用可能不存在的函数

// 传统方式
const result = obj.method && obj.method();// 可选链方式
const result = obj.method?.();

(3). 安全访问数组元素

const firstItem = arr?.[0];
// 等同于 (arr !== null && arr !== undefined) ? arr[0] : undefined

4.展开运算符 (...)

展开运算符 (Spread Operator) 是 ES6 引入的重要特性,用三个点 (...) 表示。它可以将可迭代对象(如数组、字符串或对象)"展开"为单个元素。

(1). 数组展开

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]// 等同于
const arr2 = arr1.concat([4, 5]);

(2). 对象展开 (ES2018)

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }// 注意:后面的属性会覆盖前面的
const obj3 = { ...obj1, b: 99 }; // { a: 1, b: 99 }

注意事项

浅拷贝特性
const nestedObj = { a: { b: 1 } };
const copy = { ...nestedObj };
copy.a.b = 2; // 也会修改原始对象的 a.b

5.解构赋值

解构赋值(Destructuring Assignment)是ES6引入的一种语法,可以让你从数组或对象中提取数据,并赋值给变量,代码更简洁易读。

(1)数组解构

// 基本解构
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2// 跳过某些元素
const [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

(2)对象解构

const person = { name: 'Alice', age: 25 };// 基本解构
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 25// 不同变量名
const { name: personName, age: personAge } = person;
console.log(personName); // 'Alice'
console.log(personAge);  // 25

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

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

相关文章

GB/T 24507-2020 浸渍纸层压实木复合地板检测

浸渍纸层压实木地板是指以一层或多层专用纸浸渍热固性氨基树脂,经干燥后铺装在胶合板基材正面,专用纸表面加耐磨层,基材背面可加平衡层,经热压、成型的地板。 GB/T 24507-2020 浸渍纸层压实木复合地板测试项目: 测试项…

AWS DocumentDB vs MongoDB:数据库的技术抉择

随着非关系型数据库在现代应用中的广泛应用,文档型数据库因其灵活的结构与出色的扩展性,逐渐成为企业开发与架构设计中的核心选择。在众多文档数据库中,MongoDB 凭借其成熟生态与社区支持占据主导地位;与此同时,AWS 提…

微信小程序实现运动能耗计算

微信小程序实现运动能耗计算 近我做了一个挺有意思的微信小程序,能够实现运动能耗的计算。只需要输入性别、年龄、体重、运动时长和运动类型这些信息,就能算出对应的消耗热量。 具体来说,在小程序里,性别不同,身体基…

三轴地磁传感器的主要应用场景

随着材料科学、微电子技术以及传感器技术的不断进步,三轴地磁传感器的性能将不断提升,包括提高精度、降低功耗、增强抗干扰能力等。 RAMSUN提供的是一款三轴地磁传感器采用第三代AMR技术,带有自动温度补偿的三轴磁传感器,该产品因…

使用 SseEmitter 实现 Spring Boot 后端的流式传输和前端的数据接收

1.普通文本消息的发送和接收 GetMapping("/stream")public SseEmitter streamResponse() {SseEmitter emitter new SseEmitter(0L); // 0L 表示永不超时Executors.newSingleThreadExecutor().execute(() -> {try {for (int i 1; i < 5; i) {emitter.send(&q…

nssm配置springboot项目环境,注册为windows服务

NSSM 的官方下载地址是&#xff1a;NSSM - the Non-Sucking Service Manager1 使用powershell输入命令,java项目需要手动配置和依赖nacos .\nssm.exe install cyMinio "D:\minio\启动命令.bat" .\nssm.exe install cyNacos "D:\IdeaProject\capacity\nacos-s…

WinCC学习系列-基础概念

从本节起&#xff0c;学习和了解西门子最新SCADA软件WinCC 8.0&#xff0c;将从基础概念开始&#xff0c;到入门操作&#xff08;创建项目、组态通信、组态过程画面、组态面板类型和变量结构、归档和显示值、组态消息&#xff09;&#xff0c;到高级应用&#xff08;WinCC选件、…

数据分析图表类型及其应用场景

说明&#xff1a;顶部HTML文件下载后可以直接查看&#xff0c;带有示图。 摘要 数据可视化作为现代数据分析的核心环节&#xff0c;旨在将复杂、抽象的数据转化为直观、易懂的图形形式。这种转化显著提升了业务决策能力&#xff0c;优化了销售与营销活动&#xff0c;开辟了新…

《江西棒垒球》败方mvp叫什么·棒球1号位

败方mvp也是MVP&#xff0c;以棒球运动为例&#xff0c;MLB&#xff08;美国职棒大联盟&#xff09;的个人奖项旨在表彰球员在不同领域的卓越表现&#xff0c;涵盖常规赛和季后赛的杰出成就。 常规赛核心奖项 最有价值球员奖&#xff08;MVP&#xff09; 定义&#xff1a;表彰…

CD43.vector模拟实现(2)

目录 1.拷贝构造函数 写法1 写法2 测试代码 调试找bug 解决方法:修改拷贝构造函数 测试代码 2.operator[ ] 测试代码 1.没有const修饰 2.有const修饰 3.insert 迭代器失效问题 承接CD42.vector模拟实现(1)文章 1.拷贝构造函数 设置start、finish和end_of_storag…

【C/C++】入门grpc的idl

文章目录 grpc idl 简单介绍1. 文件结构组织规范文件命名包结构&#xff1a;推荐&#xff1a;一个文件只定义一个 service&#xff0c;如果 service 很复杂&#xff0c;可拆分多个 proto 文件。 2. 消息定义规范命名风格字段编号&#xff1a;示例&#xff1a; 3. 服务与 RPC 设…

安全-JAVA开发-第二天

Web资源访问的流程 由此可见 客户访问JAVA开发的应用时 会先通过 监听器&#xff08;Listener&#xff09;和 过滤器&#xff08;Filter&#xff09; 今天简单的了解下这两个模块的开发过程 监听器&#xff08;Listener&#xff09; 主要是监听 我们触发了什么行为 并进行反应…

使用 Ansys Q3D 进行电容提取

精确的电容提取在高速和 RF 设计中至关重要。虽然简单的公式可以提供一个很好的起点&#xff0c;但它们往往无法捕捉 fringing fields 和 layout-dependent parasitics 的影响。在本博客中&#xff0c;我们演示了如何使用Ansys Q3D Extractor来计算电容值&#xff0c;从基本的平…

卡西欧模拟器:Windows端功能强大的计算器

引言 大家还记得初中高中时期用的计算器吗&#xff1f;今天给大家分享的就是一款windows端的卡西欧计算器。 软件介绍 大家好&#xff0c;我是逍遥小欢。 CASIO fx-9860G是一款功能强大的图形计算器&#xff0c;适用于数学、科学和工程计算。以下是其主要功能和特点的详细介…

【Bluedroid】蓝牙启动之gatt_init 流程源码解析

本文围绕Android蓝牙协议栈中 GATT(通用属性配置文件)模块的初始化函数gatt_init展开,深入解析其核心实现逻辑与关键步骤。通过分析gatt_init及其关联子函数(如L2CA_RegisterFixedChannel、gatt_profile_db_init、EattExtension::Start等),以及相关数据结构(如tGATT_CB控…

Vue 3 中ref 结合ts 获取 DOM 元素的实践指南。

文章目录 前言一、为什么需要为 ref 添加类型&#xff1f;二、基本用法&#xff1a;引用 DOM 元素1. 引用通用 DOM 元素&#xff08;HTMLElement&#xff09;2. 引用特定类型的 DOM 元素&#xff08;如 HTMLDivElement&#xff09; 三、<script setup> 语法中的类型定义四…

Axure形状类组件图标库(共8套)

点击下载《月下倚楼图标库(形状组件)》 原型效果&#xff1a;https://axhub.im/ax9/02043f78e1b4386f/#g1 摘要 本图标库集锦精心汇集了8套专为Axure设计的形状类图标资源&#xff0c;旨在为产品经理、UI/UX设计师以及开发人员提供丰富多样的设计素材&#xff0c;提升原型设计…

01串(二进制串)与集合之间存在天然的对应关系 ← bitset

【集合的二进制表示‌】 ● 01 串&#xff08;二进制串&#xff09;与集合之间存在天然的对应关系。对应机理为每个二进制位可以表示集合中一个元素的存在&#xff08;1&#xff09;或不存在&#xff08;0&#xff09;。例如&#xff0c;集合 {a, b, c} 的子集 {a, c} 可以表示…

vba学习系列(10)--外观报表

系列文章目录 文章目录 系列文章目录前言一、外观报表1.产能统计2.单板数3.固定伤排查4.件号良率5.镜片批退率6.镜筒批退率 总结 前言 一、外观报表 1.产能统计 Sub ProcessInspectionData()Dim ws1 As Worksheet, ws2 As Worksheet, ws3 As WorksheetDim lastRow1 As Long, …

machine_env_loader must have been assigned before creating ssh child instance

在主机上执行roslaunch命令时&#xff0c;报错&#xff1a;machine_env_loader must have been assigned before creating ssh child instance。 解决办法&#xff1a; 打开hostos文件&#xff0c;检查local host 前的内部ip是否正常。操作示例&#xff1a; 先输入下方指令打…