每天10个前端知识点：事件篇

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

将事件的冒泡、绑定、捕获、委托及鼠标和键盘的相关事件整理了下。

1. 事件对象

  • event 事件对象(系统自带)
    *兼容：Chrome IE系
    FF -> 报错
  • ev 事件函数传入参数
    *兼容：高级浏览器(Chrome、FF、IE9+)
    IE8- -> undefined

兼容写法：var oEvent = ev || event;

more >>

展开全文 >>

每天10个前端知识点：各种宽高距离篇

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

这几个宽高距离总是让我辨别不清，索性整合对比了下，方便记忆。

1. 滚动距离

html简写：document.documentElement

  • document.body.scrollTop
    兼容：Chrome
    其他 -> 0
  • document.documentElement.scrollTop
    兼容：IE、FF
    其他 -> 0

兼容写法
纵向：var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
横向：var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

more >>

展开全文 >>

每天10个前端知识点：原生篇(5)

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容是一些比较零散的知识点，有坑慎入，踩坑快乐！

1. select下拉框的相关属性

  • 选中的索引值
    oSel.selectedIndex
  • 获取所有选项
    oSel.options
  • 获取选中的选项的文本内容
    oSel.options[oSel.selectedIndex].innerHTML
    oSel.options[oSel.selectedIndex].text
more >>

展开全文 >>

每天10个前端知识点：数组应用篇

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容总结了个人遇到的部分数组应用，其中不乏前端笔试高频考点。

1. 数组翻转方法2

eg:这里说明一下，这个方法用的不是reverse，因为一次面试中被问过不用reverse实现翻转，所以这里标注为数组的翻转方法2。

1
2
3
4
5
6
7
8
9
<script>
	var arr=[1,2,3,4];
	var arr2=[];
	while(arr.length) {
		var num=arr.pop();
		arr2.push(num);
	}
	alert(arr2);
</script>

2. 首字母大写

eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	var str = 'welcome to china';
	var arr = str.split(' ');
	var arr2 = [];
	for(var i = 0; i < arr.length; i++) {
		var first = arr[i].charAt(0).toUpperCase();
		var other = arr[i].substring(1);
		arr2.push(first + other);
	}
	alert(arr2.join(' '));

    //正则写法
	var str2 = str.replace(/\w+/g, function(s) {
		return s.charAt(0).toUpperCase() + s.substring(1);
	})
	alert(str2);
</script>

3.快速清空数组

  1. length=0;
  2. arr=[];
  3. arr.splice(0,arr.length);
  4. 循环pop或shift

4. 数组排序方法

更多方法见后续排序算法篇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
	function findMinIndex(arr, start) {
		var iMin = arr[start];
		var iMinIndex = start;
		for(var i = start + 1; i < arr.length; i++) {
			if(iMin > arr[i]) {
				iMin = arr[i];
				iMinIndex = i;
			}
		}
		return iMinIndex;
	}

	for(var i = 0; i < arr.length; i++) {
		var iMinIndex = findMinIndex(arr, i);
		var temp;
		temp = arr[iMinIndex];
		arr[iMinIndex] = arr[i];
		arr[i] = temp;
	}
</script>

5. 数组内查找元素是否存在

1
2
3
4
5
6
7
8
9
10
11
<script>
	function findInArr(item, arr) {
		for(var i = 0; i < arr.length; i++) {
			if(item == arr[i]) {
				return true;
			} else {
				return false;
			}
		}
	}
</script>

6. 数组去重的多种方法

(1)findInArr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
	var arr2 = [];

	for(var i = 0; i < arr.length; i++) {
		if(!findInArr(arr[i], arr2)) {
			arr2.push(arr[i]);
		}
	}

	// 数组内查找元素是否存在
	function findInArr(item, arr) {
		for(var i = 0; i < arr.length; i++) {
			if(item == arr[i]) {
				return true;
			} else {
				return false;
			}
		}
	}
</script>

(2)json(自动从小到大排序)

