21 JavaScript 学习：一些误区和易错点

news2024/10/7 11:21:50

在这里插入图片描述

赋值运算符应用错误

在 JavaScript 中，赋值运算符（Assignment Operators）用于给变量赋值。常见的赋值运算符包括 =、+=、-=、*=、/= 等。如果赋值运算符的应用不正确，可能会导致程序出现错误或产生意外的结果。

以下是一些常见的赋值运算符应用错误示例：

  1. 误将比较运算符 == 误写为赋值运算符 =：
// 错误示例
let x = 10;
if (x = 5) {
    console.log("x 等于 5");
}
// 这里实际上是将 x 赋值为 5，而不是比较 x 是否等于 5
  1. 连续赋值时，应用错误的赋值运算符：
// 错误示例
let a = 5;
let b = 10;
let c = 15;

a = b = c; // 这里实际上是将 b 赋值为 c，然后将 a 赋值为 b 的值（即 c），而不是同时将 a、b、c 都赋值为 15
  1. 使用错误的赋值运算符导致意外结果：
// 错误示例
let x = "Hello";
x += 5; // x 的值会变为 "Hello5"，而不是将 x 转为数字后相加

要避免赋值运算符的应用错误，建议在编写代码时仔细检查赋值语句，确保赋值操作符的使用符合预期，避免出现意外的结果。同时，建议对赋值运算符的用法有一定的了解，以避免常见的错误。

比较运算符常见错误

在这里插入图片描述

在 JavaScript 中，比较运算符用于比较两个值，并返回一个布尔值（true 或 false）。常见的比较运算符包括 ==、===、!=、!==、>、<、>=、<= 等。如果比较运算符的应用不正确，可能会导致程序出现错误或产生意外的结果。

以下是一些常见的比较运算符应用错误示例：

  1. 使用 == 进行比较时，不考虑数据类型：
// 错误示例
if (1 == "1") {
    console.log("相等");
}
// 在使用 `==` 比较时，会进行类型转换，导致数字 1 和字符串 "1" 相等
  1. 使用 === 进行比较时，数据类型不一致：
// 错误示例
if (1 === "1") {
    console.log("相等");
}
// 在使用 `===` 比较时，不会进行类型转换，数字 1 和字符串 "1" 类型不同，不相等
  1. 混淆 > 和 >=、< 和 <=：
// 错误示例
if (5 > 10) {
    console.log("5 大于 10");
}
// 该条件永远不会成立，应该使用 `<` 来比较
  1. 混淆 != 和 !==：
// 错误示例
if (1 != "1") {
    console.log("不相等");
}
// 该条件会成立，因为 `!=` 会进行类型转换，导致数字 1 和字符串 "1" 不相等

要避免比较运算符的常见错误，建议在编写代码时仔细检查比较表达式，确保比较运算符的使用符合预期，避免出现意外的结果。同时，建议对比较运算符的用法有一定的了解，以避免常见的错误。

加法与连接注意事项

在这里插入图片描述

在 JavaScript 中，加法运算符 + 既可以用于数学加法，也可以用于字符串连接。当 + 运算符的其中一个操作数是字符串时，JavaScript 会将其它操作数转换为字符串，然后执行字符串连接操作。这种隐式类型转换可能导致一些意外的结果，因此在使用 + 运算符时需要注意一些事项：

  1. 字符串连接优先级高于数学加法：
// 字符串连接优先级高于数学加法
console.log(1 + 2 + "3"); // 输出 "33"，先执行数学加法，再执行字符串连接
console.log("1" + 2 + 3); // 输出 "123"，先执行字符串连接
  1. 当其中一个操作数为字符串时，其他操作数会被转换为字符串：
let num = 5;
let str = "10";
console.log(num + str); // 输出 "510"，数值 5 被转换为字符串与 "10" 连接
  1. 使用括号明确指定运算顺序：
