[JavaScript 刷题] 数组，字符串，ArrayList 的简单实现

Posted 2021-09-18 GoldenaArcher

[javascript 刷题] 数组，字符串，ArrayList 的简单实现

相比较其他语言，JavaScript 的 字符串 没有什么特别特殊的地方，它具有不可变性，每一次更新都会创建一个新的字符串，这点和大多数的编程语言一样。

数组 比起其他的编程语言来说，就有一些比较有趣的特性了：它是动态的，长度不固定，它不需要特殊的声明。这些特行比起 数组(array) 而言，其实更偏向于 数组列表(array list)。

但是，JavaScript 的数组也有两个比较特殊的功能：

• 它可以通过操作数组的 长度(length) 这个属性，达到直接修改数组的长度。这个特性在编程语言中应该也算是比较独特的了：

  const arr = [];
  // 直接修改数组长度
  arr.length = 10;
  

  

• JavaScript 中的数组可以储存多种类型的数据，而不是规定只能储存单一类型的数据

  const arr = [];
  
  arr.push(1);
  arr.push('hello world');
  
  arr;
  

  

数组的大 O

鉴于 JavaScript 引擎的数量较多，并且每个浏览器的实现都不太一样，这个问题没有绝对意义上的答案。从 Big O of JavaScript arrays 这个 Stack Overflow 的问答板块上，有一篇去年发的帖子，其中说明了以 V8 为例，目前使用 hashtable 和 array list 去实现 JavaScript 的 arry。

hashtable 和 array list 的大 O 如下：

• 增

  平均是 $O(n)$ 的操作，在数组下标 $i$ 这个位置插入值代表着需要移动 $i+1$ 之后的所有值。

• 改

  $O(1)$ 的操作，访问任何一个已知下标 $i$ 几乎都可以直接访问到该地址。

• 查

  前面已经提到了，通过已知下标 $i$ 去访问几乎都是 $O(1)$ 的操作。

删除一个元素是一个比较特殊的操作，依照这个 post 的说法使用 delete array[index] 这个删除操作可能会重构整个数组的表现，因此可能会比常规的删除操作更加糟糕。

另一个 Stack Overflow 的讨论 Deleting array elements in JavaScript - delete vs splice 中提的更多一些，使用 delete array[index] 会删除数组中的 prototype，使得对象的属性进行修改，并且不会实际删除数组中的元素：

另外，在红宝书第四章 JavaScript 高级程序设计第四章学习笔记 也曾经提到过 隐藏类 的优化，即： Chrome 的 V8 引擎在解释后的 JavaScript 代码会使用隐藏类，变量在初始化的时候判断是否能够使用相同的隐藏类，如果可以，会共享隐藏类以此对其优化。

一旦对象的 prototype 不一致——使用 delete 会清除 Array 对象的 prototype，这样就会造成多个 Array 对象的 copy，从而影响代码的运行效率。

使用 JavaScript 实现 ArrayList

本身 JavaScript 的 array 就已经很动态了，这里使用 JavaScript 去模拟一下 Java 中 ArrayList 的实现，顺便熟悉一下 Jest 的操作。

不得不说 Jest 使用起来真的挺简单的，这是一个简单的 overview:

测试案例中我写了 11 个测试案例，运行 yarn test 或 npm test 之后的结果如下:

后面的简单报告：

以及测试覆盖率的命令行和 html 版本：

完整实现代码：

class ArrayList {
  arraylist = undefined;
  DEFAULT_CAPACITY = 10;
  length = 0;

  constructor(param) {
    if (param === undefined) {
      this.arraylist = new Array(this.DEFAULT_CAPACITY);
      this.length = 0;
    } else if (typeof param === 'number') {
      this.arraylist = new Array(param);
      this.length = param;
    } else if (typeof param[Symbol.iterator]) {
      this.arraylist = Array.from(param);
      this.length = this.arraylist.length;
    }
  }

  getArraylist() {
    return this.arraylist;
  }

  size() {
    return this.length;
  }

  add(element) {
    this.arraylist[this.length++] = element;
  }

  addAll(iterable) {
    const newArray = Array.from(iterable);
    this.arraylist.splice(this.length, 0, ...newArray);
    this.length += newArray.length;
  }

  contains(val) {
    return this.arraylist.includes(val);
  }

  clear() {
    this.arraylist.fill(undefined);
    this.length = 0;
  }

  get(index) {
    return this.arraylist[index];
  }

  indexOf(target) {
    return this.arraylist.indexOf(target);
  }

  isEmpty() {
    return this.length === 0;
  }

  remove(index) {
    this.arraylist.splice(index, 1);
  }
}

module.exports = ArrayList;

完整的实现代码和测试代码在这里：JavaScript 实现基础 ArrayList 功能

其他

之前写的其他的关于 JavaScript 数组的一些学习笔记。

JavaScript 的 foreach 用不了 break/continue？同样写法下 for 循环也不行

JavaScript 循环中调用异步函数的三种方法，及为什么 forEach 无法工作的分析