当前位置：首页 > article >正文

【前端】ES6基础

article 2024/11/27 16:04:50

1.开发工具

vscode地址 :https://code.visualstudio.com/download, 下载对应系统的版本windows一般都是64位的

安装可以自选目录，也可以使用默认目录

插件：
输入 Chinese，中文插件

安装： open in browser，直接右键文件，选择

F12打开控制台就能看到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("人依远戍须看火");
        
    </script>
</body>
</html>

2.基本数据类型1️⃣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("人依远戍须看火");
        // 变量
        let name = "张三"
        console.log(name)
        // string
        console.log(typeof name)
        // number
        let balance = 100
        console.log("余额", balance);
        console.log(typeof balance);

        // 常量
        const PI = 3.14
        console.log("PI", PI);

        // boolean
        let tv = true
        console.log(tv);
        console.log(typeof tv);

        // 对象
        let person = {
            name:"王五",
            age:18,
            weight:62.5

        }
        console.log(person);
        console.log(typeof person);
        
        // Map
        // Map相对干对象提供了更灵活、有序、高效的键值对存储和操作方式，当需要在大量键值对中快速查找或删除特定键值对时，Map比对象更高效
        // Map提供了一些便捷的方法来操作键值对，如：get()、set()、delete()
        // Map提供了一些便捷的迭代方法，如：forEach()、keys()、values()、entries()

        let boy = new Map([
            ["name","李四"],
            ["age","20"]
        ])
        console.log(boy);
        console.log(typeof boy);    
        
    </script>
</body>
</html>

3.基本数据类型2️⃣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // Set() 集合
        let number666 = new Set([1,2,3,4,1,2])
        console.log(number666);
        let string666 = new Set([1,2,3,4,'1','2'])
        console.log(string666);
        
        // arr 数组
        let arr = ["a","b","c",1,"a"]
        console.log(arr);

        // function  函数
        function add(x,y){
             m=x+y
             console.log(m); 
        }
        add(5,7)

        // 类 
        class Person{
            constructor(name, age){
                this.name = name
                this.age = age
            }
            info(){
                console.log("name",this.name,"age",this.age);
                
            }
        }
        let person1 = new Person("秦始皇", 999)
        person1.info()
        let person2 = new Person("汉武帝", 888)
        person2.info()

        
    </script>
</body>
</html>

4.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //函数
        function getweb(){
            let web = "wwww.baidu.com"
            return web
        }
        console.log(getweb());
        // 传参,有默认值
        function add(number=5){
            return number+10
        }
        console.log(add(7));
        
        // 匿名函数
        let sub=function(x,y){
            return x-y
        }
        console.log(sub(7,2));

        // 箭头函数，把function换成箭头，并放（）后面
        let plus = (a,b)=>{
            return a+b
        }
        console.log(plus(11,7));
        
        // 隐式函数，箭头函数去掉{}跟return
        let cheng = (m,n)=>m*n
        console.log(cheng(11,7));


    </script>
</body>
</html>

