Web开发初探之JavaScript 快速入门 (2)

当 foo 的值为 true 时,表达式会返回 function1() 的执行结果,反之会返回 function2() 的执行结果。当我们需要根据条件来为变量赋值时,这种写法就非常方便:

var n = foo ? 1 : 2;

上面的语句可以表述为:当 foo 是 true 时,将 n 的值赋为 1,否则赋为 2。

当然我们还可以使用 else if 来处理更多的判断类型:

if (foo) { function1(); } else if (bar) { function2(); } else { function3(); } JavaScript 数组(Array)

JavaScript 里像这样声明数组:

a = [123, 456, 789];

像这样访问数组中的成员:(从0开始索引)

a[1]; // 456 JavaScript 对象(Object)

我们像这样声明一个对象(object):

myProfile = { name: "Jare Guo", email: "blabla@gmail.com", \'zip code\': 12345, isInvited: true }

在对象声明的语法(myProfile = {...})之中,有一组用逗号相隔的键值对。每一对都包括一个 key(字符串类型,有时候会用双引号包裹)和一个 value(可以是任何类型:包括 string,number,boolean,变量名,数组,对象甚至是函数)。我们管这样的一对键值叫做对象的属性(property),key 是属性名,value 是属性值。

你可以在 value 中嵌套其他对象,或者由一组对象组成的数组:

myProfile = { name: "Jare Guo", email: "blabla@gmail.com", city: "Xiamen", points: 1234, isInvited: true, friends: [ { name: "Johnny", email: "blablabla@gmail.com" }, { name: "Nantas", email: "piapiapia@gmail.com" } ] }

访问对象的某个属性非常简单,我们只要使用 dot 语法就可以了,还可以和数组成员的访问结合起来:

myProfile.name; // Jare Guo myProfile.friends[1].name; // Nantas

JavaScript 中的对象无处不在,在函数的参数传递中也会大量使用,比如在 Cocos Creator 中,我们就可以像这样定义 FireClass 对象:

var MyComponent = cc.Class({ extends: cc.Component });

{extends: cc.Component} 这就是一个用做函数参数的对象。在 JavaScript 中大多数情况我们使用对象时都不一定要为他命名,很可能会像这样直接使用。

匿名函数

我们之前试过了用变量声明的语法来定义函数:

myFunction = function (myArgument) { // do something }

再复习一下将函数作为参数传入其他函数调用中的用法:

square = function (a) { return a * a; } applyOperation = function (f, a) { return f(a); } applyOperation(square, 10); // 100

我们还见识了 JavaScript 的语法是多么喜欢偷懒,所以我们就可以用这样的方式代替上面的多个函数声明:

applyOperation = function (f, a) { return f(a); } applyOperation( function(a){ return a*a; }, 10 ) // 100

我们这次并没有声明 square 函数,并将 square 作为参数传递,而是在参数的位置直接写了一个新的函数体,这样的做法被称为匿名函数,在 JavaScript 中是最为广泛使用的模式。

链式语法

下面我们介绍一种在数组和字符串操作中常用的语法:

var myArray = [123, 456]; myArray.push(789) // 123, 456, 789 var myString = "abcdef"; myString.replace("a", "z"); // "zbcdef"

上面代码中的点符号表示“调用 myString 字符串对象的 replace 函数,并且传递 a 和 z 作为参数,然后获得返回值。

使用点符号的表达式,最大的优点是你可以把多项任务链接在一个表达式里,当然前提是每个调用的函数必须有合适的返回值。我们不会过多介绍如何定义可链接的函数,但是使用它们是非常简单的,只要使用以下的模式:something.function1().function2().function3()

链条中的每个环节都会接到一个初始值,调用一个函数,然后把函数执行结果传递到下一环节:

var n = 5; n.double().square(); // 100 this

this 可能是 JavaScript 中最难以理解和掌握的概念了。

简单地说,this 关键字能让你访问正在处理的对象:就像变色龙一样,this 也会随着执行环境的变化而变化。

解释 this 的原理是很复杂的,不妨让我们使用两种工具来帮助我们在实践中理解 this 的值:

首先是最普通又最常用的 console.log(),它能够将对象的信息输出到浏览器的控制台里。在每个函数体开始的地方加入一个 console.log(),确保我们了解当时运行环境下正在处理的对象是什么。

myFunction = function (a, b) { console.log(this); // do something }

另外一个方法是将 this 赋值给另外一个变量:

myFunction = function (a, b) { var myObject = this; // do something }

乍一看好像这样子并没有什么作用,实际上它允许你安全的使用 myObject 这个变量来指代最初执行函数的对象,而不用担心在后面的代码中 this 会变成其他东西。

关于 JavaScript 里 this 的详细原理说明,请参考这篇文章 this 的值到底是什么?一次说清楚。

运算符

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgzxzd.html