js的一些实用技巧

定时器函数参数

setTimeout和setInterval的第二个以后的参数可以传递给回调函数。

1     setTimeout(function(i, j){
2         console.log(i); // 111
3         console.log(j); // 222
4     }, 1000, 111, 222);
5
6     setInterval(function(i, j){
7         console.log(i); // 111
8         console.log(j); // 222
9     }, 1000, 111, 222);

字符串拼接

字符串拼接需要换行时,可以在行尾添加\而不用使用连接符+。

1     var sHtml =
2             ‘<div class="article">3                 <div class="head">标题</div>4                 <div class="con">内容</div>5             </div>‘;

typeof、instanceof、in的两种写法

typeof、instanceof、in等操作符可以用小括号来使用。

1     var aNum = [1, 2, 3];
2     console.log(typeof aNum); // object
3     console.log(typeof(aNum)); // object
4
5     console.log(aNum instanceof Array); // true
6     console.log(aNum instanceof(Array)); // true
7
8     console.log(aNum in window); // false
9     console.log(aNum in(window)); // false

for循环的无限循环

当for循环中省略三个表达式就是一个无限循环。

1     var i = 0;
2     for(;;){
3         if(i == 4)break;
4         console.log(i++); // 0, 1, 2, 3
5     }

call和applay不带参数或第一个参数为null时指向window对象

call和applay不带参数或第一个参数为null时指向window对象。

 1     var name = ‘hum‘;
 2     function Test(name){
 3         this.name = name;
 4     };
 5     Test.prototype.getName = function() {
 6         console.log(this.name);
 7     };
 8
 9     var oTest = new Test(‘jolin‘);
10     oTest.getName(); // jolin
11     oTest.getName.call(); // hum
12     oTest.getName.call(null); // hum

insertBefore方法的第二个参数为null时的作用和appendChild方法一样

insertBefore方法的第二个参数为null时的作用和appendChild方法一样都是向父元素添加子元素。

 1 <button>添加</button>
 2 <ul></ul>
 3 <script>
 4     window.onload = function(){
 5         var oUl = document.getElementsByTagName(‘ul‘)[0],
 6                 aLi = document.getElementsByTagName(‘li‘),
 7                 oBtn = document.getElementsByTagName(‘button‘)[0],
 8                 iNum = 0;
 9
10         oBtn.onclick = function(){
11             var oLi = document.createElement(‘li‘);
12             oLi.innerHTML = ++iNum;
13             oUl.insertBefore(oLi, aLi[0]); // 第一次添加也会成功
14         };
15     };
16 </script>

getElementsByTagName获取元素能动态反映出来

通过getElementsByTagName来获取元素后,动态添加或删除元素后,原来获取的元素能同步。

 1 <button>添加</button>
 2 <button>移除</button>
 3 <ul></ul>
 4 <script>
 5     window.onload = function(){
 6         var oUl = document.getElementsByTagName(‘ul‘)[0],
 7                 aLi = document.getElementsByTagName(‘li‘),
 8                 oBtn0 = document.getElementsByTagName(‘button‘)[0],
 9                 oBtn1 = document.getElementsByTagName(‘button‘)[1],
10                 iNum = 0;
11         console.log(aLi.length); // 0
12         oBtn0.onclick = function(){
13             var oLi = document.createElement(‘li‘);
14             oLi.innerHTML = ++iNum;
15             oUl.insertBefore(oLi, aLi[0]);
16             console.log(aLi.length);
17         };
18         oBtn1.onclick = function(){
19             if(aLi.length) { // 必须判断否则removeChild会报错
20                 oUl.removeChild(aLi[0]);
21             }
22             console.log(aLi.length);
23         };
24     };
25 </script>

匿名函数自执行的几种形式

 1     // 常用
 2     (function () {
 3         console.log(‘function‘);
 4     })();
 5
 6     // 特殊
 7     !function(){
 8         console.log(‘function‘);
 9     }();
10     +function(){
11         console.log(‘function‘);
12     }();
13     -function(){
14         console.log(‘function‘);
15     }();
时间: 2024-10-20 18:00:07

js的一些实用技巧的相关文章

js 处理URL实用技巧

