JavaScript

什么是JavaScript

概述

JavaScript（JS）是一种具有函数优先特性的轻量级、解释型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

下面贴一个JavaScript的历史，还是蛮有意思的

JavaScript 的发展史 - 知乎 (zhihu.com)

目前最新版本已到ES6版本

快速入门

引入JavaScript

内部标签

<!-- 内部标签使用 -->
<!-- script标签内, 写JavaScript代码 -->
<!-- 写在html的head或body的底部 -->
<script>
    alert('hello, world');
</script>

外部引入

lear.js

alert('hello, world');

index.html

<!-- 外部引入 -->
<!-- 注意不能使用自闭合标签，必须成对出现 -->
<!-- 写在html的head或body的底部 -->
<script src="lear.js"></script>

基本语法

一、数据结构

JavaScript的数据结构包括：标识符、关键字、常量、变量等。

1、标识符

标识符，说白了，就是一个名字。在JavaScript中，变量和函数等都需要定义一个名字，这个名字就可以称为“标识符”。

JavaScript语言中标识符最重要的3点就是：

（1）第一个字符必须是字母、下划线（_）或美元符号这3种其中之一，其后的字符可以是字母、数字或下划线、美元符号；

（2）变量名不能包含空格、加号、减号等符号；

（3）标识符不能和JavaScript中用于其他目的的关键字同名；

2、关键字

JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。

3、常量

常量，顾名思义就是指不能改变的量。常量的指从定义开始就是固定的，一直到程序结束。

常量主要用于为程序提供固定和精确的值，包括数值和字符串，如数字、逻辑值真（true）、逻辑值假（false）等都是常量。

4、变量

变量，顾名思义，就是指在程序运行过程中，其值是可以改变的。

二、JavaScript数据类型

JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。

其中，基本数据类型包括以下3种：

（1）数字型（Number型）：如整型84，浮点型3.14；（2）字符串型（String型）：如"hello world"；（3）布尔型（Boolean型）：true或fasle；特殊数据类型有3种：

（1）空值（null型）；（2）未定义值（undefined型）；（3）转义字符；

三、运算符

JavaScript的运算符按运算符类型可以分为以下5种：

（1）算术运算符；

（2）比较运算符；

（3）赋值运算符；

（4）逻辑运算符；

（5）条件运算符；

四、typeof运算符

typeof运算符用于返回它的操作数当前所容纳的数据的类型，这对于判断一个变量是否已被定义特别有用。

例如：typeof(1)返回值是number，typeof("javascript")返回值是string。

五、表达式

表达式是一个语句的集合，计算结果是个单一值。

在JavaScript中，常见的表达式有4种：

（1）赋值表达式；

（2）算术表达式；

（3）布尔表达式；

（4）字符串表达式；

六、类型转换

1、字符串型转换为数值型

在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。

parseInt() //将字符串型转换为整型

parseFloat() //将字符串型转换为浮点型

2、数值型转换为字符串型

在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。

七、Tips

1、执行顺序

JavaScript程序按照在HTML文档中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。

2、区分大小写

JavaScript是严格区分大小写的。例如str和Str这是两个完全不同的变量。

3、分号和空格

在JavaScript中，语句的分号“;”是可有可无的。但是我们强烈要求大家在每一句语句后面加一个分号“;”，这是一个非常重要的代码编写习惯。

另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格，来提高代码的可读性，说白了就是让代码“漂亮点”，读得舒服一点。

八、JavaScript注释

在编写JavaScript代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多。

// 单行注释
/*
多行注释
*/

流程控制

JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：

（1）顺序结构；

（2）选择结构；

（3）循环结构；

一、选择结构

在JavaScript中，选择结构共有5种：

（1）if语句;

（2）if……else语句;

（3）if……else if……语句;

（4）if语句的嵌套;

（5）switch语句;

二、循环结构

在JavaScript中，循环结构总有3种：

（1）while语句；

（2）do……while语句；

（3）for语句；

三、跳转语句

JavaScript支持的跳转语句主要有2种：

（1）break语句；

（2）continue语句；

break语句与continue语句的主要区别是：break是彻底结束循环，而continue是结束本次循环。在这一点跟其他编程语言（如C和Java）相同

函数

一、函数是什么？

函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候，也只要修改和维护这一个函数即可。

总之，将语句集合成函数，好处就是方便代码重用。并且，一个好的函数名，可以让人一眼就知道这个函数实现的是什么功能，方便维护。

函数的使用只需要2步：

（1）定义函数；

（2）调用函数；

二、函数的定义

在JavaScript中，使用函数前，必须用function关键字来定义函数。

函数常用方式有2种：

（1）不指定函数名的函数；

（2）指定函数名的函数；

1、不指定函数名的函数

语法：

function (参数1,参数2,….,参数n) {
    //函数体语句
}

说明：

定义函数必须使用function关键字。

2、指定函数名的函数

“指定函数名的函数”是JavaScript中使用最广泛的方法，反而“不指定函数名的函数”用得比较少。

语法：

function 函数名(参数1,参数2,….,参数n) {
    //函数体语句
    return 表达式;
}

说明：

定义函数必须使用function关键字来定义。

函数名必须是唯一的，尽量通俗易懂，并且跟你定义的代码有关。

函数可以使用return语句将某个值返回，也可以没有返回值。

参数是可选的，可以不带参数，也可以带多个参数。如果是多个参数的话，参数之间要用英文逗号隔开。

