那些精彩的JavaScript代码片段


Posted in Javascript onJanuary 12, 2017

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
一些不错的js函数ajax
Aug 20 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
js判断是否是手机页面
Mar 17 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
vue.js中$set与数组更新方法
Mar 08 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
js中常用的Math方法总结
Jan 12 #Javascript
Vue数据驱动模拟实现4
Jan 12 #Javascript
移动端点击态处理的三种实现方式
Jan 12 #Javascript
You might like
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python类装饰器用法实例
2015/06/04 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
《小小雨点》教学反思
2014/02/18 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
公务员个人年终总结
2015/02/12 职场文书
叶问观后感
2015/06/15 职场文书