const和readonly有何区别-乐工具技术知识

const 和 readonly 在 JavaScript 中都用于声明不可变的变量，但它们之间存在一些关键区别：

声明方式：const 用于声明一个常量变量，其值在声明时必须被赋值，且之后不能再次修改。而 readonly 用于声明一个只读的属性，它可以用于声明对象属性或数组元素，其值在声明时可以不被赋值，但之后也不能再次修改。
作用域：const 声明的变量具有块级作用域，它只在声明它的代码块内有效。而 readonly 声明的属性具有对象级作用域，它只在定义它的对象内有效。
赋值：对于 const 声明的变量，其值在声明时必须被赋值，且之后不能再次修改。而对于 readonly 声明的属性，其值在声明时可以不被赋值，但之后也不能再次修改。需要注意的是，const 变量可以是对象或数组，但它们的属性仍然是可变的。而 readonly 属性必须是对象的属性或数组的元素。

以下是一些示例代码，以更好地理解 const 和 readonly 的区别：

// 使用 const 声明一个常量变量
const pi = 3.14;
pi = 3.14159; // 报错：TypeError: Assignment to constant variable.

// 使用 const 声明一个具有块级作用域的变量
if (true) {
  const message = "Hello, world!";
}
console.log(message); // 报错：ReferenceError: message is not defined.

// 使用 readonly 声明一个只读的属性
const obj = {
  name: "John",
  age: 30,
  readonly address: "123 Main St",
};
obj.address = "456 Elm St"; // 报错：TypeError: Cannot assign to read only property 'address' of object 'obj'.

// 使用 readonly 声明一个具有对象级作用域的属性
const arr = [1, 2, 3];
Object.defineProperty(arr, "sum", {
  value: function () {
    return this.reduce((a, b) => a + b, 0);
  },
  writable: false, // 等同于 readonly
});
arr.sum = 6; // 报错：TypeError: Cannot assign to read only property 'sum' of object '[1, 2, 3]'.

需要注意的是，const 和 readonly 不能互换使用。const 声明的变量不能被重新赋值，但它的属性仍然是可变的；而 readonly 声明的属性不能被重新赋值，也不能被删除。