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

前端之家收集整理的这篇文章主要介绍了JavaScript函数学习总结以及相关的编程习惯指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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:

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

逻辑判断

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

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

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

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

判断一个量已定义且非空,只使用:if (a !== null && a !== undefined)。

=== 和 ==

1.==用来判断两个值是否相等

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

2.===

类型+值比较

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

最佳实践:

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

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 a = function() {
};
// a()

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

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

以及

匿名函数

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关键字,用逗号代替

更好的做法

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

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

更好的做法

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

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

更好的做法

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

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

更好的做法:

5.typeof判断

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

expr:

e.g.

// 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.三元运算符 :强大且风骚

语法

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

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

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

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

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

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

9.自我调用函数

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

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

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

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

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

11.避免使用 with()

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

12.脚本放在页面底部

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

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

bad

good

14.给代码添加注释

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

15.instanceof

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

输出 "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

apply

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

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

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

猜你在找的JavaScript相关文章