03 前端基础之JavaScript
目录
前端基础之JavaScript
JavaScript
# JavaScript简称JS 与Java一点关系都没有!!!
完全是为了蹭Java的热度
# JS也是一门编程语言
IT行业鄙视链>>>前端意淫着想摆脱后端的约束
写出了使用JS编写后端代码的方案>>>NodeJs
# JS虽然是一门编程语言但是逻辑非常的不严谨
据传该语言最初的版本是由一个程序员花了七天时间写出来的
# JS很容易学习
JavaScript注释
类中引入方式
1.script标签内部直接编写(学习的时候使用)
2.script标签src属性导入外部js文件(最正规)
注释语法
html:<!--注释语法-->
css:/**/
JS://单行注释 /*多行注释*/
# 模板语法注释 {##}
结束符号
分号作为结束符号(;) 但是不用写问题也不大
变量与常量
在JS中声明变量需要使用关键字
老版本 var(全部都是全局变量)
新版本 let(可以声明局部变量)
# 推荐使用let(其实问题不大)
在JS中声明常量也需要使用关键字
const # 声明一个真正意义上的常量
如何创建变量
var name = 'jason'
let name = 'jason01'
如何创建常量
const pi = 3.14
"""
可以编写js代码的地方
1.pycharm提供的js文件
2.直接使用浏览器提供的编程环境
"""
ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
需要我们自定义设置 settings>>>l f>>>js
基本数据类型
python基本数据类型
int、float、str、list、dict、bool、tuple、set
js基本数据类型
number、string、boolean、undefined、object()
查看数据类型
python中使用type()
js中使用typeof
number类型
# 数值类型:包含了整型与浮点型
parseInt、parseFloat
NaN:Not A Number
"""NaN属于数值类型 表示的意思是 不是一个数字"""
string类型
# 定义字符类型的方式
1.单引号
2.双引号
3.小波浪号
var s1 = `
jason老师
tony老师
kevin老师
`
# 在js中字符串的拼接推荐使用+号
# 格式化输出(模板字符串的功能)
var name1 = 'jason'
var age = 18
`my name is ${name1} my age is ${age} `
boolean类型
在python中布尔值类型首字母大写
True False
在js中布尔值类型全部小写
true false
null与undefined类型
null表示的意思是空
undefined表示的意识是未定义
eg:null意思是厕纸用完了 undefined意思是厕纸都没装
对象之数组类型
# 对应到python中就是列表list
l2.splice(2,1) # 第一个参数是起始位置 第二个参数是删除元素的个数
运算符
1.比较运算符
== 弱等于 # 会自动转换数据类型至相同状态
=== 强等于 # 不会自动转换数据类型
2.逻辑运算符
python中
and or not
js中
&& || !
流程控制
'''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("...")
}
"""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 返回值
}
"""
arguments参数 可以获取传入的所有数据
也支持return和匿名函数
"""
var f = v => v;
// 等同于
var f = function(v){
return v;
}
自定义对象
# 相当于python中的字典类型
方式1: var d = {'name':'jason','age':18}
方式2: var d = Object({'name':'jason','age':18})
class MyDict(dict):
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
res = MyDict(name='jason',age=18)
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对象
方式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('jason666')
true
reg2.test('jason666')
false
reg2.lastIndex
0
reg2.test('jason666')
true
reg2.lastIndex
8
校验时不传参数默认传的是undefined
