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 相关文章推荐
json简单介绍
Jun 10 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
js 数据类型判断的方法
Dec 03 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
js实现自定义路由
2017/02/04 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python实现随机漫步方法和原理
2019/06/10 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
个人近期表现材料
2014/02/11 职场文书
完美的中文自荐信
2014/05/24 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