纸上得来终觉浅，绝知此事要躬行

找工作难，找实习难，找实习这段时间对自己心里磨砺也是很大，要多写、多看、多温故。前段时间做了到笔试编程题目要求编写类似百度搜索自动完成控件，当时没有写的很完善，花了点时间仔细整理写了下
具体题目要求如图：

具体思路：

1. HTML的oninput事件可以监控input输入，不过题目要求兼容IE8,当时并没有想到，回来查资料有个onproperty事件可以
2. 自动完成的列表项使用fragement文档片段插入，这要比逐个插入效率高很多，visibility设置hidden，当用监控到户输入匹配项时，更改为visible，
3. 提示列表鼠标悬浮变色：css伪类li：hover
4. 点击列表项时，值插入输入框：采用事件委托绑定click事件
   阅读全文 »

纸上得来终觉浅，绝知此事要躬行

1. 给定一个字符串，请你将字符串重新编码，将连续的字符替换成“连续出现的个数+字符”。比如字符串AAAABCCDAA会被编码成4A1B2C1D2A。
   • 常规解法：遍历字符串

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

     var key="AAAABCCDAA", result="", lastKey="", lastCount=0, currentKey; for(var i=0;i<key.length;i++){ currentKey=key.substr(i,1);//获取当前字符 if(lastKey==curentKey){//判断当前字符是否读取完毕 lastCount++;//读取当前字符个数 }else{ if(lastKey!=""){ result+=lastKCount+lastKey;//保存当前字符状态 } lastKey=currentKey;//开始或者当前字符读取完毕重置为下个字符 lastCount=1;//开始或者重置下个字符个数 } } //最后一个字符类别补全 result += lastKeyCount + lastKey; console.log(result);

   • 正则解法：
     第二种方法，replace方法不多做解释，正则表达式中\1表示原子组，既第一个捕获组，*号表示匹配零个或者多个\1,replace方法第二个参数是个函数，函数两个参数分别为匹配项和第一个捕获组

     1 2	var key="AAAABCCDAA"; var result=key.replace(/(\w)\1*/ig,function(s,v){return s.length+v;})

     阅读全文 »

数据类型：（包括Number、String、Object、Array、Boolean、Null）;
主要思路typeof判断基本数据类型，然后对判定同属object的null、Array和object进行单独复制（遍历数组和对象并调用自身clone克隆内部成员）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function clone(obj){
	var o;
	switch(typeof obj){
		case "undefined":
			break;
		case "string":
			o=obj+"";
			break;
		case "number":
			o=obj-0;
			break;
		case "object"://object具体 分两种情况 对象（Object）或数组（Array）
			if(obj===null){
				o=null;
			}else{
				if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){
					o=[];
					for(var i=0;i<obj.length;i++){
						o.push(clone(obj[i]));//调用自身克隆数组对象内部成员
					}
				}else{
					o={};
					for(var k in obj){
						o[k]=clone(obj[k]);//调用自身克隆对象内部成员
					}
				}
			}
			break;
		default;
			o=obj;
			break;
	}
	return o;
}

纸上得来终觉浅，绝知此事要躬行

基本思想：

在要排序的一组数中，对当前还未排好序的范围内的全部数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。即：每当两相邻的数比较后发现它们的排序与排序要求相反时，就将它们互换。

算法的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13

//冒泡排序
function bubbleSort(arr){
	var len=arr.length;
	for(var i=0;i<len-1;i++){
		for(var j=0;j<len-i-1;j++){
			if(arr[j]>arr[j+1]){
			var tmp=arr[j];arr[j]=arr[j+1];arr[j+1]=tmp;
			}
		}
	}
	return arr;
}
bubbleSort([1,2,4,7,92,3,7,8,9,111,1,9])

概述

