Better

本次打卡值得关注的内容有，关于 border-collapse 在部分浏览器上的 bug，关于 reduce 函数更多的使用场景。

Algorithm

本周继续完成 easy part，名为 Remove Element，不知道是不是同情我落下的打卡太多了还是咋滴，这次的题目和上次差不太多，考察的也是 splice 函数的使用，比较简单，就不多废话啦，代码如下：

var removeElement = function(nums, val) {
    for(var i = nums.length - 1; i >= 0; i--) {
        if(nums[i] === val) {
            nums.splice(i, 1);
        }
    }
    return nums.length;
};

Review

本周看的技术文章来自于 JavaScript Weekly 推荐，主要讲述 reduce 函数是一把瑞士军刀。

这个函数我日常开发中也十分喜欢使用，思考下来主要有两个场景

• 累加器、累乘器
• 数组去重

我们看下作者说些啥吧，首先谈到 reduce 的第一个参数原型如下

function myReducer(accumulator, arrayElement) {
    // Code to do something goes here
}

作者认为作为累加器的场景，太简单了的原因就是没有意识到 accumulator 和 arrayElement 是可以完全不一样的类型。同时 accumulator 可以不仅是一个原始类型。

作者列出了额外的 5 个场景

• 根据数组元素的某个 key，将数组转成对象
• 小数组按照一定规则展开为一个大的数组
• 一次遍历，计算两次，比如得到数组最大值和最小值
• 联合 map 和 filter
• 顺序执行异步函数

对于第二点，我们可以使用 reduce 写出自己的 flatMap

function flatMap(f, arr) {
    const reducer = (acc, item) => acc.concat(f(item));
    return arr.reduce(reducer, []);
}

第三点还挺赞的，可以在使用已有 iterator 函数的同时减少了一次计算，利用的就是 accumulator 可以返回任意类型

function minMaxReducer(acc, reading) {
    return {
        minReading: Math.min(acc.minReading, reading),
        maxReading: Math.max(acc.maxReading, reading),
    };
}

第四点更酷，不晓得怎么表达了，直接上通用语言代码

function notEmptyEmail(x) {
   return (x.email !== null) && (x.email !== undefined);
}

function greater(a, b) {
    return (a > b) ? a : b;
}
function notEmptyMostRecent(currentRecent, person) {
    return (notEmptyEmail(person))
        ? greater(currentRecent, person.lastSeen)
        : currentRecent;
}

const mostRecent = peopleArr.reduce(notEmptyMostRecent, '');

最后一点，表示如何顺序发送异步请求

function fetchMessages(username) {
    return fetch(`https://example.com/api/messages/${username}`)
        .then(response => response.json());
}

function getUsername(person) {
    return person.username;
}

async function chainedFetchMessages(p, username) {
    // In this function, p is a promise. We wait for it to finish,
    // then run fetchMessages().
    const obj  = await p;
    const data = await fetchMessages(username);
    return { ...obj, [username]: data};
}

const msgObj = peopleArr
    .map(getUsername)
    .reduce(chainedFetchMessages, Promise.resolve({}))
    .then(console.log);

Tip

border-collapse 公司项目中有用到 table，但测试发现在部分浏览器中，border 会局部消失，而是滚动还会导致消失的位置不同。本以为是不是有什么奇怪的元素档在了 table 上面，但审查 DOM 发现并不是这个原因，因此将问题锁定在了 border-collapse 这个 CSS 属性，由于 table 布局在使用 th/td 的 border 属性时，是可以明显看到每个单元格之间的间隙的，因此通常会在 table 元素上使用 border-collapse: collapse 消除间隙且合并 border。

解决办法就是不使用该属性

• 通过给 table 设置 border-spacing: 0 消除间隙
• 但是每个单元格的 border 并未折叠，也就是说会有 double 的高度，因此我们不设置四周的 border，仅设置 left 和 top
• 给 table 元素设置 right 和 bottom，完成框起来效果

Share

本周无