welefen » js

按字节截取字符串

welefen — Tue, 09 Mar 2010 04:02:58 +0000

在JS中，由于中文和英文是同等对待的，但有时候我们希望是一个中文按两个字节算，这就出现了按字节截取字符串的功能。下面列举了 2种实现方式。

循环检测

这种实现方式来自于Tangram，具体实现如下：

baidu.string.getByteLength = function (source) {
return String(source).replace(/[^\x00-\xff]/g, "ci").length;
};
/*
* Tangram
* Copyright 2009 Baidu Inc. All rights reserved.
*
* path: baidu/string/subByte.js
* author: dron, erik
* version: 1.1.0
* date: 2009/11/30
*/
/**
* 对目标字符串按gbk编码截取字节长度
*
* @param {string} source 目标字符串
* @param {number} length 需要截取的字节长度
* @return {string} 字符串截取结果
*/
baidu.string.subByte = function (source, length) {
source = String(source);
var getLen = baidu.string.getByteLength, i, len, current, next, currentLen, nextLen;
if (length < 0 || getLen(source) <= length) {
return source;
}
len = source.length;
for (i = Math.floor(length / 2) - 1; i < len; i++) {
current = next || source.substr(0, i);
currentLen = nextLen || getLen(current);
if (currentLen == length) {
return current;
}
else {
next = source.substr(0, i + 1);
nextLen = getLen(next);
if (nextLen > length) {
return current;
}
}
}
return source;
};

baidu.string是字符串常见操作的对象。

正则替换

这种方式的实现原理是先将中文替换成中文加个空格，这样变相的将一个中文变成了2个字节，然后在这个基础上截取，截取完成后在将中文加空格变成中文。

baidu.string.subByte1 = function(source, length){
return (source+'').substr(0,length).replace(/([^\x00-\xff])/g,'$1 ').substr(0,length).replace(/([^\x00-\xff]) /g,'$1');
}

这种实现方式不管是从代码量上还是从效率上都要比第一种高很多，这里有个测试案例。

js动态创建类和实例化

welefen — Wed, 24 Feb 2010 08:39:34 +0000

在js中，创建一个类和实例化该类一般方式是：

var cls = function(){}
cls.prototype = {
attr:'',
method:function(){}
}
var clsInstance = new cls;

这种方式简单明了，但如果类很多的话就比较痛苦了，并且代码看起来不够优化。

动态创建类

动态创建类实际上类似于一种代理的模式，代码如下：

var Fath = function(methods){
var cls = function(){
return new fn(arguments);
},
fn = function(args){
return this.init && this.init.apply && this.init.apply(this,args);
};
fn.prototype = cls.prototype = methods || {};
try{
return cls;
}finally{
cls = null;
}
}

创建一个类：
var TestClass = Fath(methods) //这里的methods是方法或者属性集合，是一个静态对象
实例化该类：
var testInstance = TestClass(params) //这里的params是传进去的形参
通过这种方式后，一个好处就是实例化类的时候不用再使用new了，当然使用new也是可以的，作用的等价的。避免了到处是new和prototype的好处。
性能上在1K数量级上没有很大的区别。

javascript数组唯一化实现方式

welefen — Mon, 07 Dec 2009 05:10:18 +0000

到目前为止，javascript中array还没有内置的unique方法，本来这篇文章很早就写了，但由于之前的虚拟主机忘记续费导致数据丢了，前几天JerryQu问了我这个问题，觉得可能还有其他人要，这里在写出来，备大家参考。

实现方式

这里给出2中实现方式。一种是大家应该都知道的indexOf检测的方式，另一种是结合lastIndexOf和splice实现方式。

下载: array_unique.js

//首先给Array对象原型上添加indexOf和lastIndexOf方法.(如果没有的话)
if(!Array.prototype.indexOf){
   Array.prototype.indexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = 0;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = 0;
   }
   for(var current;index<length;index++){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
if(!Array.prototype.lastIndexOf){
   Array.prototype.lastIndexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = length - 1;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = -1;
   else if(index >= length) index = length - 1;
   }
   for(var current;index>=0;index--){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
//很常见的实现方式
var arrayUnique1 = function(arr){
   for(var i=0,len=arr.length,result=[],item;i<len;i++){
   item = arr[i];
   if(result.indexOf(item) < 0) {
   result[result.length] = item;
   }
   }
   return result;
}
//通过lastIndexOf和splice方法实现方式
var arrayUnique2 = function(arr){
   var length = arr.length;
   while(--length){
   //如果在前面已经出现，则将该位置的元素删除
   if(arr.lastIndexOf(arr[length],length-1) > -1) {
   arr.splice(length,1);
   }
   }
   return arr;
}

测试结果

测试数据：var arr = [1,2,3,1,2,3,2,1,3,4,2,232];
IE7循环10,000次：
arrayUnique1为460ms，arrayUnique2为190ms。
FF3.5循环100,000次：
arrayUnique1为170ms，arrayUnique2为63ms。

从测试结果上可以看出，通过lastIndexOf和splice的方式的速度是普通方式的2-3倍。

其他实现方式

除了上面描述的2中实现方式外，其实还是有其他实现方式的。jQuery中就一种实现方式。我们可以看下具体的代码：

unique: function( array ) {
   var ret = [], done = {};
   try {
   for ( var i = 0, length = array.length; i < length; i++ ) {
   var id = jQuery.data( array[ i ] );
   if ( !done[ id ] ) {
   done[ id ] = true;
   ret.push( array[ i ] );
   }
   }
   } catch( e ) {
   ret = array;
   }
   return ret;
}

这种是通过创建一个临时的对象，然后获取元素的ID保存在对象的key中。但这种实现方式只能针对对象，对于普通的直接量（如：数字，字符串等）是无用的。并且经过测试，这种方式在执行速度上和lastIndexOf结合splice还是有点差距的。