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.mzph.cn/pingmian/5135.shtml

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

相关文章

Scott Brinker:16年后,当前的(而非未来的)Martech已经出现,但分布不均。

杜克大学、德勤和美国营销协会共同开展的名为「CMO调查」 的两年一度的项目&#xff0c;是营销行业内的一项重要研究项目&#xff0c;已经持续了十多年。该调查的组织工作做得非常好&#xff0c;每次发布我都迫不及待地想要阅读。 我特别兴奋地阅读了刚刚发布的2024年春季版&a…

Elasticsearch内存占用分析

目录 1. 堆内存 (Heap Memory) 2. 索引缓存 (Index Cache) 3. 段缓存 (Segment Cache) 4. 文件系统缓存 (File System Cache) 5. 分片和副本 (Shards and Replicas) 6. 分析器和令牌器 (Analyzers and Tokenizers) 7. 过度配置 (Over-Allocation) 8. 垃圾回收 (Garbage…

MySQL加减间隔时间函数DATE_ADD和DATE_SUB的详解

目录 前言语法示例代码运用 前言 mysql中内置函数date_add 和 date_sub能对指定的时间进行增加或减少一个指定的时间间隔&#xff0c;返回的是一个日期。 语法 添加时间间隔 DATE_ADD(date,INTERVAL expr type)SELECT DATE_add(NOW(),INTERVAL -7 DAY);//获取7天前的日期 S…

java基础郎波版chapter4习题

文章目录 1.试说明Java语言是如何支持多重继承的。2.类的构造方法和成员方法之间有什么区别?构造方法&#xff1a;成员方法&#xff1a; 3.编写程序片段,定义表示课程的类Course。4.编写程序创建习题3中的Course类的对象,设置并打印输出该对象的课程名、编号以及先修课号。5.J…

Python数组类+AI插件

目录 规划实现初始化插入删除查找 AI插件单测注释调优建议 小结 规划 先想清楚都写哪些&#xff0c;然后再动手操作 用Python写了一个简单数组类&#xff0c;首先思考下都写哪些功能&#xff1a; 插入删除查找用插件做单元测试和写注释 目的只是实现一个简单的数组类&#x…

ffplay支持mac/iOS硬解码实践

1. ffmpeg编译开启videotoolbox的支持。 ./configure --enable-videotoolbox --enable-hwaccels 2. stream_component_open方法中开启硬件解码器。 int FSPlay::stream_component_open(VideoState *is, int stream_index) {//...codec avcodec_find_decoder(avctx->code…

Python自学篇3-PyCharm开发工具下载、安装及应用

一、Python开发工具 自学篇1中讲到了安装Python之后出现的几个应用程序&#xff0c;其中IDLE、Python.exe都可以用来编写python程序&#xff0c;也可以进行调试&#xff1b;但是比较基础&#xff0c;比较原始&#xff0c;调试不方便&#xff0c;界面也不友好&#xff0c;需要更…

Unity List底层源码剖析

文章目录 前言一、List源码二、Add接口三、Remove接口四、Insert接口五、其他接口1、[]接口2、Clear接口3、Contains接口4、ToArray接口5、Find接口6、Enumerator接口7、Sort接口 六、线程安全总结 前言 没有扎实的基础&#xff0c;很多编写的程序会随着软件规模的扩大或扩展而…

(06)vite与ts的结合

文章目录 系列全集package.json在根目录创建 tsconfig.json 文件在根目录创建 vite.config.ts 文件index.html额外的类型声明 系列全集 &#xff08;01&#xff09;vite 从启动服务器开始 &#xff08;02&#xff09;vite环境变量配置 &#xff08;03&#xff09;vite 处理 c…

R语言 数据整理篇之结构重塑

《Cookbook for R》Manipulating Data ~ Restructuring 数据整理篇之数据结构重塑 Converting between data frames and contingency tables 在数据框和列联表之间转换 表示同样的内容但是三种不同的表现形式&#xff1a; 1、呈现个案观测值的数据框 cases &#xff1a;每行代…

【报错】Could not autowire. No beans of ‘SysUserRoleService‘ type found

1.查看对应service层是否添加Service 2.可以修改成Resource注入&#xff0c; Autowired和Resource区别一个是默认按照类型&#xff0c;一个默认按照名字 3.解决办法是&#xff1a;降低Autowired检测的级别&#xff0c;将Severity的级别由之前的error改成warning或其它可以忽略…

【C++干货基地】探索C++模板的魅力:如何构建高性能、灵活且通用的代码库(文末送书)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…

http1.1和http2.0的同源请求数限制

判断协议版本 :scheme: 在请求头中表示使用的是HTTP/2协议。即 出现 :开头的请求头Chrome 只支持查看 HTTP/1.x 的 Raw Headers&#xff0c;对这种请求&#xff0c;会给出 view source 选项。HTTP2.0不给出。可继续学习 https://www.cnblogs.com/kirito-c/p/10360868.html抓包…

App在某个页面静止造成卡死假象

今天遇到一个bug记录下来,供后续积累经验。 预期结果:App在冷启动时会加载一个“广告页”,“广告页”有个定时器,定时器结束后会自动跳转到App首页;然而当用户开启指纹或人脸识别登录之后,App直接进入验证界面,验证通过后直接进入App首页。 bug场景:进入App需要指纹识别…

用什么模型算法可以预测足球胜平负

预测足球胜平负的模型算法有很多种&#xff0c;每种算法都有其特点和适用场景。以下是一些常见的模型算法&#xff1a; Elo预测法&#xff1a; 这是一种通过研究主客场球队在比赛前的积分情况来预测胜负的方法。Elo预测法通过计算两队之间的积分差&#xff0c;根据特定的公式&…

uTorrent Pro一款轻量级的Torrent磁力下载工具去广告绿色版 v3.6.0.47044

01 uTorrent Pro v3.6.0.47044 Torrent是一款俄罗斯号称全球排名第一的免费BT下载工具,海外最受欢迎的BT下载客户端软件。支持UPnP&#xff0c;支持流行的 BT 扩展协议&#xff0c;磁力链接(Magnet Links)&#xff0c;IPv6&#xff0c;用户来源交换&#xff0c;DHT和uTP&#…

【python】python基础-常用方法

通用方法&#xff1a; del obj&#xff1a;删除对象&#xff0c;不能删除可变对象的元素 li [1,2,3,4,5] del li :删除列表 del li[0]:删除列表中第一个元素 max(obj):返回对象中的最大值 字符串方法&#xff1a; 语法&#xff1a;字符串.方法名([参数]) str.upper():将字符…

计算机科学与技术就业方向和前景怎么样

计算机科学与技术专业的就业方向极为广泛&#xff0c;方向可以是软件开发与工程、网络与信息安全、数据科学与大数据分析等&#xff0c;几乎渗透到现代社会的每一个角落。以下是上大学网 &#xff08;www.sdaxue.com)对计算机科学与技术专业一些主要的就业方向及其前景分析&…

ROS2安装问题记录

0. import rclpy出错 安装ros2官网上的教程安装完&#xff0c;发现colcon build后可以通过ros2 run 运行&#xff0c;但是无法通过python直接运行.py文件&#xff0c;原因是在 import rclpy的情况下会报以下错误 The C extension /opt/ros/humble/lib/python3.10/site-packag…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-8.1--C语言LED驱动程序

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…