前端之JavaScript
基础
1.注释语法
// 单行注释
/*多行注释*/
2.前端引入js的多种方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入2外部js资源
3.结束符号
分号
4.编写js的两种方式
1.pycharm创建js文件或者html文件
2.浏览器提供的编写js代码的环境
变量与常量
1.在js中声明变量需要使用关键字
var 全局变量使用
var name = 'jason';
let 局部变量使用(let是ECMA6新语法，可以在局部定义变量不影响全局)
let name = 'kevin';
2.js中声明常量也需要使用关键字
const
基本数据类型
在js中查看数据类型的方式 typeof
js拥有动态类型
var x; // 此时x未定义，为undefind
var x = 1; // 此时x为数字
数值类型 Number
在js中不分整型浮点型，所有的数字类型都为数值类型Number
var a = 11;
var b = 11.11;
除此之外还有一种NaN,它表示不是一个数字(Not A Number)
字符类型 String
js中字符类型只能使用单引号或双引号
1.字符串的拼接
可以使用.concat,也可以直接使用+号(推荐使用+号)
let a = 'hello';
let b = 'world';
console.log(a+b); // helloworld
2..length 返回长度
a.length // 5
3. .trim() 移除空白
4. .trimLeft() 移除左边空白
5. .trimRight() 移除右边空白
6. .charAt(n) 返回第n个字符
a.charAt(4) // l
7. .indexOf() 根据填入的字符串获取其位置
a.indexOf('lo') // 5
8. .substring() 根据根据索引位置获取对应的子序列字符串
9. .slice() 切片
a.slice(2,4) // 'he'
10. .toLowerCase() 小写
11. .toUpperCase() 大写
12. .split() 分割
a.split('e') // ['h','llo']
a.split('e',1) //['h']
布尔值 Boolean
和python不同的是true和false都是小写
空字符串、0、null、undefind、NaN都是false
/*
null表示值为空，变量名有赋值，只是值为null
undefind表示声明了一个标量，但是未初始化，没有赋值，该变量的默认值是undefind，另外函数无明确返回值时，返回的也是undefind
*/
数组
类似于python中的列表
1. .length 数组大小
2. .push() 尾部追加元素
3. .pop() 获取尾部元素
4. .unshift() 头部插入元素
5. .shift() 头部移除元素
6. slice() 切片
7. reverse() 反转
8. .join() 将数组元素连接成字符串
9. .concat() 连接数组
10. .sort() 排序
11. .splice() 删除元素并向数组添加新元素
对象
1. js中所有的事物都是对象
2. js中允许自定义对象，自定义的对象类似于python中的字典
let d1 = new Object();
d1.name = 'jason';
d1.age = 18; // {'name':'jason','age':18}
运算符
1. 算数运算符
+ - * / % ++(自增) --(自减)
// ++和--若变量在前则先赋值再运算，若变量在后则先运算再赋值
2.比较运算符
> >= < <= !=(弱) ==(弱等于) ===(强等于) !==(强)
比较运算符分强弱是因为js是一门弱类型语言，它会自动转换数据类型
eg:
1 == '1'; // true
1 === '1'; // false
// 用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,三个等号就是直接比较
3. 逻辑运算符
&&(与) ||(或) !(非)
4. 赋值运算符
= += -= *= /=
流程控制
1. 单if分支
if (条件) {
条件成立执行的子代码
}
2. if...else分支
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3. if...else if...else分支
if (条件1) {
条件1成立执行的子代码
}else if (条件2) {
条件1不成立条件2成立执行的子代码
}else{
上面的条件都不成立执行的子代码
}
4.switch 适用于条件过多时
switch(条件){
case 条件1:
条件1成立执行的代码;
break; //如果没有break会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
5.for 循环
for(起始条件;循环条件;条件处理){
循环体代码
}
6. while 循环
while(循环条件) {
循环体代码
}
7.三元运算
条件?值1:值2 // 条件成立取值1，否则取值2
python中则是 值1 if 条件 else 值2
函数
定义函数
function 函数名(形参){
//函数注释
函数体代码
return 返回值
}
匿名函数
var s1 = function(a,b){
return a + b;
}
箭头函数
var f = v => v;
等价于
var f = function(v){
return v;
}
补充
1.js中函数的形参与实参个数可以不对应
实参传少了报undefind,传多了没反应
2.函数体代码中有一个关键字arguements用于接收所有的实参
3.函数的返回值如果有多个，默认只返回最后一个，所有都要的话需要我们自己将其处理成一个整体
内置对象
Date对象
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON对象
let a = {name: 'jason', age: 18}
b = JSON.stringify(a) // 序列化
JSON.parse(b) // 反序列化
RegExp对象
该对象用于正则表达式
js中定义正则的两种方式
1. var reg1 = new RegExp("正则表达式")
2. var reg2 = /正则表达式/;
注意事项
1.正则表达式中不能有空格
2.全局匹配时应该有一个lastIndex属性
3.test匹配数据时，不传数据默认传的undefind