JavaScript 操作符

  • JavaScript 操作符已关闭评论
  • 148 次浏览
  • A+
所属分类:Web前端
摘要

在 JavaScript 中,有一些操作符可以使代码更简洁、易读和高效。以下是一些常见的操作符:


JavaScript 操作符/运算符

在 JavaScript 中,有一些操作符可以使代码更简洁、易读和高效。以下是一些常见的操作符:

1、可选链操作符(optional chaining operator)

?.可选链操作符(optional chaining operator)?. 可选链操作符用于访问可能为空或未定义的属性或方法,它允许我们安全地访问嵌套对象的属性,如果中间的属性为空或未定义,则不会抛出错误,而是返回 undefined。例如:

const obj = {   foo: {     bar: 123   } };  // 普通访问属性的方式 const x = obj.foo.bar; // x = 123  // 使用可选链操作符 const y = obj?.foo?.bar; // y = 123  // 如果对象未定义,则返回 undefined const z = undefined?.foo?.bar; // z = undefined 

2、空值合并操作符(nullish coalescing operator)

??空值合并操作符(nullish coalescing operator)?? 空值合并操作符用于检查一个变量是否为 null 或 undefined,如果是,则返回一个默认值,否则返回该变量的值。与传统的逻辑运算符 || 不同,?? 只会在左侧的值为 null 或 undefined 时返回右侧的默认值,对于其他假值(如空字符串、0、false 等)并不会返回默认值,而是会返回它本身。例如:

const x = undefined ?? 'default'; // x = 'default'  const y = null ?? 'default'; // y = 'default'  const z = 'value' ?? 'default'; // z = 'value'  const a = '' ?? 'default'; // a = ''  const b = '' || 'default'; // b = 'default' 

需要注意的是,?? 操作符需要在 ES11 及以上的版本才能使用。

3、箭头函数(Arrow Function)

使用箭头(=>)可以更简洁地定义函数。例如:

const add = (a, b) => a + b; console.log(add(1, 2)); // 3 
const obj = {   x: 1,   add(y) {     return this.x + y;   },   double: () => this.x * 2, }; console.log(obj.add(2)); // 3 console.log(obj.double()); // NaN 

注意,箭头函数中的 this 指向的是定义时的上下文,而不是调用时的上下文。

4、模板字面量(Template Literals)

使用反引号(`)可以定义包含变量、表达式和换行符的字符串。例如:

const name = "Alice"; const age = 20; console.log(`My name is ${name}, and I am ${age} years old.`); // 'My name is Alice, and I am 20 years old.' 

5、展开操作符(Spread Operator)

使用三个点(...)可以将数组或对象展开为一个列表或多个参数。例如:

const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]  const obj1 = { x: 1, y: 2 }; const obj2 = { z: 3 }; const obj3 = { ...obj1, ...obj2 }; console.log(obj3); // { x: 1, y: 2, z: 3 } 

6、短路求值(Short-circuit Evaluation)

使用逻辑运算符&&||可以进行短路求值,简化条件分支的写法。例如:

const obj = { prop: "value" }; const propValue = obj.prop || "default"; console.log(propValue); // 'value'  const arr = []; const firstValue = arr[0] && arr[0].prop; console.log(firstValue); // undefined 

7、简写的条件语句(Conditional (Ternary) Operator)

使用问号和冒号(?:)可以简化 if-else 语句的写法。例如:

const age = 20; const message = age >= 18 ? "You are an adult" : "You are not an adult"; console.log(message); // 'You are an adult' 

8、简写的自增和自减操作符(Short-circuit Evaluation)

使用双加号(++)和双减号(--)可以简化变量的自增和自减操作。例如:

let count = 0; count++; console.log(count); // 1  let num = 5; const result = --num; console.log(result); // 4 

9、简写的赋值操作符(Assignment Operator)

使用加等号(+=)、减等号(-=)、乘等号(*=)、除等号(/=)等可以简化复合赋值操作。例如:

let count = 0; count += 1; console.log(count); // 1  let num = 5; num *= 2; console.log(num); // 10 

10、双重否定运算符(Double NOT Operator)

双重否定运算符(Double NOT Operator)即为两个连续的叹号("!!"),也称为逻辑非非运算符。它可以将一个值转换为其对应的布尔值。例如:

const x = "hello"; console.log(!!x); // true  const y = 0; console.log(!!y); // false 

需要注意的是,使用!!运算符进行布尔值转换时,要注意避免隐式类型转换带来的副作用,以免导致意外的行为。

11、?: 在 TypeScript 中表示可选属性

在 TypeScript 中,可以使用 ? 表示一个属性是可选的。例如:

interface Person {   name: string;   age?: number; }  const person1: Person = { name: "Alice" }; const person2: Person = { name: "Bob", age: 20 }; 

在上面的例子中,Person 接口有一个可选属性 age,这意味着可以创建一个 Person 类型的对象,其中 age 属性是可选的。