关于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 /

时间: 2024-07-30 10:17:43

关于JS的几点TIPS的相关文章

JS生成tips小工具

效果: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.min.js"></script> <script src="tips.js">&l

个人第一个jquery插件(tips)

js代码 /** * Created by joesbell on 2016/10/8. */ ;(function($) { var defaults = { background:"#000",//tips的背景颜色 color:"white", position:"r",//出现的位置 l--左边, r--右边 t--顶部 b--底部 parWidth:"",//父级元素的宽度 parHeight:""

js自学笔记—— 基础部分一

前言:js由三部分组成,1. 核心(ECMAScript),语法标准    2.文档对象模型(DOM)    3.浏览器对象模型(BOM) JavaScript 的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的.ECMAScript中包含了所有基本的语法,操作符,数据类型以及完成基本的计算任务所必需的对象,但没有对取得输入和产生输出的机制作出规定. 1.在web中引入js <script></script>    使html与js混合 defer

vue国际化demo

最近自己研究vue-i18n做了个vue国际化的demo,总结如下 第一步.安装vue-i18n npm install vue-i18n 第二步.在main.js中引入vue-i18n(如下图) 第三步.建两个语言包文件,目录结构如下图: 第四步.给这两个文件里写静态的页面展示数据 1.en.js(内容如下图) 2.zh.js(内容如下图) 第五步:1.html里面使用如下图 第六步:接口层面实现多语言,方案为: 在HTTP请求头中携带语言信息,接口服务根据语言,返回不同的语言环境响应体. 本

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

写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断了我们的思考思路,所以对于基础的追求,是任何时候都不能忘记的.不然会的框架再多,会玩儿的花样再多,到头来都只是API . 另外 一个目的就是想做一个好玩的东西,就是 实时编译所写的高版本(ES2015+)的 JS 代码.转化成现在大部分浏览器可以兼容的 ES5 . ES3 等. 下面就正式介绍下 B

tips 原生js

//首先是获取元素距离浏览器顶部和左边的距离function getPos(obj) { var pos = {left:0, top:0}; while (obj) { pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; }//创建一个div 用来当做tips 存放内容var div = document.createElement('div'); //that

小tips:JS之浅拷贝与深拷贝

浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c

小tips:js中的Navigator对象

Navigator 对象包含有关浏览器的信息. 注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象. Navigator 对象属性: 属性 描述 appCodeName 返回浏览器的代码名. appMinorVersion 返回浏览器的次级版本. appName 返回浏览器的名称. appVersion 返回浏览器的平台和版本信息. browserLanguage 返回当前浏览器的语言. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值.

小tips:JS == 与 === 的区别

1.对于string,number等基础类型,==和===是有区别的1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等2)同类型比较,直接进行“值”比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的进行“指针地址”比较 3.基础类型与高级类型,==和===是有区别的1)对于==,将高级转化为基础类型,进行“值”比较2)因为类型不同,===结果为false