如何在 JavaScript 中创建静态数组

Question

我正在尝试创建一个静态数组。但我发现它可以在运行时增加数组中的项目。如何在 JavaScript 中实现静态数组？为什么数组在 JavaScript 中是可变的？

var a = [];
//var a = new Array(3);
for (var i = 0; i < 5; i++) {
  //a.push(i);
  a[i] = i;
}

document.write(a);

Answer 1

您可以使用Object.freeze 冻结数组：

"use strict";
var a = Object.freeze([0, 1, 2]);
console.log(a);
try {
  a.push(3);     // Error
} catch (e) {
  console.error(e);
}
try {
  a[0] = "zero"; // Error
} catch (e) {
  console.error(e);
}
console.log(a);

不允许

• 更改现有属性，无论是它们的值还是它们的其他特性，例如它们是否可扩展等。
• 添加或删除属性

查看链接了解完整详情。如果您只是希望保持大小固定但确实希望允许更改条目的值，只需使用 Object.seal 代替。

请注意，尝试更改现有属性是否会导致错误（相对于静默失败）取决于您是否处于严格模式。

freeze 和 seal 是在 ES5（2009 年 6 月）中引入的，因此应该出现在任何最新的浏览器中。过时的浏览器不会有它们。

Answer 2

使用最新的 JS 语法（旧浏览器需要 polyfill）：

var list = Object.seal([1,2,3])

Object.seal 防止对 Object 进行进一步更改。

Answer 3

听起来你想要一个immutable 数组。

大多数语言都有不可变的集合，无论是内置的还是来自库的。 JS 通常不包含它们，但 Facebook 提供了一个库，其中包含所有典型的不可变集合类型。

虽然 immutablejs 本身没有数组类型，但它确实有更传统的 List：

const staticArray = List([0, 1, 2, 3, 4]);

Answer 4

您可以使用Object.defineProperties() 在属性描述符处设置writable:false、configurable:false，Object.preventExtensions() 以防止将新属性添加到数组或对象中。

"use strict";
const ro = obj => {
  const props = {};
  const length = obj.length || Object.keys(obj).length;
  const entries = Array.isArray(obj) 
                  ? [...obj, length].entries() 
                  : Array.from(Object.keys(obj), prop => [prop, obj[prop]]);
  for (let [key, value] of entries) {
    props[key === length ? `length` : key] = {
      value: value,
      configurable: false,
      writable: false
    }
  }
        
  return Object.preventExtensions(Object.defineProperties(obj, props));
};

let arr = ro([1,2,3]);
try {
  console.log(`arr[0]:${arr[0]}`);
  console.log(`try to set arr[0] to ${arr[0] = 4}`);
} catch (e) {
  console.error(e)
}

try {
  console.log(`try to .push() to arr ${arr.push(4)}`);
} catch (e) {
  console.error(e)
}

try {
  console.log(`try to set .length of arr ${arr.length = 4}`);
  console.log(arr.length);
} catch (e) {
  console.error(e)
}

try {
  console.log(`try to delete of arr[1] ${delete arr[1]}`);
  console.log(arr.length);
} catch (e) {
  console.error(e)
}

console.log(JSON.stringify(arr, null, 2));

let obj = ro({a:1, b:2, c:3});

try {
  console.log(`obj["c"]:${obj["c"]}`);
  console.log(`try to assign 4 to obj["c"]:${obj["c"] = 4}`);
} catch (e) {
  console.error(e)
}

try {
  console.log(`try to assign property "d" to obj:${obj["d"] = 4}`);
} catch (e) {
  console.error(e)
}

try {
  console.log(`try to delete property "b" of obj:${delete obj["b"]}`);
} catch (e) {
  console.error(e)
}

console.log(JSON.stringify(obj, null, 2));