本文使用MarkDown与
LaTeX
\LaTeX
LATEX编写完成.
属于我的自学系列,如果看不懂请随时与我讨论,我会尽快回复您
参考学习视频:https://www.bilibili.com/video/BV1Bh4y1q73A
前置技能
如何调用控制台
用浏览器打开HTML文档,
方法1:鼠标右键点击检查,调出控制台。
方法2:快捷键F12,调出控制台。
控制台打印函数
console.log()
具体用法:
//直接打印字符串
console.log("Welcome to SuperAyu's blog")
//控制台显示:Welcome to SuperAyu's blog
//打印字符串+变量
let a = 10
console.log("a:", a)
//控制台显示:a:10
变量与常量
变量关键字:let
常量关键字:const
具体用法:
let a = 10
let b = "Ayu"
let c = 3.14
const d = "Hello"
区别:
let a = 10
console.log(a)
a = 20
console.log(a)
//控制台显示:10 20
const b = 10
console.log(b)
b = 20
console.log(b)
//控制台显示:10 (报错)
//常量一旦赋值,无法改变
数据类型
在实践过程中可以使用typeof函数进行类型的验证,用法如下:
console.log(typeof [变量名称])
string 字符串类型
JavaScript当中不区分字符与字符串,即使是单个字符也被算作字符串。
用法:
let str = "this is a string"
number 数值类型
JavaScript当中不区分整数与浮点数,全部都算作数值类型。
用法:
number a = 123
number b = 4.56
boolean 布尔类型
只有两个值,true 或者 false.
用法:
boolean flag = true
flag = false
function 函数
普通写法
function 函数名称(参数列表){
函数体
}
示例:
function add(a, b, c){
return a + b + c
}
匿名函数
相比于普通形式,省去了函数名称,由变量所替代
let 变量名称 = function(参数列表){
函数体
}
示例:
let sub = function(a, b){
console.log(a - b)
}
sub(50, 20)
箭头函数
相比于匿名函数,省去了function关键字,多了一个箭头
let 变量名称 = (参数列表) => {
函数体
}
注意,
如果参数列表只有一个参数,那么小括号也可以省略。
如果参数列表没有参数,那么小括号必须要写。
示例:
let plus = (a, b) =>{
return a + b
}
plus(10, 5) //15
隐式返回
省去了大括号,不需要写return,但是只能执行一句话的操作。
let 变量名称 = (参数列表) => {函数体}
示例:
let plus2 = (a, b) => a + b;
Array 数组
JavaScript当中数组没有确切的类型,即数组中保存的数据可以任何数据类型。并且数组的长度是不被限制的,不必提前声明,这一点与C++中的vector是相似的。
let 数组名称 = []
具体用法:
//声明数组用中括号
let arr = ["a", 1, "b", 2, "c", 2]
console.log("arr", arr); //"a", 1, "b", 2, "c", 2
//数组后面弹出
arr.pop() // "a", 1, "b", 2, "c"
//数组前面添加
arr.unshift("d"); //"d", "a", 1, "b", 2, "c"
//数组前面弹出
arr.shift() //"a", 1, "b", 2, "c"
//删除一段子数组 splice(site, length)
//第一个参数为起始坐标,从0开始
//第二个参数为持续长度
arr.splice(1, 3) //"a", "c"
//清空数组
arr.clear()
//排序
arr.sort() // 默认按照字符字典序排序
//数字排序 - 自定义函数
arr.sort((a,b)=>a-b)
//筛选
let arr2 = [-1, 3, 2, -7, 5]
let select = arr2.filter(temp=>{
return temp > 0;
}) //3, 2, 5
//for...of循环
for(let i of arr2){
console.log(i)
} // -1, 3, 2, -7, 5
//forEach循环
select.forEach((value, index)=>{
console.log(index, ":", value);
})
Set 集合
set只关注键,不关注数量,也不关注顺序
let 集合名称 = new Set()
具体用法:
let fruits = new Set(['apple', 'banana', 'orange']) //直接用array给set赋值
//添加新的元素,若该元素出现过,则不会重复添加
fruits.add("mango") //'apple', 'banana', 'orange', 'mango'
//删除元素
fruits.delete("banana") //'apple', 'orange', 'mango'
//检查是否存在某元素
fruits.has("banana") //false
fruits.has("apple") //true
//获取set大小
fruits.size // 3
//set转换为array
let arr = Array.from(fruits) //通过Array.from()
let arr2 = [...fruits] //通过拓展运算符
//拓展运算符 用于展开可迭代对象,如数组、字符串
//for...of遍历
for(let i of fruits){
console.log(i)
}
//forEach遍历
fruits.forEach(value => {
console.log(value)
})//注意,set不关注顺序,所以没有index
//set清空
fruits.clear()
Map 键值对
一个键对应一个值,一一匹配的
let 键值对名称 = new Map()
具体用法:
let student = new Map([
["name", "Ayu"],
["grade", 3],
["isCoder", true]
])
//添加元素,若该键已存在,则更新值
student.set("Major", "Computer")
//删除元素
student.delete("isCoder")
//是否包含某元素
student.has("grade") // true
//Map大小
student.size
//Map转换为Array
let arr = Array.from(student) //方法1:Array.from()
let arr2 = [...student] //方法2:拓展运算符
//for...of遍历
for(let[key, value] of student){
console.log(key, value)
}
//forEach遍历,与for...of顺序不同,为(value, key)
student.forEach((value, key)=>{
console.log(key, value)
})
//Map清空
student.clear()
Object 对象类型
Javascript当中的object就像C++里面的struct实例化
let 对象名称 = {}
具体用法:
let Dog = {
name: "snoopy",
age: 3,
kind: "Beagle"
}
//添加属性
Dog.weight = 8
//删除属性
delete Dog.age
//对象是否包含某属性
let has = "kind" in Dog
//属性数量
Object.keys(Dog).length //Object.keys()获取对象的属性列表
//Object转换为Array
let arr = Object.entries(Dog)
//for...in遍历
for(let key in Dog){
console.log(key, Dog[key])
}
//注意,for...of 用于可迭代对象,e.g. Array, Set, Map, String
//forEach遍历
Object.entries(Dog).forEach(([key, value]) =>{
console.log(key, value)
})
//Object清空
person = {}
class 类
JavaScript如同C++一样,也有类,同样也就需要有构造函数,类中包含了属性和方法。所有成员属性使用的时候都必须要加this.,以区分外部变量和成员属性。只有私有属性前面加了#,其他在类中的属性可直接认为是public. 并且public属性可以不在类中声明,而直接使用,使用的时候前面要加上this.
class 类名{
constructor(成员属性列表){
初始化操作
}
其他方法
}
具体用法
class Blog{
#isCoder
constructor(name, isCoder){
this.name = name
this.#isCoder = isCoder
}
info1(){
return "name:${this.name}$"
}
}
对于private属性,没有办法直接存取,所以还需要单独写get和set函数。
class Blog{
#isCoder
constructor(name, isCoder){
this.name = name
this.#isCoder = isCoder
}
get isCoder(){
return this.#isCoder
}
set isCoder(value){
this.#isCoder = isCoder
}
info2(){
return "name:${this.name}$ isCoder:${this.isCoder}$"
}
}
继承
关键字为extends,和C++概念相同。可以使用super构建长类,拥有的属性大于等于长类。
class 类名 extends 长类名{
constructor(属性列表){
super(长类属性) //调用长类构造函数
子类构造函数体
}
}
解构
解构赋值,类似于python中的操作。
具体应用如下:
- 多个变量同时赋值
let [x, y, z] = [1, 2, 4]
- 获取数组最后一个变量
let [,,c] = [1, 2, 4] //c:4
let [a,,c] = [1, 2, 4] //a:1, c:4
- 将数组拆分赋值
let [A, ...B] = [1, 2, 3, 4, 5, 6] //A:1 , B:[2, 3, 4, 5, 6]
let [A, , ...B] = [1, 2, 3, 4, 5, 6] // A:1, B:[3, 4, 5, 6]
- 两数交换
let x = 1
let y = 2;
[x, y] = [y, x]
- 对象解构
let stu{
first_name: Ayu,
last_name: Super,
age: 21
}
let {first_name} = stu //Ayu
//注意,这里变量名称需要和属性保持一致,如果要重命名那么写法如下:
let {first_name:Name, last_name, age} = stu
Promise
表示承诺在未来的某个时刻可能会完成并返回结果。
三个状态,分别是:pending待处理,fulfilled已履行,rejected被驳回。
方便进行一个异步状态的记录。
let promise = new Promise((resolve, reject)=>{
resolve("")//状态由pending转为fulfilled
//reject("")//状态由pending转为rejected
}).then(result=>{//获取结果
console.log("result:", result)
}).catch(error=>{ //捕获rejected错误
console.log("error:", error)
}).finally(()=>{ //写入log日志
console.log("异步执行结束")
})
Fetch
我理解的Fetch是捕获某个端口的get/post信息的函数,用法和Promise很像。
Axios
基于Promise的网络请求库,可以发送http请求并接受服务器返回的响应数据。
Axios返回的是一个Promise对象。
与Fetch相比,get省去了then.步骤,post将data数据定义在函数体外,更加简洁。
模块化开发
需要注意的是在html文件当中,使用
export {}
同样在html文档中的标签中需要写
import {} from 'js文档位置'
如果要将js文档所有函数和变量当作一个对象,也可以这样写
export default {}
import obj from ''
或者
export {}
import * as obj from ''
同步与异步
同步
代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行。当遇到耗时的操作时,主线程会被阻塞,直到该操作完成。
异步
mise对象。
与Fetch相比,get省去了then.步骤,post将data数据定义在函数体外,更加简洁。
模块化开发
需要注意的是在html文件当中,使用
export {}
同样在html文档中的标签中需要写
import {} from 'js文档位置'
如果要将js文档所有函数和变量当作一个对象,也可以这样写
export default {}
import obj from ''
或者
export {}
import * as obj from ''
同步与异步
同步
代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行。当遇到耗时的操作时,主线程会被阻塞,直到该操作完成。
异步
遇到耗时的操作时,主线程不会被阻塞,后续的代码会继续执行。