个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节


Posted in Javascript onJune 10, 2015

变量转换

var myVar  = "3.14159",
str   = ""+ myVar,// to string
int   = ~~myVar, // to integer
float  = 1*myVar, // to float
bool  = !!myVar, /* to boolean - any string with length
and any number except 0 are true */
array  = [myVar]; // to array

 

但是转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数,创建正则表达式的时候要使用/pattern/flags这样的简化形式。 

取整同时转换成数值型 

//字符型变量参与运算时,JS会自动将其转换为数值型(如果无法转化,变为NaN)
    '10.567890' | 0
    //结果: 10
    //JS里面的所有数值型都是双精度浮点数,因此,JS在进行位运算时,会首先将这些数字运算数转换为整数,然后再执行运算
    //| 是二进制或, x|0 永远等于x;^为异或,同0异1,所以 x^0 还是永远等于x;至于~是按位取反,搞了两次以后值当然是一样的
    '10.567890' ^ 0    
    //结果: 10
    - 2.23456789 | 0
    //结果: -2
    ~~-2.23456789
    //结果: -2

日期转数值

//JS本身时间的内部表示形式就是Unix时间戳,以毫秒为单位记录着当前距离1970年1月1日0点的时间单位
    var d = +new Date(); //1295698416792

 

类数组对象转数组

var arr =[].slice.call(arguments)

 

下面的实例用的更绝

function test() {
  var res = ['item1', 'item2']
  res = res.concat(Array.prototype.slice.call(arguments)) //方法1
  Array.prototype.push.apply(res, arguments)       //方法2
}

进制之间的转换

(int).toString(16); // converts int to hex, eg 12 => "C"
(int).toString(8); // converts int to octal, eg. 12 => "14"
parseInt(string,16) // converts hex to int, eg. "FF" => 255
parseInt(string,8) // converts octal to int, eg. "20" => 16

 将一个数组插入另一个数组指定的位置

var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.prototype.concat(insertIndex, 0, b));

删除数组元素

var a = [1,2,3,4,5];
a.splice(3,1);      //a = [1,2,3,5]

大家也许会想为什么要用splice而不用delete,因为用delete将会在数组里留下一个空洞,而且后面的下标也并没有递减。

判断是否为IE

var ie = /*@cc_on !@*/false;

这样一句简单的话就可以判断是否为ie,太。。。

其实还有更多妙的方法,请看下面

// 貌似是最短的,利用IE不支持标准的ECMAscript中数组末逗号忽略的机制
var ie = !-[1,];
// 利用了IE的条件注释
var ie = /*@cc_on!@*/false;
// 还是条件注释
var ie//@cc_on=1;
// IE不支持垂直制表符
var ie = '\v'=='v';
// 原理同上
var ie = !+"\v1";

学到这个瞬间觉得自己弱爆了。


尽量利用原生方法

要找一组数字中的最大数,我们可能会写一个循环,例如:

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
 if(numbers[i] > max){
  max = numbers[i];
 }
}
alert(max);

其实利用原生的方法,可以更简单实现

var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

当然最简洁的方法便是:

Math.max(12,123,3,2,433,4); // returns 433

当前也可以这样

Math.max.apply(Math, [12, 123, 3, 2, 433, 4]) //取最大值
Math.min.apply(Math, [12, 123, 3, 2, 433, 4]) //取最小值

生成随机数

Math.random().toString(16).substring(2);// toString() 函数的参数为基底,范围为2~36。
    Math.random().toString(36).substring(2);

不用第三方变量交换两个变量的值

a=[b, b=a][0];

事件委派

举个简单的例子:html代码如下

<h2>Great Web resources</h2>
<ul id="resources">
 <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
 <li><a href="http://sitepoint.com">Sitepoint</a></li>
 <li><a href="http://alistapart.com">A List Apart</a></li>
 <li><a href="http://yuiblog.com">YUI Blog</a></li>
 <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
 <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

js代码如下:

// Classic event handling example
(function(){
 var resources = document.getElementById('resources');
 var links = resources.getElementsByTagName('a');
 var all = links.length;
 for(var i=0;i<all;i++){
  // Attach a listener to each link
  links[i].addEventListener('click',handler,false);
 };
 function handler(e){
  var x = e.target; // Get the link that was clicked
  alert(x);
  e.preventDefault();
 };
})();

利用事件委派可以写出更加优雅的:

(function(){
 var resources = document.getElementById('resources');
 resources.addEventListener('click',handler,false);
 function handler(e){
  var x = e.target; // get the link tha
  if(x.nodeName.toLowerCase() === 'a'){
   alert('Event delegation:' + x);
   e.preventDefault();
  }
 };
})();

检测ie版本

var _IE = (function(){
  var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
  );
  return v > 4 ? v : false ;
}());

javaScript版本检测

你知道你的浏览器支持哪一个版本的Javascript吗?

var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver.supports = function()
{
if (arguments[0])


return (!!~this.join().indexOf(arguments[0] +",") +",");

else


return (this[this.length-1]);
}
alert("Latest Javascript version supported: "+ JS_ver.supports());
alert("Support for version 1.7 : "+ JS_ver.supports("1.7"));

判断属性是否存在

