前端框架-es6新特性学习

1.前端对应的技术框架：

2、ES6：全称ECMAScript6.0 ，是JavaScript的标准规范。JavaScript是它的实现。

下面学习它的新特性：

（1）let和const学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--es6新特性-->
<script>
    /*
    1.新特性let；
    （1）var声明的变量往往会越域；let声明的变量有严格的局部作用域
     (2)var可以声明多次；let只能声明一次
     (3)var会变量提升；let不存在变量提升

    2.const：声明之后不允许改变，一旦声明必须初始化

    * */
    {
        var a = 1;
        let b = 2;
    }
    // console.log(a);
    // console.log(b);

    var n = 1;
    var n = 5;
    let c = 1;
    c = 2;

    console.log(c);
    console.log(n);

</script>

</body>
</html>

（2）解构表达式，字符串扩展，字符串模板，字符串插入变量和表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>

        /*
        * 解构表达式
        * */
        let arr = [1,2,3];
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];

        let [a,b,c] = arr;
        document.write(a,b,c);

        const person = {
            name: "zhangsan",
            age: 21,
            language: ['java','js']
        }
        // const name = person.name;
        // const language = person.language;

        const {name:n,age:e,language:l} = person;
        document.write(n,e,l);

        /*
        * 字符串扩展
        * */
        let str = "hello.vue";
        document.write(str.startsWith("hello"));//true
        document.write(str.endsWith(".vue"));//true
        document.write(str.includes("e"));//true
        document.write(str.includes("hello"));//true

        /*
        * 字符串模板
        * */
        let ss = `<div>
                    <span>hello world<span>
                   </div>`;
        document.write(ss);

        /*
        * 字符串插入变量和表达式
        * 变量名写在${}中，${}中可以放入JavaScript中定义的表达式
        * */
        function f(){
            return "这是一个函数";
        }

        let info = `我是${n},今年${e+10}岁了,我想说：${f()}`;
        document.write(info);

    </script>

</body>
</html>

（3）函数参数的默认值，不定参数，箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*
        * 函数参数的默认值
        * */
        //在es6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a,b) {
            //判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        //传一个参数
        document.write(add(10));

        //现在es6可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add1(a,b = 1) {
            return a + b;
        }
        document.write(add1(20));

        /*
        * 不定参数
        * */
        function fun(...values) {
            document.write(values.length)
        }
        fun(1,2);//2
        fun(1,2,3,4);//4

        /*
        * 箭头函数
        * */
        //以前声明一个方法
        // var print = function (obj) {
        //     document.write(obj);
        // };
        // print(111);

        var print = obj =>document.write(obj);
        print("hello");

        var sum = function (a,b) {
            c = a+b;
            return a+c;
        };

        var sum2 = (a,b) => a + b;
        document.write(sum2(1,6));

        var sum3 = (a,b)=>{
            c = a+b;
            return a+c;
        };
        document.write(sum3(2,2));


        const person = {
            name: 'jack',
            age: 18
        };
        function hello(param) {
            document.write("hello"+param.name);
        }
        hello(person);

        var hello1 = (param) =>document.write("hello1" + param.name);
        hello1(person);

        //箭头函数+解构
        var hello2 = ({name}) =>document.write("hello2" + name);
        hello2(person);

    </script>

</body>
</html>

（4）声明对象简写、对象的函数属性简写、对象拓展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //object新特性
        const person = {
            name: 'jack',
            age: 18,
            language: ['java','js','css']
        };

        document.write(Object.keys(person));//["name","age","language"]
        document.write(Object.values(person));//["jack",21,Array(3)]
        document.write(Object.entries(person));//[Array(2),Array(2),Array(2)]

        const target = {a:1};
        const source1 = {b:2};
        const source2 = {c:3};

        //对象合并{a:1,b:2,c:3}
        Object.assign(target,source1,source2);
        document.write(target);
        console.log(target);

        //声明对象简写：
        const age = 23;
        const name = "张三";
        const person1 = {age:age,name:name};
        console.log(person1);

        const person2 = {name,age};
        console.log(person2);

        //对象的函数属性简写
        let person3 = {
            name: "jack",
            //
            eat: function (food) {
                document.write(this.name + "在吃" + food);
            },
            //箭头函数this.属性不能使用。需要对象.属性
            eat2: food => document.write(person3.name + "在吃" +food),
            eat3(food){
                document.write(this.name + "在吃" + food);

            }

        };
        person3.eat("香蕉");
        person3.eat2("苹果");
        person3.eat3("菠萝");

        //对象拓展运算符
         //拷贝对象（深拷贝）
        let person5 = {name:"Amy",age:15}
        let someone = {...person5}
        console.log(someone);

        //合并对象
        let age1 = {age:17};
        let name1 = {name:'Amy'};
        let person6 = {...age1,...name1}
        console.log(person6);



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

（5）数组中新增了map和reduce方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //数组中新增了map和reduce方法
        //map():接收一个函数，将原来数组中的所有元素用这个函数处理后放入新数组中返回。
        let arr = ['1','20','-5','4'];
        // arr = arr.map((item)=>{
        //     return item*2
        // });
        arr = arr.map(item =>item*2);
        document.write(arr);

        //reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
        //[2,40,-10,6]
        //arr.reduce(callback,[initialValue])
        /*
        * 1.previousValue(上一次调用回调返回的值，或者是提供的初始值（initiaValue）)
        * 2.currentValue(数组中当前被处理的元素)
        * 3.index（当前元素在数组中的索引）
        * 4.array(调用reduce的数组)
        * */
        let result = arr.reduce((a,b) =>{
            document.write("上一次处理后："+a);
            document.write("当前正在处理："+b);
            return a +b;
        },100);
        document.write(result);
    </script>

</body>
</html>

(6)promise可以封装异步ajax操作(简化ajax)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <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("出现异常了："+error);
                            }
                        });
                    },
                    error(error){
                        console.log("出现异常了："+error);
                    }
                });
            },
            error(error){
                console.log("出现异常了："+error);
            }
        });
*/

        //promise可以封装异步操作
        /*let p = new Promise((resolve,reject)=> {
            //1.异步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查询用户成功：",data);
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            });
        });

        p.then((obj)=>{
           return  new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${obj.id}.json`,
                    success: function (data) {
                        console.log("查询用户课程成功：",data);
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        }).then((obj2)=>{
            console.log("上一步的结果",obj2);
            $.ajax({
                url: `mock/corse_score_${obj2.id}.json`,
                success: function (data) {
                    console.log("查询用户课程得分成功：",data);
                },
                error: function (err) {
                }
            });
        });
*/
        //对上面的代码进行封装
        function get(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        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((err)=>{
                console.log("出现异常，",err);
        })
    </script>

</body>
</html>

(7)es6中的模块化：

main.js导入hello.js和user.js中的属性和方法：

hello.js


/*export const util = {
    sum(a, b) {
        return a + b;
    }
};*/

export default {
    sum(a, b) {
        return a + b;
    }
}
//export不仅可以导出对象，一切js变量都可以导出。比如：进本类型变量、函数。数组、对象。
// export {util}

user.js

var name = 'jack';
var age = 20;

function add(a, b) {
    return a + b;

}

export {name, age, add};

main.js

import ddd from "./hello.js";
import {name, age, add} from "./user.js";

util.sum(1, 2);
document.write(name);
document.write(age);

前端框架-es6新特性学习

猜你喜欢