03 前端基础之JavaScript

目录

• 前端基础之JavaScript
  • JavaScript
  • JavaScript注释
  • 变量与常量
  • 基本数据类型
  • number类型
  • string类型
  • boolean类型
  • null与undefined类型
  • 对象之数组类型
  • 运算符
  • 流程控制
  • 三元运算符
  • 函数
  • 自定义对象
  • 内置对象

前端基础之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