1. 根据给定的条件在原有的数组上,得到所需要的新数组。

  ——《JavaScript 王者归来》

     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. 比原生type 或 typeof 更详细的类型监测方法

  ——《精通 JavaScript · 第二章》

     function type(p){
/function.(\w*)\(\)/.test(p.constructor); //通过其构造函数来获取对应的类型。
return RegExp.$1;
}

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进制的字符串输出。

7. 对象方法的兼容性检查

if('querySelector' in document){}

8. NodeList || HTMLCollection || Object 转换为Array或具有Array的方法。

NodeList: 是指通过集合方法获得到的DOM节点列表,例如:document.getElementsByTagNmae,document.forms... 等方法。

HTMLCollection: HTML块,它与NodeList很像,但是NodeList只支持数字索引,而HTMLCollection可以支持名称作为索引。

NodeList 与 HTMLCollection 都具有以下类似:

  · 具有数组的外观,但没有数组的方法

  · 具有.length属性

  · 支持索引来读取内容。

 function makeArray(obj){
var rs=[],len=obj.length;
try{
rs = [].slice.call(obj,0);
/*
注意:这里的arguments是具有.length属性的对象
slice:数组的截取方法,这中写法也涉及到slice内部实现的原理
*/
}catch(e){//for IE
for(var i=0;j=obj[i++];){
rs.push(j);
}
}
return rs;
}

9.尝试执行异常的代码

     try{
// 尝试运行 }catch(msg){ throw "Error name:" + msg.name; // throw会在控制台抛出异常信息,注意:throw会阻塞程序执行。建议使用console.log
throw "Error message:" + msg.message /* Error.Name 的常见错误信息: 1. EvalError:eval_r()的使用与定义不一致
2. RangeError:数值越界
3. ReferenceError:非法或不能识别的引用数值
4. SyntaxError:发生语法解析错误
5. TypeError:操作数类型错误
6. URIError:URI处理函数使用不当 */ }finally{
// finally 最终不论是运行成功还是没有运行成功都会执行。
}

10.滚动条滚动时分别判断位置与内容的可见

 // 判断滚动到指定元素的位置

 function getPos(obj){
var t = 0;
while(obj){
t += obj.offsetTop;
obj = obj.offsetParent;
}
return t;
} window.onscroll = function(){
var position = document.documentElement.clientHeight,
visible = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop); // 滚动到指定位置
if(position > getPos(obj)){}
// 滚动时指定内容显示出来
if(visible > getPos(obj)){} }

11. 在事件的注册处理程序中注销事件

 function handle(){
alert(‘I,m here!');
this.removeEventListener('click',handle,false);
}
obj.addEventListener('click',handle,false);

12. 正则匹配清除两侧空格

 var trim = function(v){
var patrn = /^\s*(.*?)\s+$/;
return (patrn.test(v))? RegExp.$1 : 'null';
}

13. HTML字符编码

 var htmlEncode = function(str){
var patrn = {};
patrn['amp'] = /&/g;
patrn['left'] = /</g;
patrn['right'] = />/g;
patrn['quot'] = /"/g;
patrn['nbsp'] = /[\u0020*|\u3000*]/g; // \u0020 匹配半角空格 \u3000 匹配全角空格
return str.replace(patrn['amp'],'&amp;').replace(patrn['left'],'&lt;').replace(patrn['right'],'&gt;').replace(patrn['quot'],'&quot;').replace(patrn['nbsp'],'&nbsp;');
};

14. 创建样式表

 function createStyleSheet(url){
try{
document.createStyleSheet(url);
}catch(e){ var _link = document.createElement('link'),
_head = document.getElementsByTagName('head')[0];
_link.rel="stylesheet";
_link.href=url;
_head.appendChild(_link);
}
}

15. 防止脚本注入

 function stripscript(s) {
return s.replace(/<script.*?>.*?<\/script>/ig, '');
}

16. 阻止mouseWhell事件连续触发的两种方式

 // 时间戳的方式
var mark = 0;
$(document).mousewheel(function(e){
var timer = new Date().getTime();
if(timer - mark > 1e3){
alert('ok');
mark = timer;
}
}); //定时器的方式
var flag = true;
$(document).mousewheel(function(e){
if(flag){
alert('ok');
flag = false;
setTimeout(function(){
flag = true;
},1000);
}
});

17. 时间格式化

 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+'秒';
}