// BAD: This will cause an error in code when foo is undefined
if (foo) {
doSomething();
}
// GOOD: This doesn't cause any errors. However, even when
// foo is set to NULL or false, the condition validates as true
if (typeof foo != "undefined") {

doSomething();
}
// BETTER: This doesn't cause any errors and in addition
// values NULL or false won't validate as true
if (window.foo) {

doSomething();
}

有的情况下,我们有更深的结构和需要更合适的检查的时候

// UGLY: we have to proof existence of every
// object before we can be sure property actually exists
if (window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
doSomething();
}

 其实最好的检测一个属性是否存在的方法为:

if("opera" in window){
  console.log("OPERA");
}else{
  console.log("NOT OPERA");
}

检测对象是否为数组

var obj=[];
Object.prototype.toString.call(obj)=="[object Array]";

给函数传递对象

function doSomething() {
// Leaves the function if nothing is passed

if (!arguments[0]) {

return false;

}

var oArgs  = arguments[0]

arg0  = oArgs.arg0 || "",

arg1  = oArgs.arg1 || "",

arg2  = oArgs.arg2 || 0,

arg3  = oArgs.arg3 || [],

arg4  = oArgs.arg4 || false;
}
doSomething({

arg1  : "foo",

arg2  : 5,

arg4  : false
});

为replace方法传递一个函数

var sFlop  = "Flop: [Ah] [Ks] [7c]";
var aValues = {"A":"Ace","K":"King",7:"Seven"};
var aSuits = {"h":"Hearts","s":"Spades",
"d":"Diamonds","c":"Clubs"};
sFlop  = sFlop.replace(/\[\w+\]/gi, function(match) {
match  = match.replace(match[2], aSuits[match[2]]);

match  = match.replace(match[1], aValues[match[1]] +" of ");

return match;
});
// string sFlop now contains:
// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"

循环中使用标签

有时候循环当中嵌套循环,你可能想要退出某一层循环,之前总是用一个标志变量来判断,现在才知道有更好的方法

outerloop:
for (var iI=0;iI<5;iI++) {
if (somethingIsTrue()) {

// Breaks the outer loop iteration

break outerloop;

}

innerloop:

for (var iA=0;iA<5;iA++) {


if (somethingElseIsTrue()) {


// Breaks the inner loop iteration


break innerloop;

}

}
}

对数组进行去重

/*
*@desc:对数组进行去重操作,返回一个没有重复元素的新数组
*/
function unique(target) {
  var result = [];
  loop: for (var i = 0, n = target.length; i < n; i++) {
    for (var x = i + 1; x < n; x++) {
      if (target[x] === target[i]) {
        continue loop;
      }
    }
    result.push(target[i]);
  }
  return result;
}

或者如下:

Array.prototype.distinct = function () {
  var newArr = [],obj = {};
  for(var i=0, len = this.length; i < len; i++){
    if(!obj[typeof(this[i]) + this[i]]){
      newArr.push(this[i]);
      obj[typeof(this[i]) + this[i]] = 'new';
    }
  }
  return newArr;
}

其实最优的方法是这样的

Array.prototype.distinct = function () { 
  var sameObj = function(a, b){ 
    var tag = true; 
    if(!a || !b) return false; 
    for(var x in a){ 
      if(!b[x]) return false; 
      if(typeof(a[x]) === 'object'){ 
        tag = sameObj(a[x],b[x]); 
      } else { 
        if(a[x]!==b[x]) 
        return false; 
      } 
    } 
    return tag; 
  } 
  var newArr = [], obj = {}; 
  for(var i = 0, len = this.length; i < len; i++){ 
    if(!sameObj(obj[typeof(this[i]) + this[i]], this[i])){ 
    newArr.push(this[i]); 
    obj[typeof(this[i]) + this[i]] = this[i]; 
    } 
  } 
  return newArr; 
}

使用范例(借用评论):

var arr=[{name:"tom",age:12},{name:"lily",age:22},{name:"lilei",age:12}];
var newArr=arr.distinct(function(ele){
 return ele.age;
});

查找字符串中出现最多的字符及个数

var i, len, maxobj='', maxnum=0, obj={};
var arr = "sdjksfssscfssdd";
for(i = 0, len = arr.length; i < len; i++){
  obj[arr[i]] ? obj[arr[i]]++ : obj[arr[i]] = 1;
  if(maxnum < obj[arr[i]]){
    maxnum = obj[arr[i]];
    maxobj = arr[i];
  }
}
alert(maxobj + "在数组中出现了" + maxnum + "次");

其实还有很多,这些只是我闲来无事总结的一些罢了。

Javascript 相关文章推荐
javascript之典型高阶函数应用介绍
Jan 10 Javascript
防止文件缓存的js代码
Jan 10 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
浅析JavaScript动画
Jun 10 #Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 #Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 #Javascript
jQuery取消ajax请求的方法
Jun 09 #Javascript
JavaScript动态添加style节点的方法
Jun 09 #Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 #Javascript
Javascript实现div的toggle效果实例分析
Jun 09 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python树的同构学习笔记
2019/09/14 Python
python 基于wx实现音乐播放
2020/11/24 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
审核会计岗位职责
2013/11/08 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
思想品德自我评价
2014/02/04 职场文书
销售主管岗位职责
2014/02/08 职场文书
中国入世承诺
2014/04/01 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
模特大赛策划方案
2014/05/28 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
英文升职感谢信
2015/01/23 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
2019求职信大礼包
2019/05/15 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python