JavaScript函数学习总结以及相关的编程习惯指南


Posted in Javascript onNovember 16, 2015

null 和 undefined
Undefined相当于一个变量并没有明确的被赋值(是否被赋值, 可能无心忽略, 逻辑问题) JS的怪异之处就在于undefined真的是一个可以使用的值。

> var foo;
> foo
undefined

同理,当缺失参数时 JavaScript 会分配一个 undefined:

> function id(x) { return x }
> id()
undefined

a = 1;
a !== undefined // true

a = undefined
var b
a === b //true

Null相当于变量被明确指定了没有值,而不是由于意外的原因被忽略掉了(赋值null, 正当逻辑)

参与运算
JS的null如果进入运算,真的会被解析成为0或false:

(1 + null) # 1 (1 * null) # 0 (1 * null) # Infinity

undefined进入运算,一律得到NaN:

(1 + undefined) # NaN (1 * undefined) # NaN (1 / undefined) # NaN

逻辑判断
null和undefined逻辑判断时都认为是false。

只用一个判断,就可以同时检验这两项是否为真:

//也会把 false, -0, +0, NaN 与 '' 当成“空值”
if (v) {
  // v 有值
} else {
  // v 没有值
}

但是如果碰到大坑==的时候

var foo;
console.log(foo == null); // true
console.log(foo == undefined); // true
console.log(foo === null); // false
console.log(foo === undefined); // true
console.log(null == undefined); // true

好的做法, 一律使用===

判断一个量已定义且非空,只使用:if (a !== null && a !== undefined)。
=== 和 ==
1.==用来判断两个值是否相等

当两个值类型不同时,会发生自动转换,得到的结果非常不符合直觉,这可能不是你想要的结果。

"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true

2.===

类型+值比较

"如果两边的操作数具有相同的类型和值,===返回true,!==返回false。"——《JavaScript:语言精粹》

最佳实践:

任何时候在比较操作中使用 === 和  !==
json操作

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };

var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"  */

var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
to string

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

函数对象及匿名函数
函数对象赋值

var slice_func = [].slice
//slice_func()

var a = function() {
};
// a()

var a = {
  fun : function() {
  };
}
// a.fun()

someElement.addEventListener("click", function(e) {
  // I'm anonymous!
});

以及

var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

匿名函数

from

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
to

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

最佳实践
1.定义多个变量时,省略var关键字,用逗号代替

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的做法

var someItem = 'some string',
  anotherItem = 'another string',
  oneMoreItem = 'one more string';

2.谨记,不要省略分号, 不要省略花括号

省略分号,可能导致更大的,未知的,难以发现的问题

var someItem = 'some string'
function doSomething() {
return 'something'
}

更好的做法

var someItem = 'some string';
function doSomething() {
return 'something';
}

3.使用{}代替 new Ojbect()

在JavaScript中创建对象的方法有多种。可能是传统的方法是使用”new”加构造函数,像下面这样:

var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}

更好的做法

var o = {}; //空对象
var o = {
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
  console.log(this.name);
}
};

只要把多个全局变量都整理在一个名称空间下,拟将显著降低与其他应用程序、组件或类库之间产生糟糕的相互影响的可能性。——Douglas Crockford

4.使用[]代替 new Array()

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

更好的做法:

var a = ['Joe','Plumber'];

5.typeof判断

typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefined

expr:

typeof xx === ''
typeof xx !== ''

e.g.

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量

// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以分辨出一个数组和真实的对象
typeof new Date() === 'object';

// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

typeof null === 'object'; // 从JavaScript诞生以来,一直是这样的.

6.三元运算符 :强大且风骚

语法

expression ? xxx : yyy
bad

var direction;
if(x < 200){
 direction = 1;
} else {
 direction = -1;
}
good

var direction = x < 200 ? 1 : -1;

7.使用逻辑 AND/OR 做条件判断

var foo = 10;
foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();
foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();

//默认值
a = b || 'default'
return b || c || d > 1 ? 0 : 2

8.给一个变量赋值的时候不要忘记使用var关键字

给一个未定义的变量赋值会导致创建一个全局变量。要避免全局变量

9.自我调用的函数

自调用匿名函数(Self-Invoked Anonymous Function)或者即时调用函数表达式(IIFE-Immediately Invoked Function Expression)。这是一个在创建后立即自动执行的函数

(function(){
  // some private code that will be executed automatically
})();

(function(a,b){
  var result = a+b;
  return result;
})(10,20)

10.避免使用 eval() 和 Function 构造函数

Eval=邪恶, 不仅大幅降低脚本的性能(译注:JIT编译器无法预知字符串内容,而无法预编译和优化),而且这也会带来巨大的安全风险,因为这样付给要执行的文本太高的权限,避而远之

使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

11.避免使用 with()

使用 with() 会插入一个全局变量。因此,同名的变量会被覆盖值而引起不必要的麻烦

12.脚本放在页面的底部

记住——首要目标是让页面尽可能快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间

13.避免在For语句内声明变量

bad

for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

good

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

14.给代码添加注释

// 循环数组,输出每项名字(译者注:这样的注释似乎有点多余吧).
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}

15.instanceof

instanceof 方法要求开发者明确地确认对象为某特定类型

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String);  // 输出 "true"

// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承

var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

16.apply/call

someFn.call(this, arg1, arg2, arg3);
someFn.apply(this, [arg1, arg2, arg3]);

apply

Function.apply(obj,args)方法能接收两个参数

obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args-->arguments)
call

Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj:这个对象将代替Function类里this对象
params:这个是一个参数列表
使用哪个取决于参数的类型

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
js实现获取div坐标的方法
Nov 16 #Javascript
跟我学习javascript的闭包
Nov 16 #Javascript
jQuery链式操作实例分析
Nov 16 #Javascript
javascript伸缩型菜单实现代码
Nov 16 #Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 #Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 #Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python学生管理系统开发
2019/01/30 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python空元组在all中返回结果详解
2020/12/15 Python
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
视图的作用
2014/12/19 面试题
秘书英文求职信范文
2014/01/31 职场文书
聚美优品励志广告词
2014/03/14 职场文书
保险公司开门红口号
2014/06/21 职场文书
活动总结格式
2014/08/30 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
工会积极分子个人总结
2015/03/03 职场文书
小学国庆节活动总结
2015/03/23 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript