标签归档:js

Javascript 数组常用函数 (去重 是否有重复值 交集 并集)

自己写了几个函数,可能不是很高效,但至少是可用的…

Array.prototype.unique = function(){ 
	var uniq = [],hash = {};  
    for(var i = 0; i < this.length; i++){  
        if(!hash[this[i]]){  
        	uniq.push(this[i]);
        	hash[this[i]] = true; 
        }  
    }  
    return uniq; 
};

Array.prototype.isUnique = function(){ 
	var uniq = true, hash = {};
	
    for(var i = 0; i < this.length; i++){  
        if(!hash[this[i]]){
        	hash[this[i]] = true; 
        }else{
        	uniq = false;
        	break;
        }
    }  
    return uniq; 
};

Array.prototype.has = function(search){
	for(var i = 0; i < this.length; i++){
		if(this[i] == search){
			return true;
	  	}
	}
    return false;
};

Array.prototype.intersect = function(arr){
	if(arr.constructor == Array){
		var unique = this.unique();

		var hash = {};  
	    for(var i = 0; i < arr.length; i++){
	    	if(!hash[arr[i]]){
	        	hash[arr[i]] = true; 
	        }
	    }
	    var inter = [];
	    for(var i=0; i<unique.length; i++){
			if(hash[unique[i]]){
				inter.push(unique[i]);
			}
		}
		return inter;
	}else{
		return [];
	}
};

Array.prototype.merge = function(arr){
	if(arr.constructor == Array){
		for(var i = 0; i < arr.length; i++){
			this.push(arr[i]);
		}
		return this.unique();
	}else{
		return this;
	}
};

JavaScript循环一个对象的方法

JavaScript循环一个数组很常见:

var arr = ["aa","bb","cc"];
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

纯JavaScript代码写得还是不多,所以当遇到要需要一个对象时,还真不知道如何写。实际过程是,在PHP中返回JSON数据:

$arr = array("USD"=>120,"GBP"=>200);
echo json_encode($arr);
//输出
{"USD":120,"GBP":200}

首先,PHP的关联数组会输出一个JS对象(JS中只有整型下标数组),我要循环输出这个JS对象:

var jso = {"USD":120,"GBP":200};

for(var o in jso){
    alert(jso[o]);
}

可以看到,这个循环也可用于循环数组。在for in中,第一个变量就是对象属性名或者是数组的下标,然后通过对象名或者数组的下标获取对应的值。

稍作总结,是为备忘。

Javascript 数组操作

1、数组的创建

var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

push是比较常用的函数了。

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

注意splice函数,它是往数组中间插入和删除元素的有效方法。

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort(); //对数组元素排序,返回数组地址

8、数组元素的字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

数组对象的2个属性
1 length属性
指明数组的长度,可变,如果改小这个值,对应数据将丢失。如果改大,访问没有初始化的数据将得到undefined。length属性可能被隐式修改,比如数组长度是10,但是进行了arr[19]=60这个操作,这时length属性值为20,这个特征很奇特(比如Java中length属性是只读的)。

利用这个特征,如果要清空一个数组,可以把length赋值为0即可。另外,如果要清空一个数组,还可以进行arr = []操作,这样就空了。

2 constructor 属性
表示创建对象的函数。数组得到的就是Array。这个实际是构造函数的引用,不是字符串。

永久链接:http://blog.ifeeline.com/1030.html

Javascript压缩工具

压缩脚本的工具有很多,有JSMin,或是YUI Compressor,它们都可以用来压缩脚本文件(后者还可以处理CSS)。还可以用Google Closure Compiler。Google Closure Compiler有多种用法,例如网页版,网络API版,还有独立应用程序版。和YUI Compressor不同的是,YUI Compressor是一个压缩器(Compressor),而Google Closure Compiler更是一个编译器(Compiler),也就是说Google Closure Compiler的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进一步地改写成更省空间的做法,一个字节算一个字节,例如:

a = new Object    => a = {}
a = new Array     => a = []
if (a) b()        => a && b()
return 2 * 3;     => return 6;

Closure Compiler是一个JavaScript优化器,将Web应用编译成压缩的、高性能的JavaScript代码。编译器去除无效代码,并将剩余代码重写并压缩,使Web应用能够快速在浏览器的JavaScript引擎上执行。

Google Closure Compiler网页版本:http://closure-compiler.appspot.com/home (我这里需要翻墙)
Google Closure Compiler

jquery-1.10.1.js为压缩版本是268K,使用”Whitespace only”得到的结果是139K,使用”Simple”得到的是91.92KB,而使用”Advanced”得到的是83.1K,而jQuery官方提供的jquery-1.10.1.min.js版本是91K。使用Simple方式得到的代码容量和jQuery官网提供的压缩版本非常接近。

“Generally the best way to do it is to use the Google Closure Compiler (used by jQuery) or YUI compressor. jQuery provides a pre-minified version of jQuery for your convenience.

Packing JavaScript using Dean Edwards’ Packer (specifically using the base64 encode) is not recommended, as the client-side decoding has significant overhead that outweighs the file-size benefits.

压缩最好的工具是Google Closure Compiler (jQuery使用) 或者 YUI compressor,Dean Edwards’ Packer不推荐使用。

Dean Edwards’ Packer的在线工具:http://dean.edwards.name/packer/(JS实现):
packer

不过Dean Edwards’ Packer还提供了PHP等的实现版本,可以访问:Dean Edwards’ Packer – PHP版本
php-packer

Packer压缩虽然很小,但是传递到客户端后需要消耗客户端的计算资源来反压缩,相对消耗的资源来说,得到的容量下降比较不划算,如果结合使用gzip压缩,它的优势就完全没有了。不过为了制造一些让人完全看不懂的代码,packer在这方面用得就比较多了。经过packer压缩的代码传递到客户端后,需要自解压成原始代码,这个就是要把压缩的代码放入eval函数中的原因,而想用它来加密JS,基本是徒劳的,JS是解释执行的,再如何加密都必须是JS能解释的代码,你可以把代码进行变量替换等干扰操作,但这个无法阻止别人去分析窥探你代码的逻辑。

一般,经过packer压缩的代码,只要把eval函数里面的代码传递给document.write()函数就能得到未压缩前的代码,实际上eval中的代码是一个自执行函数:
JS自执行函数

这个自执行函数运行后就得到原始代码,这些原始代码放入eval中当做JS执行。当把这个自执行的函数放入document.write()中时,自执行函数依然会自动执行,执行后得到原始代码的字符串,自然把这个结果输出就是未压缩之前的代码了。

既然原理已经很清楚了,那么我们就把这些代码还原,要还原这些代码,异常简单:

jQuery(document).ready(function(){
	$("#unpack").click(function(){
		var text = $("#src").val();
		var res = /^eval\((.*)\)/.exec(text);
		$("#unpacked").val("");
		
		if(res == null){
			alert("不是通过Pack压缩的代码!");
		}else{
			eval("var vv ="+res[1]);
			$("#unpacked").val(vv);
		}
	});
	
	$("#clearpack").click(function(){
		$("#unpacked").val("");
	});
});

Javascript unPack 工具

把自执行函数提取出来,这个时候是字符串,然后拼接字符串(编写js代码,把自执行函数赋值给它),然后用eval函数执行这段代码,这样自执行的函数结果就取出来了。

Unpack工具:Javascript UnPack工具

原创文章,转载务必保留出处。
永久链接: http://blog.ifeeline.com/897.html

Javascript 图片效果放大镜 – magiczoomplus

magiczoomplus是一个收费的Javascript插件,功能非常强大,Javascript经过pack压缩后还有60多k。
magiczoomplus

效果:magiczoomplus

效果定制可以到:http://www.magictoolbox.com/magiczoomplus/wizard/配置。实际上它把参数写入到应用了MagicZoomPlus CSS类容器的ref属性中,比如:

##zoom-position:right; show-loading:false; hint:true; buttons:show; zoom-distance:10; zoom-width:400px; zoom-height:266px;
zoom-position 表示放大镜位置
show-loading 表示是否显示图片正在加载
hint 是否显示提示放大图片图标
zonm-distance 表示放大镜和图片的距离
zoon-width 表示放大镜的宽度
zoom-height 表示放大镜的高度

注意这是一段需要授权的JS代码。当然它的功能做得也很强大,使用上也是傻瓜式的。只要在容器上添加一个叫MagicZoomPlus的CSS类即可。如果要定制效果,需要把参数写入容器的rel属性中。每个和放大镜相关联的容器,只要在容器的rel属性中用zoom-id指出放大镜的容器ID即可,容器的href属性携带的是最大尺寸的图片地址,这个是实际放大时使用的图片,rev属性携带的是中等尺寸的图片,这个也是放大镜容器使用的地址,参考上面的例子。

永久链接:http://blog.ifeeline.com/889.html