JavaScript(四)

一、JavaScript变量

在 JavaScript 中,你可以使用几种不同的方式来声明变量。以下是主要的几种方式:

  1. 使用 var 关键字
    在 ES5 (ECMAScript 5) 及之前的版本中,var 是最常用的声明变量的方式。但是,var 有一个问题,那就是它会将变量提升到其所在函数或全局作用域的顶部(也称为变量提升)。这有时会导致意外的行为,尤其是在复杂的代码中。

var x = 10; // 声明一个变量 x 并赋值为 10  
console.log(x); // 输出 10

2.使用 let 关键字
在 ES6 (ECMAScript 2015) 中引入了 let 关键字,它允许你声明一个块级作用域的局部变量,这意味着变量只在其声明的块(例如 {...})或函数体内是可见的。let 不会进行变量提升,因此在声明之前访问它会抛出一个错误。

{  
    let y = 20; // 声明一个块级作用域的变量 y 并赋值为 20  
    console.log(y); // 输出 20  
}  
console.log(y); // ReferenceError: y is not defined(因为 y 是在块级作用域内声明的)

3.使用 const 关键字
const 用于声明一个常量,其值在初始化后不能被重新赋值。但是,如果常量是一个对象或数组,你可以修改其属性或元素,但不能重新分配一个新的对象或数组给该常量。

const z = 30; // 声明一个常量 z 并赋值为 30  
console.log(z); // 输出 30  
z = 40; // TypeError: Assignment to constant variable.(尝试修改常量的值会抛出错误)  

const obj = { a: 1 }; // 声明一个常量对象  
obj.a = 2; // 可以修改对象的属性  
console.log(obj.a); // 输出 2  
obj = { a: 3 }; // TypeError: Assignment to constant variable.(尝试重新分配一个新的对象给常量会抛出错误)

4.函数声明(虽然不是真正的变量声明,但也是一种声明):
在 JavaScript 中,函数也可以被视为一种特殊的变量,因为它们可以被赋值给变量、作为参数传递,或者从其他函数返回。

function greet() {  
    console.log("Hello, world!");  
}  
  
const greetWorld = greet; // 将函数 greet 赋值给变量 greetWorld  
greetWorld(); // 输出 "Hello, world!"

在选择使用哪种方式声明变量时,你应该考虑作用域、是否需要重新赋值以及代码的可读性和可维护性。在现代 JavaScript 开发中,通常推荐使用 let 和 const 来声明变量,因为它们提供了更清晰的作用域和更好的错误处理。

二、变量赋值

在 JavaScript 中,变量赋值是将一个值或表达式的结果存储到变量中的过程。你可以将各种类型的数据赋值给变量,包括数字、字符串、布尔值、对象、数组、函数等。赋值操作使用单个等号 =

以下是一些变量赋值的示例:

// 数字赋值  
let number = 42;  
  
// 字符串赋值  
let text = "Hello, world!";  
  
// 布尔值赋值  
let isTrue = true;  
  
// 对象赋值  
let person = {  
  name: "Alice",  
  age: 30  
};  
  
// 数组赋值  
let colors = ["red", "green", "blue"];  
  
// 函数赋值  
let greet = function() {  
  console.log("Hello!");  
};  
  
// 表达式赋值  
let sum = 2 + 3; // sum 的值是 5  
  
// 将一个变量的值赋给另一个变量  
let anotherNumber = number; // anotherNumber 的值也是 42

在 JavaScript 中,变量赋值是通过引用进行的,这意味着对象、数组和函数等复杂类型的赋值实际上是传递引用(内存地址),而不是复制值本身。因此,如果你将一个对象赋值给另一个变量,这两个变量将引用同一个对象。

let obj1 = { value: 10 };  
let obj2 = obj1; // obj2 和 obj1 引用同一个对象  
obj2.value = 20; // 修改 obj2 的属性也会影响到 obj1,因为它们引用同一个对象  
console.log(obj1.value); // 输出 20

