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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
浅析js封装和作用域
Jul 09 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
php数组键值用法实例分析
2015/02/27 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python 登录网站详解及实例
2017/04/11 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python pandas模块基础学习详解
2019/07/03 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python 项目目录结构设置
2020/02/14 Python
基于python实现计算两组数据P值
2020/07/10 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
门卫工作岗位职责
2013/12/17 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
结婚保证书范文
2014/04/29 职场文书
医院院务公开实施方案
2014/05/03 职场文书
村主任当选感言
2015/08/01 职场文书
暑假生活随笔
2015/08/15 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android