js常用代码段整理


Posted in Javascript onNovember 30, 2011

每段代码前边都有功能注解和参数要求等说明文字,难度不大也就没做更多注释。 为看得清楚,这里依先后顺序做个小目录:
重写window.setTimeout,
理解递归程序的返回规律,
截取长字符串,
取得元素在页面中的绝对位置,
统计、去除重复字符(多种方法实现),
把有序的数组元素随机打乱(多种方法实现)。

/* 
功能:修改 window.setTimeout,使之可以传递参数和对象参数 (同样可用于setInterval) 
使用方法: setTimeout(回调函数,时间,参数1,...,参数n) (FF已经原生支持,IE不支持) 
*/ 
var __sto = setTimeout; 
window.setTimeout = function(callback,timeout,param){ 
var args = Array.prototype.slice.call(arguments,2); 
var _cb = function(){ 
callback.apply(null,args); 
} 
__sto(_cb,timeout); 
} 
function aaaaa(a,b,c){ 
alert(a + b + c); 
} 
window.setTimeout(aaaaa,2000,5,6,7); /**//* 
功能:理解递归程序的返回规律(从内到外) 
对象之间成员的互引用 
*/ 
var ninja = { 
yell: function(n){ 
return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
} 
}; 
alert(ninja.yell(4))//结果为:hiyaaaa; 
var samurai = { yell: ninja.yell }; 
//var ninja = {}; // 此处 注释与否 对结果有影响 
try { 
alert(samurai.yell(4)); 
} catch(e){ 
alert("Uh, this isn't good! Where'd ninja.yell go?" ); 
} /** 功能:截取长字符串 
* @param {string} str 要截取的字符串 
* @param {number} size 截取长度(单字节长度) 
*/ 
var subStr = function(str, size){ 
var curSize = 0, arr = []; 
for(var i = 0, len = str.length; i < len; i++){ 
arr.push(str.charAt(i)); 
if (str.charCodeAt(i) > 255){ 
curSize += 2; 
if(size === curSize || size === curSize - 1){ 
return arr.join(''); 
} 
}else{ 
curSize++; 
if(size === curSize){ 
return arr.join(''); 
} 
} 
} 
}; 
var str = '#%*……&#什么东西1234abcd 还不够长'; 
alert(str.length); 
alert(str.substr(0, 15)); 
alert(subStr(str, 15));/**//* 
功能:取得元素在页面中的绝对位置(相对于页面左上角) 
@param {string} node 待求位置的DOM元素 
*/ 
function getAbsPosition(node) { 
var t = node.offsetTop; 
var l = node.offsetLeft; 
while (node = node.offsetParent) { 
t += node.offsetTop; 
l += node.offsetLeft; 
} 
alert("top=" + t + "\n" + "left=" + l); 
}/**//* 
功能:统计、去除重复字符 
@param str 需要统计的字符串 
说明:常用于字符串中重复字符,或者数组中重复的字母、数字等个数统计。 
此处从网上收集两种典型的类型,分别有两种实现方法,其他还有许多变种,从不同角度编写,可搜索学习。 待统计的数据,不论是数组和字符串都可以,只用借助String.split()或 Array.join() 
转换为函数参数要求的类型即可。 
*/ // 类型一:借助新建对象来保存数据 
var count1 = function (str) { 
var map = {}, maxCount = 0, maxChar, undefined, i = str.length; 
while (i--) { 
var t = str.charAt(i); 
map[t] == undefined ? map[t] = 1 : map[t] += 1; 
if (map[t] > maxCount) { 
maxChar = t; 
maxCount = map[maxChar]; 
} 
} 
return "字符:" + maxChar + "次数:" + maxCount; 
}function s_0(a) { // 此处参数应为数组类型 
var b = {}, c = [], i; 
for (i = 0; i < a.length; i++){ 
if (!b[a[i]]) { 
c[c.length] = a[i], b[a[i]] = true; 
} 
} 
return c; 
}// 类型二:正则表达式匹配统计 
var count2 = function (str) { 
var most = str.split('').sort().join('').match(/(.)\1*/g); //排列重复字符 
most = most.sort(function (a, b) { return a.length - b.length }).pop(); //按出现频繁排序 
return most.length + ': ' + most[0]; 
}function s_1(a) { 
var a = a.join(""), b = []; 
while (a.length > 0) 
a = a.replace(new RegExp((b[b.length] = a.charAt(0)), "g"), ""); 
return b; 
}/**//* 
功能:把有序数组打乱(产生无序随机数组) 
说明:基本的排序算法大家应该都很清楚。但是在编程中也经常用到相反的操作,即把原来有序的数组元素随机打乱。 
以下给出三种方法,第一种是以前我自己写出来的,由于水平差,写出的代码时间复杂度太大, 
于是从网上搜索一些简单而且效率高的方法来。 
第二种据说是“洗牌算法”,想必很多人都听说过; 
第三种是利用JS的内置sort方法,这种实现起来很简单。 
*/ 
// 方法1(给大家做失败的教训借鉴) 
function randArray(num) { 
var rands = []; 
var ra = parseInt(num * Math.random()); 
rands.push(ra); 
for (var r = 0; r < num - 1; r++) { 
ra = parseInt(num * Math.random()); 
for (var m = 0; m < rands.length; m++) { 
while (rands[m] == ra) { 
ra = parseInt(num * Math.random()); 
m = -1; 
} 
} 
rands.push(ra); 
} 
//alert(rands); 
return rands; 
} 
// 方法2: 
//选择两个[0...array.Length)之间的随机数,把它们做下标的两个元素交换位置(这样乱序效率高) 
/* 说明:这是“洗牌算法” 有人证明打乱的效果如下: 
随机交换nums/2次的效果很差,平均约1/3的对象还在原来的位置 
随机交换nums次才基本可用,平均约15%的对象还在原来的位置 
随机交换nums*2次才真正可用,平均约2%的对象还在原来的位置 
*/ 
function daluan(nums) { 
var array=[]; 
for (var i = 0; i < nums; i++) { 
array[i] = i; 
} 
for (var i = 0; i < nums; i++) { 
var rand = parseInt(nums * Math.random()); 
var temp = array[i]; 
array[i] = array[rand]; 
array[rand] = temp; 
} 
return array; 
} 
// 方法3: 
// 让比较函数随机传回-1或1就可以了(这样乱序效率可能不高) 
var testArray3=[1,2,3,4,5,6,7,8,9,10,22,33,55,77,88,99]; 
testArray3.sort(function(){return Math.random()>0.5?-1:1;}); 
alert(testArray3);
Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
vue之延时刷新实例
Nov 14 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
firebug的一个有趣现象介绍
Nov 30 #Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 #Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 #Javascript
chrome原生方法之数组
Nov 30 #Javascript
使用Javascript接收get传递的值的代码
Nov 30 #Javascript
关于递归运算的顺序测试代码
Nov 30 #Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP输出时间差函数代码
2013/01/28 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
详细解读Python中解析XML数据的方法
2015/10/15 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python psutil库安装教程
2018/03/19 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
出纳岗位职责范本
2013/12/01 职场文书
优秀经理事迹材料
2014/02/01 职场文书
《掌声》教学反思
2014/02/23 职场文书
北京申奥口号
2014/06/19 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
公务员年终个人总结
2015/02/12 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android