Bubblings Blog

常见javascript hack解释

一些javascript技巧被资深的程序员广泛使用。然而对于初学者来说,有的技巧的含义并不是那么的显而易见。这些技巧往往使用的并不是语言的直接含义,而是利用一些特性或者副作用来达到目的。下面我会对一些常用的技巧做出解释。

你应该明白,这些技巧中的很多都属于hack,不应该在日常开发中使用。这篇文章的目的是解释这些hack是如何工作的,并不是推荐去使用它们。

使用!!将值转换为布尔型

在javascript中,所有的东西都能被转换成“真”或“假”。也就是说,当你把一个对象放进if语句的条件中,执行时,要么走条件为真的分支,要么就走条件为假的分支。

0, false, "", null, undefined, NaN为假,其他对象都为真。有时候想将一个对象转换成布尔值,你可以使用!!

另外,如果不是if (x == "test")这种形式,你可以简单的写成if (x),当x为false时,程序将直接运行其它块。

getByClass函数进化史

对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持getElementsByClassName()方法,但是对于低版本浏览器来说,还是无法兼容,在脱离其他库的时候,还是得自己封装一个方法。

方法一

function getByClass1(parent, cls){
    var res = [];    //存放匹配结果的数组
    var ele = parent.getElementsByTagName('*');
    for(var i = 0; i < ele.length; i++){
        if(ele[i].className == cls){
            res.push(ele[i]);
        }
    }
    return res;
}

当然class里的值只有一个时,上面的方法没问题,但当值为多个时,就会出现问题。

<div class="test"></div>
<div class="test box"></div>
<script>
    getByClass1(document, 'test');    //只获取到第一个div
</script>

前端智勇大闯关(第三季)答案

下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下。附上题目地址:

http://ued.campus.alibaba.com/quiz3/index.php

第1题 突破,带锁的门

方法1

这题相对比较简单,查看源码即可看到提示信息:

<!--
-====================================
-   调用powder.blow()显示指纹痕迹!
-====================================
-->

只要在控制台里多次调用powder.blow()函数即可看到图片上的指纹信息。然后尝试组合这几个数便可过关。如下图所示:

javascript中字符串常用操作总结

字符串的操作在js中非常频繁,也非常重要。以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊。。。今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温习查阅

String对象属性

(1)length属性

length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不一样。

var str = 'abc';
console.log(str.length);

(2)prototype属性

prototype在面向对象编程中会经常用到,用来给对象添加属性或方法,并且添加的方法或属性在所有的实例上共享。因此也常用来扩展js内置对象,如下面的代码给字符串添加了一个去除两边空格的方法:

String.prototype.trim = function(){
    return this.replace(/^\s*|\s*$/g, '');
}