Javascript基础-数据类型/表达式/运算符

适余
150 阅读14分钟

✊不积跬步，无以至千里；不积小流，无以成江海。

JS引入

在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是内联、内部和外部。

1. 内联（Inline）

将JavaScript代码直接嵌入到HTML文档中，使用<script>标签将代码包裹起来，并放置在<head>或<body>部分。例如：

<script>
  // 在此处编写JavaScript代码
</script>

2. 内部（Internal）

创建一个包含JavaScript代码的独立文件，并使用<script>标签将其引入到HTML文档中。在HTML文件中使用src属性指定JavaScript文件的路径。例如：

<script src="script.js"></script>

这里的script.js是包含JavaScript代码的文件名。

3. 外部（External）：

与内部方式类似，但是JavaScript代码被放置在一个独立的外部文件中。在HTML文件中使用<script>标签引入外部文件，同样使用src属性指定JavaScript文件的路径。例如：

<script src="externalScript.js"></script>

这里的externalScript.js是包含JavaScript代码的外部文件名。

内联方式和内部方式有什么区别？

  1. 内联方式（Inline）：内联方式将JavaScript代码直接嵌入到HTML文档中，使用<script>标签将代码包裹起来，并放置在<head>或<body>部分。内联方式的特点是代码与HTML文档紧密结合，代码与HTML内容直接交织在一起。这种方式适合于简单的、较小规模的JavaScript代码，但对于复杂的脚本，它可能会使HTML文档变得混乱不易维护。由于内联方式将JavaScript代码直接嵌入到HTML文档中，浏览器在解析HTML时会立即执行内联的JavaScript代码。这意味着在加载和解析HTML文档时，JavaScript代码会阻塞页面的渲染和其他资源的加载。对于较大的内联脚本或位于文档头部的内联脚本，可能会导致页面加载速度变慢。
  2. 内部方式（Internal）：内部方式是将JavaScript代码放置在一个独立的文件中，然后通过<script>标签将其引入到HTML文档中。在HTML文件中使用src属性指定JavaScript文件的路径。内部方式的特点是将JavaScript代码与HTML文档分离，使得代码可重用，并且可以更好地组织和维护。这种方式适用于较大规模的JavaScript代码或多个HTML文档共享同一份代码。内部方式将JavaScript代码放置在外部文件中，HTML文档通过<script>标签引用该文件。浏览器在解析HTML文档时会发起额外的网络请求去获取外部JavaScript文件。尽管这会增加一定的网络开销，但可以利用浏览器的缓存机制来提高性能。一旦浏览器缓存了外部JavaScript文件，再次访问相同页面时就可以直接使用缓存的文件，减少了网络请求和传输时间。

总的来说，内联方式将JavaScript代码直接嵌入到HTML文档中，适合于简单的代码或特定场景，但可能导致HTML文档变得混乱。而内部方式将JavaScript代码放置在独立的文件中，使得代码可重用、组织和维护，适合于较大规模的代码或多个HTML文档共享的情况。选择哪种方式取决于代码的规模、复杂性和可维护性的需求。

控制台调试

JavaScript控制台调试是一种常用的调试技术，它可以帮助开发人员在浏览器的开发者工具中查找和修复JavaScript代码中的错误。下面是一些常用的JavaScript控制台调试技术：

  1. 打开浏览器的开发者工具：在大多数现代浏览器中，按下F12键或右键点击页面并选择"检查"或"审查元素"等选项，可以打开浏览器的开发者工具。在开发者工具中，通常会有一个"控制台"选项卡，用于执行和调试JavaScript代码。
  2. 输出调试信息：使用console.log()函数在控制台中输出调试信息。这可以帮助你在代码不同位置打印变量的值、执行的结果或调试消息，以便了解代码的执行流程和数据状态。
  3. 断点调试：在开发者工具的"源代码"或"调试"选项卡中，使用鼠标单击代码行号的左侧，可以设置断点。断点会在代码执行到该行时中断，允许你逐步执行代码并观察变量的值、调用栈等信息。你可以使用"继续"、"单步执行"、"跳过"等选项来控制代码的执行流程。
  4. 监视表达式：在开发者工具的调试器中，你可以设置监视表达式，监视特定变量或表达式的值。这样，当代码执行到监视表达式所在的位置时，你可以立即看到该变量或表达式的当前值。
  5. 异常捕获：在代码中使用try...catch语句捕获和处理异常。当代码抛出异常时，异常信息会显示在控制台中，帮助你定位问题所在并进行相应的处理。
  6. 调试工具的其他功能：现代浏览器的开发者工具通常还提供其他调试功能，如性能分析、网络监控、DOM检查等。这些功能可以帮助你更全面地调试和优化JavaScript代码。

