当前位置:IT橙子的前端技术博客 > 前端笔记 > 正文

JS异步编程、函数式编程—代码练习题

时间:2020-11-17 来源:未知 分类:前端笔记 阅读:

一、将下面异步代码使用Promise的方法改进

setTimeout(function() {
    var a = 'hello';
    setTimeout(function() {
        var b = 'lagou';
        setTimeout(function() {
            var c = 'I  U';
            console.log(a + b + c);
        }, 10);
    }, 10);
}, 10);

答案:

const promise = new Promise((resolve, reject) => {
    resolve('hello')
}).then(res => {
    return res + ' ' + 'lagou' + ' '
}).then(res => {
    return res + 'I  U'
}).then(res => {
    console.log('res', res)
    throw res
}).catch(e =>
    console.log(e)
)

二、基于以下代码完成下面的四个练习


// 
const fp = require('lodash/fp')

// 数据
// horsepower 马力,dollar_value 价格,in_stock 库存
const cars = [
  { name: "Ferrari FF", horsepower: 660, dollar_value: 700000, in_stock: true },
  { name: "Spyker C12 Zagato", horsepower: 650, dollar_value: 648000, in_stock: false },
  { name: "Jaguar XKR-S", horsepower: 550, dollar_value: 132000, in_stock: false },
  { name: "Audi R8", horsepower: 525, dollar_value: 114200, in_stock: false },
  { name: "Aston Martin One-77", horsepower: 750, dollar_value: 1850000, in_stock: true },
  { name: "Pagani Huayra", horsepower: 700, dollar_value: 1300000, in_stock: false }
]

练习1:使用函数组合 fp.flowRight() 重新实现下面这个函数

/*let isLastInStock = function(cars) {
    // 获取最后一条数据
    let last_car = fp.last(cars)
    // 获取最后一条数据的 in_stock 属性值
    return fp.prop('in_stock', last_car)
  }*/
const isLastInStock = fp.flowRight(fp.prop('in_stock'), fp.last);
console.log(isLastInStock(cars));

练习2:使用 fp.flowRight()、fp.prop() 和 fp.first() 获取第一个 car 的 name

const isFirstName = fp.flowRight(fp.prop('name'), fp.first);
console.log(isFirstName(cars));

练习3:使用帮助函数 _average 重构 averageDollarValue,使用函数组合的方式实现

let _average = function (xs) { return fp.reduce(fp.add, 0, xs) / xs.length } // <- 无须改动
/*
let averageDollarValue = function (cars) {
  let dollar_values = fp.map(function(car) { return car.dollar_value }, cars)
  return _average(dollar_values)
}
*/
let averageDollarValue = fp.flowRight(_average, fp.map(fp.props('dollar_value')));
console.log('dollar_values', averageDollarValue(cars))

练习4:使用 flowRight 写一个 sanitizeNames()函数,返回一个下划线连接的小写字符串,把数组中的 name 转换为这种形式:例如:sanitizeNames([“Hello World”]) => [“hello_world”]

let _underscore = fp.replace(/W+/g, '_') // <-- 无须改动,并在 sanitizeNames 中使用它
let sanitizeNames = fp.flowRight(_underscore, fp.map(fp.toLower), fp.split(' '));
console.log(sanitizeNames(["Hello World"]));

三、基于下面提供的代码,完成后续的四个练习

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support.js')
console.log('Maybe', Maybe)
let maybe = Maybe.of([5, 6, 1]);
// let ex1 = undefined;
<!--support.js-->

class Container {
    static of(value) {
        return new Container(value)
    }
    constructor(value) {
        this._value = value
    }
    map(fn) {
        return Container.of(fn(this._value))
    }
}

class Maybe {
    static of(x) {
        return new Maybe(x)
    }
    isNothing() {
        return this._value === null || this._value === undefined
    }
    constructor(x) {
        this._value = x
    }
    map(fn) {
        return this.isNothing() ? this : Maybe.of(fn(this._value))
    }
}
module.exports = {
    Maybe, Container
}

练习1:使用fp.add(x,y)和fp.map(f,x)创建一个能让functor里面的值增加的函数ex1

let ex1 = maybe.map(x => fp.map(fp.add(1), x));
console.log('ex1', ex1)

练习2:实现一个函数 ex2,能够使用 fp.first 获取列表的第一个元素

let xs = Container.of(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])
// let ex2 = undefined
let ex2 = xs.map(x => fp.first(x));
console.log('ex2', ex2)

练习3:实现一个函数 ex3,使用 safeProp 和 fp.first 找到 user 的名字的首字母

let safeProp = fp.curry(function (x, o) { return Maybe.of(o[x]) })
let user = { id: 2, name: "Albert" }
// let ex3 = undefined
let ex3 = safeProp('name', user).map(x => fp.first(x));
console.log('ex3', ex3)

练习4:使用 Maybe 重写 ex4,不要有 if 语句

/*let ex4 = function (n) {
    if (n) { return parseInt(n) }
}*/
let ex4 = n => Maybe.of(n).map(parseInt);
console.log('ex4', ex4(null))
-------------------------------------------正文完~-------------------------------------------

关于橙子

    橙子,一个奋斗在前端路上的女程序员~~

    橙子,热爱前端,关注前端,4年的前端工作经验,熟练掌握前端各项技能,熟练多种前端框架,希望遇到志同道合的前端朋友们,一起学习交流,共同进步!

学习交流

  • 微信公众号:IT橙子6 微信扫一扫添加关注 获取更多前端学习资料!
  • QQ交流群:592969963 IT橙子前端技术交流群

相关推荐