Java Web 随笔：简单的JavaScript快速入门

Posted 2022-11-13 莫欺丶少年穷

简单的javascript快速入门

1.变量

学习语言往往会从变量入手，需要注意三个方面：变量的定义，变量的类型，变量的类型转换，掌握这三方面则一个语言的变量使用就能快速上手。

1.1变量的定义

JavaScript的变量定义有两种方式：

• 在第一次为变量赋值时定义
• 使用关键字var定义

第一种如下：

name = "姓名";       //定义name变量
age = 21;           //定义age变量
alert(name);        //显示name变量的值
alert(age);         //显示age变量的值

第二种如下：

var name = "姓名";       //定义name变量
var age = 21;           //定义age变量
alert(name);           //显示name变量的值
alert(age);            //显示age变量的值

var num1 = 123 ,  sStr1 = "abc";  //使用var定义多个变量，用,隔开即可

对比两种定义方式发现定义方式类似，只不过第二种多了显示声明var，这样的好处在于使用一些IDE时在Content Assist时显示当前可用变量时会显示通过var定义的变量，未使用var定义的不会显示在变量列表中，这样不便于追踪查看变量。建议使用第二种方法定义变量。

JavaScript定义变量时变量命名需要遵循以下两个规则：

• 第一个字符必须是字母、下划线（_）或美元符号（$）
• 其他字符可以是下划线、美元符号、热和字母或数字字符

1.2变量的类型

JavaScript有5种原始类型：Undefined、Null、Boolean、Number和String。在JavaScript中可以使用typeof来查看变量的原始类型。如下：

var num1 = 20;          //定义整型变量num1
var str1 = "abc";       //定义字符串变量str1
alert(typeof num1);     //输出为number
alert(typeof str1);     //输出为string

在使用typeof查看原始类型时，可以返回下面5个值中的一个：

1. undefined：变量是Undefined，即未未声明或未赋值。
2. boolean：变量是Boolean类型。
3. number：变量是数值型，包括整型、浮点型等。
4. string：变量是字符串型。
5. object：变量是引用类型或NULL类型。

1.2.1 Undefined类型

Undefined类型只有一个值，就是undefined，如果一个变量未使用var声明或者未第一次赋值，则其类型为“undefined”，判断是否为Undefined类型需要注意，如果直接用变量名判断，则对等为undefined：

var name;                   //定义name变量
if(name == undefined)
    alert("name未初始化");    //弹出未初始化

如果使用typeof判断，则对等未”undefined”，这是因为typeof返回值为字符串，需要使用undefined的字符串形式：

alert(typeof abc);           //abc未定义，则弹出undefined
if(typeof abc == "undefined")
    alert("abc未定义");       //弹出abc未定义

需要注意一点：未使用var定义的变量不能使用if(name == undefined)的形式判断类型是否为Undefined。

1.2.2 Boolean类型

布尔类型是JavaScript常用类型之一，其他语言类似，只有两个值：true，false，也可以用1表示true，0表示false。

var b1 = true;             //定义b1变量
var b2 = false;            //定义b2变量
alert(b1);
alert(b2);

if(b1 == 1)
    alert("b1的值为true");
if(b2 == 0)
    alert("b2的值为false");

1.2.3 Number类型

Number类型指数值型，与其他语言有些差异，JavaScript中数值类型统一为Number，而非特定的int，float等。不过在使用时我们可以正常使用，只要注意赋值为整型或浮点型即可，要表示浮点型，必须包括小数点和小数点后的至少一位数字，例如使用1.0，不能写为1。

//整型
var num1 = 123;           //十进制数字123
var num2 = 0213;          //八进制数，以0开头
var num3 = 0xFE;          //十六进制数，以0x开头

alert(num1);              //输出为123
alert(num2);              //输出为十进制数139
alert(num3);              //输出为十进制数254

//浮点型
var fNum1 = 23.0;         //浮点型数字23.0
var fNum2 = 12.34;        //浮点型数字12.34
var fNum3 = 1.234e8;      //浮点型数字1.234*10^8,科学计数法中，e表示10^
var fNum4 = 1.234e-8;     //浮点星数字1.234*10^-8

alert(fNum1);
alert(fNum2);
alert(fNum3);
alert(fNum4);

需要注意的是：在使用八进制和十六进制数时，虽可以表示八进制和十六进制数，但所有的数学计算的值均是十进制的数。

1.2.4 String类型

字符串类型使用方法与其他语言类似，可以使用双引号（”）或单引号（’）表示，字符串长度用length来获取：

var str1 = "abc";
var str2 = "北京";

alert(str1.length);     //长度为3
alert(str2.length);     //长度为2

1.3 变量的类型转换

1.3.1 其他类型转换为String类型

在JavaScript中，任何类型的变量都有一个toString方法，通过这个方法可以将对应类型的值转换成字符串，如下所示：

var num1 = 123;                  //定义整型变量
var str1 = num1.toString();
alert(str1);                     //输出123

var num1 = 0345;                  //定义八进制整型变量
var str1 = num1.toString();
alert(str1);                     //输出十进制结果229，十六进制同理

//显示二进制、八进制或十六进制的变量值，可加参数
var num1 = 123;                  //定义整型变量
alert(num1.toString(2));         //输出二进制数1111011
alert(num1.toString(8));         //输出八进制数173
alert(num1.toString(16));        //输出十六进制数7b

1.3.1 String类型转换为其他类型

在JavaScript中，提供了两个函数来讲字符串转换为数字，一次是parseInt和parseFloat，前者转换为整型，后者转化为浮点型。

