【前端】JavaScript中的字面量概念与应用详解


在这里插入图片描述

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]
本文专栏: 前端

文章目录

  • 💯前言
  • 💯字面量
    • 1. 数字字面量
    • 2. 字符串字面量
    • 3. 布尔字面量
    • 4. 空值字面量(null)
    • 5. 对象字面量
    • 6. 数组字面量
    • 7. 正则表达式字面量
    • 8. 特殊值字面量
    • 9. 函数字面量(匿名函数表达式)
    • 10. BigInt 字面量
  • 💯小结


在这里插入图片描述


💯前言

  • JavaScript 编程语言中,字面量(Literal) 是一种基本且关键的概念,它贯穿整个开发过程并具有广泛的用途。字面量指的是在代码中直接表达特定的 固定值 的方式,例如 数字字符串布尔值数组对象 等。字面量的 直接性 使得它成为编程语言中最基本的组成部分之一。掌握字面量的概念和其多样的应用场景,对于深入理解 JavaScript 语言特性,以及编写高效简洁可维护 的代码而言,是至关重要的。在本文中,我们将深入探讨 JavaScript 中各种字面量的 概念及其应用,并通过代码示例进行详细的演示,旨在帮助您在项目开发中正确地理解和使用这些字面量。通过全面了解这些 字面量,您将能够在实际开发中更有效地编写代码,从而提升代码的 可读性维护性 以及整体 质量
    JavaScript在这里插入图片描述

💯字面量

在这里插入图片描述
字面量(Literal) 是指代码中直接表示固定值的语法结构。例如,在代码 let number = 42; 中,42 就是一个数字字面量。字面量并不依赖于变量或函数的运行结果,而是代码中明确的 常量值。字面量可以用于多种数据类型,包括 数字字符串布尔值数组对象 等,从而涵盖了广泛的 数据表示需求

JavaScript 中常见的字面量类型包括数字字面量、字符串字面量、布尔字面量、对象字面量、数组字面量、正则表达式字面量等。下面将详细介绍这些 字面量的类型、其 应用场景 以及相关的 使用方式


1. 数字字面量

数字字面量用于表示数值,并且可以以多种形式存在,如整数、浮点数、二进制、八进制、十六进制等。它们在 JavaScript 中是数值操作的核心。
在这里插入图片描述

  • 整数字面量

    let a = 42; // 代表整数 42
    

    在此例中,42 是一个整数字面量,它直接表示变量 a 的值。

  • 浮点数字面量

    let b = 3.14; // 代表浮点数 3.14
    

    数值 3.14 是一个浮点数字面量,用于表示带有小数点的数值,尤其适用于处理精度较高的计算。

  • 科学计数法
    JavaScript 还支持使用科学计数法来表示非常大的或非常小的数值,这对于科学计算非常有用。

    let c = 1.2e3; // 等价于 1.2 * 10³ = 1200
    

    科学计数法提供了一种紧凑的表示方式,用于在代码中处理大数量级或小数量级的数据。

  • 进制表示
    JavaScript 支持不同进制的数字表示,例如二进制、八进制和十六进制:

    // 二进制 (前缀 0b)
    let binary = 0b1010; // 等价于 10// 八进制 (前缀 0o)
    let octal = 0o52; // 等价于 42// 十六进制 (前缀 0x)
    let hex = 0x2A; // 等价于 42
    

    不同进制的表示使得 JavaScript 在处理底层操作时更加灵活,尤其是在操作计算机硬件或者需要与低级语言交互的场景中。


2. 字符串字面量

