ARTS 打卡第5周

46 阅读3分钟

1、Algorithm 一道算法题

环形链表

给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始)。注意:pos 不作为参数进行传递 。仅仅是为了标识链表的实际情况。 如果链表中存在环 ,则返回 true 。 否则,返回 false 。

image.png

可以采用快慢指针法,两个指针初始位置都是head,快指针每次走2步,慢指针每次走1步,当快慢指针相遇时,表示存在环;否则就不存在环。


/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */

/**
 * @param {ListNode} head
 * @return {boolean}
 */
var hasCycle = function(head) {
    let fast=head;
    let slow=head;
    while(fast && slow){
        // 快指针每次走2步
        fast = fast?.next?.next;
        // 慢指针每次走1步
        slow=slow?.next;

        // 当快慢指针相遇时,则说明存在环
        if(fast=== slow){
            return true;
        }
    }

    return false;
};

2、Review 读一篇英文文章

A Complete Guide to Flexbox Flex Box完整指南

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

最重要的是,与常规布局(基于垂直的块级布局和基于水平的内联布局)相比,弹性盒子布局是无方向性的。尽管常规布局在页面上表现良好,但它们缺乏灵活性(无意冒犯),无法支持大型或复杂的应用程序(特别是在方向变化、调整大小、拉伸、收缩等方面)。

flex 布局属性分成容器(flex container)和子项(flex items)。 flex container 具有的属性包括:

  • 布局 display: flex | inline-flex
  • 主轴方向 flex-direction: row | row-reverse | column | column-reverse
  • 换行方式(默认不换行)flex-wrap: wrap | wrap-reverse | nowrap
  • flex-flow(flex-direction和flex-wrap的缩写,开发常用)
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • align-items: flex-start | flex-end | center | stretch | baseline
  • align-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly
  • gap | row-gap | column-gap: <长度值>

flex item 具有的属性包括:

  • order
  • flex-grow: <数值>
  • flex-shrink: <数值>
  • flex-basis: <数值> 当 flex-basis 的值为 0 时表示当剩余空间足够时,元素可以弹性增大时不会扩展自己。如果设置为 auto,有额外空间会根据其 flex-grow 值进行分配。
  • flex (flex-grow、flex-shrink、flex-basis的缩写)

flex 属性值的数量不同,含义也不同: 其中 flex-grow 和 flex-shrink 只能是数值(可以是小数)不能是长度值,而 flex-basis 可以支持关键字和长度值

  • align-self:auto | flex-start | flex-end | center | stretch | baseline

3、Technique/Tips 分享一个小技术

使用 flexbox 实现弹性的header/左右导航/主体/footer 的布局 其中,设置子项的flex: 1 1 100%让其默认占据一行。

4、Share 分享一个观点

你所遇到的所有人,其实都是你自己。

你的人生,在场的从来只有你自己。