let num1 = 10;
let num2 = 20;
console.log(num1 + num2 + "30"); // 输出 "3030"，先执行数学加法，再执行字符串连接
console.log(num1 + (num2 + "30")); // 输出 "102030"，使用括号指定运算顺序
  1. 使用模板字符串进行字符串拼接：
let name = "Alice";
let age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);
// 使用模板字符串可以更清晰地进行字符串拼接，避免混淆

通过注意以上事项，可以更好地避免在使用 + 运算符时产生意外的结果，确保代码的可读性和正确性。

浮点型数据使用注意事项

在 JavaScript 中，浮点数（Floating-point numbers）是一种用于表示小数的数据类型。由于浮点数的内部表示方式是基于二进制，因此在进行浮点数运算时可能会出现精度丢失或舍入误差的情况。以下是一些使用浮点数时需要注意的事项：

  1. 避免直接比较浮点数：
let a = 0.1;
let b = 0.2;
if (a + b == 0.3) {
    console.log("相等");
} else {
    console.log("不相等");
}
// 由于浮点数精度问题，可能导致 a + b 不等于 0.3，应该使用误差范围来比较
  1. 使用toFixed()方法控制小数位数：
let num = 0.1 + 0.2;
console.log(num.toFixed(2)); // 输出 "0.30"
// 使用 to() 方法可以控制小数的位数，避免精度问题
  1. 小数运算可能产生不精确结果：
console.log(0.1 + 0.2); // 输出 0.30000000000000004，由于浮点数精度问题导致不精确结果
  1. 使用整数进行数学运算后再转换为浮点数：
let a = 0.1;
let b = 0.2;
let result = (a * 10 + b * 10) / 10;
console.log(result); // 输出 先将浮点数转换为整数进行运算，再转换回浮点数
  1. 使用库如Decimal.js进行精确计算：
// 使用第三方库 Decimal.js 进行精确计算
const { Decimal } = require('decimal.js');
let a = new Decimal('0.1');
let b = new Decimal('0.2');
let result = a.plus(b);
console.log(result.toString()); // 输出 "0.3"

通过注意以上事项，可以避免在处理浮点数时可能出现的精度问题，确保计算结果的准确性。

字符串分行

在 JavaScript 中，可以使用字符串字面量（string literals）来创建包含换行的多行字符串。有几种方法可以在 JavaScript 中创建多行字符串：

  1. 使用反斜杠 \ 进行字符串分行：
let multiLineString = "This is a multi-line \
string in JavaScript.";
console.log(multiLineString);
  1. 使用模板字符串（template literals）来创建多行字符串：
let multiLineString = `This is a multi-line
string in JavaScript.`;
console.log(multiLineString);
  1. 使用字符串连接符 + 来连接多行字符串：
let multiLineString = "This is a multi-line " +
                     "string in JavaScript.";
console.log(multiLineString);

无论使用哪种方法，都可以在 JavaScript含换行的多行字符串。这些方法使得代码更易读和维护，特别是当需要处理大段文本时。

错误的使用分号

在 JavaScript 中，分号 ; 用于分隔语句，通常用于表示语句的结束。在大多数情况下，JavaScript 引擎会自动插入分号来结束语句，这种现象被称为自动分号插入（Automatic Semicolon Insert，ASI）。然而，如果在某些情况下错误地使用分号，可能会导致意外的行为或错误。

以下是一些错误的使用分号的示例：

  1. 不应该在代码块的末尾使用分号：
if (condition) {
    // do something;
}
// 分号不应该在代码块的末尾，会导致语法错误
  1. 不应该在函数表达式的末尾使用分号：
let myFunction = function() {
    // function body;
};
// 在函数表达式的末尾使用分号会导致语法错误

3.使用分号：

let myObject = {
    key1: "value1",
    key2: "value2",
};
// 在对象字面量的末尾使用分号会导致语法错误
  1. 不应该在循环语句的末尾使用分号：
for (let i = 0; i < 10; i++) {
    // loop body;
};
// 在循环语句的末尾使用分号会导致语法错误