escape().encodeURI().encodeURIComponent()三种方法都能对一些影响URL完整性的特殊字符进行过滤. 但后两者是将字符串转换为UTF-8的方式来传输,解决了页面编码不一至导致的乱码问题. 例如:发送页与接受页的编码格式(Charset)不一致(假设发送页面是GB2312而接收页面编码是UTF-8),使用escape()转换传输中文字串就会出现乱码问题. 以下是JS下对URL进行编/解码的各种方法: escape方法:就对@*+/ A-Z 0-9 a-z这些字符

js基础进阶--编的实用技巧(一)

我的个人博客:http://www.xiaolongwu.cn 在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果. 下面总结几种简单的技巧,大家共同学习一下 1. 利用+.-./1,*1将字符串转换为整数型 这个方法试用于将字符串类型的数字转换为整数型,如果带字母就会返回NaN. var a = "1234", b = "leonWuv"; //我们想把a转换为1234的整数型,一般方法 console.log(typeof Number(a)

总结vue知识体系之实用技巧

vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本文主要讲述一些vue开发中的实用技巧. 相关推荐 总结vue 知识体系之基础入门篇 总结几个vue-router的使用技巧 搭建一个vue-cli的移动端H5开发模板 监听组件的生命周期 比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,

Mac预览怎么用 Mac预览功能实用技巧大全

Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具,接下来Pc6苹果小编给大家详细介绍一下Mac预览功能实用技巧. 目前的 Mac 预览程式可以支持 TIFF. PNG. JPEG. GIF. BMP. PDF 等主要文件格式的浏览与编辑,而单纯预览上也可以支持像是 Photoshop 等专业图像处理软件. Office 等专业文书处理软件所产生的特殊文件格

iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式

iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https://github.com/HanGangAndHanMeimei/Code 一.使用for循环 要遍历字典.数组或者是集合,for循环是最简单也用的比较多的方法,示例如下: 1 //普通的for循环遍历 2 -(void)iteratorWithFor 3 { 4 //////////处理数组/////

NSString的八条实用技巧

NSString的八条实用技巧 有一篇文章写了:iOS开发之NSString的几条实用技巧 , 今天这篇,我们讲讲NSString的八条实用技巧.大家可以收藏起来,方便开发随时可以复制粘贴. 0.首字母大写 代码: //首字母大写 NSString *string = @"ligang"; NSLog(@"string: %@",[string capitalizedString]); 打印: 2015-07-16 23:06:11.652 iOSStrongDem

Android开发:TVBox智能机顶盒开发实用技巧分享

本文旨在指导想要进入Android TVBox智能机顶盒开发领域或刚刚进入Android TVBox开发领域的新人带路,愿你们越走越远! 实用工具篇 Eclipse+ADT 别问它干嘛用的,我也不知道. SercureCRT SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,同时支持Telnet和rlogin协议. SecureCRT是一款用于连接运行包括Windows.UNIS和VMS的远程系统的理想工具. 通过使用内含的VCP命令行程序可以进行加密文件的传输.有流行CR

程序员在编程开发中的10个实用技巧

程序员在编程开发中的10个实用技巧,下面是我自己在工作中学到的一些简单的技巧和策略,希望能对各位有用.1.     橡皮鸭调试法不知道各位有没有这样的经历,当你正在给别人描述问题的时候,突然灵机一动想到了解决方案?这种情况的产生是有科学依据的.高谈阔论能让我们的大脑重新有条理地组织问题.在这种情况下,你的聊天对象就是“橡皮鸭”.团队中的每个人都应该积极主动乐意地成为彼此的“橡皮鸭”.有时候,如果你幸运的话,你的“橡皮鸭”搞不好还能给出有效的建议呢.2.     快速信息反馈一旦写好代码就要尽快得

iOS实用技巧 - 简易实现多皮肤功能

前言:不记得谁说的了,中国的用户大概是世界上最喜欢多皮肤功能的用户了.我很讨厌写安卓程序,图形界面设计工具及其难用,还不如手写,编辑器慢如蜗牛,智能提示总是跟不上我输入的速度,相同的功能,安卓的代码量至少是iOS的三倍,每写一行代码,都觉得自己的手指在滴血.可是安卓灵活统一的style功能确实很贴心!5之前,iOS平台上实现相同的功能一直没有个比较好的办法. iOS5之后,苹果将所有界面组件的设定,都绑定在一个叫UIAppearance的协议上了,你可以简单的通过UIAppearance设定组件