JavaScript

ECMAScript学习笔记（一）

Posted by Csming on 2018-09-08

ECMAScript

JavaScript由ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）三个部分组成。

ECMAScript和Web浏览器没什么太大的关系，ECMA包含了：语法、类型、语句、关键字、保留字、操作符、对象。

类比于Java的话，就是Java的基础语法，即：java se部分，不包含j2ee,java me的部分。

在HTML中使用javascript

script元素

该标签在HTML 4.01中，定义了6个属性：

async 可选，用于告诉浏览器，立即下载文件
charset 可选，表示通过src属性指定的代码的字符集
defer 可选，表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有用。
language 已废弃，表示使用的脚本语言
src 可选，表示包含执行代码的外部文件
type 可选：text/javascript等

使用script的方法

1.在页面中嵌入JavaScript代码

1
2
3
4
5
<script type="text/javascript">
function sayHi() {
  alert("Hi!");
}
</script>

包含在script标签中的代码，将会被从上到下依次解释。

当解释器对script标签元素内部的所有代码求值完毕之前，页面中的其余内容就不会被浏览器加载，嗯。

2.包含外部JavaScript文件

1
2
<script type="text/javascript" src="example.js">
</script>

标签的位置

一般所有script标签都应该被放在页面的head里。这样会使得页面在JavaScript代码加载完成后才会执行。这样，就会非常卡啊嗯。

为了避免这个问题，现在一般将JavaScript的引用放在body标签中的页面内容的最后面。

嵌入代码VS外部文件

使用外部文件有：可维护性、可缓存、适应未来等优点。嗯。

语法

变量

ECMAScript的变量是松散类型的，即：可以用来保存任何类型的数据。变量只是一个占位符嗯。

**1.声明变量：**使用var操作符声明变量。

1
var message;

以上声明的message变量可以用来保存任何值。以上代码中，message没有初始化，故保存了一个特殊值：undefined

**2.赋值：**由于变量知识一个占位符。故，可以赋予任何值，嗯。

1
2
var message = "hi";
message = 100;

3.使用var定义的变量会使该变量成为定义该变量的作用域中的局部变量。

4.而不使用var，直接定义的变量，将会成为全局变量：

1
2
3
4
5
function test() {
  message = "hi"
}
test()
alert(message)

5.可以使用一条语句定义多个变量。

1
2
3
var message = "hi",
    found = false,
    age = 29;

数据类型

ECMAScript中有五种简单数据类型：Undefined、Null、Boolean、Number、String,以及复杂数据类型：Object。

Obejct的本质是一组无序的key-value组成的。

typeof操作符

typeof用于检测给定变量的数据类型。

“undefined” 这个值未定义
"boolean" 这个值是布尔值
"string" 这个值是字符串
"number" 这个值是数值
"object" 这个值是对象或null
"function" 这个值是函数

eg:

1
2
3
4
var message = "some string"
alert(typeof message) // "string"
alert(typeof(message))// "string"
alert(typeof 95) // "number"

Undefined类型

Undefined类型，只有undefined这个值，在使用var声明变量，但未初始化的时候，这个变量的值就是undefined的。

另外，还可以给变量赋值为undefined。但是，直接调用为赋值的变量会报错，而调用赋值为undefined的变量是不会报错的。

Null类型

Null类型，只有null这个值。null值表示一个空对象指针，故，使用typeof检测null值会返回"object"。

如果定义的变量要用来存储对象，则最好将其初始化为null。

然后，undefined是派生自null值的。

Boolean类型

Boolean只有两个值：true和false。

ECMAScript中的所有类型，都与这两个值有等价对应的值。要将一个值转换成对应的Boolean值，需要调用转型函数Boolean()

1
2
var message = "djkafj"
var messageAsBoolean = Boolean(message)

Boolean true false
String 任何非空字符串 “”（空字符串）
Number 任何非零数值 0和NaN
Object 任何对象 null
Undefined n/a undefined

Number类型

Number类型使用IEEE754格式来表示整型和浮点数值。

基本的数值字面量格式是十进制。而整数还可以通过八进制、十六进制来表示。

1
2
var num1 = 070;
var num2 = 0xA;

1.浮点数：包含小数点的数值，且小数点至少有一位数字。

1
2
3
var num1 = 1.1;
var num2 = 0.1;
var num3 = .1;

由于浮点数需要的内存空间较大，故ECMAScript会尽量将浮点数转换成整数。

而对于极大或极小的数值，可以用科学计数法。

**2.数值范围：**Number.MIN_VALUE=5e-324,Number.MAX_VALUE=1.797693134862357e+308.

若某次计算得到的结果超出数值范围，则将被表示为Infinity值。

**3.NaN：**非数值。表示一个本来要返回数值的操作数未返回数值的情况。

ECMAScript定义了isNaN()函数，用于判断一个数值是否为NaN。

