从js的repeat方法谈字符串与数组的扩展与修复

最新推荐文章于 2024-02-21 11:57:16 发布
最新推荐文章于 2024-02-21 11:57:16 发布
阅读量595 收藏
点赞数
文章标签： javascript
js将字符串重复N次的repeat方法的8个版本
/*
*@desc: 将一个字符串重复自身N次
*/
//版本1：利用空数组的join方法
function repeat(target, n) {
	return (new Array(n + 1)).join(target);
}
//版本2：之所以要创建一个带length属性的对象 是因为要调用数据的原型方法，需要指定call的第一个参数为类数组对象
//类数组对象的必要条件是其length属性的值为非负数
function repeat(target, n) {
	return Array.prototype.join.call({
		length: n + 1
	}, target);
}
//版本3：利用闭包将类数组对象与数组原型的join方法缓存起来
var repeat = (function () {
	var join = Array.prototype.join, obj = {};
	return function (target, n) {
		obj.length = n + 1;
		return join.call(obj, target);
	}
})();
//版本4：使用二分法
function repeat(target, n) {
	var s = target, total = [];
	while (n > 0) {
		if (n % 2 == 1) {
			total[total.length] = s;//如果是奇数
		}
		if (n == 1) {
			break;
		}
		s += s;
		n = n >> 1;//相当于将n除以2取其商，或者说是开2次方
	}
	return total.join('');
}
//版本5：版本4的改良版本
function repeat(target, n) {
	var s = target, total = "";
	while (n > 0) {
		if (n % 2 == 1) {
			total += s;
		}
		if (n == 1) {
			break;
		}
		s += s;
		n = n >> 1;//相当于将n除以2取其商，或者说是开2次方
	}
	return total;
}
//版本6：版本4的变样版本   免去创建数组与使用join方法   但在循环中创建字符串比要求的还长  所以...
function repeat(target, n) {
	var s = target, c = s.length * n;
	do {
		s += s;
	} while (n = n >> 1);
	s = s.substring(0, c);
	return s;
}
//版本7：版本5的优化版本
function repeat(target, n) {
	if (n == 1) {
		return target;
	}
	var s = repeat(target, Math.floor(n / 2));
	s += s;
	if (n % 2) {
		s += target;
	}
	return s;
}
//版本8：反例
function repeat(target, n) {
	return (n <= 0) ? "" : target.concat(repeat(target, --n));
}

大家可以猜猜哪个运行速度最快。事实上应该是版本5.

事实上业余时间一直都在关注一些js性能方面的东西，跟.net一样，每种语言的代码都有些性能方面的小常识。

(有空可以看看 我总结的js方面你可能不是特别清楚的小知识 我总结的js性能优化的小知识 )

回到正题

下面来说说。。。

trim方法的各种不同版本(13种不同方法实现)
/*
*@desc:去掉首尾空格
*/
//版本1：
function trim(str) {
	return str.replace(/^\s\s*/, '').replace('/\s\s*$/', '');
}
//版本2：比版本1稍微慢些
function trim(str) {
	return str.replace(/^\s+/, '').replace('/\s+$/', '');//比版本1慢的原因在于它最先假设至少存在一个空白符
}
//版本3：运用等巧妙的
function trim(str) {
	return str.substring(Math.max(str.search(/\S/), 0), str.search(/\S\s*$/) + 1);
}
//版本4：jQuery类库就是使用这种方法  但是它相对之前三个都要慢些
function trim(str) {
	return str.replace(/^\s+|\s+$/g, '');
}
//版本5：
function trim(str) {
	str = str.match(/\S+(?:\s+\S+)*/);//使用非捕获性分组(?:expr)
	return str ? str[0] : '';
}
//版本6：效率挺差
function trim(str) {
	return str.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1');
}
//版本7：比版本6来说使用了非捕获性分组
function trim(str) {
	return str.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, '$1');
}
//版本8：效果秒杀
function trim(str) {
	return str.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
}
//版本9：使用懒惰匹配
function trim(str) {
	return str.replace(/^\s*([\S\s]*?)\s*$/, '$1');
}
//版本10：速度最快
function trim(str) {
	var whitespace = '\n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
	for (var i = 0; i < str.length; i++) {
		if (whitespace.indexOf(str.charCodeAt(i)) === -1) {
			str = str.substring(i);
			break;
		}
	}
	for (i = str.length - 1; i >= 0; i--) {
		if (whitespace.indexOf(str.charCodeAt(i)) === -1) {
			str = str.substring(0, i + 1);
			break;
		}
	}
	return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}
