数据驱动型的设计02
本系列从数据结构相关的计算机知识出发，从数据的角度提出一些数据驱动的设计思维模式。
第01期总体介绍数据结构与设计的关系，用数据结构的方式来思考设计，并通过几个案例介绍一些大的思路。
第02期介绍数据结构中的链表结构，并探讨设计中可能的链表数据。
1 何为链表？
1.1 概念
一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接实现的。图示：
来个形象点的图：
1.2 链表有特点呢？
查找某个元素：需要从链表中第一个元素开始，一直找到目标元素的位置。
插入／删除某个元素：只要修改元素中的指针。
2 用代码实现一个链表结构
采用Javascript来实现一个链表结构，加深对链表的理解，Chrome浏览器打开console面板，先实现一个链表的节点。
2.1 节点
此节点保存了数据本身（value的值）及下一个节点的位置（下一个节点），输入：
class LinkedListNode {
constructor(value,next) {
this.value = value;
this.next = next;
}
}这里我们需要了解下ES6的class特性，下文的例子定义了一个“类”——Point,可以看到里面有一个constructor方法,这就是构造方法,主要写一些Point对象的属性，例如x和y的坐标值；而传统的方法是通过构造函数,定义并生成新对象,然后通过 prototype 属性向对象添加属性和方法。
class Point {
constructor(){
this.x=0;
this.y=0; // ...
}
toString(){ // ...
}
toValue(){ // ...
}
};
// 等同于
function Point(){
this.x=0;
this.y=0;
//...
};
Point.prototype = {
toString(){},
toValue(){}
};2.2 链表的基本结构
主要是有两个属性，head记录的是最开始的节点，tail记录的是结尾的节点。其中由于每个节点都有一个next属性指向下一个节点，所以head记录了整条链表的节点。
class LinkedList{ constructor(){
this.head = null;
this.tail = null;
}}初始化一个链表结构:
var ls=new LinkedList();2.3 添加方法
下面为链表结构的数据添加：增删改查的方法。
添加节点的方法：
append - 在结尾插入节点
prepend - 在开始插入节点
查询节点的方法：
find
删除节点的方法：
delete
2.3.1 prepend方法
添加prepend方法，图示结合代码：
LinkedList.prototype.prepend=function(value) {
const newNode = new LinkedListNode(value,this.head);
// 往head添加节点 this.head = newNode;
// 如果tail为空，往tail添加此节点
if (!this.tail) {
this.tail = newNode;
}
return this; }实验下prepend方法：
ls.prepend(0);console.log(JSON.stringify(ls,null,2));打印出来：
{ "head": {
"value": 0,
"next": null
},
"tail": {
"value": 0,
"next": null
}
}继续添加：
ls.prepend(1);
console.log(JSON.stringify(ls,null,2));结果：
"{
"head": {
"value": 1,
"next": {
"value": 0,
"next": null
}
},
"tail": {
"value": 0,
"next": null
}
}"经过多次实验，会发现，head是个一层层嵌套的结构，通过head可以找到任何一个节点（按顺序），而tail永远是存储的最后一个节点。
2.3.2 append方法
为链表结构添加append方法：
LinkedList.prototype.append=function(value) {
const newNode = new LinkedListNode(value);
// 如果head为空，则head设为newNode if (!this.head) {
this.head = newNode;
this.tail = newNode;
return this;
}
// 把新的newNode设为tail
this.tail.next = newNode;
this.tail = newNode;
return this;
}实验下append方法：
ls.append(10);
console.log(JSON.stringify(ls,null,2));2.3.3 compare方法
为了实现删除delete，我们得先实现比对两个数值是否相等的功能，相等的话返回0：
LinkedList.prototype.compare=function(a,b){
if (a === b) {
return 0;
}
return a < b ? -1 : 1;};2.3.4 delete方法
根据value值来删除节点，凡是等于目标value的节点都被删除：
LinkedList.prototype.delete=function(value) {
let deletedNode = null;
// head节点是否需要被删除 while (this.head && this.compare(this.head.value, value)===0) {
deletedNode = this.head;
this.head = this.head.next;
}
let currentNode = this.head;
if (currentNode !== null) {
// 遍历每一个节点
while (currentNode.next) {
if (this.compare(currentNode.next.value, value)===0) {
deletedNode = currentNode.next;
currentNode.next = currentNode.next.next;
} else {
currentNode = currentNode.next;
}
}
}
// 判断tail节点是否需要删除
if (this.compare(this.tail.value, value)===0) {
this.tail = currentNode;
}
return deletedNode;
};2.3.5 find方法
实现一个简单的查找方法，找到一个值等于value的节点，并返回，代码如下：
LinkedList.prototype.find=function(value) {
let currentNode = this.head;
while (currentNode) {
if (value && this.compare(currentNode.value, value)===0) {
return currentNode;
} currentNode = currentNode.next;
}
return null; }2.3.6 toArray方法
链表结构的数据转化为数组数据：
LinkedList.prototype.toArray=function() {
const nodes = [];
let currentNode = this.head;
while (currentNode) {
nodes.push(currentNode);
currentNode = currentNode.next;
}
return nodes;
}至此，我们对链表结构的数据应该已经理解得比较深刻了。接下来，我们探讨下在设计中，有哪些是可以被链表结构的数据所表示的？
赞赏的方式可以是点广告～
3 设计中的链表结构
思考下设计里，哪些元素／手法是可以被链表结构的数据表示的？我们先了解下链表结构的几种基本类型。
3.1 链表结构的几种基本类型
Singly linked list 这是最简单的链表结构：
Double Linked List 双向链表的结构：
Circular linked list循环链表的结构：
3.2 设计中的链表结构
链表本身的特点是一个节点连接着下一个节点，非常适合描述流程性，有前后关系的数据。
1）用户体验的流线
室内设计中，不同空间游线之间的关系；
展览馆的游线设计；
UX设计中页面的跳转流线；
2）设计思路的解构
景观设计中，一层层的关系，地面铺装，树池花台，乔木灌木，亭廊构架；
平面设计中，背景，主体内容，配色，布局，构图等；
更多跟设计的结合，欢迎留言补充。
参考资料：
https://en.wikipedia.org/wiki/Linked_list