Structure-study-es6(ESModel、compose、reduce)

ESModule

es6是静态导入 主要使用import 和 export

• import语法会解析到页面的最顶端
• 每次获取的值都会随着接口中的内容变化而变化

    // a.js
    let a = 1; // 导出a变量 （接口）
    let b = 2;
    let h = 'hello'
    setInterval(()=>{
        a++
    },1000)
    export { //不能写成对象格式
        a as c, // as 就是起别名
        b,
        h as default // export default h
    }
    // export default c;

    // index.js
    setInterval(() => {
        console.log(c,b); // 每次c的值都会发生变化
    }, 1000);
    import _,{c,b} from './a';
    import * as obj from './a';  // 可以将所有属性收集到obj对象中

    import './a' // 有副作用的导入 可以让文件执行 当时没有使用这个文件中的内容

• 动态导入 可以在作用域中使用

    let btn = document.createElement('button');
    btn.addEventListener('click',function(){
        // import语法返回的是一个promise
        import('./file').then(data=>{
            console.log(data);
        });// 动态的使用jsonp加载一个新的文件
    })
    document.body.appendChild(btn);

promise

1、中断promise链 就是返回一个等待的promise

    let p1 = p.then(()=>{
        console.log('ok');
        return new Promise(()=>{})
    }).then(()=>{
        console.log(1);
    })

2、如何放弃某个promise的执行结果

function wrap(p1){
    let fail = null;
    let p2 = new Promise((resolve,reject)=>{
        fail = reject; // 先将p2失败的方法暴露出来 
    });
    let p = Promise.race([p2,p1]); // race方法返回的也是一个promise
    p.abort = fail;
    return p
    
}
let p = wrap(new Promise((resolve,reject)=>{
    setTimeout(() => {
        resolve('ok');
    }, 3000);
}))
p.abort('error');
p.then(data=>{
    console.log(data);
}).catch(err=>{
    console.log(err);
});  

箭头函数

没有 this arguments prototype(不能实例化)

   let a = 100; // 此属性不会放到全局上
    let obj = {
        a:1,
        fn:()=>{ // this => obj 没有this指向从而解决了this问题
            setTimeout(()=>{ 
                console.log(this.a);
            })
        }
    }
    obj.fn();  // undefined

数组新方法

filter map find findIndex some every reduce

1、reduce 收敛

    let total = [{price:10,count:5},{price:10,count:5},{price:10,count:5}].reduce((prev,current,index,arr)=>{
        return prev + current.price * current.count
    },0);

2、reduce收敛实现扁平化flat

    const flatten = arr => arr.reduce((item, next) => item.concat(Array.isArray(next) ? flatten(next) : next), []);

3、compose函数

    // reduceRight
    function compose(...args){
        return function(...values){
            let fn = args.pop(); // 先取出最后一项
            return args.reduceRight((prev,current)=>{
                return current(prev) // 把上一次计算的结果传递给下一个函数
            },fn(...values))
        }
    }

    // reduce
    function compose(...args){
        return args.reduce((prev,current)=>{
            return function(...values){
                return prev(current(...values))
        }
    })
    
    // 应用
    function sum(a,b){
        return a+b;
    }
    function len(str){
        return str.length;
    }
    function addCurrency(val){
        return '￥'+ val
    }
    
    let r = compose(addCurrency,len,sum)('abc','bed');
    
    // 执行过程
    /*
        prev = addCurrency
        current = len
        
        prev = function(...values){
            return addCurrency(len(...values))
        }
        current = sum;
        
        returnValue = function(...values){
            return addCurrency(len(sum(...values)))
        }
    */
}