此外,如果你使用 const 声明了一个变量,你不能给这个变量重新赋值(指向新的内存地址),但是你可以修改它的属性(如果它是一个对象或数组的话)

const constantObject = { property: "initial" };  
constantObject.property = "changed"; // 可以修改对象的属性  
console.log(constantObject.property); // 输出 "changed"  
  
// constantObject = { property: "new" }; // 这会抛出错误,因为不能重新赋值给 const 声明的变量

理解 JavaScript 的赋值行为和引用机制对于编写正确且高效的代码至关重要。特别是在处理复杂数据类型和函数时,要特别注意变量的引用和值的传递。

三、其他相关知识点

关于JavaScript变量的相关知识点和需要注意的地方,有以下几点:

  1. 变量的声明
    • 在JavaScript中,你可以使用varletconst来声明变量。
    • var是最早的关键字,但在ES6(ECMAScript 2015)之后,推荐使用letconst
    • let用于定义块级作用域的变量,即变量只在其所在的代码块(例如,大括号{}内部)中有效。
    • const用于定义不可变的变量,即常量。一旦赋值,就不能再更改其值(但如果是对象或数组,可以更改其内部属性或元素)。
  2. 变量的命名
    • 变量名可以包含字母、数字、下划线和美元符号$
    • 变量名是区分大小写的,所以myVarmyvar是两个不同的变量。
    • 通常,变量名应简洁明了,并尽可能描述其用途。如果变量名由多个单词组成,通常使用驼峰命名法(camelCase),即第一个单词的首字母小写,后续单词的首字母大写。
    • 避免使用JavaScript保留字作为变量名。
  3. 变量的赋值
    • 赋值操作使用单个等号=
    • 可以将一个值或表达式的结果赋值给变量。
    • 如果只声明变量而不赋值,则该变量的值为undefined
  4. 变量的作用域和生命周期
    • 使用var声明的变量具有函数作用域或全局作用域(如果它们在函数外部声明)。
    • 使用letconst声明的变量具有块级作用域(即,它们只在它们被声明的代码块中有效)。
    • 变量的生命周期取决于其作用域。全局变量在整个脚本的生命周期内都可用,而局部变量只在其所在的函数或代码块执行期间可用。
  5. 常量(使用const声明的变量)
    • 常量的值在声明后不能更改。但是,如果常量是一个对象或数组,你可以更改其内部属性或元素。
    • 尽量避免重新声明已经存在的常量,这会导致错误。
  6. 变量提升(Variable Hoisting)
    • 在JavaScript中,使用var声明的变量存在变量提升现象。这意味着变量可以在声明之前就被访问(尽管此时它的值为undefined)。但是,这种行为可能会导致混淆和错误,因此建议使用letconst来避免这种情况。
  7. 使用有意义的变量名
    • 为了提高代码的可读性和可维护性,应使用有意义的变量名。避免使用如abc等无意义的变量名。
  8. 避免全局变量
    • 过度使用全局变量可能会导致代码难以管理和维护。尽量将变量限制在其需要的最小作用域内。
  9. 使用严格模式(Strict Mode)
    • 在严格模式下,JavaScript对代码执行更严格的检查,这有助于捕获一些常见的编码错误。可以在脚本或函数的开头添加'use strict';来启用严格模式。
  10. 注意变量类型
    • JavaScript是一种弱类型语言,这意味着变量的类型可以根据所赋值的类型自动更改。但是,了解变量的类型仍然很重要,因为不同类型的变量具有不同的行为。例如,将字符串和数字相加会导致字符串连接,而不是算术加法。

     11.在JavaScript中,你可以在一行中同时定义多个变量。这通常通过使用逗号分隔不同的变量声明来实现。下面是一个例子:

let variable1 = "Hello", variable2 = 42, variable3 = true;

在上面的代码中,我们同时定义了三个变量:variable1是一个字符串,variable2是一个数字,variable3是一个布尔值。每个变量之间使用逗号,分隔,并且每个变量都有自己的赋值表达式。

