迹忆客 专注技术分享

JavaScript 冒号是一个标点符号，最常用于：

• 分隔对象字面量的属性和值。
• 分隔三元运算符的返回值。
• 在 switch 语句中声明一个 case。
• 解构嵌套对象属性。

使用冒号分隔对象中的键值对

冒号在 JavaScript 中最常见的用法是分隔对象中的属性和值。

const obj = {
  first: 'fql',
  last: 'jiyik',
  age: 30,
};

console.log(obj);

console.log(obj.first);
console.log(obj.last);

代码示例产生以下输出。

{ first: 'fql', last: 'jiyik', age: 30 }
fql
jiyik

请注意 ，对象中的每个键和值都由冒号 : 分隔。

对象字面量是从键到值的映射。

或者，我们可以声明一个空对象并使用点表示法添加键值对。

const obj = {};

obj.first = 'fql';
obj.last = 'jiyik';
obj.age = 30;

// 👇️ { first: 'fql', last: 'jiyik', age: 30 }
console.log(obj);

console.log(obj.first); // 👉️ fql
console.log(obj.last); // 👉️ jiyik

该代码示例声明了与上一示例中的对象相同的对象。

在三元运算符中使用冒号

冒号还用于分隔三元运算符的成功和失败情况。

const num = 100;

const result = num > 5 ? 'success' : 'failure';

console.log(result); // 👉️ success

三元运算符与 if/else 语句非常相似。

如果问号左边的表达式为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

示例中的三元运算符检查 num 变量存储的值是否大于 5。

如果满足条件，则返回字符串“success”，否则返回字符串“failure”。

你可以想象冒号之前的值是 if 块，冒号之后的值是 else 块。

在 switch 语句中使用冒号

冒号也用在 switch 语句中。

const num = 2;

switch (num) {
  case 1:
    console.log('Today is Monday.');
    break;
  case 2:
    console.log('Today is Tuesday');
    break;

  default:
    console.log('Today is not Monday or Tuesday');
}

代码示例产生以下输出。

Today is Tuesday

switch 语句根据一系列 case 子句评估表达式的值（示例中的 num）。

num 变量等于 2，因此情况 2: 块运行。

冒号用于指定 case 子句的块。

一旦遇到 break 语句，我们就退出 switch 语句。

在标签语句中使用冒号

冒号也与标签语句一起使用。

let str = '';

loop1:

for (let i = 0; i < 6; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str); // 👉️ 02345

label 语句与 break 和 continue 语句一起使用。

它用于在语句前面加上我们可以引用的标识符。

loop1: 行声明了一个 loop1: 标识符并使我们能够使用 continue loop1; 语句。

我们不会在 JavaScript 中看到经常使用的标签，因为不推荐使用它们。

它们通常会使嵌套循环过于复杂并导致难以阅读的代码。

解构嵌套对象属性时使用冒号

解构嵌套对象属性时也使用冒号。

const emp = {
  name: 'Fql Jiyik',
  address: {
    country: 'China',
    city: 'Example',
  },
};

const {
  address: {country, city},
} = emp;

console.log(country); // 👉️ China
console.log(city); // 👉️ Example

解构赋值语法用于将对象属性的值赋给变量。

const emp = {
  name: 'fql jiyik',
  age: 30,
  country: 'China',
};

const {name, age} = emp;

console.log(name); // 👉️ fql jiyik
console.log(age); // 👉️ 30

我们可以想象 name 和 age 变量被设置为对象的 name 和 age 属性的值。

当需要从嵌套对象中解构时，我们可以使用冒号来更深入地进行操作。

const emp = {
  name: 'Fql Jiyik',
  address: {
    country: 'China',
    city: 'Example',
  },
};

const {
  address: {country, city},
} = emp;

console.log(country); // 👉️ China
console.log(city); // 👉️ Example

在 TypeScript 中对类型使用冒号

我们可能还会看到 TypeScript 代码中使用了冒号。

TypeScript 是 JavaScript 语言的类型超集。

type Employee = {
  name: string;
  department: string;
  country: string;
  age: number;
};

const emp: Employee = {
  name: 'Fql Jiyik',
  department: 'accounting',
  country: 'China',
  age: 30,
};

1Employee 类型中的属性和类型以冒号分隔。

Employee 类型声明了一个变量，该变量具有字符串类型的 name 、department 和 country 属性以及数字类型的 age 属性。