1
2
3
4
5
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false
alert(isNaN("10")); //false可以被转换为数值10
alert(isNaN("blue")); //true
alert(isNaN(true)); //false可以被转换为数值1

**4.数值转换：**Number(),parseInt(),parseFloat()可以将非数值转换为数值。

Number()可以用于任何数据类型。而parseInt(),parseFloat()用于将string转换成数值。

（1）Number()：

若为Boolean值，则转换为1，0
若为数字值，则原路返回
若为null，则返回0
若是undefined，返回NaN
若是字符串：1.只包含数字，则返回十进制数值。2.若包含有效的浮点数格式，则返回对应的浮点数。3.若包含有效的相同大小的十进制数。4.若为空字符串则返回0。5.若是上述格式之外的字符串，则返回NaN。
若为对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。

（2）parseInt():

只看是否符合数值模式。会忽略字符前面的空格。然后，若一个字符串是以数字开头非数字结尾的，则只解析前面的数值部分。

另，可以传入第二个参数，表示进制。

1
var num1 = parseInt("AF", 16);

（3）parseFloat():
和parseInt()类似。从第一个字符开始解析每个吸附。且，一直解析到字符串结尾或者第一个无效的浮点数字字符位置。

String类型

String类型用于表示由零或多格16位Unicode字符组成的字符序列。可以由单引号或者双引号包住。

**1.字符字面量：**String类型包含一些特殊的字符字面量，也叫转移序列，用于表示非打印字符。就是常规的换行符等，

2.ECMAScript中的字符串是不可变的。字符串一旦创建，他们的值就不能改变。只能改变变量所保存的字符串。（这点和Java类似）

**3.转换为字符串：**其他类型转换为String类型可以用其他类型自带的toString()方法。

在调用number类型的toString()方法时，可以传入进制作为参数。

除了toString()外，还可以使用String()函数，这个函数能够将任何类型的值转换为String。

Obejct类型

ECMAScript的Object就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。创建Obejct类型的实例后，可以为其添加属性或者方法。

1
var o = new Object();

Obejct类型是所有实例的基础。所有的实例都拥有Object的属性和方法。

Object的每个实例都有以下的属性和方法：

Constructor: 保存用于创建当前对象的函数。也就是构造函数
hasOwnProperty(propertyName)： 用于检查给定的熟悉是否存在于当前对象实例中。
isPrototypeOf(object)：用于检查传入的对象是否是另一个对象的原型。
propertyIsEnumberable（propertyName）：检查给定的属性是否能使用for-in语句进行美剧。
toLocaleString()： 返回对象的字符串表示，字符串与执行环境的地区相关。
toString()
valueOf()

操作符

操作符重点记一下相等操作符。

相等操作符

1.相等和不相等：==、!=

若两个操作数相等则返回true。

相等和不相等操作符遵循以下规则：

1.若一个操作数是布尔值，则在比较相等性之前，先将其转换成数值0/1
2.若一个操作数是字符串，另一个操作数是数值，在比较前，现将字符串转换成数值。
3.若一个操作数是对象，另一个不是，则调用对象的valueOf()方法，用得到的基本类型按照前面的规则进行比较。
4.null和undefined是相等的。
5.在比较相等性之前，不能将null和undefined转换成其他任何值。
6.若一个操作数是NaN，则不与任何数相等
7.若两个操作数都是对象，若指向同一个对象，则相等；否则不相等。

2.全等和不全等：===、!==
除了在比较之前，不转换操作数之外，全等不全等和相等不相等操作符并没有区别。

语句

语句里面，比较特别的是一个with语句

with

with语句的作用是将代码的作用域设置到一个特定的对象中：

with(expression) statement;

1
2
3
4
5
6
7
8
9
10
11
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

// 以上的代码可以写作：

with(location){
  var qs = search.substring(1);
  var hostname = hostname;
  var url = href;
}

函数

ECMAScript中的函数，我觉得是一个非常神奇的东西。

使用function来声明，后面跟一组参数以及函数体。

1
2
3
4
5
6
7
8
9
function functionName(arg0, arg1) {
  statements;
}

function sayHi(name, message) {
  alert("Hello " + name + "," + message);
}

sayHi("Micheal", "F**k you!")

而，函数可以通过return语句来返回值。

1
2
3
function sum(num1, num2) {
  return num1 + num2;
}

函数的参数

ECMAScript的函数是不介意传入多少个参数的。

ECMAScript的函数，有一个arguments对象，能够通过arguments[0], arguments[1], arguments[2]的形式访问参数。

所以，我觉得函数声明时写的参数，就是给arguments[0], arguments[1]这些参数命名，嗯。

没有重载

ECMAScript的函数，不能实现重载。如果定义了两个名字相同的函数，这个名字只会属于后面定义的函数。

FEATURED TAGS
JavaScript
FRIENDS