判断变量是否为undefined
typeof variable === "undefined"
判断变量是否为null
variable === null
最快速给数值加入千位分隔符
(123456.789).toLocaleString()
// 输出 "123,456.789",常用。
(1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec');
// 输出"一,二三四,五六六"
(1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping: true});
// 给.toLocaleString()加第二个参数,依然输出"一,二三四,五六六"
(1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping: false});
// 输出"一二三四五六六",这个比较有用,也就是最简单的将阿拉伯数字变成汉字的办法。
字符串变数字
仅适用于字符串只包含数字的情况
var a = '33433';
var b = + a;
b; // 33433
数字变字符串
var a = 33433;
var b = a + '';
b; // '33433'
任何变量和字面量变布尔值
!!'d32a'; // true
var a = 0;
!!a; // false
利用a标签解析URL字符串
随便给你一个复杂的URL字符串,你怎么解析它的每一部分?用复杂的正则匹配?No。在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。
var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host); // www.cnblogs.com
扩展一下就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客:
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}
Array.prototype.slice方法把类数组对象转换为真·数组
数组的 slice 方法通常用来从一个数组中抽取片断。但这个方法还可以用来将“类数组”元素(比如 arguments 参数列表、节点列表和属性列表)转换成真正的数组:
var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
// 得到一个由 div 元素组成的“真正的”数组
var argsArr = Array.prototype.slice.call(arguments);
// 把 arguments 转换成一个“真正的”数组
你还可以使用一次简单的 slice 调用来克隆一个数组:
var clone = myArray.slice(); // 数组的浅克隆
向数组最前、最后追加元素,你以为用哪个方法?
案例1:向最后追加数组,通常我们知道用push
var arr = [1,2,3,4,5];
arr.push(6);
其实有比push更快的方法:
var arr = [1,2,3,4,5];
arr[arr.length] = 6;
也就是说,就算计算一次arr的长度,这种方法依然比push快。实际工作中应该采用arr[arr.length] = 6;
,除非你的同事或者上司认为你很蠢,而你又懒得争辩。
案例2:向数组最前追加元素,通常我们用unshift()
var arr = [1,2,3,4,5];
arr.unshift(0);
但更快的方法是
var arr = [1,2,3,4,5];
[0].concat(arr);
unshift()方法是跟shift()方法对立的,表示在最前追加一个元素。实际工作中,看你的具体情况,如果你的原始数组不用保留,就用unshift()方法,虽然它慢但是也是常规的方法。如果你的原始数组必须保留,那么就用[0].concat(arr)
方法。
用splice() 方法向/从数组中添加/替换/删除项目
其实splice()方法并不是什么“奇技淫巧”,但是很多人不一定能全面了解它的所有用法。
该方法直接对原始数组操作,会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
返回值
类型 描述
Array 包含被删除项目的新数组,如果有的话。
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
案例1:在中央添加一个元素。由于不删除元素,所以howmany值为0。
var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');
items;
案例2:替换倒数第二个和倒数第一个元素。所以howmany值为2。
var items = ['one', 'two', 'three', 'four'];
items.splice(-2, 2, 'hello','world');
items;
案例3:删除倒数第三个元素。howmany值为1。item1不填。
var items = ['one', 'two', 'three', 'four'];
items.splice(-3, 1);
items;
Array.prototype.sort 方法
你不仅可以对简单类型的数组项进行排序,可以通过属性来排序对象数组。这对处理服务器传来的对象数组非常有用。
[
{ name: "Robin Van PurseStrings", age: 30 },
{ name: "Theo Walcott", age: 24 },
{ name: "Bacary Sagna", age: 28 }
].sort(function(obj1, obj2) {
// 增序排列:前者的 age 小于后者
return obj1.age - obj2.age;
});
用 length 属性来截断数组或清空数组
截断数组比slice要快,清空数组更是最最佳的方法。
var myArray = yourArray = [1, 2, 3];
myArray.length = 2;
yourArray; // [1, 2]
myArray; // [1, 2]
使用Array.prototype.push.apply()来合并对象+数组
合并多个数组的常用方法是.concat(),但是,Array.prototype.push.apply()有一点特性是.concat()做不到的,就是把数组中的元素合并到对象中。如果不需要这个length属性,可以delete它。
var mergeTo = {a:4,b:5};
var mergeFrom = [7,8,9];
Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo;
// 得到:Object {0: 7, 1: 8, 2: 9, a: 4, b: 5, c: 6, length: 3}
也就是说,将数组合并到对象中,数组会先被视为对象,然后执行合并。而且,对象中会多出一个length属性,它的值就是原对象的属性个数。
但是,不要以为Array.prototype.push.apply()能合并两个对象。
高效探测功能特性和对象属性的办法
if(navigator.geolocation) {
// ...
}
不要像上面这么写。原因1是效率低,2是可能导致内存泄露,3是如果返回假值,即使属性是存在的,依然判断不出这个属性。所以应该这么写:
if("geolocation" in navigator) {
// 在这里干点事情
}
字符串的.replace()方法的第二个参数可以为函数
从手册我们可以看到,第二个参数“规定了替换文本或生成替换文本的函数”。简单举个例子,将某字符串里的所有@符号,替换为从1开始的自然数,怎么做:
var str = 'gsfd@fdgd@rf@z@fgdfg@fdgdfsg';
var i = 0;
var a = str.replace(/@/g, function() {
return ++i;
});
a;
// 得到:gsfd1fdgd2rf3z4fgdfg5fdgdfsg
如果被替换的不是@,而是^标记呢?这样就可以给字符串中的每个自然段标记1开始的自然数了。
Math.max.apply获取数组元素中的最大值
var arr = [1, 5, 4, 12355, 43, 123, 123, 3, 4454, 43];
var max = Math.max.apply(null, arr);
console.log(max);
max改成min可获得最小值
var arr = [1, 5, 4, 12355, 43, 123, 123, 3, 4454, 43];
var min = Math.min.apply(null, arr);
console.log(min);
利用位运算实现数字取整
var num = 5.63;
console.log(~~num); // 5
整数补前置0,变成类似'00004243'的字符串
根据实际需要修改0的个数和“10”这个数字即可。
function addPreZero(numeric, requiredLength) {
return ('0000000000' + numeric).slice(10 + (numeric + '').length - requiredLength)
}
addPreZero(4545, 7);
// "0004545"
虽然看起来比较山寨,但是比起来按部就班的计算,要省很多代码。按部就班的计算,需要先计算数值的位数,然后用要求位数减去数值位数,然后用'0'拼出这么多位,然后再加到这个数值的前面。