前端之JavaScript
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.JavaScript概述
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM）Document object model(整合js,css,html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单的说，ECMAScript描述了JavaScript语言本身的相关内容
JavaScript是脚本语言
JavaScript是一种轻量级语言
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后，可由所有的现代浏览器执行
3.JavaScript引入方式
3.1 Script标签内写代码
<script>
//js代码
</script>
3.2 引入外部js文件
<script src='myscript.js'></script>
4.JavaScript语言规范
4.1 注释（注释是代码之母）
<script>
// 这是单行注释
/*
这是
多行注释
*/
</script>
4.2 结束符
JavaScript中的语句要以；为结束符
5.JavaScript语言基础
5.1 变量声明
JavaScript的变量名可以用_,数字,字母,$组成,不能以数字开头
声明变量使用var 变量名;的格式来进行声明
var name = 'lucas';
var age = 18;
注意：
- 变量名是区分大小写的
- 推荐使用驼峰体命名规则
- 保留字不能用做变量名
补充：
ES6（ECMAScript 6）新增了let命令，用于声明变量，用法类似于var，但是所声明的变量只在let命令所在的代码块有效，例如for循环的计数器就很适合使用let命令
for (let i = 0; i < arr.length; i++){...}
ES6新增const用来声明常量，一旦声明，其值就不能改变
const PI = 3.14159;
PI //3.14159
PI = 3;
// TypeError: "PI" is read-only
6.JavaScript数据类型
JavaScript拥有动态类型
var x; //此时x是undefined
var x = 1 //此时x是数字
var x = 'lucas' //此时x是字符串
6.1 数值（Number）
JavaScript不区分整型和浮点型，就只有一种数字类型
var a = 11.11;
var b = 20;
var c = 123e5; //12300000
var d = 123e-5; //0.00123
还有一种NaN，表示不是一个数字（Not a number）
常用方法：
parseInt('123') //返回是123
parseInt('ABC') //返回NaN，NaN属性是代表非数字值的特殊值，该属性用于指示某个值不是数字
parseInt('123.456') //返回是123
parseFloat('123.456') //返回是123.456
6.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) | 分割 |
slice和substring的区别
string.slice(start,stop) 和 string.substring(start,stop):
两者的相同点：
如果start等于stop，返回空字符串
如果stop参数省略，则取到字符串末尾
如果某个参数超过string的长度，这个参数会被替换为string的长度
substring()的特点：
如果start>stop,start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
slice()的特点：
如果start>stop,两者不会交换
如果start小于0，则切割从字符串末尾往前数的第start个的字符开始（包括该位置的字符）
var name = 'dswzdcymgmjj'
name.slice(-5,-3); //返回是 mg
如果stop小于0，则切割在从字符串末尾往前数的第stop个字符结束（不包括该位置字符）
name.slice(5,-3); //返回是 cymg
补充：
ES6中引入了模板字符串，模板字符串是增强版的字符串，用反引号（`）标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
//普通字符串
`这是普通字符串`
//多行文本
`
这是
多行文本
`
//字符串中嵌入变量
var name = 'lucas',time = 'today';
`Hello ${name},how are you ${time}?`
注意：
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义
6.3 布尔值（Boolean）
区别于python，true和false都是小写
var a = true;
var b = false;
//空字符串、0、null、undefined、NaN都是false
null和undefined区别
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如name=null
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined，还有就是函数无明确的返回值时，返回的也是undefined
null表示变量的值是空（null可以手动清空一个变量的值，使得该变量变为object类型，值为null），undefined则表示只声明了变量，但还没赋值
6.4 对象（object）
JavaScript中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript允许自定义对象
JavaScript提供多个内建对象，比如String、Date、Array等待
对象只是带有属性和方法的特殊数据类型
6.5 数组
数组对象的作用是：使用单独的变量名来存储一些的值，类似于python中的列表
var a = [123,'abx'];
console.log(a[1]); //输出'abx'
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的长度 |
| .push(ele) | 尾部追加元素 |
| .pop() | 删除列表最后一个元素并有返回值 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组连接成字符串 |
| .concat(val,...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给函数 |
| .splice() | 删除元素，并向数组添加新元素 |
| .map() | 返回一个处理后的新数组 |
forEach(function(currentValue,index,arr),thisValue)
参数：
- currentValue:必须，当前元素
- index:可选，当前元素的索引值
- arr:可选，当前元素所属的数组对象
- thisValue:可选，传递给函数的值一般用'this'，如果这个参数为空，'underfined'会传递给'this'值
var l = [11,22,33,44];
undefined
l.forEach(function(value,index,arr){
console.log(value,index,l)
})
VM1538:2 11 0 (4) [11, 22, 33, 44]
VM1538:2 22 1 (4) [11, 22, 33, 44]
VM1538:2 33 2 (4) [11, 22, 33, 44]
VM1538:2 44 3 (4) [11, 22, 33, 44]
undefined
l.forEach(function(value){
console.log(value)
})
VM1599:2 11
VM1599:2 22
VM1599:2 33
VM1599:2 44
undefined
splice()
语法：
splice(index,howmany,item1,...)
参数：
- index:必需，规定从何处添加/删除元素(必须是数字)
- howmany:必需，规定应该删除多少元素，可以是0，但必须是数字
- item1,...:可选，要添加到数组的新元素
var arr2 = [1,2,3,4,5,6,7];
undefined
arr2.splice(2,2,8,9)
(2) [3, 4]
arr2
(7) [1, 2, 8, 9, 5, 6, 7]
map()
语法：
map(function(currentValue,index,arr),thisValue)
参数：
- currentValue:必需，当前元素的值
- index:可选，当前元素的索引值
- arr:可选，当前元素属于的数组对象
- thisValue:可选，传递给函数的值一般用'this'，如果这个参数为空，'underfined'会传递给'this'值
var arr = [11,22,33,44];
undefined
arr.map(function(value,index,arr){
return value + 1;
})
(4) [12, 23, 34, 45]
arr
(4) [11, 22, 33, 44]
arr.map(function(value,index,arr){
return a = value + 1;
})
(4) [12, 23, 34, 45]
a
45 //return 有多个值得话只返回最后一个
arr
(4) [11, 22, 33, 44]
关于sort需要注意：
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
function sortNumber(a,b){
return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
7.运算符
7.1 算数运算符:+,-,*,/,%,++,--
var x = 10;
undefined
var res1 = x++
undefined
var res2 = ++x
undefined
res1
10
res2
12
//x++先赋值再自增1运算，而++x会先进行自增运算再赋值
7.2 比较运算符:>, >=, <, <=, !=, ==, =, !
注意:
1 == '1' //true 弱等于
1 ==='1' //false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
7.3 逻辑运算符:&&, ||, !
var w = 10;
undefined
var z = 20;
undefined
w && z
20
w || z;
10
!w;
false
7.4 赋值运算符:=, +=, -=, *=, /=
m = 1
1
m += 2
3
m -= 1
2
m *= 4
8
m /= 2;
4
8.流程控制
8.1 if-else
var a = 10;
undefined
if (a>5){
console.log('ok');
}else {
console.log('no');
}
VM2102:2 ok
undefined
8.2 if else-if
if (a>5){
console.log('a>5');
}else if (a<5){
console.log('a<5');
}else {
console.log('a=5');
}
VM2173:2 a>5
undefined
8.3 switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log('Sunday');
break;
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
break;
case 4:
console.log('Thursday');
break;
case 5:
console.log('Friday');
break;
case 6:
console.log('Saturday');
break;
}
VM2176:19 Friday
//switch中的case语句通常都会加break语句，否则程序会继续执行后续case中的语句
var day = new Date().getDay();
switch (day) {
case 0:
console.log('Sunday');
break;
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
break;
case 4:
console.log('Thursday');
break;
case 5:
console.log('Friday');
case 6:
console.log('Saturday');
}
VM2216:19 Friday
VM2216:21 Saturday
8.4 for
for (var i=0;i<10;i++){
console.log(i);
}
VM2283:2 0
VM2283:2 1
VM2283:2 2
VM2283:2 3
VM2283:2 4
VM2283:2 5
VM2283:2 6
VM2283:2 7
VM2283:2 8
VM2283:2 9
undefined
8.5 while
var i = 0;
undefined
while (i<10){
console.log(i);
i++;
}
VM2361:2 0
VM2361:2 1
VM2361:2 2
VM2361:2 3
VM2361:2 4
VM2361:2 5
VM2361:2 6
VM2361:2 7
VM2361:2 8
VM2361:2 9
8.6 三元运算
var a = 1;
undefined
var b = 2;
undefined
var c = a>b?a:b;
undefined
c
2
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a = 10,b = 20;
undefined
var x =a>b?a:(b=='20')?a:b;
undefined
x
10
9.函数
9.1函数定义
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
//普通函数定义
function f1(){
console.log('hello world')
}
//带参数函数
function f2(a,b){
console.log(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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象
9.2函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length); //包含了传入的全部参数
console.log(arguments[0]); //取第一个传入的参数
}
undefined
add(1,2,3,4,5);
VM2961:2 3
VM2961:3 5
VM2961:4 1
undefined
9.3函数的全局变量和局部变量
局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
- JavaScript变量的生命期从它们被声明的时间开始
- 局部变量会在函数运行以后被删除
- 全局变量会在页面关闭后被删除
9.4作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层，与python作用域一样
示例
var city = 'beijing';
undefined
function f(){
var city = 'shanghai';
function inner(){
var city = 'shenzhen';
console.log(city);
}
inner()
}
undefined
f()
VM3161:5 shenzhen
undefined
var city = 'beijing';
undefined
function bar(){
console.log(city);
}
undefined
function f(){
var city = 'shanghai';
return bar;
}
undefined
var res = f()
undefined
res()
VM3258:2 beijing
undefined
//闭包
var city = 'beijing';
function f(){
var city = 'shanghai';
function inner(){
console.log(city);
}
return inner;
}
var res = f();
res(); //打印结果是'shanghai'，一层一层往上找
10.内置对象和方法
10.1自定义对象
JavaScript的对象(object)本质上是键值对的集合(Hash结构)，但是只能用字符串作为键
var a = {'name':'lucas','age':18};
console.log(a.name);
console.log(a['age']);
遍历对象中的内容
var a = {'name':'lucas','age':18};
for (var i in a){
console.log(i,a[i]);
}
10.2 创建对象：
var person = new Object(); //创建一个person对象
person.name = 'lucas'; //person对象的name属性
person.age = 18; //person对象的age属性
注意：
ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现
var m = new Map();
undefined
var o = {p:'content'}
undefined
m.set(o,'hello world')
Map(1) {{…} => "hello world"}
m.get(o)
"hello world"
m.has(o)
true
m.delete(o)
true
m.has(0)
false
10.3 Date对象
创建Date对象
//不指定参数
var d1 = new Date();
console.log（d1.toLocaleString()）;
//参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
VM3705:2 2004/3/20 上午11:12:00
undefined
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
VM3708:2 2020/4/3 上午11:12:00
undefined
//参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
VM3711:2 1970/1/1 上午8:00:05
VM3711:3 Thu, 01 Jan 1970 00:00:05 GMT
undefined
//参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());
VM3714:2 2004/3/20 上午11:12:00 //毫秒并不显示
undefined
Date对象的方法：
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
10.4 json对象
var str1 = '{"name": "Alex", "age": 18}';
undefined
var obj1 = {"name": "Alex", "age": 18};
undefined
var obj = JSON.parse(str1); //json.loads
undefined
var str = JSON.stringify(obj1); //json.dunps
undefined
obj
{name: "Alex", age: 18}
str
"{"name":"Alex","age":18}"
10.5 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('lucas666')
reg2.test('lucas666')
/*第一个注意事项，正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();