js常用代码段收集_javascript技巧

企鹅博客
19500
文章
0
评论
2020年3月24日05:18:38 评论 9 views 3373字阅读11分14秒

每段代码前边都有功能注解和参数要求等说明文字,难度不大也就没做更多注释。 为看得清楚,这里依先后顺序做个小目录:

重写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);

继续阅读
  • 版权声明: 发表于 2020年3月24日05:18:38
  • 转载注明:https://www.qieseo.com/424629.html
Angular2模块懒加载实例详解 js教程

Angular2模块懒加载实例详解

本文主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经...
不使用router-link实现页面跳转 js教程

不使用router-link实现页面跳转

这次给大家带来不使用router-link实现页面跳转,不使用router-link实现页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下。 1、给父页面跳转的地方设置事件 //原来的页面上展示...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: