JavaScript初探系列（一）—— 基本概念

一、JavaScript是什么？

JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript（EuropeanComputer Manufacturers Association ）的伪语言的形式来定义的。ECMA，该协会指定 39 号技术委员会负责 “ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义 ” 。虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义，但 JavaScript 的含义却比 ECMA-262 中规定的要多得多。没错，一个完整的 JavaScript 实现应该由下列三个不同的部分组成（见图 1-1）。

（一）、JavaScript 组成

核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）

ECMAScript中包含了所有基本的语法、操作符、数据类型以及完成基本的计算任务所必须的对象，但没有对取得输入和产生输出的机制作出规定。理解ECMAScript及其纷繁复杂的各种细节，是理解其在Web浏览器中的实现——JavaScript的关键。目前大多数实现所遵循的都是ECMA-262第5版，但很多都已经着手用第6版了。

（二）、ECMAScript种基本的要素

1 ECMAScript中的基本数据类型包括Undefined、Null、Boolean、Number和String。

2 与其他语言不同，ECMAScript没有为整数和浮点数值分别定义不同的数据类型，Number类型可用于表示所有数值。

3 ECMAScript中也有一种复杂的数据结构，即Object类型，该类型是这门语言中所有对象的基础类型。

4 严格模式为这门语言中容易出错的地方施加了限制。

5 ECMAScript提供了很多与C及其他类C语言中相同的基本操作符，包括算数操作符、布尔操作符、关系操作符、相等操作符及赋值操作符等。

6 ECMAScript从其他语言中借鉴了许多流控制语句，例如if语句、for语句和switch语句等。

（三）、ECMAScript中的函数与其他语言中的函数不同之处

1 无须指定函数的返回值，因为任何ECMAScript函数都可以在任何时候返回任何值。

2 实际上，未指定返回值的函数返回的是一个特殊的undefined值。

3 ECMAScript中也没有函数签名的概念，因为其函数参数是以一个包含零或多个值的数组的形式传递的。

4 可以向ECMAScript函数传递任意数量的参数，并且可以通过arguments对象来访问这些参数。

5 由于不存在函数签名的特性，ECMAScript函数不能重载。

二语法规则：

（一）、命名规则

ECMAScript的一切（如变量、函数名和操作符）都区分大小写。ECMAScript标识符采用驼峰式大小写格式，标识符是按照下列规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；
其他字符可以是字母、下划线、美元符号或数字。
第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母

（二）、注释规则

ECMAScript采用C风格注释，包括单行注释和块级注释，如下所示：

//  单行注释

