10_05、JavaScript
一、JavaScript基础
1、JavaScript是什么
JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。
ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习
2、JavaScript介绍
2-1 ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
2-2 ECMAScript的历史
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式添加try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加”strict mode”严格模式添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符（**）增加Array.prototype.includes |
注：ES6就是指ECMAScript 6。
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
3、JS代码引入方式
JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
3-1 行间式
JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法
<div onclick="alert('点击我完成页面交互')">点我div>
3-2 内联式
JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法
<body> <script> alert('该页面被加载！') script> body>
3-3 外联式
JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）
- js文件夹下的my.js
alert('外联式js文件弹出框')
- 根目录下的first.html
<body> <script src="js/my.js"> /* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不再起作用 */ script> body>
4 JavaScript语言规范
4-1 注释（注释是代码之母）
// 这是单行注释 /* 这是 多行注释 */
4-2 结束符
JavaScript中的语句要以分号（;）为结束符。
5、总结
行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；
内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；
外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。
通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。
二、JavaScript基本数据类型
1、变量的定义
JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：
ES5语法，我们采用var关键词定义变量，并且没有常量的概念
ES6语法，我们采用let关键词定义变量，用const关键词定义常量
注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。
// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 var num = 10; // ES6定义变量 let count = 100; const PI = 3.14;
# var与let的区别 n = 10 for n in range(5): print(n) print(n) # var 5 let 10 """ var在for循环里面定义也会影响到全局 let在局部定义只会在局部生效 """
2、变量的命名规范
/* 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 4. 推荐使用下划线 */
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
3、基本数据类型
JS语言中基本数据类型分值类型与引用类型两部分。
typeof可以查看数据类型
3-1数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
3-2字符串(String)
var a = "Hello"; var b = "world; var c = a + b; // 拼接字符串一般使用“+” console.log(c); // 得到Helloworld
常用方法：
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
string.slice(start, stop)和string.substring(start, stop)： 两者的相同点： 如果start等于end，返回空字符串 如果stop参数省略，则取到字符串末 如果某个参数超过string的长度，这个参数会被替换为string的长度 substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换 silce()的特点： 如果 start > stop 不会交换两者 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)slice和substring的区别
ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 复制代码 // 普通字符串 `这是普通字符串！` // 多行文本 `这是多行的 文本` // 字符串中嵌入变量 var name = "jason", time = "today"; `Hello ${name}, how are you ${time}?` 复制代码 注意： 如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。 JSHint启用ES6语法支持:/* jshint esversion: 6 */注释补充
3-3布尔值(Boolean)
区别于Python，true和false都是小写。
var a = true; var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
3-4 null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
- undefined表示当声明一个变量但未初始化时（未赋值），该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
3-5对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
三、运算符
算数运算符
++n先自增，再赋值
n++先赋值，再自增
赋值运算符
前提：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
比较运算符
前提：x=5
| 运算符 | 描述 | 比较 | 结果 |
|---|---|---|---|
| == | 等于 | x==”5” | true |
| === | 绝对等于 | x===”5” | false |
| != | 不等于 | x!=”5” | fales |
| !== | 不绝对等于 | x!==”5” | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
逻辑运算符
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n– | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
四、流程控制
if判断
if-else
// if(条件){条件成立之后指向的代码块} var a = 10; if (a > 5) { console.log("yes"); } else { console.log("no"); }
if-else if-else
// if-else if-else var a = 10; if (a > 5) { console.log("a > 5"); } else if (a < 5) { console.log("a < 5"); } else { console.log("a = 5"); }
Switch
// switch语法 // 提前列举好可能出现的条件和解决方式 var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
for循环
// for循环 // 打印0-9数字 for (let i = 0; i < 10; i++) { console.log(i) } // 题目1 循环打印出数组里面的每一个元素 var l1 = [111, 222, 333, 444, 555, 666] for (let i = 0; i < l1.length; i++) { console.log(l1[i]) }
while循环
// while循环 var i = 0; while (i < 10) { console.log(i); i++; }
三元运算符
// 三元运算符 // python中三元运算符 res = 1 if 1>2 else 3 // JS中三元运算 res = 1>2?1:3 // 条件成立取问好后面的1 不成立取冒号后面的3 var res = 2>5?8:10 // 10 var res = 2>5?8:(8>5?666:444) // 666
五、函数
1、函数定义
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
// 普通函数定义 function f1() { console.log("Hello world!"); } // 带参数的函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象，用于接收多余的参数 console.log(arguments.length); console.log(a, b); } // 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 调用函数 // 匿名函数方式 var sum = function(a, b){ return a + b; } sum(1, 2); // 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱 (function(a, b){ return a + b; })(1, 2);
补充：
箭头函数
ES6中允许使用“箭头”（=>）定义函数。
// 一个参数
var f = v => v; // 等同于 var f = function(v){ return v; }
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
// 不需要参数
var f = () => 5; // 等同于 var f = function(){return 5};
// 多个参数 var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){ return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中 }
2、函数中的arguments参数
function add(a, b) { console.log(a + b); console.log(arguments.length); console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1 } add(1, 2) // 3 // 2 // 1
注意：
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。
3、函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
4、作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
六、内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object
1、自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
// 定义空对象a var a = {}; // 自定义对象b var b = {"name": "Alex", "age": 18}; // 查 console.log(b.name); // Alex console.log(b["age"]); // 18 // 增加 b.gender = 'male'; b['hobby'] = 'music'; console.log(b) //{name: 'Alex', age: 18, gender: 'male', hobby: 'music'} // 删除 delete b.hobby console.log(b) //{name: 'Alex', age: 18, gender: 'male'} delete b['gender'] console.log(b) //{name: 'Alex', age: 18}
创建对象的第二种方式
// 创建person空对象 var person=new Object(); // 增加属性 person.name="Alex"; person.age=18; // // 删除属性 delete person.age; // 查 console.log(person) //{name: 'Alex'}
2、Date对象
创建Date对象
//方法1：不指定参数,默认为当前时间 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2：参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); // 2004/3/20 11:12:00 var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); // 2020/4/3 11:12:00 //方法3：参数为毫秒数，默认是自1970/1/1日 08:00:00起 var d4 = new Date(5000); console.log(d4.toLocaleString()); // 1970/1/1 08:00:05 console.log(d4.toUTCString()); // Thu, 01 Jan 1970 00:00:05 GMT //方法4：参数为年月日小时分钟秒毫秒 var d5 = new Date(2004,2,20,11,12,0,300); console.log(d5.toLocaleString()); //毫秒并不直接显示 // 2004/3/20 11:12:00
Date对象的方法：
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
3、JSON对象
在前端中也有序列化和反序列化，用于跨语言传输
json对象就是用来处理json格式的数据
var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象（反序列化，相当于python中的loads） var obj = JSON.parse(str1); // 对象转换成JSON字符串（序列化，相当于python中的dumps） var str = JSON.stringify(obj1);
4、RegExp对象
// 定义正则表达式两种方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 正则校验数据 reg1.test('jason666') reg2.test('jason666') console.log(reg1.test('jason666')) // true console.log(reg2.test('jason666')) // true /*第一个注意事项，正则表达式中不能有空格*/ // 全局匹配，默认区分大小写 var s1 = 'egondsb dsb dsb'; s1.match(/s/) // match默认只匹配一个 console.log(s1.match(/s/)) // ['s'] s1.match(/s/g) // match()后加g，匹配全部；后面加i忽略大小写 console.log(s1.match(/s/g)) // ['s', 's', 's']
5、Math对象
/* abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 */