前端之JavaScript基础
前端之JavaScript基础
JavaScript简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
JavaScript注释
单行注释：// 注释内容
多行注释：/*注释内容*/
JavaScript的引入方式
- script内部书写
- script scr属性引入外部JS文件
JS是用分号作为语句的结束，不写也没什么问题。
JavaScript变量与常量
在JS中首次声明变量与常量需要使用关键字
变量：
JS也是动态类型：变量名绑定的数据值类型不固定，可以是数值、字符串、对象
var 声明的是全局，全局有效
var 变量名 = 数据值
var name = 'jason'
let 如果在局部名称空间使用，仅在局部有效，可以区分全局和局部。
let 变量名 = 数据值
let name = 'tony'
常量：
const 在JS中是有正在意义上的常量的
const 常量名 = 数据值
const pi = 3.14
这个时候声明好的常量是不能被修改的。
pi = 3.44 报错！
JavaScript数据类型
数值
// 在JS中查看数据类型可以使用 typeof 输出结果使用 console.log（'hello world'）/
数值 number
数值（相当于python中的整型和浮点型的结合）
在JS中整数、小数相关的数字都统称为数值类型number
parseInt()
parseFloat()
NaN: Not ANumber 不是一个数字
字符串
字符串 string
基本使用：
// 单引号
var name = 'jason'
// 双引号
var name = "jason"
// 模板字符串,除了可以定义多行文本之外还可以是西安格式化字符串操作
var name = `jason`
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
// 在JS中推荐直接使用+来拼接字符。
字符串常用方法
| 方法 | 说明 |
|---|---|
| .length | 统计长度 |
| .trim | 移除空白 |
| .trmleft | 移除左边空白 |
| .trimright | 移除右边空白 |
| .charAt（n） | 返回第n个字符 |
| .concat | 拼接 |
| .indexOF | 子序列位置 |
| .substring | 根据索引获取子序列 |
| .slice | 切片 |
| .tolowercase | 小写 |
| .touppercase | 大写 |
| .split | 分割 |
布尔值
布尔值 boolean
// 在JS中布尔值全是小写字母
true false
/*
其中是false的有
null、0、空字符串、undefined、NaN
NaN
Not ANumber 不是一个数字
null 表示值为空，一般都是指定或者清空了一个变量时使用
如： let name = 'jason'
name = null
undefined 表示声明了一个变量，但是没有作初始化操作
函数没有指定返回值的时候 返回的也是undefined
如还是不了解可以点击下列链接查看Jason老湿详解。
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
*/
对象
对象 object
// 在JS中也可以称一切皆对象
对象之数组（相当于python中的列表）
基本使用：
let 变量名 = ['数值','字符串','布尔值',...]
let name_list = ['jason','age',18]
// 支持索引取值，但是不支持负数索引
info_list = ['jason',18,'gender:male','hobby:female']
info_list[0]
info_list[-1] // 报错！！！
对象之数组常用方法
| 方法 | 说明 |
|---|---|
| .length | 统计数组的长度 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice（start,end） | 切片 |
| .reverse() | 反转 |
| .join(sep) | 将数组元素连接成字符串 |
| .concat() | 链接数组 |
| .sort（） | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice | 删除元素，并向数组添加新元素 |
| .map | 返回一个数组元素调用函数处理后的值的新数组 |
//较为重要的方法
forEach、splice、map
基本使用：
forEach（类似于python中的for循环）
var ll = [111,222,333,444,555,666]
l1.forEach(function（value）{console.log（value）}，l1)
// function（元素，元素索引，元素数据来源）
splice
var ll = [111,222,333,444,555,666]
l1.splice（0，2）
// 第一个参数是起始位置，第二个是删除个数,
l1.splice（0，2,123）
// 还可以放置第三个参数，表示添加。先删除后添加
map
var ll = [111,222,333,444,555,666]
l1.map（function(value){console.log(value)},l1）
运算符
// 算术运算符
var x = 10；
var res = x++；
var res1 = ++x；
res 10
res1 12
++表示自增1 （类似于python中的+=1）
加号在前先加后赋值 加号在后先赋值后加
// 比较运算符
1 == '1' // 弱等于
true
// JS内部自动转换成相同的数据类型比较
1==='1' // 强等于
// 内部不做类型转换直接比较
false
1 != '1' 1 !== '1'
// 逻辑运算符
&& || ！
/*
JS中的&&等价于python中的and
JS中的||等价于python中的or
JS中的！等价于python中的not
*/
// 赋值运算符
= += -= *=
流程控制
if判断
// if 判断基本语法结构
if(条件){条件成立后执行的代码块}
// 基本使用：
var age = 28
if (age>18 && age<25) {
console.log('小姐姐')
}
// if...else分支
if(条件){条件成立后执行的代码}else{条件不成立执行的代码}
var age = 28
if (age > 18 ){
console.log('哈哈哈')
}else{
console.log('嘿嘿嘿')
}
// if...eles if... else分支
if(条件1) {条件1成立后执行的代码}
else if(条件2){条件1不成立条件2成立执行的代码}
else{条件1，条件2都不成立执行的代码}
if (age > 18 ){
console.log('哈哈哈')
}else if {
console.log('嘿嘿嘿')
}else{
console.log('沉默...')
}
// switch语法
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
循环结构
// for循环
// 打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
// 题目1 循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
// while循环
var i = 0
while(i<100){
console.log(i)
i++;
}
// 三元运算符
// python中三元运算符 res = 1 if 1>2 else 3
// JS中三元运算 res = 1>2?1:3
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 // 10
var res = 2>5?8:(8>5?666:444) // 666
"""
三元运算符不要写的过于复杂
"""
函数
// 在python中定义函数需要用到关键字def
// 而js定义函数则是关键字 function
// 基本语法结构
function 函数名(形参1，形参2，形参3...){函数体代码 return 返回值}
// 无参函数
function func_one(){
console.log('hello world')
}
// 调用函数名加括号调用 func_one()
// 有参函数
function func_one(name,pwd){
console.log('hello world')
}
// 注意 JS中的有参函数在函数名加括号调用的时候。
// 不管需要几个形参，少了多个都没有关系
// 关键字 arguments 能够获取到函授接收到的所有参数。
function func_one(name,pwd){
console.log(arguments)
console.log(name,pwd)
}
// 函数的返回值 使用的也是关键字return
function index(){
return 666
}
function index(){
return 666,777,888,999
}
res = index();
999
res
999 // 只能拿到最后一个
function index(){
return [666,777,888,999]
}
// js不支持解压赋值
// 匿名函数 就是没有名字
function(){
console.log('哈哈哈')
}
var res = function(){
console.log('哈哈哈')
}
// 箭头函数(要了解一下) 主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v; //箭头左边的是形参 右边的是返回值
等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
return arg1+arg2
}
函数的全局变量与局部变量
// 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
returzn inner;
}
var ret = f();
ret();
自定义对象
// 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便
// 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'jason','age':18}
var d = {'name':'jason','age':18}
typeof d
"object"
d['name']
"jason"
d.name // 比python从字典获取值更加的方便
"jason"
d.age
18
for(let i in d){
console.log(i,d[i])
} // 支持for循环 暴露给外界可以直接获取的也是键
// 第二种创建自定义对象的方式 需要使用关键字 new
var d2 = new Object() // {}
d2.name = 'jason'
{name: "jason"}
d2['age'] = 18
{name: "jason", age: 18}
Data对象
let d3 = new Date()
console.log(d3)
Thu Aug 25 2022 20:08:45 GMT+0800 (中国标准时间)
d3.toLocaleString()
'2022/8/25 20:08:45'
// 也支持手动输入
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString() // 月份从0开始0-11月
"1111/12/11 上午11:11:11"
// 时间对象具体方法
let d6 = new Date();
d6.getDate() 获取日
d6.getDay() 获取星期
d6.getMonth() 获取月份(0-11)
d6.getFullYear() 获取完整的年份
d6.getHours() 获取小时
d6.getMinutes() 获取分钟
d6.getSeconds() 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime() 时间戳
JSON对象
// 在python中序列化与反序列化也是用到JSON
// 导入JSAO模块，通过点的方式调用其方法进行序列化和反序列化
JSON.dumps 序列化
JSON.loads 反序列化
// 在JS中也有序列化和反序列化
JSON.stringify()
JSON.parse()
// 示例：
let d7 = {'name':'jason','age':18 ,'gender':'male','hobby':'female'}
let res666 = JSON.stringify(d7)
'{"name":"jason","age":18,"gender":"male","hobby":"female"}'
JSON.parse(res666)
{'name':'jason','age':18 ,'gender':'male','hobby':'female'}
RegExp对象
/*
在python中我们使用正则需要借助re模块
而JS中需要我们创建正则对象
*/
// 方式1
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
// 方式2
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
// 匹配内容
reg1.test('jasonNB')
reg2.test('JASONnb')
// 题目 获取字符串里面所有的字母z
let sss = 'jasonznb znb znb'
sss.match(/z/) // 拿到一个就停止了
sss.match(/z/g) // 全局匹配 g就表示全局模式
sss.match(/z/)
["z", index: 5, input: "jasonznb znb znb", groups: undefined]
sss.match(/z/g)
(3) ["z", "z", "z"]
// 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('jasonznb')
reg3.test('jasonznb') // 全局模式有一个lastIndex属性
true
reg3.test('jasonznb')
false
reg3.test('jasonznb')
true
reg3.test('jasonznb')
false
reg3.lastIndex
0
reg3.test('jasonznb')
true
reg3.lastIndex
7
// 吐槽点二
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()
reg4.test() // 什么都不传 默认传的是undefined
true
reg4.test()
true
reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
浙公网安备 33010602011771号