5.数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数组定义
        let arr = [10,11]
        console.log(arr);
        
        // push 向数组末尾添加一个或多个元素，并返回修改后数组的长度
        let arrlength = arr.push(12,13,14)
        console.log("arr",arr);
        console.log("length",arrlength);
        
        // unshift 想数组开头添加一个或 多个元素，并返回数组的长度
        let arrunshift = arr.unshift(8,9)
        console.log("arr",arr);
        console.log("unshift",arrunshift);

        // shift 删除数组中第一个元素，并返回被删除的元素
        let delement = arr.shift()
        console.log("arr",arr);
        console.log("shift",delement);

        // pop 删除数组中 最后一个元素，并返回被删除的元素
        let popement = arr.pop()
        console.log("arr",arr);
        console.log("pop",delement);

        // 删除指定元素，splice, 第一个参数-删除元素的索引位置，第二个参数-删除元素的数量，返回删除后的数组
        let delArr = arr.splice(2,2)
        console.log("arr",arr);
        console.log("delArr",delArr);

        // reverse, 颠倒数组中元素的顺序
        arr.reverse()
        console.log(arr);
        
        // 数组中元素按照首字母顺序排序
        let arr2 = ["banana","apple","","orange"]
        arr2.sort()
        console.log(arr2);

        // 比较函数(a,b)=>a-b,接收两个参数a,b用于比较两个元素的大小，返回a-b的结果决定了sort()方法的排序顺序
        // 若 a<b 则 a-b 是一个负数，表示a应该在b前面
        // 若 a=b 则 a-b 是0，位置保持不变
        // 若 a>b 则 a-b 是一个正数，表示a应该在b后面
        let arr3 = [5,20,13,14]
        arr3.sort((a,b)=>a-b)
        console.log(arr3);

        // 筛选符合条件的元素，返回一个新数组
        let arr4 = [10,11,12,13,14,15]
        let newArr = arr4.filter((value)=>{
            return value > 12
        })
        console.log("newArr",newArr);
        
        // 使用for循环便利循环数组
        let arr6 = ["一行白鹭上青天","鹅鹅鹅曲项向天歌",99,"杜甫"]
        for(let value of arr6){
            console.log("for...of",value);
            
        }
        // forEach
        arr6.forEach((value)=>{
            console.log("forEach",value);
            
        })
        arr6.forEach((value,index)=>{
            console.log("forEach",index,value);
            
        })  

    </script>
</body>
</html>

6.Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Set集合{}
        let fruits = new Set(["apple","orange","banana"])
        console.log(fruits);
        // 增加
        fruits.add("mango")
        console.log(fruits);
        // 删除
        fruits.delete("banana")
        console.log(fruits);
        // 判断是否存在
        console.log(fruits.has("apple"));
        
        // 大小
        console.log(fruits.size);
        
        // set -> 数组
        let arr = Array.from(fruits)
        console.log("arr",arr);

        let arr2 = [...fruits]
        console.log("arr2",arr2);
        
        
        // 扩展运算符：展开可迭代对象
        let net = "www.baidu.com"
        let netAll = [...net]
        console.log(netAll);
        console.log([..."一行白鹭上青天"])
        // for
        for(let f of fruits){
            console.log("for-of",f);
            
        }
        // forEach
        fruits.forEach((value,index)=>{
            console.log(value,"index",index);
            
        })
        // 去重
        let numberArr = [1,2,3,4,3,2]
        let nuberSet = new Set(numberArr)
        console.log(nuberSet);
        

    </script>
</body>
</html>

7. map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Map
        let student = new Map([
            ["name","朱元璋"],
            ["gender","男"],
            ["age",1000]
        ])

        console.log(student);
        
        // 增加
        student.set("height",180)
        console.log(student);
        // 删除
        student.delete("gender")
        console.log(student);

        // 判断是否存在
        console.log(student.has("gender"));

        // 键 唯一性,新增相同键名的会替换掉value值
        student.set("age",11111)
        console.log(student);
        // 大小
        console.log(student.size);
        // Map集合转换成 数组
        let arrMap = Array.from(student)
        console.log(arrMap);

        let arr = [...student]
        console.log(arr);
        // 循环 
        for(let i of student){
            console.log("for...of",i);
        }
        // 解构
        for (let [key,value] of student) {
            console.log("key",key,"value",value);
            
        }
        student.forEach((value,key) => {
            console.log("forEach key",key,"value",value);
            
        });

        student.clear()
        console.log(student);



    </script>
</body>
</html>

8.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 对象
        let user ={
            name:"曹操",
            gender:"男",
            web:"www.baidu.com"
        }
        console.log(user);

        user.height = 175
        console.log(user);
        // 修改
        user.web = "www.bilibili.com"
        console.log(user);
        // 删除
        delete user.gender
        console.log(user);
        // 是否存在
        let has = "name" in user
        console.log(has);
        // 属性数量,Object.keys(user).length
        console.log(Object.keys(user).length);

        // for in 循环遍历对象
        // for of 用于遍历可迭代对象[如数组/Set/Map/字符串等]
        // for in 用于遍历对象的可枚举属性
        for(let key in user){
            console.log("for...in",key,user[key]);
            
        }

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

        // 清空对象
        user = {}
        console.log(user);


    </script>
