震惊!5分钟封装JavaScript栈数据结构Stack类(二)【JavaScript数据结构与算法系列】

一、创建JavaScript栈结构Stack类

在上一篇文章中，我们了解并学习了JavaScript是怎么来定义的栈数据结构，那么本章就是来创建一个JavaScript的栈数据结构类。

创建一个stack类最简单的方式是使用一个数组来存储其元素。在处理大量数据的时候（这在现实生活中的项目里很常见），我们同样需要评估如何操作数据是最高效的。在使用数组时，大部分方法的时间复杂度是O(n)。

O(n)的意思是，我们需要选代整个数组直到找到要找的那个元素，在最坏的情况下需要选代数组的所有位置，其中的n代表数组的长度。如果数组有更多元素的话，所需的时间会更长。另外，数组是元素的一个有序集合，为了保证元素排列有序，它会占用更多的内存空间。

如果我们能直接获取元素，占用较少的内存空间，并且仍然保证所有元素按照我们的需要排列，那不是更好吗?对于使用JavaScript语言实现栈数据结构的场景，我们也可以使用一个JavaScript对象来存储所有的栈元素，保证它们的顺序并且遵循LIFO原则。

我们来看看如何实现这样的行为。

首先像下面这样声明一个Stack 类(stack.js文件)。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	//TODO...
}

在这个版本的Stack类中，我们将使用一个count属性来帮助我们记录栈的大小(也能帮助我们从数据结构中添加和删除元素)。

二、封装基本功能与方法

①向栈中插入元素

在基于数组的版本中，我们可以同时向stack类中添加多个元素。由于现在使用了一个对象，这个版本的push方法只允许我们一次插入一个元素。下面是push方法的代码。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
}

在JavaScript中，对象是一系列键值对的集合。要向栈中添加元素，我们将使用count变量作为items对象的键名，插人的元素则是它的值。在向栈插入元素后，我们递增count变量。

可以延用之前的示例来使用Stack类，并向其中插入元素5和9。

const stack = new Stack();
stack.push(5);
stack.push(9);

在内部，items包含的值和count属性如下所示。

items = {
	0: 5,
	1: 9
}

count = 2;

②验证一个栈是否为空和它的大小

count属性也表示栈的大小。因此，我们可以简单地返回count属性的值来实现size方法。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
}

要验证栈是否为空，可以像下面这样判断count的值是否为0。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
	
	isEmpty(){
		return this.count === 0;
	}
}

③从栈中弹出元素

由于我们没有使用数组来存储元素，需要手动实现移除元素的逻辑。pop方法同样返回了从栈中移除的元素，它的实现如下。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
	
	isEmpty(){
		return this.count === 0;
	}
	
	pop(){
		if(this.isEmpty()){	// {1}
			return undefined;
		}
		this.count--;	//{2}
		const result = this.items[this.count]; //{3}
		delete this.items[this.count];	//{4}
		return result;	//{5}
	}
	
}

首先，我们需要检验栈是否为空(行{1})。如果为空，就返回 undefined。如果栈不为空的话，我们会将count属性减1(行{2})，并保存栈顶的值(行{3})，以便在删除它(行{4})之后将它返回（行{5}）。

由于我们使用的是JavaScript对象，可以用JavaScript的 delete 运算符从对象中删除一个特定的值。

我们使用如下内部的值来模拟pop操作。

items = {
	0: 5,
	1: 9
}

count = 2;

要访问到栈顶的元素(即最后添加的元素9)，我们需要访问键值为1的位置。因此我们将count变量从2减为1。这样就可以访问items[1]，删除它，并将它的值返回了。

④查看栈顶的值并将栈清空

上一节我们学习了，要访问栈顶元素，需要将count属性减1。那么我们来看看peek方法的代码。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
	
	isEmpty(){
		return this.count === 0;
	}
	
	pop(){
		if(this.isEmpty()){	// {1}
			return undefined;
		}
		this.count--;	//{2}
		const result = this.items[this.count]; //{3}
		delete this.items[this.count];	//{4}
		return result;	//{5}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.count - 1]; 
	}
}

