15个非常实用的JavaScript代码片段

JavaScript实用代码片段汇总

本文分享了一系列实用的JavaScript代码片段，供读者参考与使用。

浏览器判断与日期转换

1. 区分IE浏览器与非IE浏览器的方法：


if(!+[1,]){ //IE 11 不支持
alert("这是 IE 浏览器")；
}else{
alert("这不是 IE 浏览器")；
｝

2. 将日期对象直接转换为数值类型：

+new Date();

数组处理与逻辑运算技巧

3. 在非IE浏览器环境中，将类数组对象“arguments”转换为数组：

Array.prototype.slice.call(arguments);

4. 使用最简单的逻辑或运算符||：


var a = 0 || 3;
console.log(a); //结果3

当=号右侧的第一个值计算结果为布尔“真”时，a取第一个值；否则取第二个值。

5. 单链式运算示例（如 a++ -1）：


var a=10;
console.log(a++ -1);

先执行“a-1”，随后执行“a=a+1”。

页面跳转与链接操作

6. 关于void操作符的有趣用法：

<a href="javascript:void(0)">我是一个死链接</a>

void是一个操作符，用于计算表达式但不返回任何值。

7. 跳转至新页面并确保浏览器无法后退：

location.replace("https://www.jb51.net");

location的replace()方法可用新文档替换当前文档，同时覆盖History对象中的记录。

页面刷新与历史记录控制

8. 设置几秒钟后返回上一页：

9. 在打开的子窗口中刷新父窗口：

window.opener.location.reload();

正则验证与DOM操作

10. 验证字符串是否为负数的正则表达式：

/^-\d+$/.test(str);

11. 使用JavaScript打印页面：

window.print()

12. 显示或隐藏一个DOM元素：


el.style.display = "";
el.style.display = "none"; //el是待操作的DOM元素

通过设置元素的display样式属性来实现DOM元素的显示与隐藏。

弹窗换行与原型继承

13. 实现alert()对话框中的文本换行：

alert("p\np")

"\n"表示换行符。

14. 实现ECMAScript5中的Object.create()函数：


function clone(proto){
function _clone(){}
_clone.prototype = proto;
_clone.prototype.constructor = _clone;
return new_clone(); //等价于 Object.create(Person);
var me = clone(Person);

通过原型链继承，并将构造函数重新指向新创建的对象。

闭包原理应用

15. 深入理解JavaScript中的闭包：

例如，以下代码会输出5次，结果均为5，如何改为输出0、1、2、3、4？


for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}

利用闭包原理实现，代码如下：


for(var i = 0; i < 5; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。