/*

 *  这是一个多行

 * （块级）注释

 * /

（三）、严格模式

ECMAScript5引入了严格模式（strict mode）的概念。严格模式下，ECMAScript3中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误。要在整个脚本中启用严格模式，在顶部添加"use strict"，在函数内部上方包含这条编译指示，也可以制定函数在严格模式下执行：

function doSomething(){    "use strict";
//函数体
}

三、变量

ECMAScript的变量是松散类型的，使用var操作符定义变量，省略var操作符会创建一个全局变量。

function test(){
    message = "hi";    //  全局变量
}
test();
alert(message);    //  "hi"

三、数据类型

（一）、数据类型分类

原始类型(基础类型,简单类型)
1、Number 数字
2、String 字符串在JS中一对引号之间的 0 到多个字符串
3、Boolean 布尔值 true false
4、null 空值 (空对象) 空值不能进行属性操作会报错
5、undefined 未定义
6、Symbol （ES6 新增）
复合类型(复杂类型)
1、Object 对象: Array 数组, function 函数, element，elements , Object 对象 {}

ECMAScript中有5中简单数据类型：Undefined、Null、Boolean、Number和String。对一个值使用typeof操作符可以检测给定变量的数据类型。

（一）、Number类型

这种类型使用IEEE754格式来表示整数和浮点数值。 ECMAScript并不能保存世界上所有的数值，它能够表示的最小数值保存Number.MIN_VALUE中——在大多数浏览器中，这个值时5e-324；对应的最大数值保存在Number.MAX_VALUE中——在大多数浏览器中，这个值是1.7976931348623157e+308。如果计算结果超出，正的被转为Infinity，负的被转为-Infinity。想确定一个数是不是有穷的，可以使isFinity()函数。

有三个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。第一个函数，即转型函数Number()可以用于任何数据类型，而另两个则专门用于把字符串转换成数值。

（二）、String类型

String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号（”）或单引号（’）表示，两者等价。ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。
任何字符串的长度都可以通过访问其length属性取得。
把一个值转换为一个字符串有两种方式。一种是使用几乎每个值都有的toString()方法，在调用数值的toString()方法时，可以传递一个参数：输出数值的基数；在不知道要转换的值是不是null或undefined的情况下，还可以使用转型函数String()。

（三）、Boolean类型
该类型只有两个字面值：true和false。虽然Boolean类型字面值只有两个，但ECMAScript中所有类型的值都有与这两个Boolean值等价的值。要将一个值转换为其对应的Boolean值，可以调用转型函数Boolean()，如下例所示：

var message = "Hello world!";

var messageAsBoolean = Boolean(message);

下满给出各数据类型及其转换的规则：

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	“”（空字符串）
Number	任何非零数字值（包括无穷大）	0和NaN（参见本章后面有关NaN的内容）
Object	任何对象	null
Undefined	n/a	undefined

（四）、Null类型
Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。从逻辑角度来看， null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因，如下面的例子所示：

var car = null;
alert(typeof car); // "object

（五）、Undefined类型
Undefined只有一个值，即特殊的undefined。使用var生命单位对其加以初始化时，变量的值就是undefined。对未声明的变量执行typeof操作符也会返回undefined。

注意：即便未初始化的变量会自动被赋予undefined值，但显式地初始化变量依然是明智的选择。如果能够做到这一点，那么当typeof操作符返回"undefined"值时，我们就知道被检测的变量还没有被声明，而不是尚未初始化。

（六）、NaN

NaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，任何数值除以0会返回NaN。NaN有两个非同寻常的特点，任何涉及NaN的操作（例如NaN/10）都会返回NaN。其次，NaN与任何值都不相等，包括NaN本身。可以用isNaN()确定这个参数是否“不是数值”。isNaN()在接收到一个值后，会尝试将这个值转换为数值。某些不是数值得值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true。例如：

alert(isNaN(NaN));             
//truealert(isNaN(10));               
//false（10是一个数值）alert(isNaN("10"));             
//false（可以被转换成数值10）alert(isNaN("blue"));           
//false（不能被转换成数值）alert(isNaN(true));            
//false（可以被转换成数值1）

（七）Object类型

ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。Object类型是所有它的实例的基础，Object的每个实例都具有下列属性和方法。

1、constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object()。

2、hasOwnProperty(propertyName)：用于检测给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty("name")）。

3、isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型。

4、propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for-in语句（本章后面将会讨论）来枚举。与hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。

5、toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。

6、toString()：返回对象的字符串表示。

7、valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

五、数据类型转换

（一）、强制数据类型转换

1、强制转换为数字

parseInt(string, radix) 将数据转换为整数返回，parseFloat(string) 转换成浮点数(也就是小数)，第一个参数接受的是个字符串也就是我们要转换的数据，第二个参数基数，也可以理解为标注出我们要转换的这个字符串是几进制的数字

Number(val) 将数据转换成数字字符串类型，使用 Number() 转换时，规则如下：

布尔值类型，使用 Number() 转换时，true 返回1，false 返回 0
当整段字符串都复合数字规则时，转换为数字返回

空字符串,直接返回 0

null，使用 Number() 转换时返回 0
undefined，使用 Number() 转换时返回 NaN
对象类型，使用 Number() 转换时，调用的对象的toString()方法，然后再次依照前面字符串的转换规则进行转换

2、NaN 和 isNaN

在使用 NaN 时，要注意 NaN 不等于任何值，包括它自己，也就是 NaN 不等于 NaN。当我们要检测一条数据是否是 NaN 时，可以使用 isNaN(val) 来进行检测, 在 isNaN 方法中，传入的数据能被转换成合法数字时，就会返回 false，当传入的数据不能被转换成合法数字( 也就是NaN) 时，isNaN 就会返回 true

3、String(val) 转换成字符串

数字类型，直接转换数据类型原样返回
undefined ，直接返回字符串 undefined
null，直接返回字符串 null
布尔值，直接返回字符串 true 或者 false
函数，直接把整个函数变成字符串返回
对象，直接调用对象的 toString 方法

4、Boolean(val) 转换成布尔值

数字类型：非零的合法数字转换为 true, 零代表 false, NaN 代表 false

字符串类型：空字符串转换为false，非空字符串转换为true

null：转换为false

对象：转换为true

（二）、隐式类型转换

隐式数据类型转换，也就是说这个转换过程不受我们强制, js 偷偷自己转的

六、操作符

名称	操作符	例子
一元操作符
递增操作符	++	var age=29;++age; //age为30
递减操作符	–	var age=29;--age; //age为28
一元加操作符	+	var b=false;b=+b; //变成了数值0
一元减操作符	-	var b=false;b=-b; //变成了数值0
位操作符
按位非	NOT(~)	var num1=25;var num2=~num1;alert(num2); //-26
按位与	AND(&)	var result=25 & 3;alert(result);//1
按位或	OR(\|)	var result=25 \| 3;alert(result);//27
按位异或	XOR(^)	var result=25 ^ 3;alert(result);//26
左移	<<	var oldValue=2;var newValue=oldValue << 5;//64
有符号的右移	>>	var oldValue=64;var newValue=oldValue >> 5;//2
无符号的右移	>>>	var oldValue=-64;var newValue=oldValue >>> 5;//134217726
布尔操作符
逻辑非	!	alert(!false);//true
逻辑与	&&	var result=true && false;//false
逻辑或	\|\|	var found=true;var result=(found \|\| someUndefinedVariable);//true

七、相等操作符

ECMAScript中的相等操作符由两个等于号（==）表示，不等操作符右叹号后跟等于号（！=）表示。
在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：

如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；
如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转为数值；
如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较；

这两个操作符在进行比较时则要遵循下列规则。

null和undefined是相等的。
要比较相等性之前，不能将null和undefined转换成其他任何值。
如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符返回true。重要提示：即使两个操作数都是NaN，结果不变。
如果两个操作数都是对象，则比较他们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true；否则，返回false。

除了在比较之前不转换操作数之外，全等和不全等操作符与相等和不相等操作符没有什么区别。全等操作符（===），不全等操作符（！==）。

由于相等和不相等操作符存在类型转换问题，而为了保持代码中数据类型的完整性，推荐使用全等和不全等操作符。

八、语句

语句	语法
if语句	if (condition) statement1 else statement2
do-while语句	do { statement } while (expression);
while语句	while(expression) statement
for语句	for (initialization; expression; post-loop-expression) statement
for-in语句	for (property in expression) statement
label语句	label:statement
break和continue语句	break语句会立即退出循环，强制继续执行循环后面的语句。而continue语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行
with语句	with语句的作用是将代码的作用域设置到一个特定的对象中。with (expression) statement;
switch语句	switch (expression) { case value: statement break; case value: statement break; case value: statement break; case value: statement break; default: statement }

九、函数

（一）、参数

ECMAScript 函数的参数与大多数其他语言中函数的参数有所不同。 ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言。之所以会这样，原因是 ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。实际上，在函数体内可以通过 arguments 对象来访问这个参数数组，从而获取传递给函数的每一个参数。
其实， arguments 对象只是与数组类似（它并不是 Array 的实例），因为可以使用方括号语法访问它的每一个元素（即第一个元素是 arguments[0]，第二个元素是 argumetns[1]，以此类推），使用 length 属性来确定传递进来多少个参数。

（二）、返回值

有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction()
{

var x=5;
return x;

}

上面的函数会返回值 5。

注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数：

（三）、实例

计算两个数字的乘积，并返回结果：

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 将是：5

参考资料《JavaScript高级程序设计》

posted @ 2017-06-21 10:22 StrugglingDave 阅读(291) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部