极力推荐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代码段的攻略,这些代码段可以帮助前端开发者更好地完成项目开发和优化用户体验,但是在使用这些代码段时,需要根据具体的场景进行灵活应用,避免滥用而影响性能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:极力推荐10个短小实用的JavaScript代码段 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • 你需要了解的ES6语法大总结

    当今Web前端开发已经离不开ES6语法的支持。在学习ES6语法的过程中,我们需要了解与之相关的知识点,包括模块(Module)、箭头函数(Arrow Function)、解构赋值(Destructuring Assignment)、let和const的区别、模板字符串(Template Strings)、默认参数(Default Parameters)、展开…

    JavaScript 2023年6月10日
    00
  • js 函数的副作用分析

    JS 函数的副作用分析是指分析函数执行时除了返回值外,是否对外部环境造成了影响,例如修改全局变量值、修改参数值、调用外部API等。 以下是进行 JS 函数副作用分析的完整攻略: 步骤一:理解什么是函数的副作用 先来看看函数的定义: function add(a, b) { return a + b; } 这个函数的作用就是将两个值相加并返回结果,这里没有任何…

    JavaScript 2023年5月27日
    00
  • JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    要实现获取某个元素的相邻兄弟节点,我们可以使用JavaScript提供的DOM API来实现。可以通过元素节点的 previousSibling 和 nextSibling 方法来获取相邻的兄弟节点。 以下是实现获取某个元素相邻兄弟节点的完整攻略: 步骤一:获取元素节点 首先,我们需要获取要查找相邻兄弟节点的元素节点。可以使用 document.getEle…

    JavaScript 2023年6月10日
    00
  • js获取本日、本周、本月的时间代码

    下面是获取本日、本周、本月的时间代码的完整攻略。 获取本日时间代码 我们可以使用JavaScript Date对象中的方法获取当前本日的时间。首先,我们需要创建一个Date对象,然后使用该对象的方法获取日期、月份和年份。下面是示例代码: const today = new Date(); const year = today.getFullYear(); c…

    JavaScript 2023年5月27日
    00
  • 由document.body和document.documentElement想到的

    想要使用document.body或document.documentElement,需要先了解它们的含义。 document.documentElement代表了整个HTML文档,包括标签及其下的所有内容。而document.body代表了标签及其下的所有内容。在使用document.body或document.documentElement时,可以通过它…

    JavaScript 2023年6月11日
    00
  • layui-laydate时间日历控件使用方法详解

    以下是关于“layui-laydate时间日历控件使用方法详解”的完整攻略: layui-laydate时间日历控件使用方法详解 简介 layui-laydate是layui前端框架中的一种日期时间选择控件,它具有丰富的功能,例如选择日期时间范围、自定义格式、快速选择等,还支持各种主题风格样式。 安装 在使用layui-laydate之前,需要先引入layu…

    JavaScript 2023年6月10日
    00
  • JavaScript中document对象使用详解

    当我们通过JavaScript来控制网页的时候,我们不可避免地要使用到document对象。document对象是DOM层次结构中的根节点,表示整个HTML文档。在这里我将为大家提供JavaScript中document对象的使用详解。 获取元素 通过ID获取元素 var element = document.getElementById("my-…

    JavaScript 2023年5月27日
    00
  • JS脚本实现网页自动秒杀点击

    让我对“JS脚本实现网页自动秒杀点击”的攻略给出一个完整的讲解吧。整个过程分为以下几个步骤: 第一步:分析网页结构和页面元素 在使用JS脚本实现自动秒杀之前,首先需要分析待秒杀页面的HTML结构和页面元素,确定需要点击的按钮(或链接)的CSS选择器,才能在JS中进行操作。 例如,假设要开发一个自动抢购京东上某一个商品的脚本,我们需要进入该商品页面,打开浏览器…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部