那些精彩的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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
tensorflow自定义激活函数实例
2020/02/04 Python
python实现飞船大战
2020/04/24 Python
python多线程和多进程关系详解
2020/12/14 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
村居抓节水倡议书
2014/05/19 职场文书
社会实践活动总结范文
2014/07/03 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
创业计划书之干洗店
2019/09/10 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android