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

news2025/6/6 17:24:44

目录

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.coloradmin.cn/o/2399288.html

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

相关文章

Bresenham算法

一 Bresenham 绘直线 使用 Bresenham 算法,可以在显示器上绘制一直线段。该算法主要思想如下: 1 给出直线段上两个端点 ,根据端点求出直线在X,Y方向上变化速率 ; 2 当 时,X 方向上变化速率快于 Y 方向上变化速率&am…

【从GEO数据库批量下载数据】

从GEO数据库批量下载数据 1:进入GEO DataSets拿到所需要下载的数据的srr.list,上传到linux, 就可以使用prefetch这个函数来下载 2:操作步骤如下: conda 安装sra-tools conda create -n sra-env -c bioconda -c co…

day 44

使用DenseNet预训练模型对cifar10数据集进行训练 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms, models from torch.utils.data import DataLoader import matplotlib.pyplot as plt import os# 设置中文字体…

NER实践总结,记录一下自己实践遇到的各种问题。

更。 没卡,跑个模型休息好几天,又闲又急。 一开始直接套用了别人的代码进行实体识别,结果很差,原因是他的词表没有我需要的东西,我是用的医学文本。代码直接在github找了改的,用的是BERT的Chinese版本。 然…

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

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

iTunes 无法备份 iPhone:10 种解决方法

Apple 设备是移动设备市场上最先进的产品之一,但有些人遇到过 iTunes 因出现错误而无法备份 iPhone 的情况。iTunes 拒绝备份 iPhone 时,可能会令人非常沮丧。不过,幸运的是,我们有 10 种有效的方法可以解决这个问题。您可以按照以…

LangChain4J 使用实践

这里写目录标题 大模型应用场景&#xff1a;创建一个测试示例AIService聊天记忆实现简单实现聊天记录记忆MessageWindowChatMemory实现聊天记忆 隔离聊天记忆聊天记忆持久化 添加AI提示词 大模型应用场景&#xff1a; 创建一个测试示例 导入依赖 <dependency><groupI…

【C++】—— 从零开始封装 Map 与 Set:实现与优化

人生的态度是&#xff0c;抱最大的希望&#xff0c;尽最大的努力&#xff0c;做最坏的打算。 —— 柏拉图 《理想国》 目录 1、理论基石——深度剖析 BSTree、AVLTree 与 RBTree 的概念区别 2、迭代器机制——RBTree 迭代器的架构与工程实现 3、高级容器设计——Map 与 Set…

内网穿透之Linux版客户端安装(神卓互联)

选择Linux系统版本 获取安装包 &#xff1a;https://www.shenzhuohl.com/download.html 这里以Ubuntu 18.04为例&#xff0c;其它版本方法类似 登录Ubuntu操作系统&#xff1a; 打开Ubuntu系统终端&#xff0c;更新版本 apt-get update 安装运行环境&#xff1a; 安装C 运…

开疆智能Profinet转Profibus网关连接CMDF5-8ADe分布式IO配置案例

本案例是客户通过开疆智能研发的Profinet转Profibus网关将PLC的Profinet协议数据转换成IO使用的Profibus协议&#xff0c;操作步骤如下。 配置过程&#xff1a; Profinet一侧设置 1. 打开西门子组态软件进行组态&#xff0c;导入网关在Profinet一侧的GSD文件。 2. 新建项目并…

华为云Flexus+DeepSeek征文|Flexus云服务器单机部署+CCE容器高可用部署快速搭建生产级的生成式AI应用

前引&#xff1a; 在AI技术高速演进的浪潮中&#xff0c;如何快速、高效、安全地搭建一个大模型应用平台&#xff0c;成为开发者和企业关注的焦点。近日&#xff0c;华为云推出的Flexus云服务器配合CCE容器引擎和Dify LLM应用开发平台&#xff0c;带来了极具吸引力的解决方案。…

60天python训练计划----day44

DAY 44 预训练模型 知识点回顾&#xff1a; 预训练的概念常见的分类预训练模型图像预训练模型的发展史预训练的策略预训练代码实战&#xff1a;resnet18 一、预训练的概念 我们之前在训练中发现&#xff0c;准确率最开始随着epoch的增加而增加。随着循环的更新&#xff0c;参数…

【JAVA版】意象CRM客户关系管理系统+uniapp全开源

一.介绍 CRM意象客户关系管理系统&#xff0c;是一个综合性的客户管理平台&#xff0c;旨在帮助企业高效地管理客户信息、商机、合同以及员工业绩。系统通过首页、系统管理、工作流程、审批中心、线索管理、客户管理、商机管理、合同管理、CRM系统、数据统计和系统配置等模块&…

API异常信息如何实时发送到钉钉

#背景 对于一些重要的API&#xff0c;开发人员会非常关注API有没有报错&#xff0c;为了方便开发人员第一时间获取错误信息&#xff0c;我们可以使用插件来将API报错实时发送到钉钉群。 接下来我们就来实操如何实现 #准备工作 #创建钉钉群 如果已有钉钉群&#xff0c;可以跳…

Python爬虫(48)基于Scrapy-Redis与深度强化学习的智能分布式爬虫架构设计与实践

目录 一、背景与行业痛点二、核心技术架构设计2.1 分布式爬虫基础架构2.2 深度强化学习模块 三、生产环境实践案例3.1 电商价格监控系统3.2 学术文献采集系统 四、高级优化技术4.1 联邦学习增强4.2 神经架构搜索&#xff08;NAS&#xff09; 五、总结&#x1f308;Python爬虫相…

(1-6-3)Java 多线程

目录 0.知识拓扑 1. 多线程相关概念 1.1 进程 1.2 线程 1.3 java 中的进程 与 线程概述 1.4 CPU、进程 与 线程的关系 2.多线程的创建方式 2.1 继承Thread类 2.2 实现Runnable接口 2.3 实现Callable接口 2.4 三种创建方式对比 3.线程同步 3.1 线程同步机制概述 …

java31

1.网络编程 三要素&#xff1a; 网址实质上就是ip InetAddress: UDP通信程序&#xff1a; 多个接收端的地址都要加入同一个组播地址&#xff0c;这样发送端发信息&#xff0c;全部接收端都能接受到数据 广播的代码差不多&#xff0c;就是地址不一样而已 TCP通信程序&#xf…

界面组件DevExpress WPF中文教程:Grid - 如何识别行和卡片?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

【HarmonyOS Next之旅】DevEco Studio使用指南(三十)

目录 1 -> 部署云侧工程 2 -> 通过CloudDev面板获取云开发资源支持 3 -> 通用云开发模板 3.1 -> 适用范围 3.2 -> 效果图 4 -> 总结 1 -> 部署云侧工程 可以选择在云函数和云数据库全部开发完成后&#xff0c;将整个云工程资源统一部署到AGC云端。…

AI基础知识(LLM、prompt、rag、embedding、rerank、mcp、agent、多模态)

AI基础知识&#xff08;LLM、prompt、rag、embedding、rerank、mcp、agent、多模态&#xff09; 1、LLM大语言模型 --基于​​深度学习技术​​&#xff0c;通过​​海量文本数据训练​​而成的超大规模人工智能模型&#xff0c;能够理解、生成和推理自然语言文本 --产品&…