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 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
PHP5多态性与动态绑定介绍
2015/04/03 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Django model update的多种用法介绍
2020/03/28 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
行政总经理岗位职责
2013/12/05 职场文书
消防志愿者活动方案
2014/08/23 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
交通事故协议书范本
2016/03/19 职场文书
Python中的 Set 与 dict
2022/03/13 Python