详解JS中Array对象扩展与String对象扩展
更新时间:2016年1月8日 10:01 点击:2001
废话不多说了,直接给大家上array对象扩展代码了,具体代码如下所示:
/** * Created by laixiangran on 2016/01/07. * Array扩展 */ (function() { // 遍历数组 if (typeof Array.prototype.forEach != "function") { Array.prototype.forEach = function (fn, context) { for (var i = 0; i < this.length; i++) { if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, i)) { fn.call(context, this[i], i, this); } } }; } // 让数组中的每一个元素调用给定的函数,然后把得到的结果放到新数组中返回 if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = []; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { arr.push(fn.call(context, this[k], k, this)); } } return arr; }; } // 把符合条件的元素放到一个新数组中返回 if (typeof Array.prototype.filter != "function") { Array.prototype.filter = function (fn, context) { var arr = []; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { fn.call(context, this[k], k, this) && arr.push(this[k]); } } return arr; }; } // 如果数组中的每个元素都能通过给定的函数的测试,则返回true,反之false if (typeof Array.prototype.every != "function") { Array.prototype.every = function (fn, context) { var passed = true; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { if (passed === false) break; passed = !!fn.call(context, this[k], k, this); } } return passed; }; } // 类似every函数,但只要有一个通过给定函数的测试就返回true if (typeof Array.prototype.some != "function") { Array.prototype.some = function (fn, context) { var passed = false; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { if (passed === true) break; passed = !!fn.call(context, this[k], k, this); } } return passed; }; } // 返回元素在数组的索引,没有则返回-1,从左到右 if (typeof Array.prototype.indexOf != "function") { Array.prototype.indexOf = function (item, index) { var n = this.length, i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index; for (; i < n; i++) { if (i in this && this[i] === item) { return i } } return -1 }; } // 返回元素在数组的索引,没有则返回-1,从右到左 if (typeof Array.prototype.lastIndexOf != "function") { Array.prototype.lastIndexOf = function (item, index) { var n = this.length, i = index == null ? n-1 : index < 0 ? Math.max(0, n + index) : index; for (; i >= 0; i--) { if (i in this && this[i] === item) { return i; } } return -1; }; } // 让数组元素依次调用给定函数,最后返回一个值(从左到右) if (typeof Array.prototype.reduce != "function") { Array.prototype.reduce = function (callback, initialValue) { var previous = initialValue, k = 0, length = this.length; if (typeof initialValue === "undefined") { previous = this[0]; k = 1; } if (typeof callback === "function") { for (k; k < length; k++) { this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this)); } } return previous; }; } // 让数组元素依次调用给定函数,最后返回一个值(从右到左) if (typeof Array.prototype.reduceRight != "function") { Array.prototype.reduceRight = function (callback, initialValue) { var length = this.length, k = length - 1, previous = initialValue; if (typeof initialValue === "undefined") { previous = this[length - 1]; k--; } if (typeof callback === "function") { for (k; k > -1; k-=1) { this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this)); } } return previous; }; } // 去掉重复项(唯一性),返回新数组 if (typeof Array.prototype.uniq != "function") { Array.prototype.uniq = function() { var arr = []; arr[0] = this[0]; for (var i = 1; i < this.length; i++) { if (arr.indexOf(this[i]) == -1) { arr.push(this[i]); } } return arr; }; } // 指定删除数组中某值 if (typeof Array.prototype.remove != "function") { Array.prototype.remove = function(item) { for (var i = this.length; i >= 0; i--) { if (item === this[i]) { this.splice(i, 1); } } return this; }; } // 打乱数组顺序 if (typeof Array.prototype.shuffle != "function") { Array.prototype.shuffle = function() { var i = this.length; while (i) { var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }; } // 求数组的最大值 if (typeof Array.prototype.max != "function") { Array.prototype.max = function() { return Math.max.apply({}, this) }; } // 求数组的最小值 if (typeof Array.prototype.max != "function") { Array.prototype.min = function() { return Math.min.apply({}, this) }; } // 判断是否为数组 if (typeof Array.prototype.isArray != "function") { Array.prototype.isArray = function() { return Object.prototype.toString.apply(this) === "[object Array]"; }; } }());
下面是string对象扩展代码如下所示:
/** * Created by laixiangran on 2015/12/12. * String扩展 */ (function() { // 十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // RGB颜色转换为16进制 if (typeof String.prototype.rgbToHex != "function") { String.prototype.rgbToHex = function() { var that = this; if (/^(rgb|RGB)/.test(that)) { var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(","); var strHex = "#"; for (var i=0; i<aColor.length; i++) { var hex = Number(aColor[i]).toString(16); if (hex === "0") { hex += hex; } strHex += hex; } if (strHex.length !== 7) { strHex = that; } return strHex; }else if (reg.test(that)) { var aNum = that.replace(/#/,"").split(""); if (aNum.length === 6){ return that; }else if (aNum.length === 3) { var numHex = "#"; for (var j=0; j<aNum.length; j++) { numHex += (aNum[j]+aNum[j]); } return numHex; } }else{ return that; } }; } // 16进制颜色转为RGB格式 if (typeof String.prototype.hexToRgb != "function") { String.prototype.hexToRgb = function() { var sColor = this.toLowerCase(); if (sColor && reg.test(sColor)) { if (sColor.length === 4) { var sColorNew = "#"; for (var i = 1; i < 4; i++) { sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1)); } sColor = sColorNew; } // 处理六位的颜色值 var sColorChange = []; for (var j=1; j<7; j+=2) { sColorChange.push(parseInt("0x"+sColor.slice(j,j+2))); } return "RGB(" + sColorChange.join(",") + ")"; }else{ return sColor; } }; } // 移除字符串首尾空白 if (typeof String.prototype.trim != "function") { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); }; } }());
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15