三、函数的调用

常用的函数调用方式有4种：

（1）简单调用；

（2）在表达式中调用；

（3）在事件响应中调用；

（4）通过链接调用；

四、特殊函数

JavaScript特殊函数有3种：

（1）嵌套函数；（2）递归函数；（3）内置函数；下面详细给大家讲解一下这3中函数调用方式。

1、嵌套函数

嵌套函数，顾名思义，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

举例：

//定义阶乘函数
function fun(a) {
    //嵌套函数定义，计算平方值的函数
    function multi (x) {
        return x*x;
    }
    var m=1;
    for(var i=1;i<=multi(a);i++) {
        m=m*i;
    }
    return m;
}
var sum =fun(2)+fun(3);
console.log(sum);

分析：

上面定义的multi函数只能在fun函数内部使用，如果在fun函数外部调用就会出错

2、递归函数

递归函数是一种非常重要的编程技术，当年我在学习其他编程技术（如C、C++、Java等）都经常用到。

递归函数用于让一个函数从其内部调用其本身。不过需要注意的是，如果递归函数处理不当，就会使程序陷入“死循环”。为了防止“死循环”的出现，可以设计一个做自加运算的变量，用于记录函数自身调用的次数，如果次数太多就让它自动退出循环。

说明：

在定义递归函数时，需要2个必要条件：

（1）首先包括一个结束递归的条件；

（2）其次包括一个递归调用的语句；

3、内置函数

JavaScript中有2种函数：一种是用户自定义函数，另外一种是JavaScript语言内部已经定义好了，可以直接供我们调用的函数（也就是内置函数）。

内置函数由于已经在JavaScript语言内部定义好了的，也就是我们不需要自己定义就能用了。这样极大方便了我们的编程。

5、内置函数在JavaScript中，常用的内置函数有7个：

（1）eval()函数

（2）isFinite()函数

（3）isNaN()函数

（4）parseInt()函数

（5）parseFloat()函数

（6）escape()函数

（7）unescape()函数

字符串对象

字符串，是程序设计中经常使用的一种数据类型，在每一种编程语言中都非常非常的重要。

这一章我们给大家详细地介绍JavaScript中的字符串对象string，然后给大家讲解一下各种操作字符串的技巧。有可能这些技巧一时半会你用不上，但是学习知识有一种说法是：你只有接触了某个知识点，即使将来你已经忘记了这个知识点具体是怎样的了，不过你却能想到用这么一个知识去帮你解决某些问题。但是，如果你没有接触这个知识点，你大脑是完全对这个知识没有概念，你连翻书的份都没，还谈解决什么问题？额，说得有点拗口，不过也是我作为程序猿多年的经验。

字符串对象string有很多方法，例如match()方法、search()方法、replace()方法等。有可能这些方法你学了一阵子都忘记具体语法是怎样的了，其实你不要埋怨自己笨，因为不经常用的知识，我们往往都容易忘记。等你需要用到这些语法了，再回来翻翻就可以了。然后经历过多次使用了，这些语法就根深蒂固了。

不过呢，在此说一下，在这一章包括之前或之后的章节，对象都有很多方法或属性，不要求每一种都掌握，但是至少我们要去看看，这样我们在以后开发中需要用到的时候，大脑“仅存”的记忆都能提醒我们要用到哪些知识点，然后我们回来翻翻就行了。

二、length属性简介

在JavaScript中，对于字符串来说，要掌握的属性就只有一个，那就是length属性。我们可以通过length属性来获取字符串的长度。

三、match()方法简介

在JavaScript中，使用match()方法可以从字符串内索引指定的值，或者找到一个或多个正则表达式的匹配。

四、search()方法简介

在JavaScript中，search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

五、indexOf()方法简介

在JavaScript中，可以使用indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

六、replace()方法简介

在JavaScript中，replace()方法常常用于在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串。

七、charAt()方法简介

在JavaScript中，可以使用charAt()方法来获取字符串中的某一个字符。这个方法我们在之前的教程中已经多次接触了。这个方法非常好用，在实际开发中也经常用到。

八、字符串英文大小写转化

在JavaScript中，使用toLowerCase()和toUpperCase()这两种方法来转化字符串的大小写。其中，toLowerCase()方法将大写字符串转换为小写字符串；toUpperCase()将小写字符串转换为大写字符串。

九、连接字符串

在JavaScript中，可以使用concat()方法来连接2个或多个字符串。

十、比较字符串

在javascript中，可以使用localeCompare()方法用本地特定的顺序来比较两个字符串。

十一、split()方法

在javascript中，可以使用split()方法把一个字符串分割成字符串数组。

十二、从字符串提取字符串

在JavaScript中，可以使用substring()方法来提取字符串中的某一部分字符串。

日期对象

一、创建日期对象

在JavaScript中，创建日期对象必须使用“new语句”。使用关键字new新建日期对象时，常用的有2种：

无参构造
有参构造
- 可以传入的参数格式如下：
  - "2015-5-3"
  - "May 3,2015"
  - "2015/5/3"
  - ....

二、日期对象方法

这一章学习了很多日期对象的方法。日期对象Date的方法主要分为三大组：setXxx、getXxx和toXxx。

setXxx用于设置时间和日期值；getXxx用于获取时间和日期值；toXxxx主要是将日期转换为指定格式。

JavaScript基础语法 | 青训营笔记