前端技术相关 (ES6)_es6是什么前端技术

作者：小小林熬夜学编程 | 2024-02-22 19:12:23

踩

es6是什么前端技术

1. ES6

1.1 简介
ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma 国际（前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言）是lavascript 语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScript6开始，开始采用年号来做版本。即ECMAScript2015，就是ECMAScript6。
它的目标，是使得JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。每年一个新版本。

ECMAScript是浏览器脚本语言的规范，而各种我们熟知的is语言，如JavaScript则是规范的具体实现。

2. ES6新特性

2.1 let声明变量


<!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>
        //1. var声明的变量往往会越域
        // let声明的变量有严格的局部作用域
        // {
        //     var a=1;
        //     let b=2;
        // }
        // console.log(a); // 1
        // console.log(b); //'b' is not defined
 
        //2. var可以声明多次
        // let只能声明一次
        // var m=1;
        // var m=2;
        // let n=3;
        // let n=4;
        // console.log(m); //2
        // console.log(n); //Identifier 'n' has already been declared
 
        //3. var会变量提升
        // let不存在变量提升
        // console.log(x); //undefined
        // var x=10;
        // console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization
        // let y=1;
 
        //2.const声明常量（只读变量）
        const a=1;
        a=2; //Uncaught TypeError: Assignment to constant variable.
 
    </script>
</body>
</html>

2.2 const声明常量（只读变量）


        //2.const声明常量（只读变量）
        const a=1;
        a=2; //Uncaught TypeError: Assignment to constant variable.

2.3 解构表达式&字符串扩展


<!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>
        //1.数组解构
        let arr=[1,2,3];
        // let a=arr[0];
        // let b=arr[1];
        // let c=arr[2];
        // console.log(a,b,c);
        //1 2 3
 
        // let [a,b,c]=arr;
        // console.log(a,b,c); 
        //1 2 3
 
        //2.对象解构
        const person={
            name: "aaa",
            age: 66,
            language: ['java','js','css']
        }
        
        // const name=person.name;
        // const age=person.age;
        // const language=person.language;
        // console.log(name,age,language);
        //aaa 66 (3) ["java", "js", "css"]
 
        // const {name,age,language}=person;
        // console.log(name,age,language);
        aaa 66 (3) ["java", "js", "css"]
 
        const {name:abc,age,language}=person;
        console.log(abc,age,language);
        //aaa 66 (3) ["java", "js", "css"]
 
        //3.字符串扩展
        //3.1 ES6为字符串扩展了几个新的APl：
        //-includes()：返回布尔值，表示是否找到了参数字符串。
        //-startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
        //-endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
        let str="hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true
 
        //3.2 字符串模板
        //模板字符串相当于加强版的字符串，用反引号`，
        //除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
 
        //多行字符串
        let ss=`
                <div>
                    <span>hello aaa</span>
                <div>
        `;
        console.log(ss);
        //<div>
        //    <span>hello aaa</span>
        //<div>
 
        //字符串插入变量和表达式。变量名写在${}中，${}中可以放入Javascript表达式。
        let name2="张三";
        let age2=18;
        let info=`我是${name2},今年${age2}`;
        console.log(info);//我是张三,今年18
        let info2=`我是${abc},今年${age}`;
        console.log(info2);//我是aaa,今年66
 
        //字符串中调用函数
        function fun(){
            return "这是一个函数";
        }
        let sss=`ahahaha,${fun()}`;
        console.log(sss);//ahahaha,这是一个函数
    </script>
 
</body>
</html>