18. 获取DOM索引的两种方式

 var oDiv = document.getElementsByTagName('div');

 // 获取DOM对象的索引方式一

 for (var i = , l = oDiv.length; i < l; i++) {

     oDiv[i].index = i; // 在DOM对象上附加属性的方式。
oDiv[i].onclick = function() {
alert(this.index);
}
} // 获取DOM对象的索引方式二 for (var i = , l = oDiv.length; i < l; i++) { (function(n) { // 每一次执行外层函数(自执行函数)都会创建一个独立的闭包,每个独立闭包的i值是不同的。
oDiv[n].onclick = function() {
alert(n);
}
}(i)); }

19. replace用法新发现

//之前我们普通的用法
'String'.replace(/[a-z]/,function(a,b,c){//...}) //现在,我们可以采用更简洁的方法
'images/logo.png'.replace(/(.*)(\.\w+)/,'$1@2x$2')

精彩 JavaScript 代码片段的更多相关文章

  1. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!

    原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...

  2. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

    原文:Chalarangelo  译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...

  3. 精心收集的48个JavaScript代码片段,仅需30秒就可理解

    源文链接 :https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 该项目来自于 G ...

  4. 超实用的 JavaScript 代码片段( ES6+ 编写)

    Array 数组 Array concatenation (数组拼接) 使用 Array.concat() ,通过在 args 中附加任何数组 和/或 值来拼接一个数组. const ArrayCon ...

  5. 一些非常有用的html,css,javascript代码片段(持久更新)

    1.判断设备是否联网 if (navigator.onLine) { //some code }else{ //others code } 2.获取url的指定参数 function getStrin ...

  6. JavaScript 代码片段

    1.无题 if (i && i.charAt(i.length - 1) == "/") { i = i.substr(0, i.length - 1) } 2.无 ...

  7. 常用javascript代码片段集锦

    常用方法的封装 根据类名获取DOM元素 var $$ = function (className, element) { if (document.getElementsByClassName) { ...

  8. javascript代码片段

    DOMReady函数,只要DOM结构加载完成即可,不必等待所有资源加载完成,节约时间,"DOMContentLoaded"在H5中被标准化 var DOMReady=functio ...

  9. 实用Javascript代码片段

    清除select下拉选项,添加并选择特点选项 $('#mySelect') .find('option') .remove() .end() .append('<option value=&qu ...

随机推荐

  1. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  2. 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息?

    HostingEnvironment是承载应用当前执行环境的描述,它是对所有实现了IHostingEnvironment接口的所有类型以及对应对象的统称.如下面的代码片段所示,一个HostingEnv ...

  3. mybatis_开发篇

    一.使用mybatis的动态代理方式开发 需求:这里以crm系统中分页条件查询所有的客户信息的功能为例? 1.创建工程 2.引入所需的jar包 3.引入日志文件.数据库连接参数的配置文件等 4.创建m ...

  4. html5 与视频

    1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg  (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...

  5. Java进击C#——前言

    本章简言 记得三年前笔者来到现在的公司的时候,公司人口不出十个人.那个时候笔者刚从日本回来,想在福州.厦门.青岛找一个合适自己发展的机会.最后我的一个福州的朋友打电话希望我能过去帮他,跟他一起创业.这 ...

  6. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  7. 一个无限加载瀑布流jquery实现

    实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  8. 用apt-file解决找不到头文件的问题

    在编译C语言的开源项目的时候,经常会出现头文件找不到的问题. 解决这类问题有一个特别好用的工具apt-file 1.在ubuntu下安装 sudo apt install apt-file 2.更新索 ...

  9. Immutable(不可变)集合

    不可变集合,顾名思义就是说集合是不可被修改的.集合的数据项是在创建的时候提供,并且在整个生命周期中都不可改变. 为什么要用immutable对象?immutable对象有以下的优点: 对不可靠的客户代 ...

  10. 快速构建App界面的框架(●'◡'●) -----SalutJs

    前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...