本文整理了一系列实用的JavaScript代码片段，涵盖数组条件过滤、比typeof更精准的类型监测、对象深拷贝方案、Cookie正则提取、移位运算替代parseInt、颜色值转换、方法兼容性检查、NodeList转数组、字符串去空格及时间格式化等功能。这些片段旨在提升开发效率与代码健壮性。
JavaScript实用代码片段集锦
这里分享一些实用的JavaScript代码片段，供开发者参考使用。
数组条件过滤与类型监测
1. 根据指定条件从原数组生成新数组
var a = [-1, -1, 1, 2, -2, -2, -3, -3, 3, -3];
function f(s, e) {
var ret = [];
for (var i in s) { // 根据原有的数组长度进行循环
ret.push(e(s[i]));
}
return ret;
}
f(a, function(n) {
return n > 0 ? n : 0
}); // 传输一个匿名函数作为逻辑判断
2. 实现比原生typeof更详细的类型监测方法
function type(p) {
/function.(\w*)\(\)/.test(p.constructor); //通过其构造函数来获取对应的类型。
return RegExp.$1;
}
对象深拷贝与Cookie提取
3. 实现对象或数组的深拷贝，解决引用赋值时修改值影响原对象的问题。
var copyObject = function(obj) {
var result = {};
for (var x in obj) {
result[x] = typeof obj === "object" ? copyObject(obj[x]) : obj[x]
//如果拷贝的值仍然是一个对象,那么重复执行当前方法。
}
return result;
}
4. 利用正则表达式提取Cookie的值
function getCookie(name) {
if (name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
// (^| ) 不匹配第一个空格。
// ([^;]*) 只匹配除了;号之外的所有字符。
// (;|$) 匹配以;号或$为结尾的字符。
}
位运算技巧与颜色转换
5. 使用移位运算替代parseInt进行取整
~~3.14 = > 3;// ~~ 用于取整。~表示取数值的反码，~~表示再次取反，从而得到原数值（注：JS中的位运算会自动将数值转换为整数）
6. 将数值转换为16进制字符串（常用于表示颜色值）
(~~ (Math.random() * (1 << 24))).toString(16)
// ~~ 通过位运算取整。 // << 左移位操作。将1的二进制数左移24位。1<<24等于2的24次方（RGB模式下最多可表示的色彩数量） // toString(16) 将数值转换为16进制字符串输出。
兼容性检查与DOM集合转换
7. 检查对象方法的兼容性
if ('querySelector' in document) {}8. 将NodeList或HTMLCollection转换为Array或具备Array方法
NodeList：通过集合方法获取的DOM节点列表，例如document.getElementsByTagName、document.forms等。 HTMLCollection：HTML集合，与NodeList类似，但NodeList仅支持数字索引，而HTMLCollection支持名称作为索引。 NodeList与HTMLCollection的共同点：具有数组的外观，但不具备数组的方法；拥有length属性；支持通过索引读取内容。
function makeArray(obj) {
var rs = [],
len = obj.length;
try {
rs = [].slice.call(obj, 0);
} catch (e) { //for IE
for (var i = 0; j = obj[i++];) {
rs.push(j);
}
}
return rs;
}
字符串处理与时间格式化
9. 使用正则匹配清除字符串两侧空格
var trim = function(v){
var patrn = /^\s*(.*?)\s+$/;
return (patrn.test(v))? RegExp.$1 : '
null ';
}
10. 时间格式化
function dateFormat(t){ // t 是以秒为单位的值。
var h = ~~(t/3600), // t除以3600，取整，得到的就是小时。
m = ~~(t%3600/60), // t求余3600，取模，得到的就是去除小时剩下的秒数（分钟 + 秒），再除以60，取整，得到的就是分钟。
s = ~~(t%3600%60); // t求余3600，再求余60，剩下的自然就是“秒数”。
return h+'小时'+m+'分'+s+'秒';
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。