前端JS篇：javascript简介、变量与注释、数据模型
2022.4.27前端之JavaScript(1)
- JavaScript简介
- 变量与注释
- 数据类型
一、JavaScript简介
1、JavaScript与Java没有关系
之所以叫这个名字是当时Java兴起，热度比较高，由此而来
2、JavaScript简称JS
也是一门前端的编程语言，由于前端非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码，由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
3、JS存在的问题
JS最初由一个程序员花了七天时间开发的，里面存在很多bug，为了解决这些bug一直在编写相应的补丁，补丁本身又有bug，最后导致了js中有很多不符合逻辑的地方(最后成了大家墨守成规的东西)
4、JavaScript与ECMAScript
JavaScript原先由一家公司开发，希望其他公司都使用，最后被组织改名
5、版本（目前）
ECMA5、ECMA6
二、变量与注释
ps：编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
1、注释语法
// 单行注释
/*
多行注释
*/
2、结束符号
分号结束；
console.log('hello world'); // 打印hello world,分号结束
3、变量声明
在JS中定义变量需要使用关键字声明
// var
var name = 'jason'
// let
let name = 'jason'
// var声明都是全局变量，let可以声明局部变量
4、常量声明
const pi = 3.14 // 设置常量pi为3.14
三、数据类型
查看数据类型的方式：
typeof
1、数值类型（相当于python中的整型int和浮点型float）
Number
// NaN:意思是属于数值类型，但不是一个数字（not a number）
parseInt('abc') // 不报错返回NaN,转为整数
parseFloat('abc') // 不报错返回NaN,转为小数
2、字符类型（相当于python里面字符串str）
String
// 默认只能是单引号和双引号
var name1 = 'jason'
var name2 = 'tony'
// 格式化字符串小顿号
var name3 = `${name1}`
1.字符串的拼接
js中推荐使用加号
2.统计长度
js中使用length/python中使用len()
3.移除空白（不能加参数指定）
js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
4.切片操作
js使用substring(start,stop)、slice(start,stop)
前者不支持负数，后者支持
5.大小写转换
js中使用.toLowerCase()、toUpperCase()
python中使用lower()、upper()
6.切割字符串
js中和python都是用split()，但是有点区别
ss1 = 'jason say hello big baby'
ss1.split(' ')
// ['jason', 'say', 'hello', 'big', 'baby']
ss1.split(' ', 1) // 参数1表示留下1个，从左到右
// ['jason']
ss1.split(' ', 2) // 参数2表示留下2个，从左到右
// ['jason', 'say']
7.字符串的格式化
js中使用格式化字符串（小顿号``）
var name = 'jason'
var age = 18
console.log(`my name is ${name},my age is ${age}`)
// my name is jason,my age is 18
3、布尔类型（姓党与python中的布尔值bool）
Boolean(JS中的布尔值)
// js中布尔值是全小写>>>: true false
// 布尔值为false的>>>: 0 空字符串 null undefined NaN
// null：空 undefined：未定义
bool(python中的布尔值)
// python中布尔值首字母大写>>>: True False
// python中布尔值为false的>>>: 0 None 空字符串 空列表 空字典...
4、对象（相当于python中的列表、字典、对象）
（1）数组：Array
// 数组（相当于python中的列表）
Array
var l1 = [11, 22, 33]
1.追加元素
js中使用push() // python中使用append()
2.弹出元素
js和python都用pop()
3.头部插入元素
js中使用unshift() // python中使用insert()
4.头部移除元素
js中使用shift() // python中可以使用pop(0) remove()
5.扩展列表
js中使用concat() // python中使用extend()
6.forEach
var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
l2.forEach(function(arg1){console.log(arg1)})
// forEach相当于for循环，括号里相当于函数，arg1相当于形参
// VM3143:1 jason
// VM3143:1 tony
// VM3143:1 kevin
// VM3143:1 oscar
// VM3143:1 jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
// 多写个参数arg2代表数据所在的索引值
// VM3539:1 jason 0
// VM3539:1 tony 1
// VM3539:1 kevin 2
// VM3539:1 oscar 3
// VM3539:1 jerry 4
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
// 再多写个参数arg3相当于数据的来源
// VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
// VM3663:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
// VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
// VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
// VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
7.splice（删除和新增列表值）
splice(起始位置，删除个数，新增的值)
（2）自定义对象
# 自定义对象(相当于python里面的字典)
var d1 = {'name':'jason','age':18}
var d2 = new Object() # 相当于生成了空字典
（3）内置对象
# 内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用
# 1.Date对象
var d1 = new Date()
d1.toLocaleString() '2022/4/28 10:47:01'
d1.toLocaleDateString() '2022/4/28'
d1.toLocaleTimeString() '10:47:01'
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
（4）json对象
# python中如何序列化反序列
import json
json.dumps()
json.loads()
# js中如何序列化反序列化
JSON.stringify()
JSON.parse()
（5）正则对象
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
浙公网安备 33010602011771号