1、变量介绍

概念：

变量是程序在编写过程中出现的一些符号标记。

作用：

变量类似一个容器，可以承载或代表某一时刻的数据。

优势：

通过变量，可以更加直观、方便、灵活的操作程序中的数据。

变量的命名规则：

1、变量由字母、数字、下划线、美元符号组合而成
2、不能以数字开头
3、不能使用JavaScript的关键字和保留字
4、变量区分大小写

例如下面列举了不同情况的变量命名：

1、合法的变量名

var abc = 1;
var _1 = 100;
var obj = new PIXI.Application(500,500);

2、不合法的变量名

var n-1 = 100;
var 1num = 200;
var 2.m = 300;
注：变量的命名，不能以数字开头；不能出现除了下划线、美元符号以外的其他特殊字符。

3、变量的命名区分大小写

var name = “Tom”;
var Name = “Jack”;
var NAME = “Rose”;
注：JavaScript语言区分大小写，name、Name、NAME是三个不同的变量。

2、对象类型变量

在 JavaScript 语言中，变量的类型可以分为两大类，分别为 基础数据类型 和 对象类型 。

示例

对象类型的变量，都是通过 new 关键字创建的。例如下边的示例，分别创建了三个不同的对象类型变量。

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.x = 150;
plane.y = 200;
app.stage.addChild(plane);
var score = new PIXI.Text("得分：100");
score.text = "飞机大战游戏真好玩！";
app.stage.addChild(score);

代码讲解

1、创建应用程序对象

var app = new PIXI.Application(400,400);
创建应用程序对象，并存储到 app 变量中，所以 app 是对象类型的变量。
new PIXI.Application(400,400)：通过 new 关键字，创建应用程序对象。
var app：定义名称为 app 的变量，用于存储创建的应用程序对象。

2、创建图片对象

var plane = new PIXI.Sprite.fromImage(“res/plane_blue_01.png”);
创建图片对象，并存储到 plane 变量中，所以 plane 是对象类型的变量。
new PIXI.Sprite.fromImage(“res/plane_blue_01.png”)：通过 new 关键字，创建图片对象。
var plane：定义名称为 plane 的变量，用于存储创建的图片对象。

3、创建文本对象

var score = new PIXI.Text(“得分：100”);
创建文本对象，并存储到 score 变量中，所以 score 是对象类型的变量。
new PIXI.Text(“得分：100”)：通过 new 关键字，创建文本对象。
var score：定义名称为 score 的变量，用于存储创建的文本对象。

关于调用属性和方法的语法格式如下：

对象类型的变量，都有各自的 属性 和 方法 。

调用属性语法格式：

1、设置属性值
对象.属性名 = 值;
2、获得属性值
对象.属性名
注：属性的使用，类似于变量的赋值与取值。

调用方法语法格式：

对象.方法名(参数…)
注：方法的使用，类似于函数的调用。
例如下边的示例，演示了图片对象属性和方法的使用。

示例

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.x = 200;
plane.y = 200;
app.stage.addChild(plane);

var planeRight = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeRight.x = 100;
planeRight.y = 60;
plane.addChild(planeRight);

var planeLeft = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeLeft.x = -100;
planeLeft.y = 60;
plane.addChild(planeLeft);

代码讲解

1、创建图片对象
var plane = new PIXI.Sprite.fromImage(“res/plane_blue_01.png”);
创建图片对象，并存储到 plane 变量中，所以 plane 是对象类型的变量。
2、设置图片对象的属性
plane.x = 200;
plane.y = 200;
plane 变量中存储是的图片对象，通过 plane 变量可以直接调用图片对象的属性和方法。
plane.x = 200：设置图片对象中，名称为 x 的属性值，将该属性值设置为 200。
plane.y = 200：设置图片对象中，名称为 y 的属性值，将该属性值设置为 200。
3、调用图片对象的方法
plane.addChild(planeRight);
plane 变量中存储是的图片对象，通过 plane 变量调用图片对象中的 addChild() 方法。
planeRight：addChild()方法的参数。
注意：不同的对象，可能会拥有不同的属性和方法。例如下表中的 text、style 属性，就是文本对象的特有属性。

