前端基础之JS
JavaScript引入方式
Script标签内写代码
<script>
// 在这里写你的JS代码
</script>
"""
可以编写js代码的地方
1.pycharm提供的js文件
2.直接使用浏览器提供的编程环境
"""
ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
需要我们自定义设置 settings>>>l f>>>js
引入额外的JS文件
<script src="myscript.js"></script>
注释（注释是代码之母）
// 这是单行注释
/*
这是多行注释
*/
变量与常量
在JS中声明变量需要使用关键字
老版本 var(全部都是全局变量)
新版本 let(可以声明局部变量)
# 推荐使用let(其实问题不大)
JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明
'''
变量名是区分大小写的。
推荐使用驼峰式命名规则。
保留字不能用做变量名。
'''
在JS中声明常量也需要使用关键字
const # 声明一个真正意义上的常量
如何创建变量
var name = 'Luz'
let name = 'Luz'
如何创建常量()
const pi = 3.14
ES6新增const用来声明常量。一旦声明，其值就不能改变。
JavaScript数据类型
python基本数据类型
int、float、str、list、dict、bool、tuple、set
js基本数据类型
number、string、boolean、undefined、object()
查看数据类型
python中使用type()
js中使用typeof
数值(Number)
# JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
# 数值类型:包含了整型与浮点型: parseInt、parseFloat
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
# NaN:Not A Number
"""NaN属于数值类型 表示的意思是 不是一个数字"""
字符串(String)
# 定义字符类型的方式
1.单引号
2.双引号
3.小波浪号
var s1 = `
he
ll
ow
`
# 在js中字符串的拼接推荐使用+号
var a = "ABC"
var b = "abc;
var c = a + b;
console.log(c); // 得到ABCabc
# 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
# 格式化输出
var name1 = 'Luz'
var age = 23
`my name is ${name1} my age is ${age} `
用法补充
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
boolean类型
在python中布尔值类型首字母大写
True False
在js中布尔值类型全部小写
true false
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
# 定义
null: 是所有没有赋值变量的默认值，自动赋值
undefined: 主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址
null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。
# 共同点：都是原始类型，保存在栈中变量本地
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值。
例如：var a; //a自动被赋值为undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用。
例如：var emps = ['ss','nn'];
emps = null; //释放指向数组的引用
对象类型
在 JS 中，除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是，原始类型存储的是值，对象类型存储的是地址（指针）。当你创建了一个对象类型的时候，计算机会在内存中帮我们开辟一个空间来存放值，但是我们需要找到这个空间，这个空间会拥有一个地址（指针）。
const a = []
对于常量a来说，假设内存地址（指针）为#001，那么在地址#001的位置存放了值[]，常量a存放了地址（指针）#001，再看以下代码
const a = []
const b = a
b.push(1)
当我们将变量赋值给另外一个变量时，复制的是原本变量的地址（指针），也就是说当前变量b存放的地址（指针）也是#001，当我们进行数据修改的时候，就会修改存放在地址（指针）#001上的值，也就导致了两个变量的值都发生了改变。
接下来我们来看函数参数是对象的情况
function test(person) {
person.age = 26
person = {
name: 'yyy',
age: 30
}
return person
}
const p1 = {
name: 'yck',
age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: 'yck', age: 26}
console.log(p2) // -> {name: 'yyy', age: 30}
'''
首先，函数传参是传递对象指针的副本
到函数内部修改参数的属性这步，我相信大家都知道，当前p1的值也被修改了
所以最后person拥有了一个新的地址（指针），也就和p1没有任何关系了，导致了最终两个变量的值是不相同的。
'''
数组类型
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
常用方法：(对应python)
forEach()
语法：
forEach(function(currentValue, index, arr), thisValue)
参数：
map()
语法：
map(function(currentValue,index,arr), thisValue)
python写法:
运算符
1.比较运算符
== 弱等于 # 会自动转换数据类型至相同状态
=== 强等于 # 不会自动转换数据类型
1 == “1” // true 弱等于
1 === "1" // false 强等于
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
2.逻辑运算符
python中
and or not
js中
&& || !
3.算术运算符
+ - * / % ++ --
# 这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
流程控制
定义
'''if判断'''
python中
if 条件:
条件成立之后执行的代码
else:
条件不成立执行的代码
js中
if(条件){
条件成立之后执行的代码
}else{
条件不成立执行的代码
}
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件2成立之后执行的代码
}else{
条件都不成立执行的代码
}
'''switch'''
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
### switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for
"""for循环"""
for(起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for (var i=0;i<10;i++) {
console.log(i);
}
# 练习:如何使用for循环取出数组内的每个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
"""while循环"""
while(循环条件){
循环体代码
}
三元运算符
在python中
res = '吃饭' if 18 > 10 else '喝水'
在js中
res = 18 > 10 ? '吃饭':'喝水'
函数
函数的定义
在python中
def 函数名(参数1,参数2,...):
'''函数注释'''
函数体代码
return 返回值
在js中
function 函数名(参数1,参数2,...){
// 函数注释
函数体代码
return 返回值
}
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的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);
"""
arguments参数 可以获取传入的所有数据
也支持return和匿名函数
"""
!!!!补充：
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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
函数中的argument参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)
输出:
3 2 1
注意：
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。
js中的对象
自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
# 相当于python中的字典类型
方式1: var d = {'name':'Luz','age':23}
方式2: var d = Object({'name':'Luz','age':23})
class MyDict(dict): # 继承父类
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
res = MyDict(name='Luz',age=23)
print(res.name)
print(res.age)
res.xxx = 123
print(res.xxx)
print(res)
内置对象
# 如果需要使用内置对象 需要关键字 new
在python中
import date
date()
在js中
new date()
##########################################################
序列化
python中
import json
json.dumps() # 序列化
json.loads() # 反序列化
js中
JSON.stringify() # 序列化
JSON.parse() # 反序列化
"""
如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化
"""
##########################################################
RegExp对象
regexp对象
方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
全局匹配
正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
# 全局匹配会有一个lastindex属性
reg2
/^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('Luz666')
true
reg2.test('Luz666')
false
reg2.lastIndex
0
reg2.test('Luz666')
true
reg2.lastIndex
6
校验时不传参数默认传的是undefined
自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
var a = {"name": "Luz", "age": 23};
console.log(a.name);
console.log(a["age"]);
遍历对象中的内容：
var a = {"name": "Luz", "age": 23};
for (var i in a){
console.log(i, a[i]);
}
创建对象：
var person=new Object(); // 创建一个person对象
person.name="Luz"; // person对象的name属性
person.age=23; // person对象的age属性
注意：
ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。
var m = new Map();
var o = {p: "Hello World"}
m.set(o, "content"}
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
Date对象
补充方法
1.toString() 方法
定义和用法：toString() 方法可把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toString()
返回值：dateObject 的字符串表示，使用本地时间表示。
输出：Tue Apr 28 2015 10:05:35 GMT+0800 (中国标准时间)
2.toUTCString() 方法
定义和用法：toUTCString() 方法可根据世界时 (UTC) 把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toUTCString()
返回值：dateObject 的字符串表示，用世界时表示。
输出：Tue, 28 Apr 2015 02:06:45 GMT
3.toLocaleString() 方法
定义和用法：toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toLocaleString()
返回值：dateObject 的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：2015/4/28 上午10:07:15
4.toDateString() 方法
定义和用法：toDateString() 方法可把 Date 对象的日期部分转换为字符串，并返回结果。
语法：dateObject.toDateString()
返回值：dateObject 的日期部分的字符串表示，由实现决定，使用本地时间表示。
输出：Tue Apr 28 2015
5.toTimeString() 方法
定义和用法：toTimeString() 方法可把 Date 对象的时间部分转换为字符串，并返回结果。
语法：dateObject.toTimeString()
返回值：dateObject 的时间部分的字符串表示，由实现决定，使用本地时间表示。
输出：10:05:58 GMT+0800 (中国标准时间)
6.toLocaleTimeString() 方法
定义和用法：toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。
语法：dateObject.toLocaleTimeString()
返回值：dateObject 的时间部分的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：上午10:07:35
7.toLocaleDateString() 方法
定义和用法：toLocaleDateString() 方法可根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果。
语法：dateObject.toLocaleDateString()
返回值：dateObject 的日期部分的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：2015/4/28
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
结果: 2022/2/11 21:15:12
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
结果: 2004/3/20 11:12:00
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
结果: 2020/4/3 11:12:00
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
结果: 1970/1/1 08:00:05
Thu, 01 Jan 1970 00:00:05 GMT
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
结果: 2004/3/20 11:12:00
Json对象
var str1 = '{"name": "Luz", "age": 23}';
var obj1 = {"name": "Luz", "age": 23};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