在以上情况下，错误地使用分号可能导致语法错误或意外的行为。因此，在编写 JavaScript 代码时，需要注意分号的使用规则，避免在不应该使用分号的地方号。如果确定需要在某个地方使用分号，可以参考 JavaScript 的语法规范或工具的代码检查功能来帮助确保代码的正确性。

return 语句使用注意事项

在 JavaScript 中，return 语句用于从函数中返回一个值，并终止函数的执行。在使用 return 语句时，有一些注意事项需要考虑：

  1. 位置： return 语句可以出现在函数的任何位置，但一旦执行 return，函数将立即停止执行并返回指定的值。

  2. 返回值： return 语句可以返回任何类型的值，包括基本数据类型（如数字、字符串布尔值）、对象、数组等。

  3. 返回多个值： JavaScript 中的 return 语句只能返回一个值。如果需要返回多个值，可以将它们封装在一个对象或数组中返回。

  4. 未指定返回值： 如果 return 后面没有跟任何值，或者没有 return 语句，则函数将返回 undefined。

  5. 条件返回： 可以根据条件使用 return 语句提前退出函数。这在避免深度嵌套的情况下特别有用。

  6. 不要在 return 后面添加代码： return 语句后面代码将不会被执行，因此在 return 后面添加代码是没有意义的。

示例：