字符串字面量是由引号(单引号 '、双引号 " 或反引号 `)包裹的一串字符序列。字符串字面量用于表示文本数据,并且在 JavaScript 中具有多种用途,例如用户输入、消息显示等。
在这里插入图片描述

  • 单引号和双引号

    let str1 = 'Hello';
    let str2 = "World";
    

    单引号和双引号在 JavaScript 中是等效的,开发者可以根据个人或团队的风格指南自由选择使用哪种类型的引号,只需保持一致即可。

  • 模板字符串
    使用反引号(`)定义的模板字符串支持多行字符串和内嵌表达式,是 JavaScript ES6 中的一项强大功能。

    let name = "Alice";
    let greeting = `Hello, ${name}!`; // 使用模板字符串
    

    模板字符串中的 ${} 语法用于嵌入变量或表达式,这极大地简化了字符串拼接的过程,使得代码更易于维护,特别是在构建动态内容时尤为便利。

  • 特殊字符转义
    在字符串字面量中,可以通过反斜杠(\)来转义特殊字符:

    let quote = "This is a \"quoted\" word"; // 包含引号
    let path = "C:\\Windows"; // 反斜杠的使用
    

    转义字符使得字符串中可以包含引号、反斜杠和其他特殊符号,这在处理文件路径或包含特定符号的文本时尤为有用。


3. 布尔字面量

布尔字面量表示逻辑值 truefalse,这两个值在逻辑判断和条件控制中起着至关重要的作用。
在这里插入图片描述

let isTrue = true;
let isFalse = false;

布尔字面量主要用于控制程序的执行流程,例如在 if 语句、循环或条件运算符中。它们是编程中逻辑控制的基石,尤其在处理条件分支和开关控制的场景中,是不可或缺的。


4. 空值字面量(null)

null 是一种特殊的字面量,表示“空”或“无值”。它通常用于明确地表明某个变量当前不持有任何对象引用。
在这里插入图片描述

let value = null; // 表示变量 value 没有值

undefined 不同,null 是一种有意为之的空值。null 表示对象的缺失,而 undefined 则表示变量尚未初始化。它常用于标识一个对象在特定时刻为空的情况,例如在需要重置对象或判断对象是否存在时。


5. 对象字面量

对象字面量是用花括号 {} 表示的键值对的集合,是 JavaScript 中最重要的数据结构之一。它用于存储复杂的、关联的数据。
在这里插入图片描述

let person = {name: "Alice",age: 25,isStudent: true,
};

对象字面量的键值对由冒号分隔,多个键值对之间用逗号隔开。对象为开发者提供了一种非常灵活和直观的方式来表示和操作数据结构,尤其是在处理 JSON 格式的数据时尤为重要。对象可以嵌套其他对象,从而表示更加复杂的数据结构,这使得它们在大型应用开发中无处不在。


6. 数组字面量

数组字面量表示一个有序的值的集合,用方括号 [] 包裹。它们用于存储一组数据,数据类型可以是任意的。
在这里插入图片描述

let fruits = ["apple", "banana", "cherry"];

数组字面量中的元素可以是不同的数据类型,甚至可以包含对象、数组或函数。数组在 JavaScript 中广泛用于处理列表数据,常见操作包括添加、删除、遍历元素等。JavaScript 提供了丰富的内置方法,如 push()pop()map()filter() 等,使得数组的操作简洁而强大。


7. 正则表达式字面量

JavaScript 支持通过正则表达式来处理字符串的模式匹配。正则表达式字面量使用斜杠 / 来表示。
在这里插入图片描述

let regex = /ab+c/; // 匹配 "a" 后接一个或多个 "b",再接 "c"

正则表达式字面量用于创建正则表达式对象,可直接用于字符串的匹配与替换操作。正则表达式在数据验证、搜索和复杂的文本处理任务中非常有用,是 JavaScript 处理文本的强大工具。


8. 特殊值字面量

  • undefinedundefined 是 JavaScript 中的特殊值,通常由系统赋予未初始化的变量。

    let value; // 未初始化的变量默认为 undefined
    

    当变量声明但未赋值时,其值为 undefined,表示该变量尚未被赋予有效的值。undefined 通常用于检测变量是否已被初始化。

  • NaN:代表“非数字值”(Not a Number)。它通常出现在试图对非数值执行数学运算的情况下。

    let result = Math.sqrt(-1); // NaN
    

    NaN 不是字面量,但它是 JavaScript 中一种特殊的数值状态,表示数值计算中无法得出有效结果的情况。

在这里插入图片描述


9. 函数字面量(匿名函数表达式)

在 JavaScript 中,函数也可以作为字面量。这些匿名函数可以直接赋值给变量或作为参数传递给其他函数。

let greet = function(name) {return `Hello, ${name}!`;
};

函数字面量用于定义匿名函数并赋值给变量,或者作为参数传递给其他函数。它使得 JavaScript 在处理回调、事件处理和函数式编程场景中非常灵活。

在这里插入图片描述


10. BigInt 字面量

BigInt 是 JavaScript 中用于表示任意大小整数的一种特殊字面量。它通过在数字后添加 n 后缀来表示。

let bigNum = 1234567890123456789012345678901234567890n;

BigInt 可以处理超出 Number 类型范围的整数,并且在需要高精度运算的场景中(如加密和科学计算)非常有用。BigInt 的引入使得 JavaScript 能够安全地处理极大的整数,而不会因精度损失而导致计算错误。
在这里插入图片描述


💯小结

  • 在这里插入图片描述
    JavaScript 中的字面量是代码中用于直接表示固定值的形式,是程序中定义变量和数据的 核心构件。理解并掌握这些字面量的用法,有助于开发者编写 简洁高效可读性强 的代码。在本文中,我们探讨了 数字字面量字符串字面量布尔字面量对象字面量数组字面量正则表达式字面量 等不同类型的字面量,并结合示例演示了它们的 使用场景和应用
    字面量的灵活性和广泛应用使得 JavaScript 成为一门非常 强大灵活 的编程语言。熟练掌握字面量的概念,不仅能帮助开发者更好地理解 JavaScript 的本质,还能使其在编写代码时更加自如。无论是处理简单数据、构建复杂的数据结构,还是执行 逻辑判断文本操作,字面量都提供了简洁直观的方式来表达程序中的各类值。在不断深入学习 JavaScript 的过程中,您将发现 字面量 是构建应用程序 不可或缺 的部分,它们让代码更具 表现力易于维护扩展
    通过对字面量的全面理解,我们能够更加高效地利用 JavaScript 的特性,编写出具备良好 可读性扩展性 的代码。不论是作为 初学者,还是经验丰富的开发者,深入理解和运用 字面量的概念 都会极大地提升 JavaScript 编程能力。希望通过这篇文章,您能更加深入地掌握 JavaScript 中的字面量,为您的开发之旅增添更多 信心力量

在这里插入图片描述


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

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

相关文章

字节跳动青训营刷题笔记19

问题描述 小R正在组织一个比赛,比赛中有 n 支队伍参赛。比赛遵循以下独特的赛制: 如果当前队伍数为 偶数,那么每支队伍都会与另一支队伍配对。总共进行 n / 2 场比赛,且产生 n / 2 支队伍进入下一轮。如果当前队伍数为 奇数&…

Python中的简单爬虫

文章目录 一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务器和浏览器的通讯流程3. 浏览器访问Web服务器的通讯流程4. 加载图片资源代码 二. 基于Web请求的FastAPI通用配置1. 目前Web服务器存在问题2. 基于Web请求的FastAPI通用配置 三. Python爬虫介绍1. 什…

【ArcGISPro】使用AI提取要素-土地分类(sentinel2)

Sentinel2数据处理 【ArcGISPro】Sentinel-2数据处理-CSDN博客 土地覆盖类型分类 处理结果

WinForm 的Combox下拉框 在FlatStyle.Flat的边框设置

现象:Combox在设置FlatStyle.Flat时边框不见了 效果: 解决问题思路封装新控件: public class DBorderComboBox : ComboBox {private const int WM_PAINT 0xF;[Browsable(true)][Category("Appearance")][Description("边框…

Python 爬虫入门教程:从零构建你的第一个网络爬虫

网络爬虫是一种自动化程序,用于从网站抓取数据。Python 凭借其丰富的库和简单的语法,是构建网络爬虫的理想语言。本文将带你从零开始学习 Python 爬虫的基本知识,并实现一个简单的爬虫项目。 1. 什么是网络爬虫? 网络爬虫&#x…

使用UE5.5的Animator Kit变形器

UE5.5版本更新了AnimatorKit内置插件,其中包含了一些内置变形器,可以辅助我们的动画制作。 操作步骤 首先打开UE5.5,新建第三人称模板场景以便测试,并开启AnimatorKit组件。 新建Sequence,放入测试角色 点击角色右…

Uniapp 安装安卓、IOS模拟器并调试

一、安装Android模拟器并调试 1. 下载并安装 Android Studio 首先下载 Mac 环境下的 Android Studio 的安装包,为dmg 格式。 下载完将Android Studio 向右拖拽到Applications中,接下来等待安装完成就OK啦! 打开过程界面如下图所示&#xf…

shell(5)字符串运算符和逻辑运算符

声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&#…

【金蝶双线指标】以看资金进出操作为主,兼顾波段跟踪和短线低吸

如上图,个股副图指标,大佬资金监控短线低吸攻击线操盘线趋势红蝴蝶,五大功能于一体。下面慢慢给大家仔细分享。 大佬资金监控指标,红绿进出,绿色缩小到极致,接近零轴,红绿柱分界线,为…

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测 目录 多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现TCN-GRU时间卷积…

HCIA笔记4--VLAN划分

1. vlan是什么 vlan: virtual lan; 虚拟局域网的简称。 主要目的是隔离广播域。 2. vlan报文格式 在普通的以太网数据帧开关的12字节后添加4字节的vlan tag。而来区分vlan的是其中的vid部分12个比特位,范围自然就是0~2^12-1(0~4095); 0 4095保留使用。实际使用的是…

蓝牙定位的MATLAB仿真程序|基于信号强度的定位,平面、四个蓝牙基站(附源代码)

这段代码通过RSSI信号强度实现了蓝牙定位,展示了如何使用锚点位置和测量的信号强度来估计未知点的位置。它涵盖了信号衰减模型、距离计算和最小二乘法估计等基本概念。通过图形化输出,用户可以直观地看到真实位置与估计位置的关系。 文章目录 蓝牙定位原…

基于Springboot企业级工位管理系统【附源码】

基于Springboot企业级工位管理系统 效果如下: 系统登录页面 员工主页面 部门信息页面 员工管理页面 部门信息管理页面 工位信息管理页面 工位分配管理页面 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及,互联网成为人们查找信息的重要场所。…

Spring Boot教程之十: 使用 Spring Boot 实现从数据库动态下拉列表

使用 Spring Boot 实现从数据库动态下拉列表 动态下拉列表(或依赖下拉列表)的概念令人兴奋,但编写起来却颇具挑战性。动态下拉列表意味着一个下拉列表中的值依赖于前一个下拉列表中选择的值。一个简单的例子是三个下拉框,分别显示…

SpringBoot源码-spring boot启动入口ruan方法主线分析(一)

一、SpringBoot启动的入口 1.当我们启动一个SpringBoot项目的时候,入口程序就是main方法,而在main方法中就执行了一个run方法。 SpringBootApplication public class StartApp {public static void main(String[] args) {// testSpringApplication.ru…

AI 助力开发新篇章:云开发 Copilot 深度体验与技术解析

本文 一、引言:技术浪潮中的个人视角1.1 AI 和低代码的崛起1.2 为什么选择云开发 Copilot? 二、云开发 Copilot 的核心功能解析2.1 自然语言驱动的低代码开发2.1.1 自然语言输入示例2.1.2 代码生成的模块化支持 2.2 实时预览与调整2.2.1 实时预览窗口功能…

vscode的markdown扩展问题

使用vscode编辑markdown文本时,我是用的是Office Viewer(Markdown Editor)这个插件 今天突然发现不能用了,点击切换编辑视图按钮时会弹出报错信息: command office.markdown.switch not found 在网上找了很久发现没有有关这个插件的文章………

从零开始学 Maven:简化 Java 项目的构建与管理

一、关于Maven 1.1 简介 Maven 是一个由 Apache 软件基金会开发的项目管理和构建自动化工具。它主要用在 Java 项目中,但也可以用于其他类型的项目。Maven 的设计目标是提供一种更加简单、一致的方法来构建和管理项目,它通过使用一个标准的目录布局和一…

去哪儿大数据面试题及参考答案

Hadoop 工作原理是什么? Hadoop 是一个开源的分布式计算框架,主要由 HDFS(Hadoop 分布式文件系统)和 MapReduce 计算模型两部分组成 。 HDFS 工作原理 HDFS 采用主从架构,有一个 NameNode 和多个 DataNode。NameNode 负…

守护进程

目录 守护进程 前台进程 后台进程 session(进程会话) 前台任务和后台任务比较好 本质 绘画和终端都关掉了,那些任务仍然在 bash也退了,然后就托孤了 ​编辑 守护进程化---不想受到任何用户登陆和注销的影响​编辑 如何…