</body>
</html>

9.私有属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        class Person {
            name 
            #web //私有属性,是指仅在类的内部可以访问和操作的属性,外部无法直接访问和修改

            constructor(name,web){
                this.name = name
                this.#web = web
            }

            info(){
                // return "姓名:" + this.name + " 个人网站:" +this.web
                // `` esc下面符号
                return `姓名:${this.name} 个人网站:${this.#web}`
            }
            // 固定写法,存取器getter获取私有属性
            get web(){
                return this.#web
            }
            // 使用存取器setter设置私有属性
            set web(value){
                this.#web=value
            }
        }
        let person = new Person("刘备","www.liubei.com")
        console.log(person.web);

        person.web = "sunquan.com"
        console.log(person.web);
        
        // 使用拼接方式, 模版字符串
        console.log(person.info());

        
        
    </script>
</body>
</html>

10. 继承extends

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 父类
        class Person{
            name 
            gender
            constructor(name,gender){
                this.name = name
                this.gender = gender
            }

            sleep(){
                return `${this.name},休息中...`
            }
        }
        // 子类
        class 赵匡胤 extends Person{
            web
            constructor(name, gender, web){
                super(name,gender)//调用父类构造函数
                this.web = web

            }

            eat(){
                return `${this.name} 正在吃饭...`
            }
        }

        let zky = new 赵匡胤("赵光义","男","www.dasong.com")
        // 调用子类方法
        console.log(zky.web);
        console.log(zky.eat());
        // 调用父类方法
        console.log(zky.gender);
        console.log(zky.sleep());

    </script>
</body>
</html>

11.解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数组结构
        let [x, y] = [1,2]
        console.log("x",x, "y",y);
        
        let [,,c] = [10,20,30]
        console.log("c:",c);

        let [A, ...B] =[1,2,3,4,5,6]
        console.log("A:",A, "B:",B);

        let [x2,y2=200] = [100]
        console.log("x2:",x2,"y2:",y2);

        // 两数交换
        let x3 = 10
        let y3 = 20; //不加分好会报错
        [x3,y3] = [y3,x3]

        console.log("x3:",x3,"y3:",y3);

        let person = {
            name:"刘邦",
            gender:"男",
            web:"www.liubang.com"
        }

        let {name} = person
        console.log("name:",name);

        let {name:userName,gender,web} = person
        console.log("userName:",userName,"gender:",gender,"web:",web);
        
        
    </script>
</body>
</html>

12.Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // promise,
        // 当创建一个promise对象时，它的初始状态为pending，表示异步执行未完成
        // 当异步执行成功时，会调用resolve函数把promise对象状态改变为fulfilled，可通过then方法获取异步操作结果
        // 当异步执行异常时，会调用reject函数把promise对象的状态改为rejected，可通过catch方法处理错误
        let promise = new Promise((resolve,reject)=>{
            // resolve("还钱了")
            reject("未还")
        })

        console.log("promise:",promise);//pending
        // 获取结果
        promise.then(result =>{
            console.log("result:",result);

        }).catch(result2 =>{
            console.log("result:",result2);
        }).finally(()=>{
            console.log("异步执行结束！");
            
        })



        // 以上也可以
        let promise10 = new Promise((resolve,reject)=>{
            resolve("回家了")
            // reject("未回家")
        }).then(result11 =>{
            console.log("result11:",result11);

        }).catch(result12 =>{
            console.log("result12:",result12);
        }).finally(()=>{
            console.log("异步执行结束！222");
            
        })

    </script>
</body>
</html>