这种做法可以简化代码,让你在更少的行中定义多个变量。然而,出于可读性和维护性的考虑,有些开发者可能更倾向于为每个变量单独写一行代码,尤其是在变量名和赋值逻辑较为复杂的情况下。


	let variable1 = "Hello"; 

	let variable2 = 42; 

	let variable3 = true;

这种做法使得每个变量的声明和赋值更加清晰,也更容易追踪变量的来源和用途。

四、JavaScript基本数据类型

JavaScript中的基本数据类型(也称为原始数据类型)包括以下几种:

  1. Number:用于表示数值,包括整数和浮点数。JavaScript中的所有数字都是以64位浮点数形式存储的,即使它们看起来是整数。特殊的数值包括Infinity(正无穷大)、-Infinity(负无穷大)和NaN(非数字,表示一个计算结果是未定义或不可表示的值)。

  2. String:用于表示文本数据,即一系列字符。字符串是不可变的,这意味着你不能改变一个字符串中的某个字符,但你可以创建新的字符串。

  3. Boolean:有两个可能的值:truefalse。通常用于条件判断。

  4. Null:表示一个空值或“无”的值。nullnull类型的唯一值,它表示一个空引用或没有对象。

  5. Undefined:当变量被声明了,但没有赋值时,它的值就是undefinedundefined是一个类型,并且undefined是这个类型的唯一值。

  6. Symbol(ES6新增):表示一个唯一的、不可变的原始值,通常用作对象的属性键。每个Symbol值都是唯一的,不会与其他任何Symbol值相等。

  7. BigInt(ES2020新增):可以表示任意大的整数。当数值超过Number.MAX_SAFE_INTEGER或小于Number.MIN_SAFE_INTEGER时,可以使用BigInt

这些基本数据类型在JavaScript中是不可变的,这意味着你不能直接改变一个基本数据类型的值。当你尝试“改变”一个基本数据类型的值时,实际上是在内存中创建了一个新的值,并将变量指向这个新的值。

请注意,除了这些基本数据类型之外,JavaScript还有一个复杂数据类型,即Object。对象是一种复合数据类型,可以包含多种值,包括其他对象。数组、函数、日期、正则表达式等都是对象的具体实例。

以下是JavaScript中基本数据类型的详细讲解:

  1. Number

    • 用于表示数值,包括整数和浮点数。
    • 在JavaScript中,数字以64位浮点数形式存储,即使它们被声明为整数。
    • 特殊的数值有Infinity(正无穷大)、-Infinity(负无穷大)和NaN(非数字,表示一个计算结果是未定义或不可表示的值)。
    • 你可以使用各种数学运算符和函数对数字进行运算和转换。
  2. String

    • 用于表示文本数据,即一系列字符。
    • 字符串是不可变的,你不能改变字符串中的某个字符,但你可以创建新的字符串。
    • 字符串可以使用单引号、双引号或反引号来定义。
    • 字符串提供了许多方法来操作和格式化文本,如concat()substring()toUpperCase()等。
    • 模板字符串(使用反引号)允许你在字符串中嵌入表达式,并通过${}语法进行求值。
  3. Boolean

    • 有两个可能的值:truefalse
    • 通常用于条件判断、逻辑运算等。
    • JavaScript中的比较语句(如=====<>等)通常返回布尔值。
    • 在JavaScript中,许多值都可以被转换为布尔值(称为“真值”或“假值”)。例如,0NaNnullundefined和空字符串''都被视为假值,而其他所有值都被视为真值。
  4. Null

    • 表示一个空值或“无”的值。
    • nullnull类型的唯一值,它表示一个空引用或没有对象。
    • 使用null来初始化一个变量,可以表示该变量将来会引用一个对象,但当前还没有引用任何对象。
    • 注意:虽然null在逻辑上表示“无”或“空”,但在类型检测时(使用typeof操作符),null会被视为一个对象(返回"object")。这是因为历史原因,但在现代JavaScript中,这可能会引发混淆。
  5. Undefined

    • 当变量被声明了,但没有赋值时,它的值就是undefined
    • undefined是一个类型,并且undefined是这个类型的唯一值。
    • 在JavaScript中,未初始化的变量、不存在的对象属性、未定义的函数返回值等都会返回undefined
    • undefinednull在逻辑上都是表示“无”或“空”,但它们在类型上是不同的。使用==操作符比较nullundefined时,会返回true,但使用===操作符(严格相等比较)时,会返回false
  6. Symbol(ES6新增):

    • 表示一个唯一的、不可变的原始值。
    • 每个Symbol值都是唯一的,不会与其他任何Symbol值相等。
    • Symbol类型常用于对象的属性键,以避免属性名冲突。
    • 你可以使用Symbol()函数来创建一个新的Symbol值。例如:let mySymbol = Symbol('mySymbol');
    • 由于Symbol类型的值是唯一的,因此它们也可以用于对象的方法或属性的私有封装。