function sum(a, b) {
    if (a < 0 || b < 0) {
        return " numbers should be positive";
    }
    return a + b;
}
console.log(sum(2, 3)); // 输出 5
console.log(sum(-1, Both numbers should be```

通过遵循以上注意事项，可以更好地使用 return 语句并确保函数的正确行为。

数组中使用名字来索引

使用名称作为索引来访问数组元素时，可能会遇到以下易错点：

  1. 拼写错误：拼写错误是最常见的问题之一。确保你使用的索引名称与数组中实际的键名完全匹配，包括大小写。

  2. 未定义的索引：如果尝试访问一个未定义的索引，会导致出现 undefined。要确保使用的索引在数组中确实存在。

  3. 非字符串索引：在 JavaScript 中，数组里的索引通常是数字类型，而不是字符串。如果你想使用字符串作为索引，应该使用对象（Object）而不是数组。

  4. 数组方法无效：某些数组方法，比如 map、filter 等，可能要求索引是数字。如果使用非数字索引，这些方法可能会产生意外的结果。

  5. JSON 序列化问题：如果你要将数组转换为 JSON 格式的字符串，注意一些特殊情况下使用索引的限制。比如，JSON 字符串化后只能用数字索引的数组。

  6. 不符合规范的键名：在 JavaScript 中，数组是一种特殊的对象，键名必须符合变量命名规范。因此，虽然可以使用任何字符串作为键名，但并不是推荐的做法。

务必小心处理这些易错点，以免出现预料之外的问题。如果你有特定的代码或例子需要讨论，欢迎提供更多细节，我可以给予更具体的帮助。

定义数组元素，最后不能添加逗号

在定义数组时，如果在最后一个元素后面添加逗号，可能会出现一些问题，尤其是在一些 JavaScript 引擎中。为了避免这种问题，应该及时删除最后一个元素后的逗号。

例如，在以下代码中，如果有一个逗号跟在最后一个元素 “C” 后面：

const myArray = ["A", "B", "C",];

会导致一些 JavaScript 引擎报错，因为这被认为是一个语法错误。为了修复这个问题，你可以简单地删除逗号，让数组定义如下：

const myArray = ["A", "B", "C"];

这样就保证了数组定义的正确性，避免了潜在的问题。请注意检查你的代码中的数组定义，确保没有多余的逗号导致语法错误。

定义对象，最后不能添加逗号

在定义对象时，确保在最后一个属性后面没有添加逗号是非常重要的。在 JavaScript 中，如果在对象定义的最后一个属性后面加上了逗号，可能会导致一些问题，特别是在一些 JavaScript 引擎中。

举个例子，考虑以下对象定义：

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

如果在最后一个属性 “key3” 后面添加了逗号，有些 JavaScript 引擎会将其视为语法错误，从而导致代码执行失败。

为了避免这种问题，应该确保对象定义的最后一个属性后面没有逗号，代码应该像这样：

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

这样就可以确保对象定义的正确性，避免了潜在的语法错误。在编写代码时，务必留意对象定义的格式，避免不必要的问题发生。

Undefined 不是 Null

JavaScript 中的 undefined 和 null 是两个不同的概念。undefined 表示一个变量已经被声明但没有被赋值，或者一个函数没有返回值。而 null 则是一个特殊的关键字，表示一个空对象引用。

程序块作用域

程序块作用域（block scope）在JavaScript中有一些易错点，以下是一些常见的问题和注意事项：

  1. 变量声明提升：在程序块作用域内，使用 var 声明的变量会存在变量声明提升的问题，这意味着无论变量声明在程序块的哪个位置，它都会被提升到当前作用域的顶部。这可能导致在变量赋值之前就可以访问到变量，从而引起意外行为。为了避免这种问题，应该尽量使用 let 或 const 来声明变量，因为它们不会存在变量声明提升。

  2. 条件语句中的作用域：在 if 语句、for 循环等条件语句中使用 var 声明的变量，其作用域是整个函数，而不是块级作用域。这可能会导致意料之外的作用域问题。使用 let 或 const 可以确保变量的作用域是在当前条件语句的块级作用域内。

  3. 闭包中的作用域：当在内层函数中引用外层函数的变量时，需要注意闭包的作用域问题。如果在内层函数中修改外层函数的变量，可能会导致意外的结果。尽量避免在闭包中修改外层函数的变量，或者使用块级作用域来限制变量的作用范围。

  4. 全局作用域：与程序块作用域相对的是全局作用域。在全局作用域中声明的变量会成为全局对象的属性，容易造成命名冲突和意外的覆盖行为。为了避免这种问题，推荐尽量减少在全局作用域中声明变量，使用模块化和闭包等技术来限制变量的作用范围。

总的来说，在使用程序块作用域时，要特别注意变量声明提升、条件语句中的作用域、闭包中的作用域和全局作用域等问题，合理使用 let 和 const 可以帮助避免许多与作用域相关的常见错误。

关注我，不迷路，共学习，同进步

关注我，不迷路，共学习，同进步

img

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

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

相关文章

有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位

有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合…
阅读更多...
ubuntu20.04安装RabbitMQ 3.11.19+Erlang 25.3.1

ubuntu20.04安装RabbitMQ 3.11.19+Erlang 25.3.1

1、检查RabbitMQ、Erlang版本 Erlang Version Requirements | RabbitMQ 2、ubuntu20.04对应的是 focal 3、下载安装Erlang 下载地址&#xff1a;http://packages.erlang-solutions.com/erlang/debian/pool/ sudo dpkg -i esl-erlang_25.3-1~ubuntu~focal_amd64.deb sudo apt…
阅读更多...
微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑（二）

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑（二）

大家好&#xff0c;我是程序员大猩猩。 上次我们实践了&#xff0c;Java后端如何完成SockJSStomp的配置实现。 微服务使用SockJsStomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑&#xff08;一&#xff09; 那么今天我们做一下web vue端的是如何来实现…
阅读更多...
Docker 中安装单体架构 MySQL 的 Shell 脚本

Docker 中安装单体架构 MySQL 的 Shell 脚本

该脚本用于实现 root 用户在 Linux 操作系统下的 Docker 中安装单体架构 MySQL Shell 脚本 Git 仓库地址 Gitee&#xff1a;https://gitee.com/tongchaowei/common-shell/tree/main/root 执行脚本 bash ./docker-mysql-install-single.sh需要注意的 该脚本会先检查是否安…
阅读更多...
华为配置mDNS网关示例（AP与AC间二层转发）

华为配置mDNS网关示例（AP与AC间二层转发）

华为配置mDNS网关示例&#xff08;AP与AC间二层转发&#xff09; 组网图形 图1 配置mDNS网关组网图 组网需求配置思路操作步骤配置文件 组网需求 如图1所示&#xff0c;某企业的移动终端通过WLAN连接网络&#xff0c;AP_1和AP_2分别与AC之间采用二层转发。部门1和部门2分别属…
阅读更多...
Elasticsearch中对文章进行索引和查重

Elasticsearch中对文章进行索引和查重

解决思路 要在Elasticsearch中对文章进行索引和查重&#xff0c;可以按照以下步骤操作&#xff1a; 安装Elasticsearch并启动服务。 安装Python的Elasticsearch客户端库&#xff0c;可以使用pip install elasticsearch命令进行安装。 编写Python代码&#xff0c;使用Elastic…
阅读更多...
照片特定风格变换Stylar AI；GPT-4V开源替代方案InternVL；纯C/C++实现的Stable Diffusion库；基于AI的数据爬取

照片特定风格变换Stylar AI；GPT-4V开源替代方案InternVL；纯C/C++实现的Stable Diffusion库；基于AI的数据爬取

✨ 1: AI Photo Filter Stylar AI是一款功能强大的AI图像编辑与设计工具&#xff0c;提供无与伦比的图片组合和风格控制。 AI Photo Filter&#xff0c;简言之&#xff0c;就是使用人工智能技术来改善或改变图片的风格、质量和元素组合的一种工具。 如果你想将你的照片转换成…
阅读更多...
如何看待Agent AI智能体的未来

如何看待Agent AI智能体的未来

Agent AI智能体的未来 Agent AI智能体&#xff0c;也称为自主代理或智能代理&#xff0c;是指能够自主执行任务、与环境交互并作出决策的计算机程序或系统。这些智能体通常具备学习、适应和推理的能力&#xff0c;能够在复杂和不确定的环境中执行任务。随着技术的进步&#xf…
阅读更多...
爬虫自动调用shell通过脚本运行scrapy爬虫（crawler API）

爬虫自动调用shell通过脚本运行scrapy爬虫（crawler API）

一、爬虫时如何同时调用shell 1)终端cd项目>>scrapy crawl example 2)打开example.py import scrapy from scrapy.shell import inspect_response#引入shellclass ExampleSpider(scrapy.Spider):name "example"allowed_domains ["example.com"]…
阅读更多...
【EI会议|稳定检索】2024年传感技术与图像处理国际会议(ICSTIP 2024)

【EI会议|稳定检索】2024年传感技术与图像处理国际会议(ICSTIP 2024)

2024 International Conference on Sensing Technology and Image Processing 一、大会信息 会议名称&#xff1a;2024年传感技术与图像处理国际会议会议简称&#xff1a;ICSTIP 2024收录检索&#xff1a;提交Ei Compendex,CPCI,CNKI,Google Scholar等会议官网&#xff1a;htt…
阅读更多...
开源代码分享(26)-考虑预测不确定性的综合能源调度优化

开源代码分享(26)-考虑预测不确定性的综合能源调度优化

参考文献&#xff1a; [1]崔杨,周慧娟,仲悟之,等.考虑源荷两侧不确定性的含风电电力系统低碳调度[J].电力自动化设备,2020,40(11):85-93.DOI:10.16081/j.epae.202009019. 1.基本原理 考虑碳交易机制能够有效提高风电消纳量&#xff0c;但是随着风电并网容量的增大&#xff0c…
阅读更多...
【酱浦菌-爬虫项目】python爬取彼岸桌面壁纸

【酱浦菌-爬虫项目】python爬取彼岸桌面壁纸

首先&#xff0c;代码导入了两个库&#xff1a;requests和parsel。这些库用于处理HTTP请求和解析HTML内容。 然后&#xff0c;它定义了一个变量url&#xff0c;指向网站’樱花2024年4月日历风景桌面壁纸_高清2024年4月日历壁纸_彼岸桌面’。 接下来&#xff0c;设置了一个HTT…
阅读更多...
每天五分钟玩转深度学习PyTorch：创建pytorch中的零维标量tensor

每天五分钟玩转深度学习PyTorch：创建pytorch中的零维标量tensor

标量是什么？ tensor张量是一个多维数组，零维就是一个点（就是本章的标量），一维就是向量，二维就是一般的矩阵，多维就相当于一个多维的数组，这和 numpy理解是一样的，不同的是Tensor不仅可以在CPU上跑，在GPU上也可以跑。 标量（scalar），只具有数值大小，而没有方向，…
阅读更多...
QT 开发COM（ActiveX）组件基础介绍和方案验证

QT 开发COM（ActiveX）组件基础介绍和方案验证

一、COM简介 1.1 COM是什么&#xff1f; COM&#xff0c;Component Object Model&#xff0c;即组件对象模型&#xff0c;是一种以组件为发布单元的对象模型&#xff0c;这种模型使各软件组件可以用一种统一的方式进行交互。COM 既提供了组件之间进行交互的规范&#xff0c;也…
阅读更多...
【matplot】【matlab】绘制简洁美观二维坐标系的一个例子

【matplot】【matlab】绘制简洁美观二维坐标系的一个例子

觉得下图不错美观大方&#xff0c;现仿制下图&#xff1a; import numpy as np import matplotlib.pyplot as pltdef sigmoid(x):return 1 / (1 np.exp(-x))def sigmoid_derivative(x):return sigmoid(x) * (1 - sigmoid(x))# 设置中文字体 plt.rcParams[font.family] [Tim…
阅读更多...
使用opencv改变图片大小

使用opencv改变图片大小

使用opencv改变图片大小 图片的宽度和高度效果代码 图片的宽度和高度 宽度&#xff1a;图片的宽度指的是图像从左边缘到右边缘的水平跨度。在数字图像中&#xff0c;宽度通常是以像素&#xff08;pixels&#xff09;为单位来度量的。高度&#xff1a;图片的高度指的是图像从上…
阅读更多...
面试中算法(最小栈）

面试中算法(最小栈）

最小栈的实现 实现一个栈&#xff0c;该栈有出栈(pop&#xff09;、入栈(push)、取最小元素(get_min) 。要保证时间复杂度都是O (1&#xff09;。 第1步&#xff1a;设原有的栈叫作栈A&#xff0c;额外的“备胎”栈B&#xff0c;用于辅助栈A。 当第1个元素进入栈A时&#xff0c…
阅读更多...
“科技让广告更精彩”四川迈瑞斯文化传媒有限公司 行业领先的一站式媒体采购供应平台

“科技让广告更精彩”四川迈瑞斯文化传媒有限公司 行业领先的一站式媒体采购供应平台

国际数字影像产业园与园区企业一同推动数字影像技术的创新与发展&#xff0c;为数字影像产业注入新的活力。其中&#xff0c;四川迈瑞斯文化传媒有限公司&#xff08;906&#xff09;作为数字媒体行业的优秀企业&#xff0c;坚持“科技让广告更精彩”的理念&#xff0c;致力于为…
阅读更多...
谷歌浏览器查看http请求的请求标头和响应标头

谷歌浏览器查看http请求的请求标头和响应标头

http://t.weather.itboy.net/api/weather/city/101010100 记得刷新&#xff0c;才算请求了一次服务器 响应标头&#xff1a; HTTP/1.1 200 OK Content-Type: application/json; 请求标头&#xff1a; GET /api/weather/city/101010100 HTTP/1.1 Host: t.weather.itboy.n…
阅读更多...
Spark持久化、broadcast广播变量和accumulator累加器

Spark持久化、broadcast广播变量和accumulator累加器

持久化操作 什么是持久化&#xff0c;为什么要持久化 Spark中最重要的功能之一是跨操作在内存中持久化&#xff08;或缓存&#xff09;数据集。当您持久化RDD时&#xff0c;每个节点将其计算的任何分区存储在内存中&#xff0c;并在该数据集&#xff08;或从该数据集派生的数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023