首页 >

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

web前端|js教程JavaScript函数学习总结以及相关的编程习惯指南
JavaScript,函数
web前端-js教程
null 和 undefined
Undefined相当于一个变量并没有明确的被赋值(是否被赋值, 可能无心忽略, 逻辑问题) JS的怪异之处就在于undefined真的是一个可以使用的值。
畅销源码易语言,ubuntu端口连接失败,tomcat入门教程第三讲,京东手机爬虫软件,php程序设计基础教程学习,高级高阶seolzw
> var foo;> fooundefined
同理,当缺失参数时 JavaScript 会分配一个 undefined:
动态网站开发投票源码,ubuntu归档镜像源,tomcat设置使用g1,idel爬虫教程,v显示不同版本的php,亚马逊seo站点lzw
> function id(x) { return x }> id()undefineda = 1;a !== undefined // truea = undefinedvar ba === b //true
Null相当于变量被明确指定了没有值,而不是由于意外的原因被忽略掉了(赋值null, 正当逻辑)
dnf.exe 源码,vscode插件怎么改,ubuntu吃内存,tomcat端口在哪配置,汉语爬虫python,php 升级补丁,宁河区常规seo服务成本,动漫asp网站源码,好的网站模板下载 迅雷下载lzw
参与运算
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); // trueconsole.log(foo == undefined); // trueconsole.log(foo === null); // falseconsole.log(foo === undefined); // trueconsole.log(null == undefined); // true
好的做法, 一律使用===

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

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

"" == "0" // false0 == "" // true0 == "0" // truefalse == "false" // falsefalse == "0" // truefalse == undefined // falsefalse == null // falsenull == 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 stringvar 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"
匿名函数

fromvar name = 'Chris';var age = '34';var status = 'single';function createMember(){// [...]}function getMemberDetails(){// [...]}tovar 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.

// Numberstypeof 37 === 'number';typeof 3.14 === 'number';typeof Infinity === 'number';typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"// Stringstypeof "" === 'string';typeof "bla" === 'string';typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串// Booleanstypeof true === 'boolean';typeof false === 'boolean';// Undefinedtypeof undefined === 'undefined';typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量// Objectstypeof {a:1} === 'object';typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以分辨出一个数组和真实的对象typeof new Date() === 'object';// Functionstypeof function(){} === 'function';typeof Math.sin === 'function';typeof null === 'object'; // 从JavaScript诞生以来,一直是这样的.
6.三元运算符 :强大且风骚

语法

expression ? xxx : yyybadvar direction;if(x < 200){ direction = 1;} else { direction = -1;}goodvar 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)//trueconsole.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:这个是一个参数列表
使用哪个取决于参数的类型


  • 暂无相关文章
  • Posted in 未分类