javaScript简单教程之一

男娘i 2022-08-08 15:50 140阅读 0赞

# JavaScript简单教程 #

本文主要讲解JavaScript的一些基础知识，如：变量，数据结构，循环，控制，集合等。后续还会有介绍函数，面向对象，JQuery，node.js等的内容。  
由于篇幅原因，所以写的并不深入，大概只适合有一定编程语言基础，但又懒得花费大把时间挨条查文档的人看。

## 历史来源 ##

### 网景 ###

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

### ECMAScript ###

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

### ECMAScript 6 ###

最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，一般，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。

由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

## 语法 ##

### 语句和代码块 ###

JavaScript的语法和C语言一样，每个语句以`;`结束，代码块用`{...}`包围。但是，JavaScript并不强制要求在每个语句的结尾加`;`，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上`;`，但是有的时候自动补全会产生一些灵异事件，所以我们一般都严格在每个语句后面加上`;`。

### 缩进 ###

虽然，缩进并不是语法必须要求的，我们看有些代码写的乱七八糟的，依然能运行。但是，代码量大、逻辑嵌套复杂到一定程度，这些代码就变得非常难以解读。所以我们也严格按照每一个代码块`{...}`里的内容，前面都加上4个空格的缩进。

### 注释 ###

注释是个开发人员阅读的，解析引擎会自动无视这些内容。  
JavaScript的缩进有两种，一种是单行注释，以`//`开头，后面的内容都为注释。另外一种是块注释 `/*...*/`，中间的内容都为注释。

### 大小写 ###

JavaScript和C语言，是区分大小写的，编码过程中经常会遇到某个字母大小写错误引起的Bug，需要非常注意。

## 变量 ##

### 声明及赋值 ###

JavaScript声明变量的时候，只需要用`var`后面加上变量名即可。变量名可以由字母，数字，`_`,`$`来组合，并且不能以数字开头，此外，变量名也不能是关键字。赋值用`=`来表示。

var abc = 'Hello, world';
    var num = 10;

此外，由于JavaScript是弱类型语言，所以，可以给变量赋不同类型的值。

var abc = 'Hello, world';
    abc = 10;

## 数据类型 ##

### 数值型 ###

JavaScript的数值没有区分整形，单、双精度浮点型等，只有一个数值型。比较特殊的是还有一个非数值和一个无限大，分别用`NaN`或者`Infinity`表示。

### 布尔型 ###

JavaScript的布尔型用`true`，`false`表示真和假。需要注意只能是小写，不能大写或者大小写混合。

var isEmpty = false;  //这是假
    var isLogin = true;   //这是真

### 空值 ###

JavaScript的空值有`null`，`undefine`。实际应用中，两者并没有什么区别，大部分时候是用到前者。需要注意的是，空和`0`,`''`的区别，`0`是一个数值，而`''`表示一个长度为0的字符串。

### 字符串 ###

JavaScript的字符串用`''`或者`""`表示。如果刚好字符串里带有`"`或者`'`，就需要使用转义字符`\`。

alert("他说：\"今天天气不错！\"");

此外，比如换行`\n`,unicode编码`\u####`都需要用到转义字符。  
JavaScript的字符串可以用下标来获取字符串对应位置的字符，但是不能通过此方法赋值。字符串还有一些诸如截取，转换大小写，获取长度等等的方法，具体参考文档。

### 运算符 ###

JavaScript的运算符有四则运算符，模运算符，比较运算符等。四则运算符就是我们常见的`+-*/`,模运算符用于求余`%`，比较运算符`>`，`==` ，`<`，`>=`，`===`，其中`==`会转换类型比较，`===`不会转换类型比较。例如：

var abc = false;
    var num = 0;
    alert(num==abc); //结果是true
    alert(num===abc);//结果是false

### 对象 ###

JavaScript的对象和C语言的结构体类似，是描述同一个东西的数据集合，但是相对更灵活。

var laomao = {
        name : "老猫是吧",
        age : 24,
        isMan : true,
        money : 20,
    };
    alert(laomao.name);

## 分支 ##

JavaScript的分支有`if` 和`switch`两大种，和C语言基本一致。

//if...else...结构
    if (2 > 1) {
        alert('这是真的');
    } else {
        alert('老子才不信');
    }

//if...elseif...else结构
    var age = 30;
    if (age < 15) {
        alert('小孩');
    } else if (age >= 10 && age < 18) {
        alert('年轻人');
    } else {
        alert('老人了');
    }

//switch...case...结构
    var code = 404;
    switch (code) {
        case 404:
            alert('页面不存在');
            break;
        case 200:
            alert('服务器给响应了');
            break;
        default :
            alert('网络连接失败');
            break;
    }

## 循环 ##

JavaScript的循环有`for` 和`while`两大种，和C语言基本一致。

//for循环计算0~99之间所有整数的和
    var sum = 0;
    for(var i=0;i<100;i++) {
        sum = sum + i;
    }
    alert(sum);

//while循环计算0~99之间所有整数的和
    var sum = 0;
    var i = 0;
    while(i < 100) {
        sum += i;
        i++;
    }
    alert(sum);

## 容器 ##

**JavaScript的容器有数组，字典，集合，其中字典和集合需要支持ES6标准的浏览器才能使用，否则会出现ReferenceError错误。**

### 数组 ###

array，数组是一个通过下标管理元素的集合，JavaScript的数组可以同时存放不同类型的数据。可以通过`[]`或者`Array()`来创建数组。

var arr = Array(1,"ab",3);
    var arr2 = ["ab",123,NaN];
    alert(arr);
    alert(arr2);

### 字典 ###

map，字典是一个通过键值对（key-value）管理元素的集合，对字典里的数据进行管理都是通过key来操作，所以一个字典里key不会相同。

var myDic = new Map();
    myDic.set('name','laomao');
    
    //创建一个字典
    var dic = new Map([['city','xm'],['id','0592'],['human',myDic]]);
    dic.set('address','观日路');  //增加一个键值对
    dic.get('city');  //获取键为ciyt的值
    dic.has('address');  //判断是否有键为address的数据
    dic.delete('id');  //删除键为id的数据
    
    alert(dic.get('human').get('name'));

### 集合 ###

set，集合，是一个无序的容器，因为无序，所以也不会有重复的元素。

//创建集合set,包括2个元素999和888
    var mySet = new Set([999,888]);  
    mySet.add('hello');  
    mySet.add('world');
    mySet.add(123);     //增加元素123
    alert(mySet.size);  //获取mySet的个数
    mySet.delete(123);  //删除元素123
    alert(mySet.size);
    
    //遍历mySet的所有元素
    mySet.forEach(function (value){ alert(value); });

以上内容有部分参考自:  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Set][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Set]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Set]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set