JavaScript入门 - 基本数据类型用法和基础知识

本文使用MarkDown与$\text{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中的操作。
具体应用如下：

1. 多个变量同时赋值

let [x, y, z] = [1, 2, 4]

2. 获取数组最后一个变量

let [,,c]  = [1, 2, 4] //c:4
let [a,,c] = [1, 2, 4] //a:1, c:4

3. 将数组拆分赋值

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]

4. 两数交换

let x = 1
let y = 2;
[x, y] = [y, x] 

5. 对象解构

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 ''

同步与异步

同步

代码按照编写顺序逐行执行，后续的代码必须等待当前正在执行的代码完成之后才能执行。当遇到耗时的操作时，主线程会被阻塞，直到该操作完成。

异步

遇到耗时的操作时，主线程不会被阻塞，后续的代码会继续执行。