JavaScript之糟粕
0、导言
在上篇《JavaScript之毒瘤》中,列举了一些在JavaScript中难以避免的问题特性。本篇将会展示JavaScript中有问题的特性,但我们很容易就能便面它们。通过这些简单的做法,让JavaScript称为一门更好的语言。
1、==
JavaScript有两组相等运算符。 === 和 !==,以及 == 和 !==。 === 和 !== 不会进行类型转换,一般会按照你期望的方式工作。由于JavaScript的类型转换系统相当复杂,如果要确保==和 != 不出错,就必须要牢记转换规则。另外==运算符缺乏传递性。
//关于传递性
if a === b, b === c then a === c;
if a == b, b == c then a 不一定等于 c,破坏了传递性
小测验:
'' == '0'
0 == ''
0 == '0'
false == 'false'
false == '0'
false == undefined
false == null
null == undefined
'\t\t\n' == 0
总结:推荐使用===和!==,尽量避免使用==和!=。
2、with语句
JavaScript提供了一个with语句,本意是用它来快速访问对象,不幸的是,它的结果可能有时不可预料。
小测验:
window.a = 1;
var obj={};
with(obj){
console.log(a);
}
obj.a = 2;
with(obj){
console.log(a);
}
结论:避免使用with。
3、eval
eval函数传递一个字符串给JavaScript编译器,并且执行结果。有问题问题呢?首先是代码难以阅读,另外需要运行编译器,导致性能低下;同时,还减弱了程序的安全性。注:Function构造函数,setTimeout、setInterval的字符串参数形式和eval是执行方式一致。
结论:避免使用eval,setTimeout、setInterval的字符串参数和Function构造函数。
4、continue
continue语句跳到循环顶部,性能比较低下。
小测验:
var counter = 10;
console.time('t1');
var sum = 0;
for(var i = 0; i < counter; i++){
if(i % 3 !== 0){
continue;
}
sum = sum + i;
}
console.log(sum);
console.timeEnd('t1');
console.time('t2');
var sum = 0;
for(var i = 0; i < counter; i++){
if(i % 3 === 0){
sum = sum + i;
}
}
console.log(sum);
console.timeEnd('t2');
结论:尽量优化代码,减少continue的使用。
5、switch
switch语句中,除非明确的中断流程,否则每次条件判断后,都可以穿越到下一个case条件。这很容易造成bug。
小测验:
var a = 15;
switch(a){
case a * 1 :
console.log('a*1');
case a / 1:
console.log('a/1');
default:
console.log('a');
}
结论:不要刻意的使用case条件穿越。
6、缺少块的语句
if、while、do或for可以接受代码块,也可以接受单行语句。单行语句的形式是一种带刺的玫瑰。虽然它可以节约2个字节,但它模糊了程序的结构。
小测验:
if(1 == '0')
console.log('1 == 0');
console.log('my god');
// VS
if(1 == '0'){
console.log('1 == 0');
}
console.log('my god');
结论:避免使用模糊程序结构的单行语句。
7、++ --
递增和递减使得可以用非常简洁的风格去编码。但是它可能造成缓冲区溢出、同时往往让代码变得拥挤也不易于理解。
小测验:
var a = 1;
a = a++ + ++a;
console.log(a);
a = 1;
a = a++ + a++;
console.log(a);
结论:避免使用++ --。
8、位运算符
JavaScript有着和Java相同的一套位运算符。Java中位运算符处理整数,非常快。在JavaScript中,只有双精度浮点数,所以位运算非常慢。另外,&非常容易误写为&&,使得bug容易被隐藏起来。
小测验:
var counter = 10000;
var a = 5;
var sum = 0;
console.time('t1');
for(var i = 0; i < counter; i++){
sum += a << 1;
}
console.log(sum);
console.timeEnd('t1');
sum = 0;
console.time('t2');
for(var i = 0; i < counter; i++){
sum += a * 2;
}
console.log(sum);
console.timeEnd('t2');
结论:避免使用位运算符。
9、function语句 与 function表达式
JavaScript中既有function语句,也有function表达式,这令人困惑,似乎看起来也差不多。function语句在解析时会产生变量提升,放宽了函数必须先申明后使用的的要求。同时,JS在if语句中使用function语句也是被禁止的,但实际上大多数浏览器允许在if中使用function语句,这有可能会导致兼容性问题。
由于一个语句不能以一个函数表达式开头,如下如下写法,可以改写为另外一种形式。
function (){}(); //Error
(function(){}()); // Right
小测验:
// function语句
function fun(){}
// function表达式
var fun = function(){};
结论:合理使用function语句和function表达式。
10、类型的包装对象
JavaScript有一种类型的包装对象,如 new Number(1);这很容易令人困惑。
小测验:
var num1 = new Number(1);
var num2 = 1;
console.log(typeof num1);
console.log(num1 === num2);
结论:避免使用包装对象,如new Boolean(),new String(),new Number()等
11、new
new运算符创建一个继承于其原型的新对象,并将新创建的对象绑定给this。但是,如果忘记使用new,那么就得到一个普通的函数调用,对象属性也会被绑定到全局对象上。这不会导致什么编译警告,也没有运行警告。
根据惯例,需要用new的函数,以首字母大写命名。这能部分程度上便于我们发现错误。
小测验:
function Person(){
this.name = 'Default';
this.sex = undefiend;
}
Person();
new Person();
//更好的实现
function Person(){
if(this === window){
return new Person();
}
this.name = 'Default';
this.sex = undefiend;
}
结论:合理的避免使用new。另外可以先判断this,再做对应处理。
12、void
大部分语言中,void是一种类型,在Js中,void是一种运算符,接收一个运算数,并返回undefined
小测验: void 0 void true
结论:有限的使用void
*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
h1 {
font-size: 28px;
color: #000;
}
h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777;
font-size: 14px;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
/* IMAGES
=============================================================================*/
img {
max-width: 100%
}
-->
JavaScript之糟粕的更多相关文章
- (五)我的JavaScript系列:JavaScript的糟粕
泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...
- (六)我的JavaScript系列:更好的JavaScript之CoffeeScript
世界上的很多天才都在为构建更好的JavaScript而努力.已经有了很多尝试,其中最有前途的,无非就是CoffeeScript和TypeScript了.面对CoffeeScript,我有一见如故的感觉 ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
- CoffeeScript实现Python装潢器
在上篇Angular遇上CoffeeScript – NgComponent封装中,我们讲述了CoffeeScript这门小巧的语言,摒弃JavaScript中糟粕(“坑”)部分,并将JavaScri ...
- 我所了解的JavaScript糟粕和鸡肋
糟粕 全局变量 众所周知,全局变量在很小的程序中可能会带来方便,但随着程序变得越来大,全局变量将难以处理,全局变量将降低程序的可靠性. 在js中有3种方式定义全局变量 脱离任何函数安排一个var语句 ...
- JavaScript 毒瘤和糟粕(需要注意的地方)
简介 我想这是在我总结JavaScript系列中最为需要注意的,最为重要的内容.你必须要去了解这些问题特性,才能准备好应对措施,这真的很重要. 毒瘤 全局变量 全局变量的存在的确是带来了方便,但是我觉 ...
- 《JavaScript语言精粹》—— 读书总结
话说这本书还是同学的推荐才读的,之前感觉这本书太薄了,不值得看,没想到小身材有大智慧,书中的内容总结的还是很到位的!所以就把最后几章,精华的部分整理整理. 优美的特性 函数是顶级对象 在JS中,没有块 ...
- JavaScript语言精粹(读书笔记)
第一章 精华 1,JavaScript的函数(主要)基于词法作用域(lexical scoping)的顶级对象.强类型语言允许编译器在编译时检测错误,但弱类型很自由,无需建立复杂的类层次,不用做强制造 ...
- 向ES6看齐,用更好的JavaScript(一)
众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...
随机推荐
- oracle 和c3p0 数据库的Time_Wait 过多问题的一个解决方案。
项目是B/S模式,放在linux服务器上,tomcat和oracle11g在一台服务器上,tomcat读取数据库采用C3P0连接池,一直比较稳定,所以也没有去管.后来把tomcat放在一台win200 ...
- swift-string(字符串的一些语法)
1 isEmpty 返回一个布尔值,确定该字符串是否为空 2 hasPrefix(prefix: String) 函数检查给定的参数字符串是否以 string 为前缀 3 hasSuffix(suff ...
- 创建Chrome启动器
今天清理垃圾时不知怎么把chrome启动器删除了,现在要重新创建一个 1.在桌面创建一个chrome.exe的快捷键方式,属性更改目标为: "C:\Program Files (x86)\G ...
- 爬虫笔记(四)------关于BeautifulSoup4解析器与编码
前言:本机环境配置:ubuntu 14.10,python 2.7,BeautifulSoup4 一.解析器概述 如同前几章笔记,当我们输入: soup=BeautifulSoup(response. ...
- 安装windows服务批处理代码
批处理是DOS时代比较常用的方法之一,目前来说也是一种高效的方法,复制代码到文本文件中,保存并修改文件扩展名为“*.bat”. 安装windows服务批处理代码如下: @echo off set fi ...
- html5地理位置定位功能小析
Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- Android控件之Notification
Android通知就是让设备在屏幕最顶上那栏里面显示图标,当滑下通知栏之后可以看到列表状的通知选项,有些是"通知"类型的,有些是"正在运行"类型的," ...
- 并联机构逆运动学用MapleSim符号来解决
在多体机械中,平台的运动学分析(运动学问题)可以分为两类:正向运动学问题和逆向运动学问题.所谓正向运动学是指研究机构中一点(例如,机械手臂上终端操作机构或由并联机械操纵器支持的平台的中心)在空间中的位 ...
- OS中atomic的实现解析
OS中atomic的实现解析 转自:http://my.oschina.net/majiage/blog/267409 摘要 atomic属性线程安全,会增加一定开销,但有些时候必须自定义ato ...