这些就是JavaScript中的基本数据类型。它们在JavaScript编程中扮演着重要的角色,并提供了各种方法和操作来处理和转换这些数据类型。

五、String类型的对象一系列方法讲解及例子

String 类型是 JavaScript 中用于表示文本数据的基础数据类型。尽管 String 是原始数据类型,但 JavaScript 为其提供了一系列的方法和属性,使得字符串的操作变得非常灵活和方便。以下是一些常用的 String 类型对象的方法,并带有相应的例子来解释它们是如何工作的。

1. charAt(index)

返回指定索引位置的字符。

let str = "Hello";  
console.log(str.charAt(0)); // 输出 "H"

2. charCodeAt(index)

返回指定索引位置的字符的 Unicode 编码。

let str = "Hello";  
console.log(str.charCodeAt(0)); // 输出 72,即 "H" 的 Unicode 编码

3. concat(str1, str2, ..., strN)

连接两个或多个字符串,并返回新的字符串。

let str1 = "Hello";  
let str2 = "World";  
let result = str1.concat(" ", str2);  
console.log(result); // 输出 "Hello World"

4. indexOf(searchValue[, fromIndex])

返回某个指定的字符串值在字符串中首次出现的位置。

let str = "Hello World";  
console.log(str.indexOf("World")); // 输出 6

5. lastIndexOf(searchValue[, fromIndex])

返回某个指定的字符串值在字符串中最后出现的位置。

let str = "Hello World, hello everyone";  
console.log(str.lastIndexOf("hello")); // 输出 13

6. slice(startIndex[, endIndex])

提取字符串的某个部分,并在新的字符串中返回被提取的部分。

let str = "Hello World";  
console.log(str.slice(0, 5)); // 输出 "Hello"

7. substring(startIndex[, endIndex])

提取字符串中介于两个指定的下标之间的字符。

let str = "Hello World";  
console.log(str.substring(0, 5)); // 输出 "Hello"

8. substr(startIndex[, length])

从起始索引号提取字符串中指定数目的字符。

let str = "Hello World";  
console.log(str.substr(0, 5)); // 输出 "Hello"

9. toUpperCase()

把字符串转换为大写。

let str = "hello";  
console.log(str.toUpperCase()); // 输出 "HELLO"

10. toLowerCase()

把字符串转换为小写。

let str = "HELLO";  
console.log(str.toLowerCase()); // 输出 "hello"

11. trim()

去除字符串两端的空白符。

let str = "   Hello World   ";  
console.log(str.trim()); // 输出 "Hello World"

12. replace(regexp|substr, newSubStr|function)

在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

let str = "Hello World";  
console.log(str.replace("World", "Universe")); // 输出 "Hello Universe"

13. split(separator[, limit])

把字符串分割为字符串数组。

let str = "apple,banana,cherry";  
console.log(str.split(",")); // 输出 ["apple", "banana", "cherry"]

14. search(regexp)

执行正则表达式匹配查找,并返回第一个匹配的索引。

