极力推荐10个短小实用的JavaScript代码段

接下来我来为大家讲解极力推荐10个短小实用的JavaScript代码段的攻略。

一、介绍

首先我们需要明确，这10个短小实用的JavaScript代码段主要是针对于前端开发者，能够帮助他们提高开发效率、优化用户体验、提供更好的交互和视觉效果。

这10个代码段分别是：
1. 获取URL参数
2. 倒计时
3. 防抖
4. 节流
5. 数组去重
6. 判断数组是否相等
7. 判断对象是否相等
8. 手写Promise
9. 发送异步请求
10. 判断浏览器类型

下面我将逐一介绍它们的使用方法。

二、获取URL参数

这个代码段可以在网址中获取指定参数的值，比如网址中有“http://www.xxx.com?name=xxx”，我们可以使用以下代码获取该网址的name参数值：

function getParam(name) {
  var search = location.search.slice(1);
  var arr = search.split("&");
  for (var i = 0; i < arr.length; i++) {
    var keyValuePair = arr[i].split("=");
    if (keyValuePair[0] === name) {
      return decodeURIComponent(keyValuePair[1]);
    }
  }
}
console.log(getParam("name")); //xxx

三、倒计时

这个代码段可以实现倒计时效果，比如在秒杀抢购时，可以通过该代码段实现秒杀倒计时：

function countDown(endDateStr) {
  var endDate = new Date(endDateStr).getTime();
  var timerId = setInterval(function () {
    var now = new Date().getTime();
    var distance = endDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    console.log(days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ");
    if (distance < 0) {
      clearInterval(timerId);
      console.log("倒计时结束");
    }
  }, 1000);
}

countDown("2022-01-01"); //倒计时至2022年1月1日

四、防抖

这个代码段可以避免频繁触发函数，适用于节流或防止频繁点击等场景。

function debounce(fn, delay) {
  var timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(this, arguments);
    }, delay);
  };
}

var fn = function () {
  console.log("防抖成功");
};

var debounceFn = debounce(fn, 500);

window.addEventListener("scroll", debounceFn);

五、节流

这个代码段可以限制函数的执行频率，适用于动态加载等场景。

function throttle(fn, threshhold) {
  var timer, last;
  return function () {
    var context = this;
    var now = +new Date();
    var args = arguments;
    if (last && now < last + threshhold) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

var fn = function () {
  console.log("节流成功");
};

var throttleFn = throttle(fn, 500);

window.addEventListener("scroll", throttleFn);

六、数组去重

这个代码段可以去除数组中的重复元素，可以使用foreach遍历数组中的元素，一旦发现重复的元素，就将其删除即可。

function unique(arr) {
  var obj = {};
  var res = [];
  arr.forEach(function (item) {
    if (!obj[item]) {
      obj[item] = true;
      res.push(item);
    }
  });
  return res;
}

console.log(unique([1, 1, 2, 2, 3, 3])); //[1, 2, 3]

七、判断数组是否相等

这个代码段可以判断两个数组是否相等，不同于对象的判断，数组的判断需要先比较数组的长度，再逐一比较数组中的元素。

function isEqualArray(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  for (var i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false
    }
  }
  return true;
}

console.log(isEqualArray([1, 2, 3], [1, 2, 3])); //true
console.log(isEqualArray([1, 2, 3], [1, 3, 2])); //false

八、判断对象是否相等

这个代码段可以判断两个对象是否相等，在判断对象相等时需要先比较对象的属性名，再逐一比较属性值。

function isEqualObject(obj1, obj2) {
  var props1 = Object.getOwnPropertyNames(obj1);
  var props2 = Object.getOwnPropertyNames(obj2);
  if (props1.length !== props2.length) {
    return false;
  }
  for (var i = 0; i < props1.length; i++) {
    var propName = props1[i];
    if (obj1[propName] !== obj2[propName]) {
      return false;
    }
  }
  return true;
}

var obj1 = { name: "Tom", age: 20 };
var obj2 = { name: "Tom", age: 20 };
console.log(isEqualObject(obj1, obj2)); //true

var obj3 = { name: "Pete", age: 25 };
console.log(isEqualObject(obj1, obj3)); //false

九、手写Promise

这个代码段可以手写一个符合Promise规范的Promise，并且支持链式调用。

function Promise(fn) {
  var self = this;
  self.status = "pending";
  self.data = undefined;
  self.onResolvedCallback = [];
  function resolve(value) {
    if (self.status === "pending") {
      self.status = "resolved";
      self.data = value;
      self.onResolvedCallback.forEach(function (callback) {
        callback(value);
      });
    }
  }
  try {
    fn(resolve);
  } catch (error) {
    reject(error);
  }
}
Promise.prototype.then = function (onResolved) {
  var self = this;
  return new Promise(function (resolve) {
    function handle(onResolved) {
      var result = onResolved(self.data);
      if (result instanceof Promise) {
        result.then(resolve);
      } else {
        resolve(result);
      }
    }
    if (self.status === "pending") {
      self.onResolvedCallback.push(function () {
        handle(onResolved);
      });
    } else {
      handle(onResolved);
    }
  });
};

十、发送异步请求

这个代码段可以使用XMLHttpRequest对象发送异步请求，当请求成功后，会调用回调函数，处理响应数据。

function ajax(method, url, data, success, fail) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      success(xhr.responseText);
    } else {
      fail(xhr.status);
    }
  };
  xhr.send(data);
}

ajax("GET", "/api", "", function (res) {
  console.log(res);
}, function (err) {
  console.log(err);
});

结语

以上就是极力推荐10个短小实用的JavaScript代码段的攻略，这些代码段可以帮助前端开发者更好地完成项目开发和优化用户体验，但是在使用这些代码段时，需要根据具体的场景进行灵活应用，避免滥用而影响性能。