第二部分:基础知识 4.操作符与表达式 --[JavaScript 新手村:开启编程之旅的第一步]

发布于:2024-12-18 ⋅ 阅读:(117) ⋅ 点赞:(0)

JavaScript 中的操作符和表达式是编程语言的基础组成部分,用于执行各种计算和操作。以下是一些常见的 JavaScript 操作符与表达式的概述:

操作符

1.算术操作符:用于执行基本的数学运算。

  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 取模(余数)
  • ** 幂(指数)

以下是两个使用 JavaScript 算术操作符的示例:

示例 1: 基本算术运算
// 定义两个变量
let a = 10;
let b = 3;

// 使用加法和乘法操作符
let sum = a + b; // 加法:10 + 3 = 13
let product = a * b; // 乘法:10 * 3 = 30

console.log("The sum is " + sum); // 输出:The sum is 13
console.log("The product is " + product); // 输出:The product is 30

在这里插入图片描述

示例 2: 使用取模与幂操作符
// 定义两个变量
let x = 7;
let y = 4;

// 使用取模(%)操作符找出除法的余数
let remainder = x % y; // 取模:7 % 4 = 3

// 使用幂(**)操作符计算指数
let power = x ** y; // 幂:7 ** 4 = 7 * 7 * 7 * 7 = 2401

console.log("The remainder of " + x + " divided by " + y + " is " + remainder); // 输出:The remainder of 7 divided by 4 is 3
console.log("The result of " + x + " to the power of " + y + " is " + power); // 输出:The result of 7 to the power of 4 is 2401

在这里插入图片描述

这些示例展示了如何在代码中使用算术操作符来执行简单的数学运算。通过将不同的操作符应用于数值,我们可以完成从基本到复杂的各种计算任务。

2.赋值操作符:用于将值分配给变量。

  • = 简单赋值
  • +=, -=, *=, /=, %=, **= 复合赋值操作符

以下是两个使用 JavaScript 赋值操作符的示例,包括简单的赋值和复合赋值操作符的应用:

示例 1: 简单赋值
// 定义一个变量并使用简单赋值操作符
let num = 5;

console.log("The value of num is " + num); // 输出:The value of num is 5

在这里插入图片描述

在这个例子中,我们定义了一个名为 num 的变量,并通过 = 操作符将数值 5 赋给它。这是最基础的赋值方式。

示例 2: 复合赋值操作符
// 定义一个变量并初始化
let count = 10;

// 使用复合赋值操作符 += 来增加 count 的值
count += 5; // 相当于 count = count + 5;
console.log("After adding, the new value of count is " + count); // 输出:After adding, the new value of count is 15

// 使用复合赋值操作符 -= 来减少 count 的值
count -= 3; // 相当于 count = count - 3;
console.log("After subtracting, the new value of count is " + count); // 输出:After subtracting, the new value of count is 12

在这里插入图片描述

在这个例子中,我们首先定义了变量 count 并初始化为 10。然后我们展示了如何使用复合赋值操作符 +=-= 来简化代码。这两个操作符分别等价于对 count 进行加法和减法运算后重新赋值的操作。复合赋值操作符不仅可以用于加法和减法,还可以用于乘法 (*=), 除法 (/=), 取模 (%=) 和幂 (**=) 等算术运算。

3.比较操作符:用于比较两个值。

  • == 相等(类型转换后比较)
  • === 严格相等(不进行类型转换)
  • != 不相等
  • !== 严格不相等
  • > 大于
  • < 小于
  • >= 大于等于
  • <= 小于等于

以下是两个使用 JavaScript 比较操作符的示例,分别展示了相等性比较和关系比较。

示例 1: 相等性比较
// 使用 == 和 === 操作符来比较值

let a = "5"; // 字符串类型的 '5'
let b = 5;    // 数字类型的 5

// 使用 == 操作符(类型转换后比较)
if (a == b) {
  console.log("Using ==, a and b are equal because JavaScript converts types before comparison.");
} else {
  console.log("Using ==, a and b are not equal.");
}

// 使用 === 操作符(严格相等,不进行类型转换)
if (a === b) {
  console.log("Using ===, a and b are equal.");
} else {
  console.log("Using ===, a and b are not equal because they have different types.");
}

在这里插入图片描述

在这个例子中,我们展示了 ===== 的区别。== 允许类型转换,而 === 不允许,它会同时检查值和类型的相等性。

示例 2: 关系比较
// 定义两个变量
let x = 10;
let y = 20;