let str = "Hello World";  
console.log(str.search("World")); // 输出 6

15. match(regexp)

可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

let str = "Hello123World456";  
let matches = str.match(/\d+/g);  
console.log(matches); // 输出 ["123", "456"]

16. localeCompare(targetString[, locales[, options]])

用本地特定的顺序来比较两个字符串。

let str1 = "apple";  
let str2 = "Banana";  
  
// 使用 localeCompare 方法比较两个字符串  
let result = str1.localeCompare(str2);  
  
// 输出比较结果  
console.log(result);

在这个例子中,localeCompare() 方法将比较 str1 和 str2。由于 JavaScript 的 localeCompare() 方法默认使用当前环境的区域设置(locale)来执行比较,并且默认情况下,字符串的比较是区分大小写的,所以 "apple" 会被视为在 "Banana" 之前(在大多数区域设置中)。因此,result 的值将会是负数(具体取决于具体的实现和区域设置,但通常会是 - 开头的数字)。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jdk 内存伪共享

一、什么是伪共享 数据X、Y、Z被加载到同一Cache Line中&#xff0c;线程A在Core1上修改X&#xff0c;而修改X会导致其所在的所有核上的缓存行均失效&#xff1b;假设此时线程B在Core2上读取Y&#xff0c;由于X所在的缓存行已经失效&#xff0c;所有Core2必须从内存中重新读取。…

碳排放预测(粉丝免费) | 基于深度学习的碳排放预测模型

效果分析 基本介绍 基于深度学习的碳排放预测模型 碳排放量预测是碳中和目标达成工作中的重要组成部分。为了实时预测碳排放量,本文深度学习在数据特征提取方面的优势和长短期记忆人工神经网络解决时间序列各个观测值依赖性问题的特点,提出了一种基于深度学习的碳排放量预测模…

springboot图书个性化推荐系统的设计与实现+1w字文档

项目演示视频: 【源码免费送】基于springboot图书个性化推荐系统的设计与实现录像 摘 要 本论文主要论述了如何使用JAVA语言开发一个图书个性化推荐系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项…

Linux基础-socket详解、TCP/UDP

文章目录 一、Socket 介绍二、Socket 通信模型三、Socket 常用函数1 创建套接字2 绑定套接字3、监听连接4、接受连接5、接收和发送数据接收数据发送数据 6、关闭套接字 四、Socket编程试验1、源码server.cclient.c 2、编译&#xff1a;3、执行结果 五、补充TCP和UDP协议的Socke…

Agisoft Metashape 自定义底图

Agisoft Metashape 自定义底图 前言 Agisoft Metashape 从2.0.2 版本开始,Agisoft Metashape Professional 和 Agisoft Viewer 支持自定义底图,可用于模型和正射视图模式。本文以添加Esri World Image卫星底图图源为例,介绍Agisoft Metashape 自定义底图的方法。 添加自定…

YOLOV8 pycharm

1 下载pycharm 社区版 https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows 2 安装 3 新建 4 选择 文件-> setting 配置环境变量 5 添加conda 环境

vite打包配置

目录 minify默认是esbuild&#xff0c;不能启动下面配置 使用&#xff1a; plugins: [viteMockServe({mockPath: mock})]根目录新建mock/index.ts. 有例子Mock file examples&#xff1a;https://www.npmjs.com/package/vite-plugin-mock-server 开发环境生产环境地址替换。根…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图&#xff1a;这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

营收不过万,世道艰难,月末总结复盘ing

2024已经走过了1/3&#xff0c;从事实上看确实如大佬们所说世道越来越难&#xff0c;过往的几个月份营收只有区区10000。向下兼容的话从绝对值上看收入确实不少了&#xff0c;从相对值上看又少的可怜&#xff0c;只能满足温饱而已。 这个月上半场成绩非常喜人&#xff0c;半个月…

IDEA在setting中已经勾选了Use non-modal commit interface选项,还是不显示commit侧边栏