2.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>
 
    //函数优化
    //1.函数参数默认值
    //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
    function add(a,b){
        //判断b是否为空，为空就给默认值1
        b=b || 1;
        return a+b;
    }
    //传一个参数
    console.log(add(10));//11
 
    //现在可以这么写直接给参数写上默认值，没传就会自动使用默认值
    function add2(a,b=1){
        return a+b;
    }
    //传一个参数
    console.log(add2(20));//21
 
    //2.不定参数 任意多个参数
    function fun(...value){
        console.log(value.length)
    }
    fun(1,2,3,4);//4
    fun();//0
 
    //3.箭头函数
    //es6中定义函数的简写方式
    //一个参数时
    var print=function(obj){
        console.log(obj);
    }
    print("aaa");//aaa
 
    var print2=obj=>console.log(obj);
    print2("bbb");//bbb
 
    //多个参数
    var sum=function(a,b){
        return a+b;
    }
    var sum2=(a,b)=>a+b;
    console.log(sum2(10,20));//30
 
    var sum3=function(a,b){
        c=a+b;
        return a+c;
    }
    var sum4=(a,b)=>{
        c=a+b;
        return a+c;
    }
    console.log(sum4(20,30));//70
 
    const person={
            name: "aaa",
            age: 66,
            language: ['java','js','css']
        }
    function hello(person){
        console.log("hello",person.name);
    }
    var hello2=(person)=>console.log("hello",person.name);
    hello2(person);//hello aaa
    //{name} 直接解构person  箭头函数+解构
    var hello2=({name})=>console.log("hello",name);
    hello2(person);//hello aaa
    </script>
</body>
</html>

2.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>
        //对象优化  1.新增的api
        //Es6给Object拓展了许多新的方法，如：
        //keys(obj): 获取对象的所有key形成的数组
        //values(obj): 获取对象的所有value形成的数组
        //entries(obj): 获取对象的所有key和value形成的二维数组。格式：`[[k1,v1],[k2,v2],...]`
        //assign(dest,…src): 将多个src对象的值持贝到dest中。（第一层为深持贝，第二层为浅持贝）
        const person={
            name: "aaa",
            age: 66,
            language: ['java','js','css']
        }
        console.log(Object.keys(person));// ["name", "age", "language"]
        console.log(Object.values(person));// ["aaa", 66, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
 
        const target={a:1};
        const source1={b:2};
        const source2={c:3};
        //Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
        Object.assign(target,source1,source2);
        console.log(target);//{a: 1, b: 2, c: 3}
 
        //2.声明对象简写
        const age=66;
        const name="aaa";
        const person1={name:name,age:age};
        console.log(person1);//{name: "aaa", age: 66}
 
        const person2={name,age};
        console.log(person2);//{name: "aaa", age: 66}
 
        //3.对象的函数属性简写
        let person3={
            name:"aaa",
            //以前
            eat:function(food){
                console.log(this.name+"在吃"+food);
            },
            //箭头函数版 this不能使用  这里this.name 拿不到，对象.属性可以获取信息
            eat2: food=>console.log(person3.name+"在吃"+food),
            //简写版
            eat3(food){
                console.log(this.name+"在吃"+food);
            }
        }
        person3.eat("apple");//aaa在吃apple
        person3.eat2("apple");
        person3.eat3("apple");
 
 
        //4.对象拓展运算符
        //拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
        //--拷贝对象 深拷贝
        let person4={name:"bbb",age:1};
        let someone={...person4}
        console.log(someone);//{name: "bbb", age: 1}
 
        //--合并对象
        let age2={age:123};
        let name2={name:"zxcv"};
        let person5={name:"abc"};
        person5={...age2,...name2};
        //后面的name2会覆盖之前的值
        console.log(person5);//{age: 123, name: "zxcv"}
    </script>
</body>
</html>

2.6 map和reduce


<!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和reduce方法。
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        let arr=['1','2','3','10'];
        arr=arr.map((item)=>{
            return item*2;
        });
        //arr=arr.map(item => item*2);
        console.log(arr);//2 4 6 20
 
        //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //arr.reduce（callback，[finitialValue]）
        //reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。
        //callback（执行数组中每个值的函数，包含四个参数）
        //1、previousvalue（上一次调用回调返回的值，或者是提供的初始值（initialValue））
        //2、currentValue（数组中当前被处理的元素）
        //3、index（当前元素在效组中的索引）
        //4、array（调用reduce的数组）initialValue（作为第一次调用callback的第一个参数。）
        let result=arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a+b;
        });
        console.log(result);//32
        //reduce 指定初始值
        let result2=arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a+b;
        },100);
        console.log(result2);//132
 
    </script>
