那些精彩的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 相关文章推荐
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
记录一次websocket封装的过程
Nov 23 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(三)
2012/03/22 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python交互式图形编程实例(三)
2017/11/17 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python中创建二维数组
2018/10/17 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
flask框架路由常用定义方式总结
2019/07/23 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
售后专员岗位职责
2013/12/08 职场文书
股权投资意向书
2014/04/01 职场文书
超市客服工作职责
2014/06/11 职场文书
干部考察材料范文
2014/12/24 职场文书
爱护环境建议书
2015/09/14 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL