Javascript基础
目录
js也是一门编程语言，是面向对象的编程语言，也是一门弱类型的语言，有自己独特的风格。对代码错误的容忍度比较高，报错的话就说明你触及到它的底线了。
注释以及引入
学习一门编程语言，首先要学的就是这门语言的注释
//这是单行注释
/*这里可以写多行注释*/
JS的引入方式有两种：
- script标签内部书写。
- script标签内的src属性引入外部的js文件。
js的编程语言通常以分号来作为语句结束。
一般情况下编写js文件的方式有两种
- 可以单独开设js文件进行编写，
- 可以使用浏览器提供的console进行编写。
变量
js的变量定义方式是依靠关键字来实现的，
- var:在全局使用这个关键字定义变量，那么该变量就是全局变量，如果在函数体内定义一个与外界相同变量名而未使用var关键字，那么就会出现覆盖的现象；使用var则会将该变量转为局部变量
- let：用法和var类似，let声明的变量只在let命令所在的代码块有效，经常用在for循环内部。
- 可以不使用关键字直接定义。
在js这门语言中有常量的概念，是使用const关键字来定义的，一旦定义就不允许进行修改。
变量的命名规范
变量的命名规范如下：
- 变量名只能是字母、数字、下划线和$符。
- 推荐使用驼峰体的命名方式，即每个单词的首字母大写
- 不能使用关键字做变量名
数据类型
数据类型有：数值类型、字符串类型、布尔值类型和对象类型。
数值类型（number）
也就是数字，不同的是在js中没有整数和小数之分，统一称为数值number，但是可以进行类型的转换。
// 1. 定义数值类型
var num = 11;
var num1 = 11.11;
// 查看类型
typeof a; // number
typeof b; // number
// 2.类型的转换
parseInt('111.111') // 111
parseInt('11fwfreg') // 11
parseFloat('fjfwe1123fuhsa') // NAN 表示不是一个数字：not a number
字符类型（string）
// 定义字符串的方式
var s1 = '这是单引号的字符串'
var s2 = "这是双引号的字符串"
// 如果要是定义多行的字符串，需要使用到 模板字符串。是反引号定义的（ESC下面的键位）
var s3 = `
江山风景美如画；
本想吟诗赠天下。
`
// 模板字符串还可以实现格式化字符串的操作。主要是使用&{}
var s4 = `
这里是s1 ${s1};这里是s2${s2}.
`
// 还可以使用+号进行字符串的拼接
var s = s1 + s2
字符串的常用方法
length 返回长度
trim() 去除前后空白
charAt(n) 返回第n个字符
concat(v) 拼接操作，将v添加到字符串之后
indexOf(v) 查找v在字符串中的位置，并返回下标，但是只能找到第一个v，如果存在第二个v则并不能找到
substring(start,stop) 通过开始和结束的下标位置获得字符串的片段。不写默认是字符串本身
slice() 切片，同substring，但是可以识别-1位置（倒数第二个元素下标）
toLowerCase() 小写
toUpperCase() 大写
split(delimiter,num) delimiter作为分隔符将字符串切成数组，取出num个元素。不写则取出全部
substring和slice用法较为相似，一般情况下slice的容错率较高一点，推荐使用该方法。
布尔值（boolean）
布尔值分为true和false.
布尔值为false的值为：0, null, undefined, NaN
null意味着是空，即该变量值的值为空，但是undefined则意味着该变量名只是声明了，但是并未赋值；如果函数的没有返回值的话，那么也是默认为undefined。
对象Object
首先要明确，JS是一门面向对象的编程语言，即一切皆对象。
数组
数组对象使用[]来定义，可以将一系列变量存放进这个数组中。
var l = [1,2,3,4,'a','s']
// 查看数组内部具体的值可以使用下标来看。
console.log(l[0]) // 输出的结果为1
// 常用方法
length 数组的长度
push(v) 尾部添加v元素
pop() 尾部元素删除
shift() 删除开头元素
unshift(v) 添加开头元素v
slice(start,stop) 切片操作
reverse() 进行反转，不是进行排序
join(seq) 将数组各元素使用seq进行拼接成字符串
sort() 进行排序
concat() 数组的拼接，可以拼接元素，也可以将亮一个数组内的元素进行拼接
// 三个重要的方法
/* forEach(函数，数组) 将数组内的元素传递给回调函数。也可以对元素进行处理操作
他还可以接受两个参数，三个参数，分别返回的是【元素的值，元素值的下标，来源数组】 */
var l = [1,2,3,4,5]
l.forEach(function(i){console.log(++i);},l) // 2,3,4,5,6
l.forEach(function(i,idex,arr){console.log(i,index,arr);},l)
/* map(函数，数组) 返回一个数组元素调用函数处理后的值的新数组 */
var l = [1,2,3,4,5]
l.map(function (i) {return i**2},l) // [1, 4, 9, 16, 25]
/* splice(start,num,[value]) start位置向后数num的元素删除，然后添加value元素（选填）。*/
var l = [1,2,3,4,5,6,7,8,9]
l.splice(1,3) // 从下标为1的元素开始向后删除三个元素
l.splice(1,2,'a') // 从下标为1的元素开始向后删除2个元素，且添加a元素在下标为1的位置
运算符
运算符分为算数运算符、比较运算符、逻辑运算符、赋值运算符。
算数运算符
算数运算符为：+ - * / %
++ :递增，就是+1的意思
-- :递减，就是-1的意思
var i = 1;
console.log(i++) // 值为1，先赋值，后加减
console.log(++i) // 3， 先加减，后赋值
// 每当进行一次i++,就相当于进行了一次i=i+1，但是显示的结果是有先后顺序的。但是其本身都是加1的。
// --的操作和++一样
比较运算符
比较运算符： > < >= <=
需要注意的是：== === != !==
== : JS是弱类型的语言，==对自动将双方转为同一类型然后进行比较
1 == '1' // true
1 != '1' // false
===：此时也会比较双方的数据类型
1 === '1' // false
1 !== '1' // true
逻辑运算符
与或非 分别对应的符号是 && || !
赋值运算符
赋值运算符为：= += -= /= *=
流程控制
主要就是if判断、switch、while、for
if判断
// 在流程控制中，()内一般放条件，{}一般放的是执行代码块
// if-else: if(条件){执行代码} else {}
var age = 18;
if (age < 20) {
console.log('你太小了')
} else {
console.log('你太大了')
}
// if-else-if-else:
var age = 18;
if (age < 20) {
console.log('你太小了')
}else if (age <28) {
console.log('这个年纪我们可以试试。')
}else{
console.log('你年纪太大了。')
}
switch
有时可以用来代替if-else-if-else 语法，通过判断给出的定值，进入不同的case分支。
var n = 1;
switch (n) {
case 1:
console.log('这是1')
break
case 2:
console.log('这是2')
break
default:
console.log('如果上面的都不是，那么你就能看到我了')
}
一般情况下，case都会默认跟一个break ,如果要是没有break ,那么在执行完case事件之后，会继续执行下一个case，直到执行完毕（包括最后的default）。
while
var i = 10;
while (i<10) {
console.log(i);
i++;
}
for
/* 语法：一般情况下，可使用let来定义变量
for (定义一个变量；循环次数判断条件;自增) {执行代码}
*/
for (let i=0;i<10;i++){
console.log(i)
}
三元运算
// 语法： l = 条件 ？ 条件成立 ： 条件不成立
var a = 2
var b = 3
var c = a<b ? a : b
函数
在js中定义函数的关键字是使用function。
具体的语法格式是：function 函数名(参数){函数体代码}
在函数的调用的时候，可以多传参数，也可以少传参数，都不会报错。
- 多传参数：函数不搭理多余的参数。
- 少传参数：函数会自动给该参数赋值undefined.
关键字arguments可以接收到传入该函数的所有参数。
函数的返回值的关键字是return，如果返回多个值，那么外界只能接受到最后一个返回的值。也就是说JS不接受返回多个值的现象。但是也可以通过数组的方式返回。
// 箭头函数主要是用来处理简单的业务逻辑。
var func1 = 形参 => 返回值;
效果等同于
var func1 = function(形参) {返回值}
var func2 = (a,b) => a+b;
// 立即执行参数：在定义之后立即运行，不需要调用
(function(a,b)){
return a+b
}(1,2);
函数内部的变量查找顺序和Python的查找顺序是一致的。
- 查找顺序是在定义阶段就已经确定好了的。
- 先找局部变量再找全局变量
自定义对象
创建自定义对象
自定义对象使用符号{}来定义的，其内部是键值对，各项之间使用逗号分隔。
// 创建一个自定义对象
var d = {'name':'tom','gender':'male'}
// 查看对象属性
d['name']
d.name
// 使用for循环的话 外界可以获取的是对象的key。
// 还可以使用这种方式创建对象。
var person=new Object(); // 创建一个空的person对象
person.name = 'tom' // 添加属性
person['age'] = 1
Date对象
// 创建一个时间对象
var t =new Date(); // Sat May 16 2020 21:30:40 GMT+0800 (中国标准时间)
t.toLocalString() // 转为格式：年/月/日 上午时：分：秒
var t1 = new Date('2020/1/2 3:4:5')
var t2 = new Date(2020,1,2,3,4,5)
//时间对象的具体方法
getDate() 获取日
getDay() 获取星期
getMonth() 获取月份(0-11)
getFullYear() 获取完整的年份
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getMilliseconds() 获取毫秒
getTime() 时间戳
json对象
// js中的序列化化与反序列化
JSON.stringify() 序列化
JSON.parse() 反序列化
var j = {'name':'tom','flag':true}
var jJson = JSON.stringify(j) // 转成了json格式
var j1 = JSON.parse(jJson)
RegExp对象
// 如果想使用正则的话 需要首先创建一个正则对象
var r1 = new RegExp('正则规则')
var r2 = /正则规则/
r.test('测试字符串') //判断测试字符串是否符合正则表达，返回true或者false
// 正则对象只匹配一次 如果想匹配多次 那么就需要在方法的正则规则末尾再加一个g,全局匹配
var r = '字符串'
r.match(/^a/) 不存在返回null,存在返回['匹配字符串',index:下标，input:'来源
r',groups:undefined]
r.match(/^a/g) 查找字符串中符合正则的内容，多个的话返回数组
r.search(/正则/) 返回符合正则的起始下标，不存在则返回-1、
r.replace(/正则/g,替换字符) 不带g，只能替换一次，如果只替换一次，也可以使用'匹配内容'
神奇点：
1.test方法在全局模式匹配过后，会将LastIndex留在匹配字符的最后一个下标，待下次查询的时候，会从该下标向下查询。
2.如果test内什么都不传，那么会默认传的值为undefined,返回的结果都是true.