1
2
3
4
5
6
7
8
9
10
11
12
<script>
	var json = {};
	var arr2 = [];

	for(var i = 0; i < arr.length; i++) {
		json[arr[i]] = 'xxx';
	}

	for(var name in json) {
		arr2.push(name);
	}
</script>

摘自也谈JavaScript数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    function unique(arr) {
        var ret = [];
        var len = arr.length;
        var tmp = {};
        for(var i=0; i<len; i++){
          if(!tmp[arr[i]]){
            tmp[arr[i]] = 1;
            ret.push(arr[i]);
        }
    }
    return ret;
}
</script>

(3)sort()

1
2
3
4
5
6
7
8
9
<script>
	arr.sort();
	for(var i = 0; i < arr.length; i++) {
		if(arr[i] == arr[i+1]) {
			arr.splice(i, 1);
			i--;
		}
	}
</script>

(4) indexOf

这个方法是在前端公众号偶然看到的，数组的indexOf方法第一次用到

1
2
3
4
5
6
7
<script>
	for(var i = 0; i < arr.length; i++) {
		if(arr2.indexOf(arr[i]) < 0) {
			arr2.push(arr[i]);
		}
	}
</script>

(5)二分法

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
35
<script>
	var arr = [1, 2, 3, 2, 4, 3, 1, 5, 7, 2, 5];

	// 数组内查找元素是否存在
	function findInArr(item, arr) {
		for(var i = 0; i < arr.length; i++) {
			if(item == arr[i]) {
				return true;
			}
		}
        return false;
	}

	function del(arr, s, e) {
		if(s > e) {
			return [];
		} else if(s == e) {
			return [arr[s]];
		}

		var c = Math.floor((s + e) / 2);
		var l = del(arr, s, c);
		var r = del(arr, c + 1, e);

		for(var i = 0; i < r.length; i++) {
			if(!findInArr(r[i], l)) {
				l.push(r[i]);
			}
		}

		return l;
	}

	console.log(del(arr, 0 , arr.length - 1));
</script>

(6)Map(ES6)

摘自也谈JavaScript数组去重

Map的存取使用单独的get()、set()接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>

function unique(arr) {
    var ret = [];
    var len = arr.length;
    var tmp = new Map();
    for(var i=0; i<len; i++){
        if(!tmp.get(arr[i])){
            tmp.set(arr[i], 1);
            ret.push(arr[i]);
        }
    }
    return ret;
}
</script>

(7)Set(ES6)

摘自也谈JavaScript数组去重

Set不允许重复元素出现。

1
2
3
4
5
6
<script>
function unique(arr){
    var set = new Set(arr);
    return Array.from(set);
}
</script>

(8)Array.filter

1
2
3
4
5
6
7
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
 console.log(element); // 依次打印'A', 'B', 'C'
 console.log(index); // 依次打印0, 1, 2
 console.log(self); // self就是变量arr
 return true;
});
1
2
3
4
5
6
7
8
9
filter
var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
var r = [];
 
r = arr.filter(function (element, index, self) { 
 return self.indexOf(element) === index;
});
 
console.log(r.toString());

补一个字符串的应用

(1) 字符串中出现次数最多的字符

  • json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var str = 'abcdaaaaaa';
var json = {};

for(var i = 0; i < str.length; i++) {
	if(json[str.charAt(i)]) {
		json[str.charAt(i)]++;
	} else {
		json[str.charAt(i)] = 1;
	}
}

var num = -1;
var char = '';

for(var name in json) {
	if(num < json[name]) {
		num = json[name];
		char = name;
	}
}

console.log(num, char);
  • 正则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
字符串中出现次数最多的字符
var str = 'abcdaaaaaa';
var arr = str.split("")
	.sort()
	.join("")
	.match(/([a-z])\1*/g)
	.sort(function(a, b) {
		return b.length - a.length;
	})
console.log("出现最多的是: " + arr[0][0] + "共" + arr[0].length + "次");

var hash = {};
arr.forEach(function(val) {
	hash[val[0]] = val.length;
});
console.dir(hash);

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
微信公众号：无媛无故

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true