// 使用 >, <, >= 和 <= 操作符来进行关系比较
if (x > y) {
  console.log("x is greater than y");
} else if (x < y) {
  console.log("x is less than y"); // 输出:x is less than y
} else if (x >= y) {
  console.log("x is greater than or equal to y");
} else if (x <= y) {
  console.log("x is less than or equal to y"); // 这个条件也会为真,但因为上面的条件已经满足,所以不会执行到这里
}

// 使用 != 和 !== 操作符来检查不相等
if (x != y) {
  console.log("x is not equal to y using != (with type conversion)."); // 输出:x is not equal to y using != (with type conversion).
}

if (x !== y) {
  console.log("x is not equal to y using !== (strict inequality)."); // 输出:x is not equal to y using !== (strict inequality).
}

在这里插入图片描述

在这个例子中,我们使用了关系比较操作符来比较两个数值 xy。我们也展示了如何使用 !=!== 来检查两个值是否不相等,其中 != 允许类型转换,而 !== 则是严格不相等,不允许类型转换。

4.逻辑操作符:用于组合条件表达式。

  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非

以下是两个使用 JavaScript 逻辑操作符的示例,展示了如何在条件判断中使用 &&(逻辑与)、||(逻辑或)和 !(逻辑非)。

示例 1: 使用逻辑与 (&&) 和逻辑或 (||)
// 定义三个变量
let has驾驶证 = true;
let age = 25;
let carAvailable = false;

// 使用 && 操作符来检查多个条件是否都为真
if (has驾驶证 && age >= 18) {
  console.log("可以开车,因为有驾驶证并且年龄符合要求。"); // 输出:可以开车,因为有驾驶证并且年龄符合要求。
}

// 使用 || 操作符来检查是否有至少一个条件为真
if (carAvailable || age < 20) {
  console.log("可以选择公共交通或家人开车。");
} else {
  console.log("可以自己开车出行。"); // 输出:可以自己开车出行。
}

在这里插入图片描述

在这个例子中,我们首先定义了几个变量来表示一个人是否有驾驶执照、年龄以及是否有可用的汽车。然后我们使用 && 来确保所有条件都满足时才允许开车,并使用 || 来决定当某些条件满足时可以选择其他交通方式。

示例 2: 使用逻辑非 (!)
// 定义一个变量
let isOnline = false;

// 使用 ! 操作符来反转布尔值
if (!isOnline) {
  console.log("用户当前不在线。"); // 输出:用户当前不在线。
}

// 改变状态并再次检查
isOnline = true;

if (!isOnline) {
  console.log("用户当前不在线。");
} else {
  console.log("用户当前在线。"); // 输出:用户当前在线。
}

在这里插入图片描述

在这个例子中,我们展示了如何使用 ! 操作符来翻转布尔值的状态。这在检查某个条件是否为假时非常有用,比如检查用户是否在线。如果 isOnlinefalse,那么 !isOnline 将会是 true,反之亦然。

逻辑操作符在构建复杂的条件表达式时非常有用,可以帮助你创建更加灵活和智能的应用逻辑。

5.按位操作符:对数字(在32位整数形式中)的二进制表示执行位级操作。

  • & 按位与
  • | 按位或
  • ^ 按位异或
  • ~ 按位非
  • << 左移
  • >> 带符号右移
  • >>> 无符号右移

按位操作符在 JavaScript 中用于对数字的二进制表示进行位级操作。尽管它们不像算术或逻辑操作符那样常用,但在特定情况下(如处理颜色值、权限位掩码、压缩多个布尔标志到一个整数等)它们非常有用。

以下是两个使用按位操作符的示例:

示例 1: 使用按位与 (&) 和按位或 (|)
// 定义两个变量,以十进制形式给出,但我们会对它们的二进制形式进行操作
let a = 6; // 6 的二进制是 0110
let b = 3; // 3 的二进制是 0011

// 使用 & 操作符执行按位与
let andResult = a & b;
console.log("a & b (in binary): " + andResult.toString(2)); // 输出:a & b (in binary): 0010 或者 2

// 使用 | 操作符执行按位或
let orResult = a | b;
console.log("a | b (in binary): " + orResult.toString(2)); // 输出:a | b (in binary): 0111 或者 7

在这里插入图片描述

在这个例子中,我们展示了如何使用 &| 操作符来分别执行按位与和按位或运算。按位与会比较两个操作数的每一位,如果两者都是1,则结果为1,否则为0。按位或则是在任一位上只要有一个1就返回1。