要清空该栈，只需要将它的值复原为构造函数中使用的值即可。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
	
	isEmpty(){
		return this.count === 0;
	}
	
	pop(){
		if(this.isEmpty()){	// {1}
			return undefined;
		}
		this.count--;	//{2}
		const result = this.items[this.count]; //{3}
		delete this.items[this.count];	//{4}
		return result;	//{5}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.count - 1]; 
	}
	
	clear(){
		this.items = {};
		this.count = 0;
		//当然我们也可以遵循LIFO原则，使用下面的逻辑来移除栈中所有的元素。
		
		// while(1this.isEmpty()){
		// 		this.pop();
		// }
	}
}

⑤创建tostring方法

在数组版本中，我们不需要关心toString方法的实现，因为数据结构可以直接使用数组已经提供的toString方法。

对于使用对象的版本，我们将创建一个toString方法来像数组一样打印出栈的内容。

class Stack {
	constructor(){
		this.count = 0;
		this.items = {};
	}
	
	push(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	size(){
		return this.count;
	}
	
	isEmpty(){
		return this.count === 0;
	}
	
	pop(){
		if(this.isEmpty()){	// {1}
			return undefined;
		}
		this.count--;	//{2}
		const result = this.items[this.count]; //{3}
		delete this.items[this.count];	//{4}
		return result;	//{5}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.count - 1]; 
	}
	
	clear(){
		this.items = {};
		this.count = 0;
		//当然我们也可以遵循LIFO原则，使用下面的逻辑来移除栈中所有的元素。
		
		// while(1this.isEmpty()){
		// 		this.pop();
		// }
	}
	
	toString(){
		if(this.isEmpty()){
			return '';
		}
		let objString = `${this.items[0]}`;	//{1}
		for(let i = 1; i < this.count; i++){ //{2}
			objString = `${objString},${this.items[i]}`; //{3}
		}
		return objString;
	}
	//5,9
}

如果栈是空的，我们只需返回一个空字符串即可。

如果它不是空的，就需要用它底部的第一个元素作为学符单的初始值（行{1}），然后选代整个栈的键（行{2}），一直到栈顶，添加一个逗号（,）以及下一个元素（行{3}）。

如果栈只包含一个元素，行{2}和行{3}的代码将不会执行。

实现了 toString方法后，我们就完成了这个版本的Stack类。这也是一个用不同方式写代码的例子。对于使用Stack 类的开发者，选择使用基于数组或是基于对象的版本并不重要，两者都提供了相同的功能，只是内部实现很不一样。

小提示： 除了toString方法，我们创建的其他方法的复杂度均为O(1)，代表我们可以直接找到目标元素并对其进行操作(push、pop或peek)。

三、保护数据结构内部元素

在创建别的开发者也可以使用的数据结构或对象时，我们希望保护内部的元素，只有我们暴露出的方法才能修改内部结构。

对于Stack类来说，要确保元素只会被添加到栈顶，而不是栈底或其他任意位置(比如栈的中间)。不幸的是，我们在Stack类中声明的items和count属性并没有得到保护，因为JavaScript 的类就是这样工作的。

试着执行下面的代码。

const stack = new Stack();
console.log(Object.getOwnPropertyNames(stack));	//{1}
console.log(Object.keys(stack));	//{2}
console.log(stack.items);	//{3}

行{1}和行{2}的输出结果是[“count”，“items”]。这表示count和items属性是公开的，我们可以像行{3}那样直接访问它们。根据这种行为，我们可以对这两个属性赋新的值。

本章使用ES2015（ES6）语法创建了Stack类。ES2015类是基于原型的。尽管基于原型的类能节省内存空间并在扩展方面优于基于函数的类，但这种方式不能声明私有属性（变量）或方法。

另外，在本例中，我们希望Stack类的用户只能访问我们在类中暴露的方法。下面来看看其他使用JavaScript来实现私有属性的方法。

①下划线命名约定

一部分开发者喜欢在JavaScipt中使用下划线命名约定来标记一个属性为私有属性。

class Stack {
	constructor(){
		this._count = 0;
		this._items = {};
	}
}

下划线命名约定就是在属性名称之前加上一个下划线(_)。不过这种方式只是一种约定，并不能保护数据，而且只能依赖于使用我们代码的开发者所具备的常识。

②用ES6的限定作用域Symbol实现类

ES6新增了一种叫作Symbol的基本类型，它是不可变的，可以用作对象的属性。看看怎么用它在Stack类中声明items属性(我们将使用数组来存储元素以简化代码)。

const _items = Symbol('stackItems'); //{1}
class Stack {
	constructor(){
		this[_items] = [];
	}
	//栈的方法
}

在上面的代码中，我们声明了Symbol类型的变量_items(行{1}),在类的constructor函数中初始化它的值(行{2})。要访问_items，只需要把所有的 this.items都换成this[_items]。

这种方法创建了一个假的私有属性，因为ES6新增的 Object.getOwnPropertySymbols方法能够取到类里面声明的所有Symbols属性。

下面是一个破坏Stack类的例子。

const stack = new Stack();
stack.push(5);
stack.push(9);
let objectSymbols = Object.getOwnPropertySymbols(stack);
console.log(objectSymbols.length);	//输出1
console.log(objectSymbols);	//输出[Symbol()]
console.log(objectSymbols[0]);	//输出Symbol()
stack[objectSymbols[0]].push(1);
stack.print();	//输出5,8,1

从以上代码可以看到，访问 stack[objectSymbols[0]]是可以得到_items 的。并且，_items属性是一个数组，可以进行任意的数组操作，比如从中间删除或添加元素(使用对象进行存储也是一样的)。

但我们操作的是栈，不应该出现这种行为。

还有第三个方案。

③用ES6的WeakMap实现类

有一种数据类型可以确保属性是私有的，这就是WeakMap。会在后面章深入探讨Map这种数据结构，现在只需要知道weakMap可以存储键值对，其中键是对象，值可以是任意数据类型。

如果用WeakMap 来存储items属性(数组版本)，Stack 类就是这样的：

const items = new WeakMap(); //{1}
class Stack {
	constructor(){
		items.set(this,[]); //{2}
	}
	push(element){
		const s = items.get(this); //{3}
		s.push(element);
	}
	pop(){
		const s = items.get(this); 
		return s.pop();
	}
	// 其它方法
}

上面的代码片段解释如下。

• 行{1}，声明一个WeakMap类型的变量items。
• 行{2}，在constructor中，以this(Stack类自己的引用)为键，把代表栈的数组存人items。
• 行{3}，从WeakMap中取出值，即以this为键(行{2}设置的）从items中取值。

现在我们知道了，items在Stack类里是真正的私有属性。采用这种方法，代码的可读性不强，而且在扩展该类时无法继承私有属性。

所以鱼和熊掌不可兼得！

④ECMAScript类属性提案

TypeScript提供了一个给类属性和方法使用的private修饰符。然而，该修饰符只在编译时有用(TypeScript类型和错误检测)。在代码被转移完成后，属性同样是公开的。

事实上，我们不能像在其他编程语言中一样声明私有属性和方法。虽然有很多种方法都可以达到相同的效果，但无论是在语法还是性能层面，这些方法都有各自的优点和缺点。

哪种方法更好呢?这取决于你在实际项目中如何使用本文展示的算法，也取决于你需要处理的数据量、需要构造的实例数量，以及其他约束条件。最终，还是取决于你的选择。

有一个关于在JavaScript类中增加私有属性的提案。通过这个提案，我们能够直接在类中声明JavaScript类属性并进行初始化。下面是一个例子。

class Stack{
	#count = 0;
	#items = [];
	//栈的方法
}

我们可以通过在属性前添加井号(#)作为前缀来声明私有属性。这种行为和WeakMap中的私有属性很相似。所以在不远的未来，我们有希望不使用特殊技巧或牺牲代码可读性，就能使用私有类属性。

要了解更多有关类属性提案的信息，请访问：https://github.com/tc39/proposal-class-fields。

四、本章小结

本系列文章主要讲述如何创建JavaScript栈数据结构（Stack）类，以及方法封装，本文作为栈类第二篇，主要是先讲述如何创建JavaScript栈数据结构（Stack）类，重点是使用不同的方法来实现Stack类，以及如何保护内部的元素。数据栈类的文章共三篇本文是第二篇。

工欲善其事，必先利其器。

五、写在后面

这作为一个JavaScript栈数据结构的第二篇文章，主要目的是使用不同的方法来实现Stack类，本系列也会持续进行更新的。

剧透：下一章讲述栈数据结构能解决啥问题。

有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

感谢您的阅读,如果此文章或项目对您有帮助，若可以的话请给个一键三连吧！

GitHub有开源项目,需要的小伙伴可以顺手star一下！

GitHub: https://github.com/langyuxiansheng