Javascript基础知识

前言

JavaScript是一种专为网页交互而设计的脚本语言，主要由三个部分组成：ECMAScript，提供核心语言功能；DOM（文档对象模型）提供访问和操作网页内容的方法和接口；BOM（浏览器对象模型）提供与浏览器交互的方法和接口，虽然浏览器都支持JavaScript的大部分功能，但还有不少特性会因浏览器的不同而有所差异。

HTML中使用JavaScript

script元素就是用来在HTML页面里添加脚本语言的标签，通常使用它的src和Type两个属性，src代表要执行的外部文件，也就是包含js代码的文件位置，Type表示script元素包含或引入的代码类型通常使用text/javascript值。

// 需要注意script里如果有</script>会导致解析异常
// 可以通过添加转义字符避免这个问题
<script type="text/javascript">
    function sayScript() {
        alert("<\/script>");
    }
</script>

script元素有两种使用方式，直接在页面中嵌入JavaScript，另外一种就是通过前面的src外部引入执行脚本。

<script type="text/javascript" src="example.js">
// 在这里编写的代码不会被执行
</script>

HTML里放置的js代码会按照文档顺序从上向下解析执行，也就是先解析第一个script元素代码，再解析第二个script代码…，不过如果script中定义了defer或者async属性就有可能改变解析顺序。

<script type="text/javascript" defer="defer" src="example1.js"></script>

设置defer属性相当于通知浏览器立即下载，但是要等到整个页面都解析完成之后在运行，defer保证执行顺序依然按照页面排序执行；async和defer类似都只适用于外部脚本文件，浏览器会立即下载但会等到整个页面解析完成之后再执行，但是async不保证执行顺序。

<script type="text/javascript" async src="example2.js"></script>

通常建议使用外部文件来包含JavaScript代码，外部代码提升了可维护性，而且多个页面使用同一个文件可以只下载一次。

基础语法

JavaScript大量借鉴了C类语言的语法，各种变量函数名和操作符都区分大小写，定义变量属性函数名的时候采用驼峰模式，语句末尾可以加“；”或不加都可以，推荐语句末尾加上分号。注释和Java一样都是用“//”表示单行注释，“/**/”来表示多行注释。ECMAScript5引入了严格模式，对于一些不确定的行为将得到处理，某些不安全的操作会抛出错误。

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

变量定义

JavaScript是弱类型的语言，定义变量使用var关键字，不过变量值可以是任何类型的，var定义的变量如果包裹在作用域中就会变成局部变量，如果在函数中用var定义变量，函数执行完成就会被销毁。如果在函数中引用了没有用var定义的变量，这个变量就是全局类型的，函数执行完毕后变量依然保存在全局作用域中。

function test(){
    var message = "hi"; // 局部变量
    num = 100;
}
test();
// alert(message); // 错误
alert(num); // 没有问题

数据类型

JavaScript中有5中简单数据类型，Undefined、Null、Boolean、Number和String类型，还有一种Object的复杂类型，Object类型本质上是一组无序的键值对组成，JS中所有的类型都包含在上面6中类型中。想要判断一个变量的数据类型使用typeof操作符。

function hello() {
    alert('Hello World');
}

var right = true
var num = 10
var good
var world = new Object()
var message = "some thing"
alert(typeof(right))   // boolean
alert(typeof(message)) // string
alert(typeof(num))     // number
alert(typeof(good))    // undefined
alert(typeof(hello))   // function
alert(typeof(world))   // object

Undefined类型只有一个值就是undefined，使用var声明变量并且不做初始化操作，这个值就是undefined的，如果直接使用一个没有用var声明的变量程序会报错，不过使用typeof操作符却会返回undefined。

var right
alert(typeof(right)) // undefined
alert(typeof(left))  // undefined

Null类型也只有一个值就是null，null表示的是一个空对象指针，使用typeof监测null返回值是object类型，不过null和undefined在使用相等符号操作时会返回true。Boolean有两个值true和false，不过可以对其他类型的值使用Boolean()函数转换成布尔值。

数据类型	true	false
String	非空字符串	“”（空字符串）
Number	非零数字值	0或者NaN
Object	任何对象	null
Undefined		undefined

Number类型代表所有的数字类型，JS底层使用了双精度数值保存数值类型，除了能用十进制值，在数字前面加0代表8进制，数字前面有0x代表十六进制值。JS中最常用的是做数值转换，Number()、parseInt()和parseFloat()，Number可以转换任何类型的数据为数字类型，而后两个只是用来将String类型转换成数字类型。Number的转换不常用，通常都是String转换数字比较常用，parse方法首先判断第一个非空字符串是否是数字或负号，是就取前面的数字，舍弃后面非数字；不是就直接返回NaN。

var num1 = Number("Hello World"); // NaN
var num2 = parseInt("123");       // 123
var num3 = parseFloat("123.45");  // 123.45
var num4 = parseInt("Hello");     // NaN

String类型由0个或多个16位Unicode字符组成的字符序列，定义时可以使用单引号或双引号。其他类型转换成String类型可以调用toString方法，Number类型还可以传入参数表明想要转换成哪个进制的数字。String()方法能将任何其他类型的参数转换成String类型。

var hello
alert(String(hello)) // undefined
var num = 10
alert(num.toString(2)) // 1010

Object类型是一组数据和功能的集合，对象可以通过new操作符来创建，Object类是所有其他实例的基础。Object的每个实例都包含如下的属性和方法：

名称	作用
constructor	保存用于创建当前对象的函数
hasOwnProperty	用于检查给定的属性是否在当前实例中（不是在原型中）
isPrototypeOf	用于检查传入的对象是否是传入对象的原型
propertyIsEnumerable	检查给定的属性能否使用for-in语句来枚举
toLocaleString	返回对象字符串表示
toString	返回对象字符串表示
valueOf	返回对象的字符串、数值或布尔值表示

操作符

JS中的操作符和Java语言里的操作符基本类似，这里只看一些不同的地方，相等操作符。在比较字符串、数值和布尔值是否相等时，问题还比较简单，JS中的对象做比较就有些复杂了，JS中提供了两组操作符，相等和不相等，先转换再做比较；全等和不全等，仅做比较不做转换操作。其中相等和不相等使用（==）和（!=）操作符，全等使用（===）操作符，不全等使用（！==）操作符。

alert("55" == 55) // true，首先把“55”字符串转换成数字55再作比较操作
alert("55" === 55) // false，不做任何操作，“55”字符串类型，55数字类型，两者不全等

逗号操作符可以在一条语句中执行多个操作，比如声明多个变量，在赋值是如果有逗号操作符总会返回最后一项。

var num1 = 1, num2 = 2;
var num = (3, 4, 5);
alert(num) // 5