1. 對數(shù)組對象屬性排序
思路很簡單，利用sort方法對對象數(shù)組按照對象屬性進行排序许昨，不過不要卡殼了~
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. 數(shù)組的冒泡排序
冒泡排序：隨便從數(shù)組中拿一位數(shù)和后一位比較，如果是想從小到大排序榄融，那么就把小的那一位放到前面莲镣，大的放在后面，簡單來說就是交換它們的位置残拐，如此反復(fù)的交換位置就可以得到排序的效果途茫。
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. 數(shù)組的快速排序
快速排序：從數(shù)組的中間拿一個值遗遵，然后通過這個值挨個和數(shù)組里面的值進行比較匆笤，如果大于的放一邊斤程，小于的放一邊昔字，然后把這些合并捶惜，再進行比較搬卒，如此反復(fù)即可棕兼。
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])
}
// 通過遞歸梅掠，上一輪比較好的數(shù)組合并枢析，并且再次進行比較
return sortB(left).concat(cur, sortB(right))
}
console.log(sortB(arr))
4. 淺拷貝
function copy(obj) {
// 只拷貝對象
// slice & concat 可以返回一個新數(shù)組實現(xiàn)淺拷貝
if (typeof obj !== 'object') return;
// 根據(jù)obj的類型判斷是新建一個數(shù)組還是對象
var newObj = obj instanceof Array ? [] : {};
// 遍歷obj玉掸，并且判斷是obj的屬性才拷貝
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
newObj[i] = obj[i];
}
}
return newObj;
}
5. 深拷貝
// 對象，數(shù)組以及函數(shù)都可以
var obj = [1, 'df', {a: 5, b: 14}, ['1sd', 'woshi']]
// JSON.parse(JSON.stringify(obj)) 也可以實現(xiàn)深拷貝效果醒叁，只是無法拷貝函數(shù)對象
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. 通過防抖防止頁面事件頻繁觸發(fā)
容易頻繁觸發(fā)的事件：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) 表示立即插入隊列而不是立即執(zhí)行
function debounce() {
count === 1 ? time = setTimeout(getUserAction, 0) : clearTimeout(time);
time = setTimeout(getUserAction, 1000)
}
// mousemove 移動完成后觸發(fā)
container.addEventListener('mousemove', debounce);
這里 mqyqingfeng 指點，需要將debounce函數(shù)完全抽離出來租谈，所以再改進下代碼
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. 簡單節(jié)流函數(shù)
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));
