前端面试二之运算符与表达式

发布于:2025-06-05 ⋅ 阅读:(21) ⋅ 点赞:(0)

目录

1.JavaScript 中的 == 和 === 运算符

2.|| (逻辑或) 运算符

与 ES6 默认参数的区别

与 ?? (空值合并运算符) 的区别 

3.?.(可选链)运算符

(1). 安全访问深层嵌套属性

(2). 安全调用可能不存在的函数

(3). 安全访问数组元素

4.展开运算符 (...)

(1). 数组展开

(2). 对象展开 (ES2018)

注意事项

浅拷贝特性:

5.解构赋值

(1)数组解构

(2)对象解构


1.JavaScript 中的 == 和 === 运算符

== 运算符会在比较前进行类型转换,然后再比较值。

5 == '5'      // true (字符串'5'转换为数字5)
true == 1     // true (true转换为1)
false == 0    // true (false转换为0)
null == undefined // true
'0' == false  // true (两边都转换为数字0)
[] == false   // true (空数组转换为0,false转换为0)
'' == 0       // true (空字符串转换为0)

=== 运算符不会进行类型转换,如果类型不同直接返回 false。

5 === '5'     // false (数字不等于字符串)
true === 1    // false (布尔值不等于数字)
false === 0   // false (布尔值不等于数字)
null === undefined // false
'0' === false // false (字符串不等于布尔值)
[] === false  // false (数组不等于布尔值)
'' === 0      // false (字符串不等于数字)

2.|| (逻辑或) 运算符

JavaScript 的 || 运算符实际上返回的是第一个"真值"(truthy)的操作数,或者最后一个操作数(如果所有操作数都是"假值"(falsy))。

在 JavaScript 中,以下值被认为是 假值(falsy)

  • false
  • 0
  • "" (空字符串)
  • null
  • undefined
  • NaN
    function greet(name) {
      name = name || "访客";
      console.log(`你好, ${name}!`);
    }
    
    greet("张三");  // 输出: 你好, 张三!
    greet();       // 输出: 你好, 访客!

    与 ES6 默认参数的区别

ES6 的函数默认参数提供了更精确的默认值设置方式:

function greet(name = "访客") {
  console.log(`你好, ${name}!`);
}

greet(undefined);  // 输出: 你好, 访客!
greet(null);       // 输出: 你好, null!

 || 会对所有假值使用默认值,而 ES6 默认参数只在参数为 undefined 时使用默认值。

与 ?? (空值合并运算符) 的区别 

ES2020 引入了 ?? 运算符,它只在左侧为 nullundefined 时返回右侧值: 

0 || "默认值"    // "默认值" (因为0是假值)
0 ?? "默认值"    // 0 (因为0不是null或undefined)

"" || "默认值"   // "默认值"
"" ?? "默认值"   // ""

false || "默认值" // "默认值"
false ?? "默认值" // false

3.?.(可选链)运算符

?. 是 JavaScript 的可选链运算符(Optional Chaining Operator),于 ES2020 引入。它允许你安全地访问嵌套对象属性或调用函数,而无需验证每个引用是否有效。当 ?. 左侧为 null/undefined 时,右侧不会执行。可选链运算符极大简化了深层属性访问的代码,使代码更简洁且更安全,是处理不确定结构数据的理想选择。

obj?.prop       // 访问属性
obj?.[expr]     // 通过表达式访问属性
func?.(args)    // 调用函数

(1). 安全访问深层嵌套属性

const street = user?.address?.street;
// 如果 user 或 address 是 null/undefined,返回 undefined 而不会报错

(2). 安全调用可能不存在的函数

// 传统方式
const result = obj.method && obj.method();

// 可选链方式
const result = obj.method?.();

(3). 安全访问数组元素

const firstItem = arr?.[0];
// 等同于 (arr !== null && arr !== undefined) ? arr[0] : undefined

4.展开运算符 (...)

展开运算符 (Spread Operator) 是 ES6 引入的重要特性,用三个点 (...) 表示。它可以将可迭代对象(如数组、字符串或对象)"展开"为单个元素。

(1). 数组展开

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 等同于
const arr2 = arr1.concat([4, 5]);

(2). 对象展开 (ES2018)

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 注意:后面的属性会覆盖前面的
const obj3 = { ...obj1, b: 99 }; // { a: 1, b: 99 }

注意事项

浅拷贝特性
const nestedObj = { a: { b: 1 } };
const copy = { ...nestedObj };
copy.a.b = 2; // 也会修改原始对象的 a.b

5.解构赋值

解构赋值(Destructuring Assignment)是ES6引入的一种语法,可以让你从数组或对象中提取数据,并赋值给变量,代码更简洁易读。

(1)数组解构

// 基本解构
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 跳过某些元素
const [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

(2)对象解构

const person = { name: 'Alice', age: 25 };

// 基本解构
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 25

// 不同变量名
const { name: personName, age: personAge } = person;
console.log(personName); // 'Alice'
console.log(personAge);  // 25


网站公告

今日签到

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