前端—javascript
1、注释、引入方式
1、单行注释：//
2、多行注释：/**/
3、js的引入方式：
1、script标签内部直接书写
<script>
alert(123)
</script>
2、通过script标签src书写，引入外部js文件
<script src="js.js"></script>
2、变量
2.1 变量声明
// 1、使用var声明变量
var name = "jason"
// 2、使用let声明变量
let name = "panda"
/*
两种方式的差别：循环中使用临时变量
let定义，循环体内有效，循环体结束就被删除
var定义，就是全局变量，全局有效
2.2 命名规范
/*
1、只能由数字、字母、下划线、美元符号$构成
2、不能由数字开头
3、不能时js保留字
4、推荐使用驼峰体
*/
//js保留字如下：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
2.3 常量
/*
1、python中的常量是约定俗成的
2、js中常量是确实存在的，不能被修改，否则会报错
3、js中使用const关键字定义常量
*/
const pi = 3.1415
2.4 数据类型
2.4.0 查看数据类型typeof
2.4.1 数值类型Number
/*在js中，只要是数，就是数值型的，即number*/
var a = 100
var b = 99.99
var c = "123"
console.log(type(a),type(b),type(c))
//number number string
2.4.2 字符类型string
// 使用''或者""来表示字符串
var name = 'wolf'
var name = "bull"
// 常用的方法，使用对象.属性的方式
name.length //长度
name.trim() //去除两端空白，不能填参数，不改变原值
name.trimLeft()
name.trinRight()
name.concat(value,...) //拼接字符串,但是不推荐使用，而是推荐使用+拼接
name.charAt(n) //n类似索引，获取索引位置的字符，超出索引时为""
name.indexOf(substring,start) //子字符串的位置,没有返回-1
name.substring(from,to) //同上，但是不支持负数索引
name.substr(start,length) //从索引start开始，获取length长度的字符串
name.slice(start,end) //切片，同python
name.toLowerCase() //全部变小写
name.toUpperCase() //全部变大写
name.split("delimiter",limit) //切分，同python,返回前limit个数的几个元素，负数返回全部，小数取整
name.replace(a,b) //同python
name.match() //正则匹配
2.4.3 对象object
2.4.3.1 数组array
//创建、赋值
// 1、字面量创建方式，推荐使用的方式
var colors = ["red","blue","yellow"];
// 2、构造函数，关键字new
var colors2 = new Array()
// 3、通过下标赋值
colors2[0] = 1 //添加值
colors[0] = 2 //改变值
// 常用方法,使用对象.属性的方式
var color = ["red","blue","yellow"]
color.length //同string
color.push() //同python的append
color.pop() //同python
color.unshift() //头部插入元素
color.shift() //同pop，但是是第一个元素
color.slice(start,end) //切片，同python
color.reverse() //倒转列表,同pyhton
color.join() //同Python
color.concat() //同python中list.extend()，但是这里不改变原数组
color.sort() //同python
color.forEach() //将每个元素传给回调函数
color.splice(1,2,3) // 1为从哪删，2为删几个，3为删除位置替换的新元素，可以是多个
color.map() // 返回一个数组元素调用函数处理后的值的新数组
color.toString() //转换成字符串，不包含[]，不改变原数组
Array.isArray() //判断是否为数组
2.4.3.2 JSON
var str1 = '{"name":"chao","age":18}'
var obj1 = {"name":"chao","age":18}
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
// 遍历对象中的内容,同python中遍历字典.keys()
for (var i in obj){
console.log(i,obj[i])
}
2.4.3.3 日期Date
//定义,只能使用构造函数，关键字new
var myDate = new Date(); //date对象
//常用获取时间方法,对象.属性
myDate.getDate() //获取一个月中的某一天(1-31)
myDate.toLocalString() //本地时间
myDate.Date() //返回当天的日期和时间
myDate.getMonth() //月份(0-11)
myDate.getFullYear() //年份
myDate.getDay() //星期几(0-6)
myDate.getHours() //小时(0-23)
myDate.getMinutes() //分钟(0-59)
myDate.getSeconds() //秒(0-59)
//设置时间的方法
https://www.runoob.com/jsref/jsref-obj-date.html
2.4.3.4 正则RegExp
创建正则对象
// 方式1：构造函数，关键字new
var reg1 = new RegExp("正则规则")
// 方式2：简写，/正则表达式/匹配模式(逗号后不要加空格)
var reg2 = /var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}")/;
正则对象常用方法 ：.test()
var s1 = "aaaabbbbsd2"
reg1.test(s1) // 传参，匹配不到false，匹配不到true
String对象与正则对象结合使用
var s = "hello world"
s.match(/o/g); //查找内容
s.search(/h/g); //查找位置，返回第一个，有无g都一样
s.replace(/o/g,"s") //对字符串按正则替换
注意事项
/*
test()函数 lastIndex属性
1、带有全局标志g，test()从属性lastIndex指定处开始查找
2、lastIndex默认为0
3、找到一个时，test()将lastIndex更新为匹配内容后一位索引
4、当再次执行test(),按照此时的lastIndex查找
5、当test()找不到，lastIndex重置为0
*/
/*
test()不传参数，实际上默认传undefined，并且变成字符串undefined
*/
2.4.3.5 数学相关 Math
通过对象Math调用数学方法
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.max(a,b) // 求两者较大值
Math.min(a,b) //求两者较小值
Math.random() //0-1之间的随机数 区间[0,1)
2.4.4 布尔值Boolean
// true false 不能大写
2.4.5 未定义undefined
// 声明了变量，但是还没初始化赋值，代表变量还没定义
var name
console(typeof(name));
//undefined
2.5 输入输出
// 弹出警告框：alert 语句
// 控制台输出：console.log("")
// 控制台输入：prompt()
/*
1、必须使用变量接收输入，且都接受为字符串
2、网页弹窗，接收用户输入
alert("大仙向南飞");
var a = prompt("请输入一个数字");
3、数据类型之间的转换
字符串转数字
// parseInt() 参数为字符串，也可以处理数字类型
/*
1、只保留字符串最开头的数字
2、取整，不四舍五入
3、若开头不是数字，则返回NaN，意为不是一个数字
*/
var a = "5.5asd22"
var b = parseInt(a);
console.log(a,b,typeof(a),typeof(b))
字符串转小数
// parseFloat() 参数为字符串，也可以处理数字类型
/*
1、只保留最开头的数字
2、能识别小数点
3、开头可以是小数点、数字，但不能是其它，否则返回Nan
*/
转字符串
// String()和.toString()
/*
String()参数为：数字，列表，字符串，等，字典不行，其他类型未测试
*/
/*
数组类型有.toString()方法，转变为字符串
*/
转布尔值
// 任何数据类型都有布尔值，Boolean()
/*
1、只有0、null、false、undefined、NaN和""的布尔值为false
2、[]、{}等空值为true
3、其他变量都为true
4、Infinity 表示无穷大
*/
var a = 123;
var b = "abc";
var a1 = Boolean(a);
var b1 = Boolean(b);
console.log(a,b,a1,b1);
4、运算符
4.1 赋值运算符
// 同pyhton
= += -= *= /= %=
4.2 比较
// 与python相似,需要注意的是等于
== // 等于，只比较数值大小，不管类型
=== // 等同于，值和类型都相同
!=
!==
> < >= >= <= <= // 同样值只比较大小，但是没有>== <==
4.3 算术
// 与python相似，但是多了自增、自减，没有整除
+ - * / %
++ // a++ 先取a，在对a加1
// ++a 先对a+1，再取a
-- // a--
// --a
注意点：
/*
1、字符串+字符串/数字 结果是拼接字符串
2、字符串-字符串/数字 结果是按照数值相减
*/
4.4 逻辑
// 与、或、非
// &&、||、!
4.5 三元运算符
// 同c，语法如下
条件 ? 值1:值2
// 条件成立，取值1，否则取值2
5、函数
5.1 定义
// 语法
function 函数名称(){
// 函数体
}
// 函数名命名：数字，字母、下划线、美元符号，非数字开头，非保留字
5.2 调用
// 同python
函数名();
5.3 参数和返回值
/*
1、只能返回一个值，要想返回多个，需要存储到数组或对象中
2、传入实参个数多余形参，只取前面需要的个数
3、传入实参个数小于形参，不报错，具体情况具体分析
*/
5.4 伪数组arguments
/*
1、代表的是实参
2、只在函数中使用
3、可以修改元素，但是不能改变数组长短
4、属性.length返回函数实参个数
*/
function func(a,b,c){
console.log(arguments.length); // 实参个数
console.log(func.length); // 形参个数
console.log(arguments); // 实参数组
arguments[0] = "改变后的第一个实参"; // 修改实参
console.log(arguments);
arguments.push("想要添加实参"); // 报错，无法添加实参
}
5.5 全局与局部
1、函数内部声明的变量是局部变量，函数运行结束，就会被删除
2、函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它，网页关闭时，被删除
5.6 作用域
同python
查找顺序在定义阶段，即被确定
函数内》外层函数内》...》全局
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
// ShangHai
6、流程控制
6.1 if
// 逻辑同python，语法不一致，如下：
if (条件1) {
// 条件1成立，执行
}else if(条件2){
// 条件1不成立，条件2成立，执行
}else{
// 前面的条件都不成立，执行
}
6.2 switch ... case
// 例子说明
var a = "hello"
switch(a){
// case表示一个条件，满足即执行对应代码
case "better":
// break 表示终止switch，不执行下面的case判断了
console.log("好") break;
case "dasda":
console.log("不好")
}
6.3 while与do-while
// while循环，逻辑同python，语法不同，如下
while(条件){
// 条件成立，执行
// 遇到break,就终止循环
// 遇到continue就跳过下面的循环体，执行下一次循环
}
// do while 同c
do{
/*
1、先执行循环体一次
2、有break,continue规则
3、当while条件成立，继续执行循环，否则终止
*/
}while(条件)
6.4 for
// 逻辑同python，语法同c
// 以例说明
for(var i=1;i<=10;i++){
console.log(i)
}
var arr = [1,2,3,4,5]
for(n in arr){
// n是索引位置，此处与python不同,如果遍历的是字典，那么n就是key
console.log(n,arr[n])
}
for(v of arr){
// v是数组元素
console.log(n)
}
7、面向对象
创建对象的几种常用方式：
1、Object或对象字面量创建
2、工厂模式
3、构造函数
4、原型的模式
// 只介绍Object或对象字面量
// Object
var student = new Object();
student.name = "egon";
student.age = 18;
// 对象字面量
var student = {
name:"egon",age:18
};