4、基本数据类型变量

JavaScript 中的数据类型，除了对象类型以外，还有两个比较常用的基本数据类型，分别为：Number（数字类型）和 Boolean（布尔类型）。基本数据类型变量最明显的特点就是没有属性和方法。
Number（数字类型）的值，包括：整数、小数。
Boolean（布尔类型）的值，只有 true 或 false 两个值。true 代表真、false 代表假，该类型的值通常用于充当判断语句的条件。

5、对象类型变量扩展

任何一个对象，都是由两部分内容组成，分别为：属性、方法。而属性又与变量类似，都是用于存储一些数据。
变量，既可以存储基本类型的数据，也可以存储对象类型的数据。
基本类型变量：变量中存储的是基本类型的数据。例如：数字，布尔等。
对象类型变量：变量中存储的是对象类型的数据。例如：应用程序对象、图片对象、文本对象等。
属性也是既可以存储基本类型的数据，也可以存储对象类型的数据。
基本类型属性：属性中存储的是基本类型的数据。
对象类型属性：属性中存储的是对象类型的数据。

示例

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

var score = new PIXI.Text("得分：1000");
score.anchor.set(0.5,0.5);
score.x = 200;
score.y = 200;
score.style.fill = 0xffffff;
app.stage.addChild(score);

代码讲解

1、文本对象的 x、y 属性

score.x = 200;
score.y = 200;
调用文本对象的基本类型属性 x、y。
score：代表当前的文本对象。
score.x：x 是 score 文本对象的基本类型属性，用于存储一个数字。
score.y：y 是 score 文本对象的基本类型属性，用于存储一个数字。

2、文本对象的 anchor 属性

score.anchor.set(0.5,0.5);
调用文本对象的对象类型属性 anchor。
score：代表当前的文本对象。
score.anchor：anchor 是 score 文本对象的属性，但 anchor 本身也是一个对象，所以 anchor也有自己的属性和方法。
score.anchor.set(0.5,0.5)：调用 anchor 对象的 set 方法。

3、文本对象的 style 属性

score.style.fill = 0xffffff;
调用文本对象的对象类型属性 style。
score.style：style 是 score 文本对象的属性，但 style 本身也是一个对象，所以 style 也有自己的属性和方法。
score.style.fill = 0xffffff：调用 style 对象的 fill 属性。

4、应用程序对象的 stage 属性

app.stage.addChild(score);
调用应用程序对象的对象类型属性 stage。
app：代表当前的应用程序对象。
app.stage：stage 是 app 应用程序对象的属性。但 stage 本身也是一个对象，所以 stage也有自己的属性和方法。
app.stage.addChild(score)：调用 stage 对象的 addChild 方法。

6、变量类型

查看变量类型:

typeof(变量/数据值);
或
typeof 变量/数据值;
通过 typeof 可以获取参数中的数据类型。
typeof 返回值有 number, boolean, string, null, undefined, object 等。

代码

// 定义变量
var app = new PIXI.Application(500,500);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
var arr = [1,2,3,4,5];
var num = 10;
var str = "hello";

// 查看变量类型并打印
console.log(typeof(app));     // object
console.log(typeof(plane));   // object
console.log(typeof(arr));     // object
console.log(typeof(num));     // number
console.log(typeof(str));     // string
console.log(typeof(true));    // boolean

代码讲解

1. 定义变量

定义保存不同类型数据的变量
var app = new PIXI.Application(500,500);
var plane = new PIXI.Sprite.fromImage(“res/plane_blue_01.png”);
var arr = [1,2,3,4,5];
var num = 10;
var str = “hello”;

2. 打印测试结果