示例 2: 使用按位非 (~) 和左移 (<<)
// 定义一个变量
let num = 5; // 5 的二进制是 0101

// 使用 ~ 操作符执行按位非(取反)
let notResult = ~num;
console.log("Original number (in binary): " + num.toString(2)); // 输出:Original number (in binary): 0101
console.log("~num (in binary, with sign bit): " + notResult.toString(2)); // 输出:~num (in binary, with sign bit): -101 - 注意,由于符号位的存在,输出可能看起来不同

// 使用 << 操作符执行左移
let shiftLeftResult = num << 1;
console.log("num << 1 (in binary): " + shiftLeftResult.toString(2)); // 输出:num << 1 (in binary): 1010 或者 10

在这里插入图片描述

在这个例子中,我们首先展示了如何使用 ~ 操作符来翻转所有位。接着,我们展示了如何使用 << 操作符将 num 的二进制表示向左移动一位,这相当于乘以2。请注意,JavaScript 中的数字是以 IEEE-754 64-bit 格式存储的,这意味着即使是整数也可能会受到符号位的影响,特别是当使用 ~ 操作符时。

按位操作符可以是非常强大的工具,尤其是在需要高效地执行某些计算或者直接操控硬件时。然而,在日常的 Web 开发中,它们并不常见,因此在使用时应当小心,并确保理解其行为。

6.三元操作符:提供一种简短的方式来进行条件赋值。

  • condition ? valueIfTrue : valueIfFalse

三元操作符(也称为条件操作符)是 JavaScript 中一种简洁的语法,用于根据条件返回两个不同值中的一个。它的形式是 condition ? valueIfTrue : valueIfFalse。以下是两个使用三元操作符的示例:

示例 1: 简单条件判断
// 定义一个变量
let age = 20;

// 使用三元操作符来检查年龄是否达到法定饮酒年龄
let drinkingLegal = (age >= 18) ? "已成年,可以合法饮酒" : "未成年,不可以饮酒";

console.log(drinkingLegal); // 输出:已成年,可以合法饮酒

在这里插入图片描述

在这个例子中,我们定义了一个变量 age 来表示一个人的年龄,并使用三元操作符来判断这个人是否达到了法定饮酒年龄。如果 age 大于或等于 18,则返回 "已成年,可以合法饮酒";否则返回 "未成年,不可以饮酒"

示例 2: 决定用户类型
// 定义一个布尔变量来表示用户是否为管理员
let isAdmin = true;

// 使用三元操作符来决定用户的类型描述
let userType = isAdmin ? "管理员" : "普通用户";

console.log("当前登录用户是:" + userType); // 输出:当前登录用户是:管理员

在这里插入图片描述

在这个例子中,我们定义了一个布尔变量 isAdmin 来表示用户是否具有管理员权限。然后我们使用三元操作符来选择合适的字符串来描述用户的类型。如果 isAdmintrue,则返回 "管理员";如果是 false,则返回 "普通用户"

三元操作符提供了一种非常简洁的方式来编写条件逻辑,特别是在需要在两个选项之间做出选择时。它可以让代码更加紧凑和易读,但应当注意不要过度嵌套三元操作符,以免降低代码的可读性。

7.其他操作符

  • , 逗号操作符
  • typeof 返回一个值的数据类型
  • instanceof 测试对象是否为某个构造函数的实例
  • delete 删除对象的属性
  • in 检查对象是否有指定的属性

JavaScript 中还有其他一些重要的操作符,如逗号操作符、typeofinstanceofdeletein 等。这里我将给出两个使用 typeofinstanceof 操作符的示例,因为它们在类型检查和对象关系确认方面非常有用。

示例 1: 使用 typeof 操作符
// 定义不同类型的变量
let stringVar = "Hello, world!";
let numberVar = 42;
let booleanVar = true;
let undefinedVar;
let nullVar = null;
let objectVar = { name: "Alice" };
let arrayVar = [1, 2, 3];
let functionVar = function() {};

// 使用 typeof 检查变量的数据类型
console.log(typeof stringVar); // 输出:string
console.log(typeof numberVar); // 输出:number
console.log(typeof booleanVar); // 输出:boolean
console.log(typeof undefinedVar); // 输出:undefined
console.log(typeof nullVar); // 输出:object (这是一个历史遗留问题,null 被错误地归类为 object)
console.log(typeof objectVar); // 输出:object
console.log(typeof arrayVar); // 输出:object (数组也是对象)
console.log(typeof functionVar); // 输出:function

