1. 对数组对象属性排序
思路很简单，利用sort方法对对象数组按照对象属性进行排序，不过不要卡壳了~
var arr = [
{a: 4, b: 5},
{a: 2, b: 3},
{a: 5, b: 2},
{a: 0, b: 4}
];
// 升序
function compare(prop) {
return function(a, b) {
return a[prop] - b[prop]
}
}
console.dir(arr.sort(compare('a')))
2. 数组的冒泡排序
冒泡排序：随便从数组中拿一位数和后一位比较，如果是想从小到大排序，那么就把小的那一位放到前面，大的放在后面，简单来说就是交换它们的位置，如此反复的交换位置就可以得到排序的效果。
var arr = [3, 1, 3, 4, 3, 44, 23, 54, 123, 6];
function sortA(arr) {
for (var i = 0; l = arr.length - 1, i < l; i++) {
for (var j = i + 1; j < l + 1; j++) {
var cur = arr[i];
if (cur > arr[j]) {
var index = arr[j];
arr[j] = cur;
arr[i] = index;
}
}
}
return arr
}
console.log(sortA(arr))
// 改进
function sort(arr) {
if (arr.length <= 1) return arr;
for (var i in arr) {
for (var j in arr) {
if (arr[i] < arr[j]) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr
}
3. 数组的快速排序
快速排序：从数组的中间拿一个值，然后通过这个值挨个和数组里面的值进行比较，如果大于的放一边，小于的放一边，然后把这些合并，再进行比较，如此反复即可。
var arr = [9, 1, 3, 4, 67, 44, 23, 54, 123, 6];
function sortB(arr) {
if (arr.length <= 1) return arr;
// 获取中间值的索引
var len = Math.floor(arr.length / 2),
// 截取中间值
cur = arr.splice(len, 1),
left = [],
right = [];
for (var i in arr) {
cur > arr[i] ? left.push(arr[i]) : right.push(arr[i])
}
// 通过递归，上一轮比较好的数组合并，并且再次进行比较
return sortB(left).concat(cur, sortB(right))
}
console.log(sortB(arr))
4. 浅拷贝
function copy(obj) {
// 只拷贝对象
// slice & concat 可以返回一个新数组实现浅拷贝
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj，并且判断是obj的属性才拷贝
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
newObj[i] = obj[i];
}
}
return newObj;
}
5. 深拷贝
// 对象，数组以及函数都可以
var obj = [1, 'df', {a: 5, b: 14}, ['1sd', 'woshi']]
// JSON.parse(JSON.stringify(obj)) 也可以实现深拷贝效果，只是无法拷贝函数对象
function deepCopy(obj) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
newObj[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i]
}
}
return newObj
}
console.log(deepCopy(obj))
6. 通过防抖防止页面事件频繁触发
容易频繁触发的事件：resize、scroll、mousedown、mousemove、keyup、keydown等
<div class="container"></div>
.container{width: 100%; height: 200px; line-height: 200px; color: #fff; background-color: #444; font-size: 30px; text-align: center; margin-top: 100px;}
let container = document.querySelector('.container'),
count = 1,
time,
log = console.log.bind(console);
container.innerHTML = 1
function getUserAction() {
container.innerHTML = count++;
}
// setTimeout(fn, 0) 表示立即插入队列而不是立即执行
function debounce() {
count === 1 ? time = setTimeout(getUserAction, 0) : clearTimeout(time);
time = setTimeout(getUserAction, 1000)
}
// mousemove 移动完成后触发
container.addEventListener('mousemove', debounce);
这里 mqyqingfeng 指点，需要将debounce函数完全抽离出来，所以再改进下代码
let container = document.querySelector('.container'), count = 1;
function getUserAction() {
container.innerHTML = count++;
}
function debounce(fn, timer) {
var time
return function() {
! time ? time = setTimeout(fn, 0) : clearTimeout(time);
time = setTimeout(fn, timer)
}
}
container.addEventListener('mousemove', debounce(getUserAction, 1000));
7. 简单节流函数
let container = document.querySelector('.container'),
count = 1,
time,
log = console.log.bind(console);
function getUserAction() {
container.innerHTML = count++;
}
function throttle(func, wait) {
var pre = 0;
return function() {
var now = +new Date();
if (now - pre > wait) {
func.apply(this, arguments);
pre = now;
}
}
}
container.addEventListener('mousemove', throttle(getUserAction, 1000));