var num1 = parseInt("1234xyz");   //返回1234,与后面的强制转换区分，强制转换为NaN，Not a Number，不是数字
var num2 = parseInt("0123");  //返回十进制数83
var num3 = parseInt("43.4");  //返回43

//按二进制、八进制、十六进制转换为整数
var num4 = parseInt("110101",2);   //按二进制转换，返回53
var num5 = parseInt("110101",8);   //按八进制转换，返回36929
var num6 = parseInt("110101",16);   //按十六进制转换，返回1114369

//布尔变量
var num7 = parseInt("false");    //返回NaN


//浮点型
var f1 = parseFloat("1234xyz");          //返回1234.0
var f2 = parseFloat("0xAB");             //返回0
var f3 = parseFloat("22.4");             //返回22.4
var f4 = parseFloat("22.4.11");          //返回22.4
var f5 = parseFloat("0123");             //返回123
var f6 = parseFloat("xyz");              //返回NaN

此外，JavaScript还可以使用强制类型转换进行转换，有3种常用的强制转换：

• Boolean(value)：把value值转换成Boolean型。
• Number(value)：把value值转换成数字（整数或浮点数）。
• String(value)：把value值转换成字符串。

//强制转换成Boolean类型
var b1 = Boolean("");             //返回false
var b2 = Boolean("abc");          //返回true，非空字符串返回true
var b3 = Boolean(100);            //返回true，非0数返回true
var b4 = Boolean(0);              //返回false
var b5 = Boolean(null);           //返回false
var b6 = Boolean(new String());   //返回true

//强制转换成Number类型
//需要注意的是，强制转换成数值类型与parseInt和parseFloat基本类似，但不同的是转换的是整个值，而非部分值，例如"123a"，parseInt是123，而Number强制转换是NaN。
var n1 = Number(false);          //返回0
var n2 = Number(true);           //返回1
var n3 = Number(undefined);      //返回NaN
var n4 = Number(null);           //返回0
var n5 = Number("12.3");         //返回12.3
var n6 = Number("123");          //返回123
var n7 = Number("123abc");       //返回NaN
var n8 = Number(new Object());   //返回NaN

2.函数及函数调用

2.1 函数声明

函数声明的基本语法如下：

function funName(arg0,arg1,...,argN)

    statements

函数参数可以为空，也可以为多个，多个之间用”，”隔开：

function hello(name)

    alert("你好 " + name);

或者如果你想实现动态参数，即想动态加参数，则可以使用arguments对象实现，在函数声明时并不需要定义参数，而在函数体内使用arguments对象来获得当前函数的参数值，如下：

function sum()

    var n = 0;
    //从arguments对象中取出sum函数的参数值，并相加
    for(var i = 0; i < arguments.length; i++)
        n += arguments[i];
    
    return n;

需要注意的是，JavaScript是弱语言类型，函数不能重载，如果函数重名，则后面的会覆盖前面的：

funcrion fun1()
    alert("Hello World");

function fun1()
    alert("Hello JavaScript");


fun1();  //显示Hello JavaScript

此外，还有一种不太常用的方法，因为在JavaScript中，一个函数相当于一个对象，可以使用Function类来建立任何函数，语法如下：

var funName = new Function(arg1,arg2,...,argN,functionBody);

例如两个数求和函数：

var funSum = new Function("n1","n2","return n1+n2");

2.2 函数的调用

以此调用前面声明的hello、sum、funSum ：

hello("World");
alert(sum(1,2,3));
alert(sum(-1,2,3,5));
alert(funSum(-3,4));

3.类和对象

3.1 动态添加类成员

JavaScript对象使用new关键字创建，对象的属性可以动态加入：

var oPerson = new Object();    //创建一个对象变量
oPerson.id = '001';            //定义id属性
oPerson.name = '莫欺';          //定义name属性
oPerson.age = 23;              //定义age属性

//定义sayHello函数
oPerson.sayHello()
    alert("Hello " + this.name);
;

oPerson.sayHello();            //调用sayHello方法

我们可以通过工厂函数的方式来创建Person对象，这样更加方便和工程化：

function createPerson(id,name,age)

    var oPerson = new Object;
    oPerson.id = id;
    oPerson.name = name;
    oPerson.age = age;

    oPerson.sayHello()
        alert("Hello " + this.name);
    
    return oPerson;

可以注意，这里虽然将其封装为一个函数，但类的声明还是在里面，我们可以将其抽出，使用构造函数方式更为简洁明了。

3.2 构造函数方式

function sayHello()
    alert("Hello " + this.name);

function Person(id,name,age)

    this.id = id;
    this.name = name;
    this.age = age;
    this.sayHello = sayHello;


var oPerson = new Person('001','Moqi',23);
oPerson.sayHello();

3.3 原型方式

需要注意的是，构造方法方式创建好新对象后属性和方法相对固定，不便于扩展，如果是扩展需求高的对象，可使用对象的prototype属性，这个属性可以看成是创建新对象所依赖的原型，可以使用空构造函数来创建一个空类，然后利用prototype属性为其添加新的成员（属性和方法）：

//空构造函数
function Person()



//添加成员
Person.prototype.id = '001';
Person.prototype.name = 'Moqi';
Person.prototype.age = 23;
Person.prototype.sayHello = function()

    alert("Hello " + this.name);


var oPerson = new Person();
oPerson.sayHello();

当需要添加新的方法时：

Person.prototype.eat = function()

    alert("吃饭");


var oPerson = new Person();
oPerson.eat();