变量

JavaScript中的变量用于存储数据值。在JavaScript中，声明变量时需要使用关键字var、let或const，后跟变量名，如下所示：

var age; // 使用var声明一个变量age
let name; // 使用let声明一个变量name
const pi = 3.14; // 使用const声明一个常量pi

var age = 25; // 声明一个变量age，并将初始值设置为25
let name = "John"; // 声明一个变量name，并将初始值设置为"John"
const pi = 3.14; // 声明一个常量pi，并将初始值设置为3.14

变量的值可以随时被更新。JavaScript是一种动态类型语言，这意味着变量的类型是根据赋给它们的值来推断的。这意味着你可以在代码中将不同类型的值赋给同一个变量。例如：

let message = "Hello"; // 字符串类型的变量
message = 10; // 数值类型的变量
message = true; // 布尔类型的变量

在JavaScript中，变量的作用域可以是全局作用域或局部作用域，取决于变量的声明位置。全局作用域的变量可以在整个代码中访问，而局部作用域的变量则限定在特定的代码块或函数中。

标识符规范

JavaScript标识符遵循以下规范:

  • 标识符必须是字母、数字或下划线这些字符的组合。
  • 第一个字符不能是数字。
  • 标识符不能是JavaScript关键字和保留字。
  • 标识符对大小写敏感。
  • 一般使用驼峰式命名(即每个单词首字母大写)。

举例如下:

  • 合法标识符:myVariable、_myVariable、myVar1等
  • 非法标识符:1myVariable(第一个字符不能是数字)、for、if等(关键字)
  • 对大小写敏感:myVariable != myvariable
  • 推荐使用驼峰式命名:myVariableName
  • 常用的全局对象/构造函数采用Pascal命名法:Date、Array等

而具体变量和函数名称,一般遵循:

  • 变量使用驼峰式命名
  • 函数使用动词+对象的形式命名
  • 类使用名词形式命名

如:

let userName;
function getUserData(){}
class User{}

表达式

  1. 字面量表达式

    • 数值字面量,如:123
    • 字符串字面量,如:"hello"
    • 布尔字面量,如:true
    • 数组字面量,如:[1,2,3]
    • 对象字面量,如:{name:'john'}

  2. 运算表达式

    • 算术运算表达式,如:1 + 2
    • 关系运算表达式,如:a == b
    • 逻辑运算表达式,如:a && b

  3. 函数调用表达式

    如:functionName(param1, param2)

  4. 特殊表达式

    • new表达式,如:new Date()
    • this表达式
    • typeof表达式
    • delete表达式
    • void表达式

  5. 特殊结构表达式

    • 三元表达式,如:condition ? exprIfTrue : exprIfFalse
    • 短路求值表达式,如:a || b

  6. 其他

    • 对象属性访问表达式,如:obj.prop
    • 数组元素访问表达式,如:array[index]
    • 函数表达式,如:function(){}
    • 类表达式,如:class{}
    • 生成器表达式
    • 正则表达式

运算符

