js常用代码段收集


Posted in Javascript onOctober 28, 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 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
微信小程序之发送短信倒计时功能
Aug 30 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 #Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 #Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 #Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
PHP4之真OO
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
浅析is_writable的php实现
2013/06/18 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
ES6中Array.includes()函数的用法
2017/09/20 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
晚归检讨书
2014/02/19 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python