console.log(typeof(true));
通过 typeof() 获取变量的类型并打印输出
输出结果为 object 类型
console.log(typeof(app));
输出结果为 object 类型
console.log(typeof(plane));
输出结果为 object 类型
console.log(typeof(arr));
输出结果为 number 类型
console.log(typeof(num));
输出结果为 string 类型
console.log(typeof(str));
输出结果为 boolean 类型

2、类型转换

基本类型转换成字符串类型

代码（布尔型与数字类型-转换为字符串类型）

var n = 100;
var b = true;
console.log(typeof(n)); // Number
console.log(typeof(b)); // Boolean

var sn1 = n.toString();
var sn2 = String(n);
var sb1 = b.toString();
var sb2 = String(b);

console.log(typeof(sn1)); // String
console.log(typeof(sn2)); // String
console.log(typeof(sb1)); // String
console.log(typeof(sb2)); // String

代码讲解

var sn1 = n.toString();
var sb1 = b.toString();
通过 toString() 方法将数据转换成字符串类型
var sn2 = String(n);
var sb2 = String(b);
通过 String(参数) 方法将数据转换成字符串类型

字符串类型转成数字类型

代码

var sn = "3.1415926";
var n1 = parseInt(sn);    // 3
var n2 = parseFloat(sn);  // 3.1415926
var n3 = Number(sn);    // 3.1415926

代码讲解

var n1 = parseInt(sn);
将数字字符串转换成整数，当数字字符串中包含非数字字符时，
只转换到非数字之前，如果第一个数字为非数字字符，值为 NaN。

var n2 = parseFloat(sn);
将数字字符串转换成实数，当数字字符串中包含非数字字符时，
只转换到非数字之前，如果第一个数字为非数字字符，值为 NaN。

var n3 = Number(sn);
将数字字符串转换成数字，当数字字符串中包含非数字字符时，值为 NaN。

布尔类型转换为数字类型

代码

var a = Number(true);
console.log(a);
var b = Number(false);
console.log(b);

代码讲解

var a = Number(true);
var b = Number(false);
使用 Number() 可以将布尔类型数据转换为数字
true 转换为 1
false 转换为 0
不能使用 parseInt()，parseFloat() 对布尔类型数据进行转换。

数字转换为布尔类型

代码

console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(0.0));
console.log(Boolean(1.0));

代码讲解

通过 Boolean() 将数字转换为布尔类型。
0 会转换为false
非0 会转换为 true

字符串转换为布尔类型

代码

console.log(Boolean(''));
console.log(Boolean(""));
console.log(Boolean("a"));
console.log(Boolean('0'));
console.log(Boolean("Hello"));

代码讲解

通过 Boolean() 将字符串转换为布尔类型。
空字符串会转换为 false
非空字符串会转换为 true

字符串自动类型转换

代码

var s1 = 'hello' + 100;
console.log(s1);

var s2 = 'hello' + 100 + 200;
console.log(s2);

var s3 = 100 + "Hello";
console.log(s3);

var s4 = 100 + 200 + "Hello";
console.log(s4);

代码讲解

使用 + 可以将字符串和非字符串数据进行拼接。
在拼接时，会将非字符串类型数据先转换为字符串，然后进行拼接 。

var s1 = ‘hello’ + 100;
s1 的结果为字符串 “Hello” 与 转换为数字字符串的 100 进行拼接 ，得到 “Hello100”

var s2 = ‘hello’ + 100 + 200;
s2 的结果根据运算符自左向右结合性， 先计算得到结果 “Hello100”
再与转换后的数字字符串 200 拼接，所以结果为 “Hello100200”

var s3 = 100 + “Hello”;
s3 的结果是将转换后的数字字符串 100 与 “Hello” 进行拼接 ,得到 “100Hello”

var s4 = 100 + 200 + “Hello”;
s4 的结果同样自左向右进行计算，但因为 100 和 200 都为数字,所以计算后得到 300
再将结果 300 转换为数字字符串与 “Hello” 拼接，得到 “300Hello”