【前端】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.mzph.cn/web/61040.shtml

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

相关文章

Python使用ffmpeg进行本地视频拉流,并使用训练模型识别人脸,并将识别后的模型推流源码

前言: Windows上搭建nginx-rtsp流媒体服务器,实现FFmpeg推流、录像转rtsp推流 - WayWayWayne - 博客园参考上述文章和一些webRTC前端拉流文章 主要是缕一缕思路和每个部分的代码功能,文件命名高度相似导致。 效果: 代码&#x…

【去毛刺】OpenCV图像处理基础:腐蚀与膨胀操作入门

在数字图像处理中,形态学操作是一种常用的技术,用于提取图像中的特定形状或特征。其中,腐蚀(Erosion)和膨胀(Dilation)是两种基本的形态学运算。本文将通过一个简单的例子来演示如何使用Python中…

2024年11月27日Github流行趋势

项目名称:screenshot-to-code 项目维护者:abi clean99 sweep-ai kachbit vagusX项目介绍:通过上传截图将其转换为整洁的代码(支持HTML/Tailwind/React/Vue)。项目star数:62,429项目fork数:7,614…

Linux八股积累与笔记

1、iptables 是一个用于配置Linux内核防火墙规则的工具。四表五链:在iptables中,有四个表(tables)和五个链(chains),用于管理不同类型的数据包过滤规则。如下: 表(Tabl…

Qt5.14.2的安装与环境变量及一些依赖库的配置

目录 1.Qt5.14.2安装 2.Qt环境变量及一些依赖库的配置 1.Qt5.14.2安装 QT从入门到入土(一)——Qt5.14.2安装教程和VS2019环境配置 - 唯有自己强大 - 博客园 2.Qt环境变量及一些依赖库的配置 假设QT安装目录为: D:\Qt\Qt5.14.2 将目录: D:\Qt\Qt5.14.…

初识Linux(4):Linux基础环境工具(下)

1. Git Git是一种版本控制系统,是一种工具,用于代码的存储和版本控制。 而我们常见的Gitee和Gitehub都是基于Git(Git是开源的)实现的在线代码仓库,而前者服务器位于中国,后者服务器位于美国。 总的来说&…

12.Three.js纹理动画与动效墙案例

12.Three.js纹理动画与动效墙案例 在Three.js的数字孪生场景应用中,我们通常会使用到一些动画渲染效果,如动效墙,飞线、雷达等等,今天主要了解一下其中一种动画渲染效果:纹理动画。下面实现以下动效墙效果&#xff08…

《白帽子讲Web安全》13-14章

《白帽子讲Web安全》13-14章 《白帽子讲Web安全》13-14章13、应用层拒绝服务攻击13.1、DDOS简介13.2、应用层DDOS13.2.1、CC攻击13.2.2、限制请求频率13.2.3、道高一尺,魔高一丈 13.3、验证码的那些事儿13.4、防御应用层DDOS13.5、资源耗尽攻击13.5.1、Slowloris攻击…

【电子元器件】Nand Flash基础介绍

本文章是笔者理论结合实践进行整理的备忘笔记。希望在帮助自己温习避免遗忘的同时,也能帮助其他需要参考的朋友。如有谬误,欢迎大家进行指正。 一、什么是Nand Flash Flash主要分两种,Nand Flash和Nor flash。 Nor的成本相对高&#xff0c…

JVM_垃圾收集器详解

1、 前言 JVM就是Java虚拟机,说白了就是为了屏蔽底层操作系统的不一致而设计出来的一个虚拟机,让用户更加专注上层,而不用在乎下层的一个产品。这就是JVM的跨平台,一次编译,到处运行。 而JVM中的核心功能其实就是自动…

python除了熟悉的pandas,openpyxl库也很方便的支持编辑Excel表

excel表格是大家经常用到的文件格式,各行各业都会跟它打交道。之前文章我们介绍了使用openpyxl和xlrd库读取excel表数据,使用xlwt库创建和编辑excel表,在办公自动化方面可以方便我们快速处理数据,帮助我们提升效率。 python之open…

网络知识1-TCP/IP模型

从用户端到服务端,tcp/ip模型可分为应用层、传输层、网络层、网络接口层 以下使用寄快递为例进行解释 应用层职责: 只关注与为用户提供应用功能,如HTTP、FTP、telnet、DNS、SMTP等 ,应用层的职责就像我们寄快递时将快递给快递员…

机器学习(二十五):决策树算法以及决策树和神经网络的对比

一、决策树集合 单一决策树会对训练数据的变化很敏感。例子:输入十个数据,判断是否是猫。只替换其中一个数据,信息增益最高的分裂特征就发生了改变,决策树就发生了变化。 使用决策树集合可以使算法更加健壮。例子:使用…

通俗理解人工智能、机器学习和深度学习的关系

最近几年人工智能成为极其热门的概念和话题,可以说彻底出圈了。但人工智能的概念在1955年就提出来了,可以说非常古老。我在上小学的时候《科学》课本上就有人工智能的概念介绍,至今还有印象,但那些年AI正处于“寒冬”,…

CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标

注:本文为 “CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标” 几篇相关文章合辑。 文章中部分超链接、图片异常受引用之前的原文所限。 相机自动对焦原理 TriumphRay 于 2020-01-16 18:59:41 发布 凸透镜成像原理 这一部分大家中学应该就学过…

文件上传upload-labs-docker通关

(图片加载不出,说明被和谐了) 项目一: sqlsec/ggctf-upload - Docker Image | Docker Hub 学习过程中,可以对照源码进行白盒分析. 补充:环境搭建在Linux虚拟机上的同时,以另一台Windows虚拟机进行测试最…

Linux的介绍及虚拟机centOS系统的下载与应用

1、什么是Linux Linux 是一种类 Unix 操作系统,它的内核(Kernel)由 Linus Torvalds 于 1991 年首次发布。作为一个开源、免费的操作系统,Linux 被广泛用于服务器、桌面计算机、嵌入式设备、移动设备等各种场景。 1、操作系统 操…

如何在 Ubuntu 22.04 上安装 Metabase 数据可视化分析工具

简介 Metabase 提供了一个简单易用的界面,让你能够轻松地对数据进行探索和分析。通过本文的指导,你将能够在 Ubuntu 22.04 系统上安装并配置 Metabase,并通过 Nginx 进行反向代理以提高安全性。本教程假设你已经拥有了一个非 root 用户&…

spring +fastjson 的 rce

前言 众所周知&#xff0c;spring 下是不可以上传 jsp 的木马来 rce 的&#xff0c;一般都是控制加载 class 或者 jar 包来 rce 的&#xff0c;我们的 fastjson 的高版本正好可以完成这些&#xff0c;这里来简单分析一手 环境搭建 <dependency><groupId>org.spr…

js 高亮文本中包含的关键词标红

在开发中&#xff0c;遇到需要将文本中包含的关键字高亮的情况&#xff0c;可以做以下处理。 <div class"title"v-html"highlightKeywords(item.title, state1.tags1.concat(state2.tags2).concat(state3.tags3))"> </div> ...... ...... con…