JavaScript中的运算符用于执行各种操作，包括数学运算、逻辑运算和比较运算等。以下是一些常见的JavaScript运算符：

  1. 算术运算符：用于执行基本的数学运算，包括加法（+）、减法（-）、乘法（*）、除法（/）和取余（%）等。
  2. 赋值运算符：用于将一个值赋给一个变量，包括等号（=）、加等（+=）、减等（-=）、乘等（*=）和除等（/=）等。
  3. 比较运算符：用于比较两个值的大小或是否相等，包括相等（==）、不相等（!=）、严格相等（===）、严格不相等（!==）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=）等。
  4. 逻辑运算符：用于执行逻辑操作，包括逻辑与（&&）、逻辑或（||）和逻辑非（!）等。
  5. 位运算符：用于对数字的二进制表示进行操作，包括按位与（&）、按位或（|）、按位异或（^）、按位非（~）、左移（<<）和右移（>>）等。
  6. 条件运算符：也称为三元运算符，用于根据条件选择不同的值，语法为条件 ? 值1 : 值2。
  7. 递增和递减运算符：用于增加或减少变量的值，包括递增（++）和递减（--）。
  8. 成员访问运算符：用于访问对象的属性或方法，包括点运算符（.）和方括号运算符（[]）。

八种数据类型

JavaScript有以下八种数据类型：

  1. Number（数字） ：表示数值，例如：let x = 5;
  2. String（字符串） ：表示文本数据，例如：let name = "John";
  3. Boolean（布尔值） ：表示逻辑值，可以是true或false，例如：let isTrue = true;
  4. Null（空值） ：表示一个空值或不存在的对象，例如：let myVariable = null;
  5. Undefined（未定义） ：表示一个未赋值的变量，例如：let myVariable;
  6. Symbol（符号） ：表示唯一的标识符，用于对象属性的键，例如：let id = Symbol("id");
  7. BigInt（大整数） ：表示任意精度的整数，可以处理超过Number类型范围的整数，例如：let bigNumber = 123456789012345678901234567890n;
  8. Object（对象） ：表示复杂的数据结构，可以包含多个键值对，例如：let person = { name: "John", age: 30 };

口诀记忆方式：“四基两空一对象，再加一个大整数”

typeof详解

typeof是JavaScript中的一个运算符，用于获取一个值的数据类型。它返回一个表示数据类型的字符串。

typeof可以用于以下几种情况：

  1. 基本数据类型：对于基本数据类型（如字符串、数字、布尔值和undefined），typeof返回以下结果：

    • typeof "hello" // "string"
    • typeof 42 // "number"
    • typeof true // "boolean"
    • typeof undefined // "undefined"

  2. 对象和函数：对于对象和函数，typeof返回以下结果：

    • typeof {} // "object"
    • typeof [] // "object"
    • typeof function() {} // "function"

    注意：typeof将数组和对象都返回为"object"，无法区分它们。如果需要判断一个值是否为数组，可以使用Array.isArray()方法。

  3. null：对于null，typeof返回"object"。这是一个历史遗留问题，因为在JavaScript的早期版本中，null被错误地标记为对象。实际上，null是一个特殊的原始值，表示一个空对象指针。

  4. Symbol：对于Symbol类型，typeof返回"symbol"。Symbol是ES6引入的一种新的数据类型，用于创建唯一的标识符。

  5. 函数参数：对于函数的参数，typeof返回以下结果：

    • typeof arguments // "object"（arguments是一个类数组对象）
    • typeof undefinedVariable // "undefined"（未定义的变量）

需要注意的是，typeof是一个运算符而不是函数，因此不需要使用括号。例如，typeof x 和 typeof(x) 都是有效的。

总结起来，typeof是一个用于获取值的数据类型的运算符。它返回一个表示数据类型的字符串，可以用于判断值的类型并根据需要执行相应的操作。

算数运算符中的 ++i与i++

在JavaScript中，++i和i++都是算术运算符，用于递增变量的值。它们的主要区别在于它们的返回值和执行顺序。

  1. ++i（前置递增）：先将变量的值加1，然后返回递增后的值。
let i = 5;
let x = ++i;
console.log(i); // 输出 6
console.log(x); // 输出 6