今天在拉取项目后&#xff0c;发现我得项目不显示commit的侧边栏&#xff0c;导致我的项目修改没有一个提示。 去网上搜了一些方案&#xff0c;都是让修改seting中的下图中的选项 但是我勾选上还是没有任何效果&#xff0c;侧边栏还是不显示commit的选项。 然后经过重重检索&…

C语言——柔性数组

1、柔性数组是什么 在C语言中&#xff0c;柔性数组成员&#xff08;Flexible Array Member&#xff0c;简称FAM&#xff09;是C99标准中引入的一种结构体成员&#xff0c;用于表示一个大小可变的数组。它是结构体的最后一个成员&#xff0c;不像普通的数组&#xff0c;没有固定…

spring boot运行过程中动态加载Controller

1.被加载的jar代码 package com.dl;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;SpringBootApplication public class App {public static void main(String[] args) {SpringApplication.run(A…

stm32f103c8t6学习笔记(学习B站up江科大自化协)-UNIX时间戳、BKPRTC

UNIX时间戳 UNIX时间戳最早是在UNIX系统使用的&#xff0c;所以叫做UNIX时间戳&#xff0c;之后很多由UNIX演变而来的系统也继承了UNIX时间戳的规定&#xff0c;目前linux&#xff0c;windows&#xff0c;安卓这些操作系统的底层计时系统都是用UNIX时间戳 时间戳这个计时系统和…

http请求报文的组成与作用?

http请求报文的组成与作用&#xff1f; 一、http 的请求报文组成二、请求行&#xff08;Request Line&#xff09;三、请求头部&#xff08;Request Headers&#xff09;四、请求体&#xff08;Request Body&#xff09;五、响应头部 &#xff08;Response Headers &#xff09…

部署YUM仓库和NFS共享存储服务

目录 1. YUM仓库服务 1.1 YUM概述 1.2 准备安装源 1.3 yum在线源替换方法 2.制作YUM源 2.1制作ftp源 3.yum软件包的下载方式 4.NFS共享存储服务 4.1 NFS 4.2 NFS网络文件系统 4.3 NFS配置 1. YUM仓库服务 1.1 YUM概述 yum是一个基于RPM包&#xff08;是Red-Ha…

MAC 本地搭建Dify环境

Dify 介绍 Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务&#xff08;Backend as Service&#xff09;和 LLMOps 的理念&#xff0c;使开发者可以快速搭建生产级的生成式 AI 应用。即使你是非技术人员&#xff0c;也能参与到 AI 应用的定义和数据运营过…

运维的利器–监控–zabbix–第二步:建设–汉化补丁--导致乱码问题

文章目录 问题原因解决方法 问题 点击对应主机的【图形】即可看到以下乱码情况 原因 上述的图标数据&#xff0c;下面的小白框表示乱码含义&#xff0c;是因为我们改了zabbix的 语言为中文 解决方法 服务器需要安装字体 [rootzabbix-server01 ~]#yum -y install wqy-mic…

go设计模式之抽象工厂模式

抽象工厂模式 提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。 工厂方法模式通过引入工厂等级结构&#xff0c;解决了简单工厂模式中工厂类职责太重的问题&#xff0c;但由于工厂方法模式中的每个工厂只生产一类产品&#xff0c;可能会导致…

maven-依赖管理

依赖配置 https://mvnrepository.com/?__cf_chl_rt_tkvRzDsumjmJ_HF95MK4otu9XluVRHGqAY5Wv4UQYETR8-1714103058-0.0.1.1-1557 <dependencies><dependency><groupId></groupId><artifactId></artifactId><version></version>…

精确测量地面沉降:静力水准仪的应用

地面沉降是一个全球性的地质问题&#xff0c;它可能对建筑物、道路和地下设施造成严重的损害。因此&#xff0c;对地面沉降进行精确测量和监测至关重要。静力水准仪作为一种先进的测量设备&#xff0c;为地面沉降的精确测量提供了有效手段。本文将探讨静力水准仪在地面沉降测量…
最新文章