由于最近辞职在家，自己的时间相对多一点。所以就根据prototytpeJS的API，结合自己正在看的司徒大神的《javascript框架设计》，整理了下Js中常用一些字符串，数组，函数扩展，一来可以练练手，二来也锻炼下自己的代码能力。由于代码里面的注释自认为已经非常详细，所以就直接贴代码了。
1. 字符串扩展：
;(function() {
var method, stringExtends = {
/**
* 删除字符串开始和结尾的空白
* @returns {string}
*/
strip: function() {
return this.replace(/^\s+|\s+$/gm, ‘‘);
},
/**
* 删除字符串左边的空白
* @returns {string}
*/
stripLeft: function() {
return this.replace(/^\s+/, ‘‘);
},
/**
* 删除字符右边的空白
* @returns {string}
*/
stripRight: function() {
return this.replace(/\s+$/, ‘‘)
},
/**
* 判断一个字符串是否是空串;空串或只包含空白字符时返回true
* @returns {boolean}
*/
blank: function() {
return this.strip().length === 0;
},
/**
* 将CSS中属性名转换成JS中的样式名，background-color -> backgroundColor
* @returns {string}
*/
camelize: function() {
return this.replace(/(\-\w)/g, function(match) {
return match.slice(1).toUpperCase();
})
},
/**
* 将一个字符串的首字母大写，其它字符小写
* @returns {string}
*/
capitalize: function() {
return this.strip().replace(/^(\w{1})(.*)/g, function(match, g1, g2) {
return g1.toUpperCase() + g2.toLowerCase();
});
},
/**
* 将字符串中的下划线转换成中划线
* @returns {string}
*/
dasherize: function() {
return this.replace(/\_/g, ‘-‘);
},
/**
* 检测字符串是否是空串
* @returns {boolean}
*/
empty: function() {
return this.length === 0;
/* ‘‘.empty(); //-> true
‘ ‘.empty();//-> false*/
},
/**
* 检测字符串是否是以特定的字符串结尾
* @param {String} target
* @returns {boolean}
*/
endsWith: function(target) {
return (new RegExp(target+‘$‘)).test(this);
//return this.slice(-target.length) === target;
},
/**
* 检测字符串是否是以特定的字符串开始
* @param {String} target
* @returns {boolean}
*/
startsWith: function(target) {
return (new RegExp(‘^‘+target)).test(this);
},
/**
* 检测字符串是否包含特定的字符串
* @param {String} target
* @returns {boolean}
*/
contains: function(target) {
return this.indexOf(target) !== -1;
},
/**
*
* @param {number} n - 要重复的次数
* @returns {string}
*/
times: function(n) {
//return new Array(n+1).join(this);
/*return [].join.call({
length:n + 1
}, this);*/
//使用二分法
var ret, flag = false, str = this.toString();
if(n === 0)
return ‘‘;
if(n === 1)
return str;
if(n % 2) {
//奇数
n = n - 1;
flag = true;
}
ret = str.times(n / 2);
return flag ? (ret + ret + str) : (ret + ret);
},
/**
* 对字符串中的特殊字符进行转义，避免XSS
*/
escapeHTML:function() {
//转义后的字符是可以直接设置成innerHTML的值。
//replace(/&/g, ‘&‘)这条replace()调用一定要写在所有的特殊字符转义的前面，不然转换后有&符号的会再被转一次
return this.replace(/&/g, ‘&‘)
.replace(/\</g, ‘<‘)
.replace(/\>/g, ‘>‘)
.replace(/\‘/g, ‘'‘)
.replace(/\"/g, ‘"‘);
/*var strArr = this.split(‘‘);
for(var pos = 0, l = strArr.length, tmp; pos < l; pos++) {
tmp = strArr[pos];
switch(tmp) {
case ‘<‘:
replaceArr(strArr, pos, ‘<‘);
break;
case ‘>‘:
replaceArr(strArr, pos, ‘>‘);
break;
case ‘\‘‘:
replaceArr(strArr, pos, ‘'‘);
break;
case ‘\"‘:
replaceArr(strArr, pos, ‘"‘);
break;
case ‘&‘:
replaceArr(strArr, pos, ‘&‘);
break;
default:;
}
}
return strArr.join(‘‘);
function replaceArr(arr, pos, item) {
return arr.splice(pos, 1, item);
}*/
},
/**
* 对字符串进行反转义
*/
unescapeHTML: function() {
return this.replace(/&/, ‘&‘)
.replace(/</g, ‘<‘)
.replace(/>/g, ‘>‘)
.replace(/'/g, ‘\‘‘)
.replace(/"/g, ‘\"‘)
.replace(/&#(\d+)/g, function($0, $1) {
return String.formCharCode(parseInt($1, 10));
});
},
/**
* 取得字符串的逆序
* @returns {string}
*/
reverse: function() {
return (this.toString()).split(‘‘).reverse().join(‘‘);
},
/**
* 截取字符串，并可以指定填充后缀
* @param {number} [length = 30] - 截取长度，默认为30个字符
* @param {string} [suffix = ‘...‘] - 填充后缀，默认为‘...‘
* @returns {string}
*/
truncate: function(length, suffix) {
var ret = this.toString();
length = length || 30;
suffix = suffix || ‘...‘;
//如果字符串不大于length, 直接返回字符串
if(ret.length < length) {
return ret;
}
return ret.slice(0, length - suffix.length) + suffix;
},
/**
* 去掉字符串中的html标签
* @returns {string}
*/
stripTags: function() {
return this.replace(/(\<\w+\s?.*?\>)|(\<\/\w+\s?.*?\>)/g, function() {
return ‘‘;
});
},
/**
* 去掉字符串中的脚本
* @returns {string}
*/
stripScripts: function() {
return this.replace(/\<script\>.*?\<\/script\>/, function() {
return ‘‘;
})
}
};
for(method in stringExtends) {
stringExtends.hasOwnProperty(method) &&
typeof String.prototype[method] !== ‘function‘ &&
(String.prototype[method] = stringExtends[method]);
}
})();
2. 数组扩展
;(function() {
var method, arrayExtends = {
/**
* 为数组增加ES5中的迭代方法：forEach, map, filter, every, some
* W3C标准规定：每个方法接收两个参数，要在每一项上运行的回调和（可选的）运行回调时函数的上下文
* 其中回调函数的参数中会包含三个参数：数组项的值，位置，和数组本身
*/
/**
* 对数组的每一项执行回调,这个方法没返回值
*/
forEach: function(fn, ctx) {
for(var i = 0, l = this.length; i < l; i++) {
fn.call(ctx || null, this[i], i, this);
}
},
/**
* 对数组每项运行回调函数，返回由回调函数的结果组成的数组
*/
map: function(fn, ctx) {
var ret = [];
for(var i = 0, l = this.length; i < l; i++) {
ret.push(fn.call(ctx || null, this[i], i, this));
}
return ret;
},
/**
* 对数组每项运行回调函数，返回使回调函数返回值为true组成的数组
*/
filter: function(fn, ctx) {
var ret = [];
for(var i = 0, l = this.length; i < l; i++) {
fn.call(ctx || null, this[i], i, this) &&
ret.push(this[i]);
}
return ret;
},
/**
* 对数组每项运行回调函数，如果所有的回调函数都返回true, 则返回true
*/
every: function(fn, ctx) {
for(var i = 0, l = this.length; i < l; i++) {
!!fn.call(ctx || null, this[i], i, this) === false;
return false;
}
return true;
},
/**
* 对数组每项运行回调函数，如果有一项回调函数返回true, 则返回true
*/
some: function(fn, ctx) {
for(var i = 0, l = this.length; i < l; i++) {
!!fn.call(ctx || null, this[i], i, this) === true;
return true;
}
return false;
},
/**
* 从左向右（顺利）对数组的每一项(从第二项开始，即下标为1)运行回调函数。
* 回调函数包含四个参数prev（上一次回调的返回值）, cur（当前数组项）, index（当前数组项的索引）, self（数组本身）
* @param {Function} callback
* @returns {*}
*/
reduce: function(callback) {
var i = 1, //从数组第二个元素开始
l = this.length,
callbackRet = this[0];
for(; i < l; ++i) {
callbackRet = callback.call(null, callbackRet, this[i], i, this);
}
return callbackRet;
},
/**
* 从右向左（逆序）对数组的每一项(从倒数第二项开始，即下标为arr.length - 2)运行回调函数。
* 回调函数包含四个参数prev（上一次回调的返回值）, cur（当前数组项）, index（当前数组项的索引）, self（数组本身）
* @param {Function} callback
* @returns {*}
*/
reduceRight: function(callback) {
var l = this.length,
i = l - 2, //从数组倒数第二个元素开始
callbackRet = this[l - 1]; //回调初始值为数组最后一个元素的值
for(; i >= 0; --i) {
callbackRet = callback.call(null, callbackRet, this[i], i, this);
}
return callbackRet;
},
/**
* 返回目标值在数组中第一次出现的位置，搜索从左向右进行。
* 如果目标值在数组中不存在，则返回-1。可以指定一个搜索起始位置。默认为0
* @param {Number} target
* @param {Number} [start = 0] - start默认为0
* @returns {Number}
*/
indexOf: function(target, start) {
var l = this.length,
start = ~~start;//可以指定一个搜索起始位置。默认为0。start不传，默认为undefined,~~undefined -> 0
if(start < 0)
start = 0;//如果指定的搜索位置小于0，则设置其开始搜索位置为0
for(; start < l; ++start) {
if(this[start] === target)
return start;
}
return -1;
},
/**
* 返回目标值在数组中的位置。搜索从右向左进行
* 如果目标值在数组中不存在，则返回-1。可以指定一个搜索起始位置。默认为数组长度
* @param {Number} target
* @param {Number} [start = arr.length] - 开始搜索位置默认为数组长度
* @returns {Number}
*/
lastIndexOf: function(target, start) {
var l = this.length;
if(start === void 0)
start = this.length;
else if(start < 0)
start = 0;
for(;start >= 0; --start) {
if(this[start] === target)
return start;
}
return -1;
},
/**
* 数组去重
* @returns {Array}
*/
unique: function() {
var i = 0, j,
l = this.length;
for(; i < l; ++i) {
for(j = i+1; j < l; j++) {
if(this[i] === this[j]) {
this.splice(j, 1);//把位置j的数组项删除
}
}
}
return this;
},
/**
* 对于单一类型的数组，可以使用此方法去重。
* 但这类数组：[ ‘ff‘, 1, ‘1‘ ]会去重失败
* @returns {Array}
*/
enhanceUnique: function() {
var ret = [], tempMap = {}, temp, i = 0, l = this.length, undef = void 0;
for(; i < l; ++i) {
temp = this[i];
if(tempMap[temp] === undef) {
ret.push(temp);
tempMap[temp] = true;
}
}
return ret;
},
/**
* 去掉数组中的目标元素
* @param value
* @returns {Array}
*/
without: function() {
var args = [].slice.call(arguments).unique(),
i = 0, l = this.length,
j = 0, k = args.length;
for(; i < l; ++i) {
for(; j < k; ++j) {
if(this[i] === args[j]) {
this.splice(i, 1);
}
}
j = 0;//将j归0，以便下次循环
}
return this;
},
/**
* 递归将数组扁平化
* @returns {Array}
*/
flatten: function() {
var ret = [], i = 0, l = this.length, tmp, toString = ({}).toString;
for(; i < l; ++i) {
tmp = this[i];
if(toString.call(tmp) === ‘[object Array]‘) {
ret = ret.concat(tmp.flatten());
} else {
ret.push(tmp);
}
}
return ret;
},
/**
* 随机返回数组的一项
* @returns {*}
*/
random: function(n) {
//Math.floor():向下取整。Math.floor(1.8) -> 1
//Math.ceil():向上取整。Math.ceil(1.1) -> 2
//v = Math.random() * n:会产生一个 0 < v < nv的数
//v2 = Math.floor(Math.random() * n)：v2为一个大于等于0，小于n的整数
return this[Math.floor(Math.random() * n || this.length)];
},
/**
* 删除数组指定位置的项
* @returns {Array}
*/
removeAt: function(pos) {
this.splice(pos, 1);
return this;
},
/**
* 检测数组是否包含目标值
* @returns {Boolean}
*/
contains: function(target) {
return this.some(function(e, i, self) {
return e === target;
});
},
//数组的交，并，差集
/**
* 返回数组与目标数组的交集组成的数组
* @returns {Array || null}
*/
intersect: function(target) {
var originalArr = this.unique(),
target = target.unique();
return originalArr.filter(function(e, i, self) {
for( var i = 0, l = target.length; i < l; ++i) {
if(e === target[i]) {
return true;
}
}
return false;
});
},
/**
* 返回数组与目标数组的并集组成的数组
* @returns {Array || null}
*/
union: function(target) {
return this.concat(target).unique();
},
/**
* 返回数组与目标数组的差集组成的数组
* @returns {Array || null}
*/
diff: function(target) {
var originalArr = this.unique(),
target = target.unique();
return originalArr.filter(function(e, i, self) {
for( var i = 0, l = target.length; i < l; ++i) {
if(e === target[i]) {
return false;
}
}
return true;
});
},
/**
* 将数组清空，并返回这个数组的引用
* @returns {Array}
*/
clear: function() {
this.length = 0;
return this;
},
clone: function() {
return [].concat(this);
},
/**
* 去掉数组中的undefined, null
* @returns {Array}
*/
compact: function() {
for(var i = 0, l = this.length; i < l; i++) {
if(this[i] == null)
//删除这个位置的元素
this.splice(i, 1);
}
return this;
},
/**
* 返回数组第一项
* @returns {*}
*/
first: function() {
return this[0];
},
/**
* 返回数组最后一项
* @returns {*}
*/
last: function() {
return this[this.length - 1];
},
/**
* 返回数组的大小，即数组长度
* @returns {Number}
*/
size: function() {
return this.length;
}
};
for(method in arrayExtends) {
arrayExtends.hasOwnProperty(method) &&
typeof Array.prototype[method] !== ‘function‘ &&
(Array.prototype[method] = arrayExtends[method]);
}
})();
3. 函数扩展
;(function() {
var method, functionExtends = {
/**
* 会返回一个函数：
* 1. 这个函数被设置了作用域，即this值
* 2. 如果运行bind()时有传除this外的其它参数，则此函数还会包含这些参数。
* 这些参数会与bind()返回的函数在运行时传进来的参数共同组成返回函数的参数
* @param {*} oThis - 要给函数绑定的作用域
* @returns {Function}
*/
bind: function(oThis) {
var _slice = [].slice,
args = _slice.call(arguments, 1),//运行bind()方法时要闭包保存的参数
method = this;//要实际运行的函数
return function() {
return method.apply(oThis, args.concat(_slice.call(arguments)));
}
},
/**
* 函数curry是参数的一种处理，它可以更加灵活地控制参数。
* 关键点是什么时候返回函数继续增加参数，什么时候要执行函数返回结果。
* 要解决上面的问题可以在curry时引入一个变量，手动设置最少需要的参数个数。
* @param {Number} [minArgsNumber = 0] - 默认不需要任何参数
* @returns {*}
*/
curry: function(minArgsNumber) {
var _slice = [].slice,
closureArgs = _slice.call(arguments, 1),
method = this,
totalArgs;
//minArgsNumber = arguments.length ? arguments[0] : 0;
minArgsNumber = typeof minArgsNumber === ‘number‘ ? minArgsNumber : 0;
return function inner() {
//到底是执行函数，还是继续等待传参由minArgsNumber决定
totalArgs = typeof totalArgs === ‘undefined‘ ?
closureArgs.concat(_slice.call(arguments)) :
totalArgs.concat(_slice.call(arguments));
if(totalArgs.length >= minArgsNumber) {
//执行函数
return method.apply(this, totalArgs);
} else {
//继续返回函数接收参数
return inner;
}
}
},
/**
* 以数组的形式返回函数的参数名字字符串。没有参数时返回空数组
* @returns {Array}
*/
argumentNames: function() {
var ret,
methodCode = this.toString();
methodCode.replace(/\((.*?)\)//*gm 函数里面的代码也可能会有(abc)字符串*/, function(match, g1) {
var argStr = g1.replace(/\s/g, ‘‘);
ret = argStr.length ? argStr.split(‘,‘) : [];
});
return ret;
},
/**
* setTimeout的偷懒写法
*/
delay: function(delay) {
var _slice = [].slice,
method = this,
closureArgs = _slice.call(arguments, 1);
setTimeout(function() {
method.apply(this, closureArgs.concat(_slice.call(arguments)));
}, delay);
}
};
for(method in functionExtends) {
functionExtends.hasOwnProperty(method) &&
typeof Function.prototype[method] !== ‘function‘ &&
(Function.prototype[method] = functionExtends[method]);
}
})();
写在最后：里面有许多方法和思路都来至网上或《JavaScript框架设计》，都在此表示感谢。
Js中常用的字符串，数组，函数扩展,布布扣,bubuko.com
时间： 2024-10-04 18:45:21