在这个例子中，变量i的值先加1，然后将递增后的值赋给变量x。所以i和x的值都是6。

  1. i++（后置递增）：先返回变量的值，然后再将变量的值加1。
let i = 5;
let x = i++;
console.log(i); // 输出 6
console.log(x); // 输出 5

在这个例子中，变量i的值先赋给变量x，然后i的值再加1。所以x的值是5，而i的值是6。

比较运算符，布尔运算符，位运算符

在JavaScript中，有三种常见的运算符：比较运算符、布尔运算符和位运算符。

  1. 比较运算符：用于比较两个值并返回一个布尔值（true或false）。常见的比较运算符有：

    • 相等运算符（==）：检查两个值是否相等，如果相等则返回true，否则返回false。
    • 不相等运算符（!=）：检查两个值是否不相等，如果不相等则返回true，否则返回false。
    • 严格相等运算符（===）：检查两个值是否严格相等，即值和类型都相等，如果相等则返回true，否则返回false。
    • 严格不相等运算符（!==）：检查两个值是否严格不相等，即值或类型不相等，如果不相等则返回true，否则返回false。
    • 大于运算符（>）、小于运算符（<）、大于等于运算符（>=）和小于等于运算符（<=）：用于比较两个值的大小关系，如果满足条件则返回true，否则返回false。

  2. 布尔运算符：用于执行逻辑操作并返回一个布尔值。常见的布尔运算符有：

    • 逻辑与运算符（&&）：如果两个操作数都为true，则返回true，否则返回false。
    • 逻辑或运算符（||）：如果两个操作数中至少有一个为true，则返回true，否则返回false。
    • 逻辑非运算符（!）：用于取反操作，如果操作数为true，则返回false，如果操作数为false，则返回true。

  3. 位运算符：用于对数字的二进制表示进行操作。常见的位运算符有：

    • 按位与运算符（&）：对两个操作数的每个对应位执行逻辑与操作。
    • 按位或运算符（|）：对两个操作数的每个对应位执行逻辑或操作。
    • 按位异或运算符（^）：对两个操作数的每个对应位执行逻辑异或操作。
    • 按位非运算符（~）：对操作数的每个位执行逻辑非操作，即取反操作。
    • 左移运算符（<<）：将操作数的二进制表示向左移动指定的位数。
    • 右移运算符（>>）：将操作数的二进制表示向右移动指定的位数，符号位不变。
    • 无符号右移运算符（>>>）：将操作数的二进制表示向右移动指定的位数，符号位也会移动。

小括号、逗号、void

在JavaScript中，小括号（()）、逗号（,）和void是常见的语法元素。

  1. 小括号（()）：小括号在JavaScript中有多种用途，包括但不限于以下几个方面：

    • 函数调用：用于调用函数并传递参数。例如：myFunction(arg1, arg2);
    • 表达式分组：用于明确指定表达式的执行顺序。例如：(x + y) * z;
    • 函数定义：用于定义函数的参数列表。例如：function myFunction(param1, param2) { ... }

  2. 逗号（,）：逗号在JavaScript中有多种用途，包括但不限于以下几个方面：

    • 分隔符：用于分隔多个表达式或变量声明。例如：let x = 1, y = 2, z = 3;
    • 函数参数：用于分隔函数的参数列表。例如：function myFunction(param1, param2) { ... }
    • 数组和对象字面量：用于分隔数组元素或对象属性。例如：let arr = [1, 2, 3]; 或 let obj = { prop1: "value1", prop2: "value2" };

  3. void：void是一个一元运算符，用于对给定的表达式进行求值并返回undefined。它通常用于在不需要返回值的情况下执行某个操作。例如：

    <a href="javascript:void(0);" onclick="myFunction();">Click me</a>

    在这个例子中，void(0)用于在点击链接时执行myFunction函数，而不会导致页面跳转。

需要注意的是，void并不常用，它主要用于特定的编程场景，如在HTML中使用JavaScript来处理事件。在一般的JavaScript编程中，我们很少使用void运算符。

avatar
文章
阅读
粉丝