带你学习不一样的ES6，深度学习原理，带你玩嗨js----第二堂课的学习

秒速五厘米 2022-02-04 20:49 141阅读 0赞

/**
     * Created by wangyang on 2019-05-03.
     * itwangyang@gmail.com
     * http://www.itwangyang.xyz
     */
    
    
    //补全---->可以用到时间补全，就是说：比如：7：01，可以补全
    let str5 = 'abc';
    console.log(str5.padStart(5, '0'));
    console.log(str5.padEnd(5));
    
    
    /**
     * 函数
     */
    
    
    //1。默认函数,a.必填项不填写报错，b.有些参数没有传参的话，可以有默认值
    //以前的写法
    function ajax(url, method, dataType) {
        console.log(url);
        console.log(method);
        console.log(dataType);
        if (typeof url == 'undefined') throw Error('url不能为空');
        method = method ? method : 'GET';
    }
    
    //现在的写法（目前，后面还有新的）
    function ajax(url = new Error('url不能为空'), method = 'GET', dataType = 'json') {
        console.log(url);
        console.log(method);
        console.log(dataType);
    }
    
    ajax('/user', '/POST');
    
    //解析--
    function ajax() {
        var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Error('url不能为空');
        var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
        var dataType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'json';
        console.log(url);
        console.log(method);
        console.log(dataType);
    }
    
    ajax('/user', '/POST');
    
    
    //循环求和-----forEach
    function sum(prefix, ...rest) {
        let result = 0;
        rest.forEach(function (item) {
            result += item;
        });
        return prefix + (result);
    }
    
    sum('$', 1, 2, 3, 4, 5);
    
    
    //reduce  计算 汇总 收敛你 吧一个数组中的一堆值计算出来的一个值
    function sum(prefix, ...rest) {
        let result = rest.reduce(function (val, item) {
            return val + item;
        });
        return prefix + (result);
    }
    
    sum('$', 1, 2, 3, 4, 5);
    
    
    //reduce---讲解
    let arr4 = [1, 2, 3];
    //可以传一个参数，也可以传两个参数
    //第二个参数表示初始值
    //上一次执行结果会成为下一次的初始追
    //如果没有给初始追的话，第一次执行函数的时候，val=第一个元素，item=第二元素
    //reduce从左往后算
    
    /**
     *
     * @type {*|number}
     *
     */
    let result = arr4.reduce(function (val, item, index, origin) {
        console.log(val, item);
        // 0 1
        // 1 2
        // 3 3
    
        let sum = val + item;//返回值会成为下一次函数执行的时候的val
        if (index == origin.length - 1) {
            return sum / origin.length;
        } else {
            return sum;
        }
        return sum;
    }, 0);
    console.log(result);
    
    
    //reduce---原理
    let arr4 = [1, 2, 3];
    Array.prototype.reduce = function (reducer, initiaVal) {
        for (let i = 0; i < this.length; i++) {
            initiaVal = reducer(initiaVal, this[i]);
        }
        return initiaVal;
    
    };
    let result = arr4.reduce(function (val, item) {
        return val + item;
    }, 0);
    console.log(result);
    
    
    /**
     *
     * 展开运算符:--相当于把数组中的每个元素一次取出放在这
     *
     * */
    //以前的写法
    let arr5 = [1, 2, 3];
    let arr6 = [4, 5, 6];
    let arr7 = [].concat(arr5, arr6);
    console.log(arr7);
    
    
    //现在的写法-----相当于把数组中的每个元素一次取出放在这
    let arr5 = [1, 2, 3];
    let arr6 = [4, 5, 6];
    let arr7 = [...arr5, ...arr6];
    console.log(arr7);
    
    
    let arr6 = [4, 5, 6];
    // let max = Math.max(1,2,3);//方法一
    // let max = Math.max.apply(null,arr6);//方法二
    let max = Math.max(...arr6);//方法三--推荐用这个
    console.log(max);
    
    
    //拷贝-浅拷贝>---如何吧obj1 ,obj2的值拷贝到obj3中
    let obj1 = {name: '1'};
    let obj2 = {age: 2};
    let obj3 = {};
    
    /**
     * 1.方法一：循环赋值
     * @type {
       {key in}}
     */
    for (let key in obj1) {
        obj3[key] = obj1[key];
    }
    for (let key in obj2) {
        obj3[key] = obj2[key];
    }
    console.log(obj3);
    
    /**
     * 2.方法二：assign
     * 1.参数是target，后面都是来源对象
     * @type {
       {assign}}
     */
    Object.assign(obj3, obj1, obj2);
    console.log(obj3);
    
    /**
     * 3.方法三：对象解析
     *
     * @type {
       {...}}
     */
    obj3 = {...obj1, ...obj2};
    console.log(obj3);
    
    
    //深拷贝
    let obj5 = {
        name: 'wangyang', home: {
            city: 'sichuang'
        }
    };
    // let obj6 = {};
    // obj6 = Object.assign(obj6,obj5);
    
    //真正的深拷贝--这个会浪费空间的
    // let obj6 = JSON.parse(JSON.stringify(obj5));
    
    
    //推荐写这种深拷贝---这个才是牛气的代码
    function clone(origin) {
        let newObj = {};
        for (let key in origin) {
            if (typeof origin[key] == 'object') {
                newObj[key] = clone(origin[key]);
            } else {
                newObj[key] = origin[key];
            }
        }
        return newObj;
    }
    
    let obj6 = clone(obj5);
    
    obj6.home.city = "guangzhou";
    console.log(obj6);
    console.log(obj5);
    
    
    /**
     * 箭头函数
     *
     */
    //以前的写法
    let sum = function (a, b) {
        return a + b;
    };
    console.log(sum(1, 2));
    
    //现在的写法
    let sum = (a, b) => {
        return a + b;
    };
    console.log(sum(1, 2));
    
    
    //如果有且只有一个参数，可以省略小括号
    //如果只有返回值，没有的函数体代码，可以省略{}
    let double = num => num*2;
    console.log(double(2));
    
    
    //箭头函数this
    let obj = {
        name:'wang',
        getName(){
            // setTimeout(function () {
            //     console.log(this.name);
            // },1000)
    
            //箭头函数没有自己的this，他会使用上层的this
            setTimeout(()=> {
                console.log(this.name);
            },1000)
        }
    };
    obj.getName();
    
    
    //解析
    let obj = {
        name:'wang',
        getName(){
            let self = this;
            setTimeout(()=> {
                console.log(self.name);
            },1000)
        }
    };
    obj.getName();

供自己复习学习的，有错，请多指教