</body>
</html>

2.7 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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <!-- 在JavaScript的世界中，所有代码都是单线程执行的。
        由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。
        异步执行可以用回调函数实现。一旦有一连串的ajax请求a，b，c，d.
        后面的请求依赖前面的请求结果，就需要层层嵌套。
        这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，裁们不得不非常小心翼翼处理内层函数与外层函数的数据，
        一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…….
        总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。
        案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：
        1.查询用户，查询成功说明可以登录
        2.查询用户成功，查询科目
        3.根据料目的查询结果，获取去成绩
        分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，
        为了渲染方便，最好响应json数据。在这里就不编写后台接口了，而是提供三个ison文件，
        直接提供ison效据，模拟后台接口： -->
 
        <script>
            //1、查出当前用户信息
            //2、按照当前用户的id查出他的课程
            //3、按照当前课程id查出分数        
            // $.ajax({
            //     url:"mock/user.json",
            //     success(data){
            //         console.log("查询用户：",data);
            //         $.ajax({
            //             url: `mock/user_corse_${data.id}.json`,
            //             success(data){
            //                 console.log("查询课程：",data);
            //                 $.ajax({
            //                     url: `mock/corse_score_${data.id}.json`,
            //                     success(data){
            //                         console.log("查询到分数",data);
            //                     },
            //                     error(error){
            //                         console.log("出现异常了3:"+error);
            //                     }
            //                 });
            //             },
            //             error(error){
            //                 console.log("出现异常了2:"+error);
            //             }
            //         });
            //     },
            //     error(error){
            //         console.log("出现异常了1:"+error);
            //     }
            // });
 
            //1.promise 可以封装异步操作
            // let p=new Promise((resolve,reject)=>{
            //     //1.异步操作
            //     $.ajax({
            //         url:"mock/user.json",
            //         success:function(data){
            //             console.log("查询用户：",data);
            //             resolve(data);
            //         },
            //         error:function(error){
            //             reject(error);
            //         }
            //     });
            // })
 
            // p.then((obj)=>{
            //     //console.log("上一步的结果",obj.id);
            //     return new Promise((resolve,reject)=>{
            //         $.ajax({
            //         url: `mock/user_corse_${obj.id}.json`,
            //         success:function(data){
            //             console.log("查询用户课程：",data);
            //             resolve(data);
            //         },
            //         error:function(error){
            //             reject(error);
            //         }
            //     });
            //     })
            // }).then((data)=>{
            //     console.log("上一步的结果",data);
            //     $.ajax({
            //         url: `mock/corse_score_${data.id}.json`,
            //         success:function(data){
            //             console.log("查询用户课程分数：",data);
            //             //resolve(data);
            //         },
            //         error:function(error){
            //             //reject(error);
            //         }
            //     });
            // })
 
            function get(url,data){
                return new Promise((resolve,reject)=>{
                    $.ajax({
                        url:url,
                        data:data,
                        success:function(data){
                            resolve(data);
                        },
                        error:function(error){
                            reject(error);
                        }
                    })
                });
            }
 
            get("mock/user.json")
            .then((data)=>{
                console.log("用户查询成功：",data);
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程查询成功：",data);
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("成绩查询成功：",data);
            })
            .catch((error)=>{
                console.log("遇到异常..");
            });
        </script>
</body>
</html>

2.8 模块化

什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而s中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import。
·`export`命令用于规定模块的对外接口。
·`import`命令用于导入其他模块提供的功能。

3. Babel

Babel是一个Javascript编译器，我们可以使用es的最新语法编程，而不用担心浏览器兼容问题。他会自动转化为浏览器兼容的代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/131159