1. 防抖函数(debounce)
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版。
1.1非立即执行版：
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
1.2立即执行版：
function debounce(func,wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
1.3合体版：
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func,wait,immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
2. 节流函数(throttle)
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次。
2.1时间戳版：
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
2.2定时器版：
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
2.3合体版：
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
*/
function throttle(func, wait ,type) {
if(type===1){
let previous = 0;
}else if(type===2){
let timeout;
}
return function() {
let context = this;
let args = arguments;
if(type===1){
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}else if(type===2){
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
3. 冒泡排序
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - 1 - i; j++) {
// 相邻元素两两对比，元素交换，大的元素交换到后面
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
//举个数组
myArr = [20, 18, 27, 19, 35];
//使用函数
bubbleSort(myArr);
4. 快速排序
取数组中间值，按中间值将数组分为左右两个数组，返回时调用该数组函数方法；
function quickSort (arr) {
if (arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};
5. 选择排序
minIndex始终保存着最小值的位置的索引，随着i的自增，遍历的数组长度越来越短，直到完成排序。
var example=[8,94,15,88,55,76,21,39];
function selectSort(arr){
var len=arr.length;
var minIndex,temp;
console.time('选择排序耗时')；
for(i=0;i<len-1;i++){
minIndex=i;
for(j=i+1;j<len;j++){
if(arr[j]<arr[minIndex]){
minIndex=j;
}
}
temp=arr[i];
arr[i]=arr[minIndex];
arr[minIndex]=temp;
}
console.timeEnd('选择排序耗时');
return arr;
}
console.log(selectSort(example));
6. 数组去重
6.1 简单的去重方法
- 特点：最简单数组去重法
- 思路：新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
- 注意：IE8以下不支持数组的indexOf方法
function uniq(array) {
var temp = []; //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i]);
}
}
return temp;
}
var aa = [1, 2, 2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5];
console.log(uniq(aa));
6.2 对象键值法去重
- 特点：速度最快， 占空间最多（空间换时间）该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。
- 实现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。
- 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；解决上述问题还是得调用“indexOf”。
function uniq(array) {
var temp = {},
r = [],
len = array.length,
val,
type;
for (var i = 0; i < len; i++) {
val = array[i];
type = typeof val;
if (!temp[val]) {
temp[val] = [type];
r.push(val);
} else if (temp[val].indexOf(type) < 0) {
temp[val].push(type);
r.push(val);
}
}
return r;
}
var aa = [1, 2, "2", 4, 9, "a", "a", 2, 3, 5, 6, 5];
console.log(uniq(aa));
6.3 排序后相邻去重
/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array) {
array.sort();
var temp = [array[0]];
for (var i = 1; i < array.length; i++) {
if (array[i] !== temp[temp.length - 1]) {
temp.push(array[i]);
}
}
return temp;
}
var aa = [1, 2, "2", 4, 9, "a", "a", 2, 3, 5, 6, 5];
console.log(uniq(aa));
6.4 数组下标法
实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i， 那么表示第i项是重复的，忽略掉。否则存入结果数组。
function uniq(array) {
var temp = [];
for (var i = 0; i < array.length; i++) {
//如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
if (array.indexOf(array[i]) == i) {
temp.push(array[i]);
}
}
return temp;
}
var aa = [1, 2, "2", 4, 9, "a", "a", 2, 3, 5, 6, 5];
console.log(uniq(aa));
6.5 优化遍历数组法
实现思路：获取没重复的最右一值放入新数组。（检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）
function uniq(array) {
var temp = [];
var index = [];
var l = array.length;
for (var i = 0; i < l; i++) {
for (var j = i + 1; j < l; j++) {
if (array[i] === array[j]) {
i++;
j = i;
}
}
temp.push(array[i]);
index.push(i);
}
console.log(index);
return temp;
}
var aa = [1, 2, 2, 3, 5, 3, 6, 5];
console.log(uniq(aa));
7. Class 与 extends
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}
网友评论