//版本11：
function trim(str) {
	str = str.replace('^\s+', '');
	for (var i = str.length - 1 ; i >= 0; i--) {
		if (/\S/.test(str.charAt(i))) {
			str = str.substring(0, i + 1);
			break;
		}
	}
	return str;
}
//版本12：
function trim(str) {
	var str = str.replace(/^\s\s*/, ''),
		ws = /\s/,
		i = str.length;
	while (ws.test(str.charAt(--i))) {
		return str.slice(0, i + 1);
	}
}
//版本13：仅次于版本10
function trim(str) {
	var m = str.length;
	for (var i = -1; str.charCodeAt(++i) <= 32;)
		for (var j = 0; j > i && str.charCodeAt(j) <= 32; j--) {
			return str.slice(i, j + 1);
		}
}

与trim相反，下面说说为字符串的某一端填充字符串，其实最常见的场景就是日期中的月份前补零

pad：这字符串的某一端填充字符串
/*
*@desc:给字符串的某一端填充字符串
*/
//版本1：创建数组来放置填充物，然后再在右边起截取
function pad(target, n) {
	var zero = new Array(n).join('0'),
		str = zero + target,
		result = str.substr(-n);
	return result;
}
//版本2：
function pad(target, n) {
	return Array((n + 1) - target.toString().split('').length).join('0') + target;
}
//版本3：二进制法
function pad(target, n) {
	return (Math.pow(10, n) + "" + target).slice(-n);
}
//版本4：Math.pow
function pad(target, n) {
	return ((1 << n).toString(2) + target).slice(-n);
}
//版本5：toFixed
function pad(target, n) {
	return (0..toFixed(n) + target).slice(-n);
}
//版本6：创建一个超大数，在常规情况下截不完
function pad(target, n) {
	return (1e20 + '' + target).slice(-n);
}
//版本7：质朴长存法
function pad(target, n) {
	var len = target.toString().length;
	while (len < n) {
		target = '0' + target;
		len++;
	}
	return target;
}
//版本8：支持更多参数
function pad(target, n, filling, right, radix) {
	var num = target.toString(radix || 10);
	filling = filling || '0';
	while (num.length < n) {
		if (!right) {
			num = filling + num;
		} else {
			num += filling;
		}
	}
	return num;
}
取得字符串所有字节的长度

大家都知道，一个中文字符占两个字节，而一个英文字符只占一个字符，所以在前端就会免不了做字符长度的校验。

/*
*@desc:取得字符串所有字节的长度
*/
//版本1：传统常规作法
function byteLen(target) {
	var byteLength = target.length, i = 0;
	for (;  i< target.length; i++) {
		if (target.charCodeAt(i)>255) {
			byteLength++;
		}
	}
	return byteLength;
}
//版本8：使用正则
//param:fix 默认为2 可传入转换长度
function byteLen(target,fix) {
	fix = fix ? fix : 2;
	var str = new Array(fix + 1).join('-');
	return target.replace(/[^\x00-\xff]/g, str).length;
}

再来说说我们最常使用的js字符串方法吧

