zoukankan      html  css  js  c++  java
  • day3 ES6基础

    1)let & var

    1.var可以多次声明变量 let不行
       例:let a=1;let a=2;报错
    2.var可作用到{}外 let不行
        例: {let a=1;}console.log(a);取不到a值
    3.var定义之前可以使用,let定义之前不可使用
        例:console.log(a);var a=1; //undefined;
           console.log(b);var b=1; //ReferenceError: y is not defined

    2)const

    变量一旦声明不能改变
        例子:const a=1;a=2;//报错

    3)解构

    1)数组解构
    例子:
    let arr=[1,2,3];
    //把数组arr值分别赋予给a b c
    js中let arr=d[0]; let b=d[1]; let c=d[2];
    es6中 let[a,b,c]=arr;
    
    2)对象解构
    例子:
    const person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }
    //同上例 把对象person值赋予其它变量
    js中 const name = person.name;...
    es6中 const { name, age, language } = person;//默认赋予变量名称就是对象中的key
            const { name: abc, age, language } = person; //若要赋予变量名称自定义用name: abc 即变量名称为abc
    
    3)字符串扩展
    例子:
            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
    
    4)字符串模板
       1)反引号
        //js中字符串中出现回车等符号需要转换
        //es6中可以用反引号`处理
         let ss = `<div>
                        <span>hello world<span>
                    </div>`;
        2)字符串可以插入变量和方法
         //js中字符串插入变量需要拼接 
         //es6可以通过${}插入变量和方法 
          例子:
            let abc="me";
            let age=10;
            function fun() {
                return "这是一个函数"
            }
            let info = `我是${abc},今年${age + 10}了, 我想说: ${fun()}`;

    4)函数优化

    1)为函数参数设默认值
        例子:
    //js
        function add(a, b) {
                // 判断b是否为空,为空就给默认值1
                b = b || 1;
                return a + b;
            }
        // 传一个参数
            console.log(add(10));
    
    //es6
        function add2(a, b = 1) {
                return a + b;
            }
            console.log(add2(20));
    
    2)不定参数
    例子:
        function fun(...values) {
                console.log(values.length)
            }
            fun(1, 2)      //2
            fun(1, 2, 3, 4)  //4
    
    3)箭头函数=> 类似lambda
        1// var print = function (obj) {
            //     console.log(obj);
            // }
            var print = obj => console.log(obj);
            print("hello");
        
        2) const person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }
    
            function hello(person) {
                console.log("hello," + person.name)
            }
    
            //箭头函数+解构
            var hello2 = ({name}) => console.log("hello," +name);
            hello2(person);

    5)对象优化

    1)一些对象处理的api
    const person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }
    console.log(Object.keys(person));//["name", "age", "language"]
    console.log(Object.values(person));//["jack", 21, 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 };
            //{a:1,b:2,c:3}将对象合并到target
            Object.assign(target, source1, source2);
            console.log(target);
    
    2)声明对象简写
    const age = 23
            const name = "张三"
            const person1 = { age: age, name: name }
    
            const person2 = { age, name }
            console.log(person2);
    
    3)对象的函数属性简写
    let person3 = {
                name: "jack",
                // 以前:
                eat: function (food) {
                    console.log(this.name + "在吃" + food);
                },
                //箭头函数this不能使用,对象.属性
                eat2: food => console.log(person3.name + "在吃" + food),
                eat3(food) {
                    console.log(this.name + "在吃" + food);
                }
            }
    
    4)对象拓展运算符
    1、拷贝对象(深拷贝)
            let p1 = { name: "Amy", age: 15 }
            let someone = { ...p1 }
            console.log(someone)  //{name: "Amy", age: 15}
    2、合并对象
            let age1 = { age: 15 }
            let name1 = { name: "Amy" }
            let p2 = {name:"zhangsan"}
            p2 = { ...age1, ...name1 } 
            console.log(p2)

    6)map和reduce

    1.map
    let arr = ['1', '20', '-5', '3'];       
            //map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
            //  arr = arr.map((item)=>{
            //     return item*2
            //  });
             arr = arr.map(item=> item*2);
             console.log(arr);
    
    2.reduce
    let arr=[2, 40, -10, 6];
    let result = arr.reduce((a,b)=>{
                console.log("上一次处理后:"+a);
                console.log("当前正在处理:"+b);
                return a + b;
            },100);
            console.log(result);
    打印:
                上一次处理后:100
    1.html:46 当前正在处理:2
    1.html:45 上一次处理后:102
    1.html:46 当前正在处理:40
    1.html:45 上一次处理后:142
    1.html:46 当前正在处理:-10
    1.html:45 上一次处理后:132
    1.html:46 当前正在处理:6
        

    7)Promise 封装ajax异步操作

    例子:先查用户信息 再根据用户信息查课程 再根据课程查分数
    //js中
            // $.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可以封装异步操作 resolve是成功时操作 reject失败时
    // 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((data) => {
            //     console.log("上一步的结果", data)
            //     $.ajax({
            //         url: `mock/corse_score_${data.id}.json`,
            //         success: function (data) {
            //             console.log("查询课程得分成功:", data)
            //         },
            //         error: function (err) {
            //         }
            //     });
            // })
    
    
    //进一步封装类
    function get(url, data) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: url,
                        data: data,
                        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)
                });

    8)模块化 //就是调用其它类的方法/变量

    1)
    user.js//导出
    var name = "jack"
    var age = 21
    function add(a,b){
        return a + b;
    }
    // 导出变量和函数
    export {name,age,add}
    
    
    main.js//导入 import{}中变量名称与export{}中的变量名称需一致
    import {name,add} from "./user.js"
    console.log(name);
    add(1,3);
    
    2)export default可以重命名
    // 导出后可以重命名
    hello.js
    export default {
        sum(a, b) {
            return a + b;
        }
    }
    
    main.js
    import abc from "./hello.js"
    abc.sum(1,2);
  • 相关阅读:
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Python eval() 函数
    Python repr() 函数
  • 原文地址:https://www.cnblogs.com/hbhb/p/14504543.html
Copyright © 2011-2022 走看看