zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript极简入门教程(一):基础篇

2023-06-13 09:15:29 时间

阅读本文需要有其他语言的编程经验。

开始学习之前

大多数的编程语言都存在好的部分和差的部分。本文只讲述JavaScript中好的部分,这是因为:

1.仅仅学习好的部分能够缩短学习时间
2.编写的代码更加健壮
3.编写的代码更加易读
4.编写的代码更加易于维护

弱类型和强类型

通常来说,越早的修复错误,为之付出的代价就越小。强类型语言的编译器可以在编译时检查某些错误。而JavaScript是一门弱类型语言,其解释器无法检查类型错误,但实践表明:

1.强类型能够避免的错误并不是那些关键性错误
2.弱类型能够带来灵活性,也无需背上强类型的包袱

JavaScript相关标准

ECMA-262标准定义了语言ECMAScript。我们所熟知的JavaScript和ActionScript都是基于ECMAScript的。目前主流使用ECMA-262第五版,Google的V8引擎就是对此的实现。

HelloJavaScript

JavaScript是一门脚本语言,需要解释器解释执行。你可以在浏览器中解释执行JavaScript或者直接使用node.js,node.js整合了Google的V8JavaScript引擎。由于node.js使用非常方便,由此,这里我使用node.js来解释执行JavaScript。现在看第一个JavaScript程序:

复制代码代码如下:

//test.js
console.log("HelloJavaScript");

执行此程序:

复制代码代码如下:

nodetest.js

语法

注释

JavaScript使用和C++相同的注释方式,//用于单行注释,/**/用于多行注释。

数字类型

JavaScript仅有一种数字类型,也就是64位浮点数。数字类型有两个特殊的值NaN和Infinity,NaN的含义为notanumber(不是一个数),使用函数isNaN检查是否为NaN,值Infinity表示无穷大。在Math对象中,有一组操作数字的方法,例如:Math.floor方法用于向下取整。

字符串

字符串literal可以被包裹在单引号或者双引号中,转义字符使用\(和其他很多语言没有什么不同)。JavaScript中每个字符都是两个字节,其使用Unicode字符集。字符串有一个length属性:

复制代码代码如下:
"Hello".length//值为5,注意不是"Hello".length()

字符串是不可以改变的(和Lua一样),除了这里说的length属性,还有一些方法,例如:

复制代码代码如下:
"cat".toUpperCase()==="CAT"

语句

var语句用于声明局部变量,否则变量为全局变量,未初始化的变量的值为undefined:

复制代码代码如下:
functionf(){
   varlocalVar=123;
   globalVar=456;
   vari;//i的值为undefined
};
 
f();
 
console.log(globalVar);//ok
console.log(localVar);//错误,localVar没有被定义

由{}包裹的一组语句被叫做语句块(Block),和其他语言不同的是,JavaScript中的函数会而块不会创建新的作用域,例如:

复制代码代码如下:
{
   varv=123;
}
console.log(v);//ok

if语句

复制代码代码如下:
if(expression)
   statement

或者

复制代码代码如下:
if(expression)
   statement1
else
   statement2

或者

复制代码代码如下:
if(expression1)
   statement1
elseif(expression2)
   statement2
elseif(expression3)
   statement3
else
   statement4

if语句通过判断表达式的值为真或假来决定执行或者跳过某些语句。在JavaScript中以下值为假(其他值均为真):

1.false
2.null
3.undefined
4.空字符串
5.0
6.NaN

if中的statement可以是一个语句,也可以是一个语句块。

switch语句

复制代码代码如下:
switch(n){
   case1://如果n等于1
   //执行代码块
   break;
   case2://如果n等于2
   //执行代码块
   break;
   default://如果n不为1也不为2
   //执行代码块
   break;
}

这里的break用于退出循环语句或者switch语句。在JavaScript中,比较两个值是否相等有两个操作符:

1.==(对应!=操作符),相等,两个操作数类型不同时,此运算符尝试操作数类型转换后再进行比较,例如:

复制代码代码如下:
varx=1;
x==1;//true
x=="1";//true

2.===(对应!==操作符),完全相等,比较两个操作数,不进行操作数类型转换,例如:

复制代码代码如下:
varx=1;
x===1;//true
x==="1";//false

需要注意的是NaN和任何值都不相等,如果x为NaN,那么x!==x(仅对NaN成立),我们可以这样实现isNaN函数:

复制代码代码如下:
functionisNaN(n){
   returnn!==n;
}

上面switch语句,转换为if语句为:

复制代码代码如下:
if(n===1)
   //...
elseif(n===2)
   //...
else
   //...

while和do-while语句

复制代码代码如下:
while(expression)
   statement

如果expression为真则重复执行statement直到expression为假。

复制代码代码如下:
do
   statement
while(expression);

类似while循环,只是先执行statement,然后再检查条件expression。

for语句

复制代码代码如下:
for(initialize;test;increment)
   statement

首先initialize被执行一次(常用来初始化循环变量),然后进行test条件测试(常用来测试循环变量),如果test条件为假则停止循环,否则执行statement,然后执行increment(常用来更新循环变量),接着又进行test条件测试,如此循环执行下去。使用范例:

复制代码代码如下:
for(vari=0;i<5;++i){
   console.log(i);
}

for的另外一种形式被用于枚举一个对象的所有属性名:

复制代码代码如下:
for(variableinobject)
   statement

范例:

复制代码代码如下:
varobj={
   a:1,
   b:2,
   c:3
};
 
for(varnameinobj)
   console.log(name);

需要注意的是,我们通过hasOwnProperty方法来检查属性名是该对象的,还是从原型链(prototypechain,prototype会在下一篇中介绍)中找到的:

复制代码代码如下:
for(varinobj){
   if(obj.hasOwnProperty(var)){
       //...
   }
}

return语句

return语句用于让函数返回一个值,如果函数没有显式的使用return,那么返回undefined:

复制代码代码如下:
functionf(){}
varv=f();//v===undefined

?:条件操作符(JavaScript中唯一的一个三元操作符)
?:条件操作符在很多编程语言中都存在,在第一个操作数为真时,操作符返回第二个操作数的值,否则返回第三个操作数的值,使用范例:

复制代码代码如下:
functionabs(){
   returnx>0?x:-x;
}

typeof操作符

typeof操作符用于获取变量的类型,其返回值包括:

1."number"
2."string"
3."boolean"
4."undefined"
5."function"
6."object"

特别的typeofnull返回的结果是"object"。关于typeof的范例:

复制代码代码如下:
vara=typeof"hello";//a==="string"
varb=typeofnull;//b==="object"

+操作符

+操作符在JavaScript中可以用于加法运算,也可以用于字符串连接:

复制代码代码如下:
varmessage="hello"+"world";//message==="helloworld"

&&和||运算符

&&操作符在第一个操作数为假时返回第一个操作数的值,否则返回第二个操作数的值
||操作符在第一个操作数为真时返回第一个操作数的值,否则返回第二个操作数的值

复制代码代码如下:
vara=1&&true;//a===true
varb=1||false;//b===1

||的一个习惯用法:

复制代码代码如下:
name=name||"unknown";//为name设定默认值"unknown"