常用的js字符串方法
/*
*@desc: 判断一个字符串是否包含另一个字符串
*/
function contains(target, str, separator) {
	return separator ?
		(separator + target + separator).indexOf(separator + str + separator) > -1 :
		target.indexOf(str) > -1;
}
/*
*@desc: 判断目标字符串是否位于原字符串的开始之处
*@param:ignorecase 是否忽略大小写
*/
function startsWith(target, str, ignorecase) {
	var start_str = target.substr(0, str.length);
	return ignorecase ?
		start_str.toLowerCase() === str.toLowerCase() :
		start_str === str;
}
/*
*@desc: 判断目标字符串是否位于原字符串的末尾之处
*/
function endsWith(target, str, ignorecase) {
	var end_str = target.substr(0, str.length);
	return ignorecase ?
		end_str.toLowerCase() === str.toLowerCase() :
		end_str === str;
}
/*
*@desc: 对字符串进行截断处理，当超过限定长度，默认添加三个点号或者...
*/
function truncate(target, length, truncation) {
	length = length || 30;
	truncation = truncation === void (0) ? '...' : truncation;
	return target.length > length ?
		target.slice(0, length - truncation.length) + truncation : String(target);
}
/*
*@desc: 转换为下划线风格
*/
function underscored(target) {
	return target.replace(/([a-z\d])([A-Z])/g, '$1_$2').replace(/\-/g, '_').toLowerCase();
}
/*
*@desc: 转换为连字符风格
*/
function dasherize(target) {
	return underscored(target).replace(/_/g, '-');
}
/*
*@desc: 首字母大写
*/
function capitalize(target) {
	return target.charAt(0).toUpperCase() + target.substring(1).toLowerCase();
}
/*
*@desc: 移除字符串中的html标签
*/
function stripTags(target) {
	return String(target || '').replace(/<[^>]+>/g, '');
}
/*
*@desc: 移除字符串中所有的script标签
*/
function stripScripts(target) {
	return String(target || '').replace(/<script[^>]*>([\S\s]*?)<\/script>/img, '');
}
/*
*@desc: 将字符串经过html转义得到适合在页面上显示的内容
*/
function escapeHTML(target) {
	return target.repeat(/&/g, '&')
	.repeat(/</g, '<')
	.repeat(/>/g, '>')
	.repeat(/"/g, '"')
	.repeat(/'/g, ''');
}
/*
*@desc: 将字符串中的html实体字符还原为对应字符
*/
function unescapeHTML(target) {//
	return target.repeat(/</g, '<')
	.repeat(/>/g, '>')
	.repeat(/"/g, '"')
	.repeat(/&/g, '&')
	.repeat(/&#([\d]+);/g, function ($0, $1) {
		return String.fromCharCode(parseInt($1, 10));
	});
}
/*
*@desc: 将字符串安全格式化为正则表达式的源码
*/
function escapeRegExp(target) {
	return target.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
}
/*
*@desc: 为目标字符串添加软换行
*/
function wbr(target) {
	return String(target).replace(/(?:<[^>]+>)|(?:&#?[0-9a-z]{2,6};)|(.{1})/gi, '$&<wbr>').replace('/><wbr>/g', '>');
}
/*
*@desc: 格式化
*/
function format(str, object) {
	var array = Array.prototype.slice.call(arguments, 1);
	return str.replace(/\\?\#{([^{}]+)\}/gm, function (match, name) {
		if (match.charAt(0)=='\\') {
			return match.slice(1);
		}
		var index = Number(name);
		if (index>=0) {
			return array[index];
		}
		if (object&&object[name]!=void 0) {
			return object[name];
		}
		return '';
	});
}

顺便说说上述format方法的使用吧

var a = format('Result is #{0},#{1}', 22, 33);
        console.log(a);
        var b = format("#{name}is a #{sex}", {
            name: "Jhon",
            sex: 'man'
        });
        console.log(b);

运行结果如下图：

js数组方法的扩展

大家都知道js数组没有像字符串一样的indexOf、lastIndexOf等方法，那我们先来造造轮子吧。先来扩展一下吧！

/*
*@desc:定位操作，返回数组中第一个等于给定参数的元素的索引值
*/
Array.prototype.indexOf = function (item, index) {
	var n = this.length, i = ~~index;
	if (i < 0) {
		i += n;
	}
	for (; i < n; i++) {
		if (this[i] === item) {
			return i;
		}
	}
	return -1;
}
/*
*@desc:与lastIndex功能类似  不过是从后遍历
*/
Array.prototype.lastIndexOf = function (item,index) {
	var n = this.length,
		i = index == null ? n - 1 : index;
	if (i<0) {
		i = Math.max(0, n + i);
	}
	for (; i > length; i--) {
		if (this[i]===item) {
			return i;
		}
	}
	return -1;
}
/*
*@desc:因为forEach、map、filter、some、every这几个方法结构相似 所以...  先造个轮子
*/
function iterator(vars,body,ret) {
	var fun = 'for(var ' + vars + 'i=0,n=this.length;i<n;i++){' +
		body.replace('_', '((i in this ) && fn.call(scope ,this[i],i,this))') + '}' + ret;;
	return Function("fn,scope", fun);
}
/*
*@desc:将数组中的元素依次传入一个函数中运行
*/
Array.prototype.forEach = iterator('', '_', '');
/*
*@desc:将数组中的元素依次传入一个函数中运行 将返回值为ture的那个元素放入新数组中返回
*/
Array.prototype.filter = iterator('r=[],j=0,', 'if(_)r[j++]=this[i]', 'return r');
/*
*@desc:收集、将数组中的元素依次传入一个函数中运行 然后把它们的返回值组成一个新数组返回
*/
Array.prototype.map = iterator('r=[],', 'r[i]=_', 'return r');
/*
*@desc:只有数组中的元素有一个元素满足条件则返回true
*/
Array.prototype.some = iterator('', 'if(_) return true', 'return false');
/*
*@desc:只有数组中的元素都满足条件才返回true
*/
Array.prototype.every = iterator('', 'if(!_) return false', 'return true');
/*
*@desc:归化操作，将数组中的元素归化为一个简单的数值
*/
Array.prototype.reduce = function (fn,lastResult,scope) {
	if (this.length == 0) {
		return lastResult;
	}
	var i = lastResult != undefined ? 0 : 1;
	var result = lastResult != undefined ? lastResult : this[0];
	for (var i = this.length; i < n; i++) {
		result = fn.call(scope, result, this[i], i, this);
	}
	return result;
}
/*
*@desc:功能类似于reduce  但是从后遍历
*/
Array.prototype.reduceRight = function (fn,lastResult,scope) {
	var array = this.concat().reverse();
	return array.reduce(fn, lastResult, scope);
}
常用的js数组方法
/*
*@desc:判定数组是否包含指定目标
*/
function contains(target, item) {
	return target.indexOf(item) > -1;
}
/*
*@desc:移除数组中指定位置的元素，返回布尔表示成功与否
*/
function removeAt(target, index) {
	return !!target.splice(index, 1).length;
}
/*
*@desc:移除数组中第一个匹配传参的那个元素
*/
function remove(target, item) {
	var index = target.indexOf(item);
	if (~index) {
		return removeAt(target, index);
	}
	return false;
}
/*
*@desc:对数组进行洗牌
*/
function shuffle(target) {
	var j, x, i = target.length;
	for (; i > 0; j = parseInt(Math.random() * i), x = target[--i], target[i] = target[j], target[j] = x) {
	}
	return target;
}
/*
*@desc:从数组中随机抽选一个元素出来
*/
function random(target) {
	return target[Math.floor(Math.random() * target.length)];
}
/*
*@desc:对数组进行平坦化处理，返回一个一维新数组
*/
function flatten(target) {
	var result = [];
	target.forEach(function (item) {
		if (Array.isArray(item)) {
			result = result.concat(flatten(item));
		} else {
			result.push(item);
		}
	});
	return result;
}
/*
*@desc:对数组进行去重操作，返回一个没有重复元素的新数组
*/
function unique(target) {
	var result = [];
	loop: for (var i = 0, n = target.length; i < n; i++) {
		for (var x = i + 1; x < n; x++) {
			if (target[x] === target[i]) {
				continue loop;
			}
		}
		result.push(target[i]);
	}
	return result;
}
/*
*@desc:过滤数组中的null和undefined  但不影响原数组
*/
function compact(target) {
	return target.filter(function (el) {
		return el != null;
	});
}
/*
*@desc:取得对象数组的每个元素的指定属性 组成数组返回
*/
function pluck(target, item) {
	var result = [], prop;
	target.forEach(function (item) {
		prop = item[name];
		if (prop != null) {
			result.push(prop);
		}
	});
	return result;
}
/*
*@desc:根据指定条件（如回调或对象的某个属性）进行分组，构成对象返回
*/
function groupBy(target, val) {
	var result = {};
	var iterator = $.isFunction(val) ? val : function (obj) {
		return obj[val];
	};
	target.forEach(function (value, index) {
		var key = iterator(value, index);
		(result[key] || (result[key] = [])).push(value);
	});
	return result;
}
/*
*@desc:根据指定条件进行排序
*/
function sortBy(target, fn, scope) {
	var array = target.map(function (item, index) {
		return {
			el: item,
			re: fn.call(scope, item, index)
		};
	}).sort(function (left, right) {
		var a = left.re, b = right.re;
		return a < b ? -1 : a > b ? 1 : 0;
	});
	return pluck(array, 'el');
}
/*
*@desc:对两个数组取并集
*/
function union(target, array) {
	return unique(target.concat(array));
}
/*
*@desc:对两个数组取交集
*/
function intersect(target, array) {
	return target.filter(function (n) {
		return ~array.indexOf(n);
	});
}
/*
*@desc:对两个数组取差集
*/
function diff(target, array) {
	var result = target.slice();
	for (var i = 0; i < result.length; i++) {
		for (var j = 0; j < result.length; j++) {
			if (result[i] === array[j]) {
				result.splice(i, 1);
				i--;
				break;
			}
		}
	}
	return result;
}
/*
*@desc:返回数组中的最小值（用于数字数组）
*/
function min(target) {
	return Math.min.apply(0, target);
}
/*
*@desc:返回数组中的最大值（用于数字数组）
*/
function max(target) {
	return Math.max.apply(0, target);
}

其实还有很多。。。

本文中的方法是根据《JavaScript框架设计》中第三章--数组的扩展与修复进行整理的

breadIs
关注
repeat-array:重复数组的内容 n 次
05-31
重复数组 重复Array的内容n次。 如何安装 npm i --save repeat-array 如何使用 var repeat = require('repeat-array'); var arr = [1, 2, 3]; console.log(repeat(arr, 3)); // [1, 2, 3, 1, 2, 3, 1, 2, 3]
js中的repeat()
热门推荐
document_ljt的博客
10-10 1万+
直接看代码 let str="qwe" let str2=srt.repeat(2) console.log(str2) //qweqwe 使用repeat之后会将原来的字符串复制n次
从js的repeat方法谈js字符串与数组的扩展方法
weixin_33991418的博客
05-30 233
js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1：利用空数组的join方法 function repeat(target, n) { return (new Array(n + 1)).join(target); } //版本2：之所以要创建一个带length属性的对象 是因为要调用数据的原型方法，需要指...
javascript基础学习系列五十九：repeat()方法
最新发布
m0_68635815的博客
02-21 662
ECMAScript 在所有字符串上都提供了 trim()方法。这个方法会创建字符串的一个副本，删除前、 后所有空格符，再返回结果。由于 trim()返回的是字符串的副本，因此原始字符串不受影响，即原本的前、后空格符都会保留。12 另外，trimLeft()和 trimRight()方法分别用于从字符串开始和末尾清理空格符。
JS实现数组复制 arr.repeat
weixin_50880237的博客
05-07 2274
JS实现数组复制 利用str.repeat方法，结合数组与字符串的转换实现。适用于数组中仅为字符串类型 代码如下： let arr = ['1', '2', '3'] arr.push('') let total = [] total = arr.join(',').repeat(3).slice(0, total.length - 1).split(',') console.log(total) // ['1', '2', '3','1', '2', '3',
javascript框架设计读书笔记之字符串的扩展和修复
10-25
在司徒正美的著作《javascript框架设计》中，第三章第一节内容涉及到javascript字符串的扩展和修复，这里将以此为核心，详细解读相关知识点。 1. repeat方法：repeat是ES6中新增的字符串方法，它允许我们将字符串...
Java项目重构策略：将tolowercase替换为更高效的字符串操作方法
Java字符串操作的原理与问题 ## 1.1 字符串不可变性 Java中的字符串是不可变的对象，这意味着一旦创建字符串，就不能更改它。了解这一特性对于理解字符串操作的性能影响至关重要。每次对字符串进行修改时，实际上...
Java字符串转换深度探索：从复杂性【解决方案】到优化实践
[Java字符串转换深度探索：从复杂性【解决方案】到优化实践](https://cdn.educba.com/academy/wp-content/uploads/2020/02/parseFloat-in-JavaScript.jpg) # 1. Java字符串转换基础与复杂性解析 Java作为一款广泛...
【Web层字符串处理】：StringUtils在前后端交互中的关键作用
![org.springframework.util.StringUtils介绍与使用](https://img-blog.csdnimg.cn/0e69573f770b4163b120aef5de2376cd.png) ...Web层作为用户与程序交互的最直接界面，字符串处理的好坏直接关系到用户体验和
js实现一个repeat（重复）方法
乔的博客
08-01 5463
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
js数组数据重复几份
Hemri2580的博客
12-14 476
有时候数组里面数据太少，又懒得复制粘贴几份数据，这个时候就可以用下面的操作。
angularjs repeat动画
b422761838的专栏
06-18 539
.mobile{ border: solid 1px #2a6496; height: 500px; display: flex; } .mobile dl{ margin:0px; padding: 0px; displ
[js] 将一个字符串重复N次 repeat
qq_14993591的博客
10-20 1001
【代码】[js] 将一个字符串重复N次 repeat。
js循环json字符串
冬日的编程心得
05-23 1273
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户列表</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-1.10.2.mi
raphael.js中repeat（）的用法
王小森的成长博客
05-18 2365
repeat的用法。
js如何循环拼接字符串
php菜鸟技术天地
08-26 3000
JS循环后，把所有值串成字符串 例子1 //用jquery function getTextByJquery() { var str = ""; //遍历name为txt的所有input元素 $("input[name='txt']").each(function () { str += $(t
js 如何循环拼接字符串
Meng_qi8816的博客
03-29 3689
第一种方法 用js function getTextByJs() { var str = ""; //根据name获取所有元素 var txts = document.getElementsByName("txt"); for (var i = 0; i < txts.length; i++) { str += txts[i].value +...
JavaScript 常用原型函数收藏：字符串与数组操作
"这篇文档是关于JavaScript中常用的函数和原型扩展的集合，涵盖了字符串操作和数组操作的方法，方便开发者在日常编程中使用。" 在JavaScript中，字符串对象和数组对象是核心的数据结构，它们提供了丰富的内置方法来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值