ES5的对象属性名都是字符串，这容易造成属性名的冲突。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种:Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
1.Symbol值可以通过Symbol函数生成。既对象的属性名可以有两种类型：原来的字符串、新增的Symbol类型，后者是独一无二的，保证不会与其它属性名产生冲突。

1
2

let s=Symbol();	
typeof s//"Symbol"

1
2
3
4
5
6

var s1=Symbol('foo');
var s2=Symbol('bar');
s1//Symbol(foo)
s2//Symbol(bar)
s1.toString()//"Symbol(foo)"
s2.toString()//"Symbol(bar)"

纸上得来终觉浅，绝知此事要躬行

两天把买的很久的《高性能JavaScript》看完了，失败果然是催人奋进最好良药，如果早些研究这本书，我想猪场面试也能表现更好吧，虽然一直在学习，并没有付出哪怕60%的全部努力，不能等到机会来了才知道要好好努力，说了这么多给自己听的题外话，正题：把书中优化js性能的方法略作总结（写完最后看了一下竟然将近一万六千字，mark下，纯手工 打造，哈哈）。

加载和执行

多数浏览器使用单一进程来处理用户界面（UI）刷新和Javascript脚本执行，所以同一时刻只能做一件事情-javaScript的阻塞特性，javaScript执行过程好事越久，浏览器等待响应时间越长。

纸上得来终觉浅，绝知此事要躬行

2.6号回公司上班，到今天辞职终于静下心来好好回顾下这个寒假、或者去年暑假以来的学习历程，想写总结，却有着不知从何下笔，可能成果并不令自己满意又或者过去太久失去了当初要记录的心情。

纸上得来终觉浅，绝知此事要躬行

写在前面

拖拖拉拉好几个月了，终于在假期第一天集中精力把阮老师的ECMAScript 6 入门剩余的几章看完了（不得不吐槽，为了支持开源书籍特意买了纸质版，真是排版让人蛋疼，还是电子版舒服）,感觉21章对实践颇有益处，略作摘抄，原文传送门猛戳

块级作用域

let 取代 var

ES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。

1
2
3
4
5
6
7
8
9

'use strict';

if (true) {
  let x = 'hello';
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

var命令存在变量提升效用，let命令没有这个问题。

1
2
3
4
5
6

'use strict';

if(true) {
  console.log(x); // ReferenceError
  let x = 'hello';
}

所以，建议不再使用var命令，而是使用let命令取代。

纸上得来终觉浅，绝知此事要躬行

Javascript中的继承一直是个比较麻烦的问题，prototype、constructor、proto在构造函数，实例和原型之间有的复杂的关系，不仔细捋下很难记得牢固。ES6中又新增了class和extends，和ES5搅在一起，加上平时很少自己写继承，简直乱成一锅粥。不过还好，画个图一下就清晰了，下面不说话了，直接上图，上代码。

ES5

ES5中的继承，先看代码在看图：

1
2
3
4
5
6
7
8
9
10
11
12
13

function Super() {}
 
function Sub() {}
Sub.prototype = new Super();
Sub.prototype.constructor = Sub;
 
var sub = new Sub();
 
Sub.prototype.constructor === Sub; // ② true
sub.constructor === Sub; // ④ true
sub.__proto__ === Sub.prototype; // ⑤ true
Sub.prototype.__proto__ == Super.prototype; // ⑦ true

写在前面-最近学习Es6的异步操作和Async函数，然后就看着这篇文章，自己也做了些改进和思考，也体验一把一种需求的各种实现！！

原文出处：十年踪迹

这是 奇舞前端特训营 JavaScript 培训课程 的节选。很多同学觉得写 JavaScript 很简单，只要能写出功能来，效果能实现就好。还有一些培训机构，专门教人写各种“炫酷特效”，以此让许多人觉得这些培训很“牛逼”。然而事实上，能写 JavaScript 和写好 JavaScript 这中间还有很遥远的距离。成为专业前端，注定在 JavaScript 路途上需要一步步扎实的修炼，没有捷径。