JavaScript一句话技巧集

判断变量是否为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'拼出这么多位,然后再加到这个数值的前面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容