13.Fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //fetch是基于Promise的api，它可以发送http请求，并接受服务器返回的响应数据
        //fetch返回的是一个Promise对象
        //get 请求
        fetch("http://127.0.0.1/get").then(response =>{
            //返回解析后的json数据，会传递给下一个then()方法中的回调函数
            return response.json() //response.json()用于将响应数据解析为json格式数据
        }).then(data=>{//data解析后的json数据
            console.log("get.data:",data);
        }).catch(error=>{
            console.log("get.error:",error.message);
            
        }).finally(()=>{
            console.log("finally");
            
        })
        // post 请求post，表单
        fetch('http://127.0.0.1/post',{
            method:"post",
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body:new URLSearchParams({
                //URLSearchParams用于处理键值对类型的数据，并将其编码为url查询字符串
                name:'毛泽东',
                web:'wwww.maozedong.com'
            }),
        }).then(response=>{
            return response.json()
        }).then(data=>{
            console.log("post.data:",data);
            
        }).catch(error=>{
            console.log("post.error:",error.message);
            
        }).finally(()=>{
            console.log("finally");
            
        })

        // post 请求post，json
        fetch('http://127.0.0.1/post',{
            method:"post",
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({// JSON.stringify用于将对象转换成json字符串
                name:'毛泽东',
                web:'wwww.maozedong.com'
            }),
        }).then(response=>{
            return response.json()
        }).then(data=>{
            console.log("post.data:",data);
            
        }).catch(error=>{
            console.log("post.error:",error.message);
            
        }).finally(()=>{
            console.log("finally");
            
        })


    </script>
</body>
</html>

14.Axios

npm安装，并设置淘宝镜像源

在这里插入图片描述

设置淘宝镜像源
npm config set registry https:/registry.npmmirror.com/

npm get registry

npm install axios

https:/unpkg.com/axios/dist/axios.min.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>

<body>
    <script>

        /*
        Axios 是基于 Promise 的网络请求库，它可以发送http请求并接收服务器返回的响应数据
        Axios 返回的是一个 Promise 对象
        Axios 不仅可以用于浏览器，也可以用于 Node.js,而 Fetch 主要用于浏览器
        */
        //get请求
        axios.get('http:/127.0.0.1/get').then(response => {
            console.log("get.data:", response.data)
        }).catch(error => {
            console.log("get.error:", error)
        }).finally(() => {
            console.log("get.finally")
        })

        //post请求 post
        let data = { //参数
            name: '邓小平',
            web: 'dengcode.com',
        }

        axios.post('http:/127.0.0.1/post', data, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(response => {
                console.log("post.data:", response.data)
        }).catch(error=>{
            console.log("post.error:",error.message);
            
        }).finally(()=>{
            console.log("finally");
            
        })

        // post 请求postJson【axios的默认请求头，application/json】
        axios.post('http:/127.0.0.1/post', data).then(response => {
                console.log("post.data:", response.data)
        }).catch(error=>{
            console.log("post.error:",error.message);  
        }).finally(()=>{
            console.log("finally");
            
        })


    </script>
</body>

</html>

t532y10432525@qingdaomedia.com

086137

Live Server扩展，模块化开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>
<body>

    <div id="app">
        {{msg}}

        <h2>{{web.title}}</h2>
        <h2>{{web.url}}</h2>
    </div>
    
    <script>
        // 解构
        const{createApp,reactive} = Vue

        createApp({

            //setup选项，用于设置响应式数据和方法等
            setup(){
                const web = reactive({
                    title:"主题",
                    url:"www.baidu.com"
                })

                return{
                    msg:"success",
                    web
                }
            }
        }).mount("#app")
    </script>
</body>
</html>

安装插件：Resharper，Live Server，Chinese，open in browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> -->
</head>
<body>

    <div id="app">
        {{msg}}

        <h2>{{web.title}}</h2>
        <h2>{{web.url}}</h2>
        {{number}}
    </div>
    
    <script type="module">
        import {createApp,reactive,ref} from './vue.esm-browser.js'


        createApp({
           

            //setup选项，用于设置响应式数据和方法等
            setup(){
                const number = ref(10) //ref 用于存储耽搁基本类型的数据，如：数字、字符串等
                number.value = 20 // 使用ref创建的响应式对象，需要通过.value属性来访问和修改其值
            

                const web = reactive({
                    title:"主题",
                    url:"www.baidu.com"
                })
                // 使用reactive创建响应式对象，可以直接通过属性名来访问和修改值
                web.url = "www.bilibili.com"

                return{
                    msg:"success",
                    web,
                    number
                }
            }
        }).mount("#app")
    </script>
</body>
</html>