21个值得收藏的Javascript技巧


Posted in Javascript onFebruary 04, 2014

1  Javascript数组转换为CSV格式

首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧,代码如下:

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.valueOf();

输出:apple,peaches,oranges,mangoes

其中,valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是,如果想不使用逗号分割,比如用|号分割,则请使用join方法,如下:

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.join("|");

输出: apple|peaches|oranges|mangoes

2 将CSV格式重新转换回Javscript数组

那么如何将一个CSV格式的字符串转变回Javascript数组呢?可以使用split()方法,就可以使用任何指定的字符去分隔,代码如下:

var str = "apple, peaches, oranges, mangoes";
var fruitsArray = str.split(",");

输出 fruitsArray[0]: apple

3 根据索引移除数组中的某个元素

假如需要从Javascript数组中移除某个元素,可以使用splice方法,该方法将根据传入参数n,移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。

function removeByIndex(arr, index) {
    arr.splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: "+test);
removeByIndex(test, 2);
alert("Array after removing elements: "+test);

则最后输出的为Apple,Ball,Dog

  4 根据元素的值移除数组元素中的值

下面这个技巧是很实用的,是根据给定的值去删除数组中的元素,代码如下:

function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//somearray 将会有的元素是 "mon", "wed", "thur"

当然,更好的方式是使用prototype的方法去实现,如下代码:

Array.prototype.removeByValue = function(val) {
    for(var i=0; i<this.length; i++) {
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}
//..
var somearray = ["mon", "tue", "wed", "thur"]
somearray.removeByValue("tue");

5 通过字符串指定的方式动态调用某个方法

有的时候,需要在运行时,动态调用某个已经存在的方法,并为其传入参数。这个如何实现呢?下面的代码可以:

var strFun = "someFunction"; //someFunction 为已经定义的方法名
var strParam = "this is the parameter"; //要传入方法的参数
var fn = window[strFun];//调用方法传入参数
fn(strParam);

6 产生1到N的随机数

var random = Math.floor(Math.random() * N + 1); 
//产生1到10之间的随机数
var random = Math.floor(Math.random() * 10 + 1);  
//产生1到100之间的随机数
var random = Math.floor(Math.random() * 100 + 1);

7 捕捉浏览器关闭的事件

我们经常希望在用户关闭浏览器的时候,提示用户要保存尚未保存的东西,则下面的这个Javascript技巧是十分有用的,代码如下:

<script language="javascript">
function fnUnloadHandler() {       alert("Unload event.. Do something to invalidate users session.."); 
}
</script>
<body onbeforeunload="fnUnloadHandler()">
………
</body>

就是编写onbeforeunload()事件的代码即可

8  检查是否按了回退键

同样,可以检查用户是否按了回退键,代码如下:

window.onbeforeunload = function() {
    return "You work will be lost.";
};

9  检查表单数据是否改变

有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧,其中如果修改了表单的内容则返回true,没修改表单的内容则返回false。代码如下:

function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" ||
             type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected !=
            element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}window.onbeforeunload = function(e) {
  e = e || window.event;  
  if (formIsDirty(document.forms["someForm"])) {
    // IE 和 Firefox
    if (e) {
      e.returnValue = "You have unsaved changes.";
    }
    // Safari 浏览器
    return "You have unsaved changes.";
  }
};

  10  完全禁止使用后退键

下面的技巧放在页面中,则可以防止用户点后退键,这在一些情况下是需要的。代码如下:

<SCRIPT type="text/javascript">
    window.history.forward();
    function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="">

11 删除用户多选框中选择的项目

下面提供的技巧,是当用户在下拉框多选项目的时候,当点删除的时候,可以一次删除它们,代码如下:

function selectBoxRemove(sourceID) {   
    //获得listbox的id
    var src = document.getElementById(sourceID);    //循环listbox 
    for(var count= src.options.length-1; count >= 0; count--) {
         //如果找到要删除的选项,则删除
        if(src.options[count].selected == true) {
                try {
                         src.remove(count, null);
                 } catch(error) {
                         src.remove(count);
                }
        }
    }
}

12  Listbox中的全选和非全选

如果对于指定的listbox,下面的方法可以根据用户的需要,传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目,代码如下:

function listboxSelectDeselect(listID, isSelect) {
    var listbox = document.getElementById(listID);
    for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
}

  13 在Listbox中项目的上下移动

下面的代码,给出了在一个listbox中如何上下移动项目

function listbox_move(listID, direction) {    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }
    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;
    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text
    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;
    listbox.selectedIndex = selIndex + increment;
}
//..
//..
listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

14 在两个不同的Listbox中移动项目

如果在两个不同的Listbox中,经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去,下面是相关代码:

function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);    for(var count=0; count < src.options.length; count++) {
        if(src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
//..
listbox_moveacross('countryList', 'selectedCountryList');

  15 快速初始化Javscript数组

下面的方法,给出了一种快速初始化Javscript数组的方法,代码如下:

var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]

使用的是数组的push方法

16 截取指定位数的小数

如果要截取小数后的指定位数,可以使用toFixed方法,比如:

var num = 2.443242342; 
alert(num.toFixed(2));

而使用toPrecision(x)则提供指定位数的精度,这里的x是全部的位数,如:

num = 500.2349; 
result = num.toPrecision(4); //输出500.2

17 检查字符串中是否包含其他字符串

下面的代码中,可以实现检查某个字符串中是否包含其他字符串。代码如下:

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i < j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }
}if (!String.prototype.contains) {
    String.prototype.contains = function (arg) {
        return !!~this.indexOf(arg);
    };
}

在上面的代码中重写了indexOf方法并定义了contains方法,使用的方法如下:

var hay = "a quick brown fox jumps over lazy dog"; 
var needle = "jumps"; 
alert(hay.contains(needle));

18  去掉Javscript数组中的重复元素

下面的代码可以去掉Javascript数组中的重复元素,如下:

function removeDuplicates(arr) {
    var temp = {};
    for (var i = 0; i < arr.length; i++)
        temp[arr[i]] = true;    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}
//用法
var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'];
var uniquefruits = removeDuplicates(fruits);
//输出 uniquefruits ['apple', 'orange', 'peach', 'strawberry'];

  19  去掉String中的多余空格

下面的代码会为String增加一个trim()方法,代码如下:

if (!String.prototype.trim) {
   String.prototype.trim=function() {
    return this.replace(/^\s+|\s+$/g, '');
   };
}//用法
var str = "  some string    ";
str.trim();
//输出 str = "some string"

20 Javascript中的重定向

在Javascript中,可以实现重定向,方法如下:

window.location.href = "https://3water.com";

21 对URL进行编码

有的时候,需要对URL中的传递的进行编码,方法如下:

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

原文:http://viralpatel.net/blogs/javascript-tips-tricks/

Javascript 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 #Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 #Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 #Javascript
JavaScript按位运算符的应用简析
Feb 04 #Javascript
Javascript 按位取反运算符 (~)
Feb 04 #Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 #Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 #Javascript
You might like
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python使用RNN实现文本分类
2018/05/24 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python 构造三维全零数组的方法
2018/11/12 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
浅析Python迭代器的高级用法
2020/07/16 Python
介绍一下如何优化MySql
2016/12/20 面试题
大学生年度自我鉴定
2013/10/31 职场文书
英文自荐信格式
2013/11/28 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
前台文员岗位职责
2015/02/04 职场文书
房租涨价通知
2015/04/23 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
辛德勒的名单观后感
2015/06/03 职场文书