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 入门级学习笔记及源码
Jan 22 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
用PHP实现的随机广告显示代码
2007/06/14 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Numpy之random函数使用学习
2019/01/29 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
学子宴答谢词
2014/01/25 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
周一问候语大全
2015/11/10 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
Python Django模型详解
2021/10/05 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android