山东大学软件学院项目实训-创新实训-角色疆界-ES基础

推荐资源：【2024新版】ES6~ES13从入门到精通教程，JS前端零基础入门实战视频课程_哔哩哔哩_bilibili

一、变量常量

1、变量：

        （1）示例：

let name="张三"

        （2）变量值可修改

2、常量

        （1）示例：

const PI=3.14

        （2）常量值不可修改

二、数据类型

1、字符串类型string：

let name="张三"

2、数值类型number：

let number=3

3、布尔类型：

let tv=true

4、对象：

let boy={
    name:"张三",
    age:15,
    height:160.5
}

5、map：

let girl=new Map([
    ['name':'Linda'],
    ['age':18]
])

6、set：允许不同类型元素

let number = new Set([1,2,'2',1])

7、数组：允许不同类型元素

let arr=['a','b','c',1]

8、类

class Person{
    name
    #age      //#表示私有属性
    constructor(name,age){
        this.name=name
        this.#age=age
    }
    info(){
        console.log(this.name,this.age)
    }
    get age(){ // 使用存取器获取私有属性
        return this.#age
    }
    set age(value){  //使用存取器设置私有属性
        this.#age=value
    }
};

let person = new Person("幺幺",22)
person.info()

三、函数

1、基本定义：支持无参、默认参数，有返回值（无需指定类型）

function add(x,y){
    console.log(x+y)
};
add(12,23);

2、匿名函数

let sub=function(x,y){
    return x+y
}
console.log(sub(12,34))

3、箭头函数

let plus=(a,b)=>{
    return a*b
} 
let plus2=(a,b)=> a*b
console.log(plus(12,3))
console.log(plus2(12,3))

四、数组

1、基本定义：可包含不同类型的元素，且长度可变

let array=["a","b","9","h","8"];
console.log(typeof array);

2、操作

（1）尾部添加元素，并返回添加元素后数组的长度

let array_len=array.push(5,6)

（2）数组开头添加元素，返回添加后元素的长度

array_len=array.unshift(3)

（3）删除数组第一个元素，返回被删除元素

let del_element=array.shift()

（4）删除最后一个元素，返回被删除元素

（5）splice(要删除元素的索引，要删除的元素数量)，删除元素，返回被删除元素组成的数组

let del_array=array.splice(2,1)

（6）颠倒元素顺序

array.reverse()

（7）排序（默认按首字母），也可使用自定义比较函数

array.sort()
array.sort((a,b)=>a-b)

（8）筛选符合条件的元素返回

let new_arr=array.filter((value)=>{
    return value>13
})

（9）循环遍历（两种方法）

for(let value of array){
    console.log(value)
}
array.forEach((value,index)=>{
    console.log(index,value)
})

（10）解构

let [x,y]=[12,34]   //右侧数组元素也可以是数组变量
let [,,z]=[12,23,45]
let [a,...b]=[23,2323,42342,232]  //a=12,b=[2323,42342,232]

五、Set

1、基本定义

let arr=new Set([1,2,3]);

2、操作

（1）增、删、元素存在判断、大小

arr.add(4)
arr.delete(3)
console.log(arr.has(2))
console.log(arr.size())

（2）转为数组

let array=Array.from(arr)
let array2=[...array]
let string="dwudaudhai"
let array3=[...string]

（3）遍历同数组

（4）数组转set

let numarr=[1,2,3,4,5,6]
let numSet=new Set(numarr)

六、Map

1、基本定义

let girl = new Map([
    ["name","Sofia"] ,
    ["age",10] ,
]);

2、操作

（1）改、删、元素存在判断、大小、清空

girl.set("height",160)     
girl.delete("age")
console.log(girl.has("name"))
console.log(girl.size)
girl.clear()

（2）循环遍历

for(let value of girl){
    console.log(value)
}
for(let [key,value] of girl){
    console.log(key,value)
}
girl.forEach((value,key)=>{     
    console.log(key,value)
})

七、对象

1、基本定义

let boy={
    name:"Niubi",
    age:28,
    weight:70.5
};

2、操作

（1）改、删、元素存在判断、大小

boy.height=178
delete boy.age
let has = "age" in boy
consol.log(Object.keys(boy),Obkect.keys(boy).length)

（2）循环遍历

for(let key in boy){     
    console.log(key,boy.key)
}

Object.entries(boy).forEach(([key,value])=>{
    console.log(key,value)
})

（3）解构

let {name} =boy
let {name:username,age,wight}=boy

八、Promise

1、基本定义：Promise表示承诺在未来的某个时刻可能会完成并返回结果。对于某些需要时间来处理的操作，如用户登录、读取文件等，可以用Promise来执行异步操作

let promise =new Promise((resolve,reject)=>{
    //resolve("还钱了")    //执行成功
    reject("没有还钱")     //被驳回
}).then(result=>{        //对应resolve的结果
    console.log("result",result)
}).catch(error=>{       //对应reject的结果
    console.log("error",error)
}).finally(()=>{
    console.log("异步执行结束")
})

九、Fetch

1、基本定义：fetch是一个基于Promise的api，它可以发送http请求并接收服务器返回的响应数据

//get请求
fetch(url).then(response=>{
    return response.json()
}).then(data=>{        
    console.log("data",data)
}).catch(error=>{       
    console.log("error",error)
}).finally(()=>{
    console.log("结束")
})

//post请求
fetch(url,{
    method:'POST',
    headers:...,
    body:...
}).then(response=>{
    return response.json()
}).then(data=>{       
    console.log("data",data)
}).catch(error=>{      
    console.log("error",error)
}).finally(()=>{
    console.log("结束")
})

十、axios

1、基本定义：axios是基于Promise的网络请求库，它可以发送http请求并接收服务器返回的响应数据

//get请求
axois.get(url).then(response=>{
    console.log("data",response.data)
}).catch(error=>{       
    console.log("error",error)
}).finally(()=>{
    console.log("结束")
})

//post请求
let data={
    name:'...',
    url:'...'   
}
axois.post(url,data,{
    'headers':...
}).then(response=>{
    console.log("data",response.data)
}).catch(error=>{       
    console.log("error",error)
}).finally(()=>{
    console.log("结束")
})