在这里插入图片描述

在这个例子中,我们定义了不同类型(字符串、数字、布尔值、未定义、空、对象、数组和函数)的变量,并使用 typeof 来检查每个变量的数据类型。请注意,typeof 对于 null 返回 "object",这是 JavaScript 的一个历史遗留问题;而对于数组,它同样返回 "object",这可能会让人感到困惑,因为数组在 JavaScript 中是对象的一种。

示例 2: 使用 instanceof 操作符
// 定义构造函数
function Person(name) {
  this.name = name;
}

// 创建对象实例
let person1 = new Person("Bob");

// 使用 instanceof 检查对象是否为特定构造函数的实例
console.log(person1 instanceof Person); // 输出:true
console.log(person1 instanceof Object); // 输出:true,因为所有对象都是 Object 的实例

// 检查原始类型和内置对象
let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出:true
console.log(arr instanceof Object); // 输出:true,因为数组也是对象

// 注意:对于原始类型,instanceof 不适用
let num = 42;
console.log(num instanceof Number); // 输出:false,原始类型的数字不是 Number 构造函数的实例

在这里插入图片描述

在这个例子中,我们定义了一个名为 Person 的构造函数,并创建了一个它的实例 person1。然后我们使用 instanceof 操作符来检查 person1 是否是 Person 或者更广泛的 Object 类型的实例。我们还展示了如何使用 instanceof 来验证内置对象(如数组),但需要注意的是,instanceof 对于原始数据类型并不适用,因为它们不是通过构造函数创建的。

这两个操作符在需要确定变量类型或对象继承关系时非常有用。typeof 主要用于基本数据类型检查,而 instanceof 则用于检查对象是否是某个特定构造函数的实例。

表达式

表达式是由值、变量、操作符或者调用函数组成的语句,它可以被求值以返回一个值。例如:

  • x + y 是一个使用了加法操作符的表达式,它将两个数值相加。
  • functionName() 是一个函数调用表达式,它执行函数并可能返回一个结果。
  • new Date() 是一个创建新 Date 对象的表达式。

在 JavaScript 中,几乎任何可以产生值的东西都可以被视为表达式。这包括字面量(如字符串 "hello" 或者数字 42)、变量、函数调用、对象和数组字面量等。

在 JavaScript 中,表达式是任何可以求值并返回一个值的代码片段。它们可以由字面量、变量、操作符、函数调用等组成。以下是三个不同类型的表达式示例:

示例 1: 算术表达式

// 定义两个变量
let a = 10;
let b = 5;

// 算术表达式:加法
let sum = a + b;

console.log("The sum of " + a + " and " + b + " is " + sum); // 输出:The sum of 10 and 5 is 15

在这里插入图片描述

在这个例子中,a + b 是一个算术表达式,它将两个数值相加,并且结果被赋给变量 sum。最终我们使用 console.log 来输出这个结果。

示例 2: 函数调用表达式

// 定义一个函数
function greet(name) {
  return "Hello, " + name + "!";
}

// 函数调用表达式
let greeting = greet("Alice");

console.log(greeting); // 输出:Hello, Alice!

在这里插入图片描述

这里,greet("Alice") 是一个函数调用表达式,它执行了函数 greet 并传递了一个参数 "Alice"。函数执行的结果(即返回值)被赋给了变量 greeting,然后通过 console.log 输出。

示例 3: 条件(三元)表达式

// 定义一个变量
let age = 20;

// 使用三元操作符的条件表达式
let canVote = age >= 18 ? "Yes, you can vote." : "No, you cannot vote yet.";

console.log(canVote); // 输出:Yes, you can vote.

在这里插入图片描述

在这个例子中,age >= 18 ? "Yes, you can vote." : "No, you cannot vote yet." 是一个条件表达式(也称为三元操作符)。它根据 age 的值来决定应该返回哪一条消息。如果 age 大于或等于 18,则返回 "Yes, you can vote.";否则返回 "No, you cannot vote yet."

这些示例展示了如何在 JavaScript 中构建和使用不同类型的表达式。无论是简单的数学计算、函数调用还是基于条件的选择,表达式都是构成程序逻辑的重要部分。

了解这些操作符和表达式对于编写有效的 JavaScript 代码至关重要。通过它们,你可以构建复杂的逻辑来处理数据、响应用户交互以及实现动态的网页功能。


网站公告

今日签到

点亮在社区的每一天
去签到