算法
双向链表
interface Node {
element: any,
next: any,
prev: any
}
class LinkedList {
private length: number = 0;
private list: any = null;
getNode(element:any):Node{
return {
element,
next: null,
prev: null
}
}
append(element:any){
var currentNode = this.list,
node = this.getNode(element);
if(!this.list){
this.list = node;
}else{
while(currentNode.next){
currentNode = currentNode.next
}
currentNode.next = node;
node.prev = currentNode;
}
++this.length;
}
insert(position: number, element: any){
if(this.length > position && position >= 0){
var node = this.getNode(element);
var current = this.list;
if(position === 0){
current.prev = node;
node.next = this.list;
}else{
for(var i=1; i<position; i++){
current = current.next
}
var next = current.next;
current.next = node;
node.prev = current;
node.next = next;
next.prev = node;
}
++this.length;
}else{
this.append(element)
}
}
removeAt(position: number){
if(this.length >= position && position >= 0){
if(position === 0){
this.list = this.list.next;
this.list.prev = null;
}else{
var current = this.list;
for(var i=1;i<=position;i++){
current = current.next;
}
var prev = current.prev,
next = current.next;
prev && (prev.next = next);
next && (next.prev = prev);
}
}
--this.length;
}
remove(element: any){
this.removeAt(this.indexOf(element));
}
indexOf(element: any):number{
var current = this.list;
for(var i=0; i<this.length;i++){
if(current.element === element){
return i
}
current = current.next;
}
return -1;
}
isEmpty():boolean{
return this.length === 0;
}
size():number{
return this.length;
}
getHead():any{
return this.list
}
toString():string{
var string:string = '',
current = this.list;
if(current){
string += current.element;
while(current.next){
current = current.next;
string += current.element;
}
}
return string;
}
print(){
console.log(this.toString());
}
}
var linkedList = new LinkedList();
linkedList.print();
linkedList.append(1);
linkedList.print();
linkedList.append(2);
linkedList.print();
linkedList.append(3);
linkedList.print();
linkedList.append(5);
linkedList.print();
linkedList.insert(3, 4);
linkedList.print();
console.log(linkedList.indexOf(4));
linkedList.remove(4);
linkedList.print();
linkedList.removeAt(3);
linkedList.print();
console.log(linkedList.size());
linkedList.getHead();
集合
class Set{
private items: any = {};
private length: number = 0;
add(value:any): boolean{
if(!this.has(value)){
this.items[value] = value;
++this.length;
return true;
}
return true;
}
has(value:any): boolean{
return this.items.hasOwnProperty(value);
}
remove(value){
if(this.has(value)){
delete this.items[value];
--this.length;
return true;
}
return false;
}
clear(){
this.items = {};
this.length = 0;
}
size():number{
return this.length;
}
values(){
var arr = [];
Object.keys(this.items).map(item => {
arr.push(this.items[item]);
})
return arr
}
union(set):any[]{
var arr = this.values();
set.values().map(item => {
if(!this.has(item)){
arr.push(item)
}
});
return arr
}
intersectionSet(set):any[]{
var arr = [];
set.values().map(item => {
if(this.has(item)){
arr.push(item)
}
});
return arr;
}
difference(set):any[]{
var arr = [];
this.values().map(item => {
if(!set.has(item)){
arr.push(item)
}
});
return arr;
}
subset(set){
return set.values().every(item => {
return this.has(item)
})
}
}
var set = new Set();
set.add(1);
console.log(set.values());
console.log(set.has(1));
console.log(set.size());
set.add(2);
console.log(set.values());
set.add(1);
console.log(set.values());
set.remove(1);
console.log(set.values());
set.remove(2);
console.log(set.values());
var set1 = new Set();
set1.add(1);
set1.add(2);
var set2 = new Set();
set2.add(2);
set2.add(3);
var set3 = new Set();
set3.add(2);
console.log(set1.union(set2))
console.log(set1.intersectionSet(set2))
console.log(set1.difference(set2))
console.log(set2.difference(set1))
console.log(set1.subset(set2))
console.log(set1.subset(set3))
表单
表单类型
// 单选输入框
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="text" name="firstname">
// 单选按钮 name 相同
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
// 多选
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
// 下拉筛选
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
// 输入文本框
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
// 提交按钮
<input type="submit" value="Submit">
通用属性
<form>表单属性
- acceptCharset:服务器能够处理的字符集
- action:接受请求的 URL
- elements:接受请求的 URL
- enctype:请求的编码类型
- length:表单中控件的数量
- method:要发送的 HTTP 请求类型
- name:表单的名称
- reset():将所有表单域重置为默认值
- submit():提交表单
- target:用于发送请求和接受响应的窗口
<input>通用属性:
- disabled:当前字段书否被禁用
- form:指向当前字段所属表单的指针
- name:当前字段名
- value:当前字段值
- readOnly:当前字段是否只读
- tabIndex:当前字段的切换序号
- type:当前字段的类型
通用事件,
- blur:当前字段失去焦点时触发
- change:失去焦点且值改变之后触发
- focus:但钱字段获取焦点
剪贴板操作
- beforecopy:在发生复制操作前
- copy:在发生复制操作时
- beforecut:在发生剪切操作前
- cut:在发生剪切操作时
- beforepaste:在发生粘贴操作前
-
paste:在发生粘贴操作时
pasteEle.addEventListener(“paste”, function (e){ // clipboardData 粘贴对象 if ( !(e.clipboardData && e.clipboardData.items) ) { return ; }
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) { var item = e.clipboardData.items[i]; // 当粘贴内容为字符串时 if (item.kind === "string") { item.getAsString(function (str) { // str 是获取到的字符串 }) // 当粘贴内容为文件时 } else if (item.kind === "file") { var pasteFile = item.getAsFile(); // pasteFile就是获取到的文件的 blob 对象 } } });
验证约束
- required:必填
- min:最小长度
- max:最大长度
- pattern:正则,验证内容书否符合规则
- novalidate:禁止验证
- checkValidaity():验证表单是够符合规则