目录
JavaScript和ECMAScript的关系
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
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 |
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript） ，JavaScript的语法标准。
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript
JavaScript是解释型、弱类型、面向对象的动态语言。JavaScript一般用来编写客户端脚本，来为HTML页面添加交互行为，是前端原因，而不是后端语言（node.js除外）。
JavaScript的特点：
- 1、解释执行，浏览器就是解释器：事先不编译、逐行解释、无需进行严格的变量声明。
- 2、简单易用：可以使用任何文本编辑器编写，只需要浏览器就可以执行程序。
- 3、基于对象：内置大量现成对象，编写少量程序即可完成任务。
JavaScript的引入方式
方式一：
<script>
// js代码
</script>
方式二：
<script src="file.js"></script>
JavaScript语法规范
- 1、JavaScript对换行、缩进、空格不敏感。每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后的压缩，不加分号程序将不能运行。
- 2、所有符号都是英文符号。
- 3、注释：
// 这是当注释
/*
这是多行注释
*/
变量
- 1、js的变量名可以用数字、字母、下划线、$组成，不能以数字开头
- 2、严格区分大小写
- 3、不能包含关键字和保留字（以后升级要用的关键字）。
- 4、推荐驼峰命名，有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写。
- 5、匈牙利命名：就是根据数据类型单词的首字符作为前缀。
变量命名语法：
// 1、先声明后赋值
var name; // 声明变量时无需指定类型，变量名可以接收任意类型。
name = "zhangsan";
// 2、声明且赋值
var name = "zhangsan";
ES6中的let
ES6之前js没有块级作用域，ES6新增了let，用于声明变量（声明的变量属于块级作用域），流程控制的{}就是块级作用域。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如for循环的计数器就很适合let命令。
常量
ES6新增const来声明常量。一旦声明，其值就不能改变。
const x = 10;
x = 20;
// Uncaught TypeError: invalid assignment to const 'x'
数据类型
数值（number）
JavaScript不区分整型和浮点型，只有一种数字类型。
var x = 10;
var y = 1.1;
var z = 11e5;
var n = 11e-5;
typeof n; // number
m = NaN;
typeof m; // number
四舍五入
var num = 3.1415;
num.toFixed(3); //
字符串类型转数字
字符串转number
parseInt('123') // 返回123
NoN属性时代表非数字值的特殊值。该属性用于指示某个值不是数字，非数。
parseInt('abc') // 返回NaN
只保留字符串最开头的数字，后面的中文自动消失。
parseInt('18libai') // 18
只会去末尾的，不会去中文的
parseInt('libai18') // NaN
字符串中的数字转浮点数
parseInt('123.456') // 123
parseFloat('123.456') // 123.456
自动带有截断小数的功能：取整，不四舍五入
var a = parseInt('1.3') + parseInt("2.6"); // a=3
var a = parseFloat('1.3') + parseFloat('2.6'); // a=3.9
数字类型转字符串
// js是弱类型，不同类型之间进行运算会隐式的进行类型转换
var x=10;
var y="20";
var z=x+y; // z = '1020'
typeof z; // String
// 数字转字符串类型
var m = 123;
var n = String(m)
var a = 123;
var b=a.toString()
字符串（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) | 分割 |
substring和slice区别：
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)个字符结束(不包含该位置字符)
ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`），它的作用是：
- 1、可以当做普通字符串使用
var info = `hello world`;
- 2、也可以用来定义多行字符串
var info = `how
are
you?`
- 3、在字符串内嵌入变量，用于格式化，类似于Python中的f-string：
var name = 'libai';
var age = 18;
var info = `my name is ${name},my age is ${age}`;
如果要在模板字符串中使用反引号，则需要使用反斜杠转义。
布尔值（Boolean）
true和false都是小写。
var a = true;
var b = false;
任何数据类型都可以转换为boolean类型：空字符串（不能有空格）、0、null、undefined、NaN都是false。
// 布尔值为false的类型
Boolean('')
Boolean(0)
Boolean(null)
Boolean(undefined)
Boolean(NaN)
// 空数组和空白字符为true
Boolean(' ');
Boolean([]);
null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如
name=null; - undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。另外函数无明确的返回值时，返回的也是undefined。
常用内置对象：
JavaScript中所有的事物都是对象：字符串、数值、数组、函数。。。
此外，JavaScript还提供多个内建对象，比如Array，Data，Math等等
对象只是带有属性和方法的特殊数。据类型。
数组对象Array
数组对象的作用是：使用单独的变量名来存储一系列的值，类似Python的列表。
var x = ['libai','sushi'];
typeof x; // object
// 可以通过索引取值，但没有切片
console.log(x[0]);
// libai
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组，类似Python中列表的extend方法。 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
关于sort需要注意：
如果调用该方法时，没有使用参数，将按字母顺序进行排序，也就是按照字符编码的顺序进行排序。
var y = [9,11, 20, 29, 2088];
console.log(y.sort());
// [ 11, 20, 2088, 29, 9 ]
如果想按照其他标准进行排序，就需要提供比较函数，该函数具有两个参数a和b，接收传入的a和b，执行函数体代码，然后返回一个值用于说明a和b的大小。
注意js是弱类型：
var x = '11';
var y = '10';
z = x - y;
console.log(z); // 1
typeof z; // number
排序实例：
function sortNumber(a,b) {
return a - b
}
var arr = [9,11, 2088, 29, 20];
arr.sort(sortNumber) // [ 9, 11, 20, 29, 2088 ]
js可以使用索引遍历数组
var arr = [9,11, 2088, 29, 20];
for (var i=0;i<arr.length;i++) {
console.log(arr[i]);
}
forEach()
语法：forEach(function(currentValue,index,arr),thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数: 参数描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。 |
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
var arr=['aa','bb','cc','dd','ee']
arr.forEach(function(v,i,arr){
console.log(v,i,arr);
console.log(this[0]);
},"hello")
splice()
语法：splice(index,howmany,item1,...,itemX)
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 可选。表示要删除的项目数量（index对应的值也算一个）。如果不指定默认值为0，代表不会删除项目。 |
| item1, ..., itemX | 可选。向数组添加的新项目。 |
var arr=['aa','bb','cc','dd','ee']
arr.splice(1,3,'xxxx') // 删除‘bb’，‘cc’，’dd‘这三个值，然后插入’xxxx‘
arr // ["aa", "xxxx", "ee"]
map()
语法：map(function(currentValue,index,arr),thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述 currentValue 必须。当前元素的值 index 可选。当期元素的索引值 arr 可选。当期元素属于的数组对象 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined" |
forEach vs map：
1、forEach()返回值是undefined，不可以链式调用。
var res=arr.forEach(function(v,i,arr){
console.log(v,i,arr);
console.log(this[0]);
return 123;
},"hello")
res # undefined
2、map()返回一个新数组，原数组不会改变
var res=arr.map(function(v,i,arr){
v=v + 'SB'
return v;
},"hello")
res // ["aaSB", "bbSB", "ccSB", "ddSB", "eeSB"]
在使用forEach()时候，如果数组在迭代的视乎被修改，则其他元素会被跳过
var arr=[11,22,33,44,55]
arr.forEach(function(v){
console.log(v);
if (v === 33){
arr.shift() // 下一次循环应该循环出第索引为3的元素，但此时一旦删除第一个元素，那么值55的索引变成了3
}
})
11
22
33
55
// 反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) { //同时利用了call()方法
return x;
}).reverse().join('');
Date日期对象
创建日期对象只有构造函数一种方式，使用new关键字。
方式1：不指定参数
var d1 = new Date();
console.log(d1); // Thu Mar 11 2021 19:04:40 GMT+0800 (中国标准时间)
console.log(d1.toLocaleString()); // 2021/3/11 下午7:04:40
方式2：参数为日期字符串
var d2 = new Date("2018/01/27 11:12:13");
var d3 = new Date("01/27/18 11:12:13"); // 月/日/年 时分秒
方式3：参数为毫秒数
var d4 = new Date(7000);
console.log(d4) //Date Thu Jan 01 1970 08:00:07 GMT+0800 (中国标准时间)
console.log(d4.toLocaleDateString())
// "1970/1/1"
console.log(d4.toUTCString()); // 世界标准时
// "Thu, 01 Jan 1970 00:00:07 GMT"
方式4：参数为：年、月、日、时、分、秒、毫秒
var d5 = new Date(2018,1,27,11,12,13,700);
console.log(d5) //Tue Feb 27 2018 11:12:13 GMT+0800 (中国标准时间)
| 方法 | 含义 |
|---|---|
| getDate() | 根据本地时间返回指定日期对象的月份中的第几天（1-31）。 |
| getMonth() | 根据本地时间返回指定日期对象的月份（0-11） |
| getFullYear() | 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字） |
| getDay() | 根据本地时间返回指定日期对象的星期中的第几天（0-6） |
| getHours() | 根据本地时间返回指定日期对象的小时（0-23） |
| getMinutes() | 根据本地时间返回指定日期对象的分钟（0-59） |
| getSeconds() | 根据本地时间返回指定日期对象的秒数（0-59） |
| getMilliseconds() | 根据本地时间返回指定日期对象的获取毫秒 |
| getTime() | 返回累计毫秒数(从1970/1/1午夜) |
Math对象
| 方法 | 含义 |
|---|---|
| Math.floor() | 向下取整,如5.1取整为5 |
| Math.ceil() | 向上取整,如5.1取整为6 |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.random() | 随机数,默认0-1之间的随机数,若想求min~max之间的数，公式为：min+Math.random()*(max-min) |
求3和7之间的随机数：
var n = 3 + Math.random() * 4;
console.log(n);
JSON 对象
// JSON格式的字符串转成对象
var str1 = '{"name":"libai","age":18}';
var obj1 = JSON.parse(str1);
console.log(obj1.name); // "libai"
console.log(obj1['name']); // "libai"
// 对象转字符串
var str2 = JSON.stringify(obj1);
console.log(str2); // {"name":"libai","age":18}
RegExp对象
1、创建正则对象方式1
// 参数1 正则表达式
// 参数2 匹配模式：常用g（全局匹配，而不是匹配第一个后停止）和i（忽略大小写）
// 注意：正则放到括号内，{}内的逗号后面不要加空格
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
reg1.test("libai_123") // true
2. 创建正则对象的方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号
reg2.test("egon_123") // true
3. String对象与正则结合的4个方法
var s1="hello world";
s1.match(/l/g) // 符合正则的内容["l", "l", "l"]
s1.search(/h/g) // 符合正则的内容的索引0
s1.split(/ /) // ["hello", "world"]
s1.replace(/l/g,'L') // "heLLo worLd"
4. 匹配模式g与i
var s2="name:Egon age:18"
s2.replace(/e/,"赢") // "nam赢:Egon age:18"
s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"
s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"
5. 注意1：
// 1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 4、当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 5、因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
var reg3 = /egon/g;
reg3.lastIndex
0
reg3.test("egon") // true，匹配成功
true
reg3.lastIndex // 匹配成功reg3.lasIndex=4
4
reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
false
reg3.lastIndex // 匹配失败，lastIndex归为0
0
reg3.test("egon") // 再次匹配成功
true
6. 注意2：
当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true