GitHub题目答案及扩展

作者: 不想写代码的程序媛 | 来源:发表于2019-08-10 17:12 被阅读0次

GitHub题目答案及扩展
leetcode142.环形链表II
02-勘察成果的应用
Ubuntu下FastDFS环境配置及php FastDFS扩展
为iOS面试做准备－面试题整理剑指offer部分(持续更新中)
为iOS面试做准备－面试题整理数据结构部分(持续更新中)
题目答案
题目答案
6月推荐网站
Laravel5 优秀扩展包整理

前端面试题，3+1模式，主要是每天督促自己，多积累一些基础知识。
GitHub题目地址：https://github.com/haizlin/fe-interview

第1天：

[html] 页面导入样式时，使用link和@import有什么区别？
答案：
   * link为XHTML标签，除了加载css外，还可以定义RSS等其他事务，@import为css标签，只能加载css文件
   * link不存在兼容性问题，而@import是css2.1提出的，低版本的浏览器可能不支持
   * 可通过js创建link标签，从而修改元素属性，但js无法操作@import
   * 在页面加载过程中，遇到link标签会立即解析，但@import标签需等页面加载完成
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
答案：https://www.jianshu.com/p/089b1512bb66

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
代码行数不超过15行，时间不超过10分钟

let arr = [];
function generate() {
    if (arr.length < 5) {
        let randomNumber = Math.ceil(Math.random() * 30 + 2);

        if (arr.indexOf(randomNumber) > -1) {
            generate();
        } else {
            arr.push(randomNumber);
            generate();
        }
    }
}
generate();
console.log(arr);

第2天：
写一个方法去掉字符串中的空格

function trim(str, type) {
    let map = {
        left: /^\s+/g,
        right: /\s+$/g,
        both: /^\s+|\s+$/g,
        all: /\s+/g
    };
    // 默认情况下，删除所有空格
    let reg = type && map[type] ? map[type] : map.all;
    let result = str.replace(reg, '');

    if (type === 'middle') {
        // 获取左边空格
        let left = str.match(map.left)[0];
        // 获取右边空格
        let right = str.match(map.right)[0];
        result = left + result + right;
    }

    return result;
}

第3天：

[css] 在页面上隐藏元素的方法有哪些？

  - display: none -> 元素不占据页面位置
  - visibility: hidden -> 元素在页面中占据位置，但不可见
  - opacity: 0 -> 透明度为0
   - 利用position的absolute和relative，再结合left和top等属性
   - transform: rotateX(90deg) / rotateY(90deg) / scale(0)

  针对文本节点：
  - font-size: 0
  - text-indent: 大值

[js] 去除字符串中最后一个指定的字符

function deleteChar(str, char) {
    if (!str || !char) {
        alert('传入的字符不合法');
    }
    let index = str.lastIndexOf(char);
    if (index > -1) {
        return str.substring(0, index) + str.substring(index+1); 
    }
    return str;
}

这里主要考察字符串相关一些方法。

str.length：获取字符串长度
获取某个字符：
str.charAt(number) ：获取索引为number的字符
str.charCodeAt(number)：获取索引为number的ASCII码
str[number]：含义与str.charAt(number)相同

截取字符串：(均不改变原始字符串)

str.substr(start， length)，若start为负值，则从末尾开始数
str.substring(start, end?)，不包含end的字符串；有负数直接转为0；无end，则默认到字符串结束；end值小于start值，则自动交换位置
str.slice(start, end?)：有负数表示从字符串末尾开始，-1表示最后一位，无end，默认到字符串结束
与正则相关：
1）str.replace(substr / RegExp, str)：
它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

2）str.search(substr / RegExp)：
str中第一个与 regexp 相匹配的子串的起始位置。
search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。

3）str.match(RegExp)：

image.png

说明：若正则表达式中无g，则无论执行多少次match，都只匹配首次出现的子串，返回结果为类数组。matches[0]为匹配项，matches[1]为捕获组1，依次类推。

image.png

如果正则中有g，则返回所有的匹配项。

第4天

[html] HTML5的文件离线储存怎么使用，工作原理是什么？
[css] CSS选择器有哪些？哪些属性可以继承？
CSS选择器：
   通配符*
   id #container
   class .container
   标签名 div
   相邻兄弟节点 +
   直接子代元素 >
   子孙元素 div p
   伪类 :firstChild
   伪元素::after ::before
可以继承的属性：
字体系列
文本系列

伪类扩展：

:first-of-type // 表示一组兄弟元素中其类型的第一个元素，而不管其在兄弟节点中的位置如何
DOM结构：

<div>
    <h1>HEAD1</h1>
    <p>第一个P元素</p>
    <p>第二个P元素</p>
    <p>第三个P元素</p>
    <p>第四个P元素</p>
</div>

style样式：

p:first-of-type {
        color: #f00;
 }

image.png

<div>
        <p>第一个P元素<em>p里面的em元素</em></p>
        <em>第二个em元素</em>
</div>
div em:first-of-type {
            color: #f00;
}

image.png

:last-of-type // 表示一组兄弟节点中某类型的最后一个元素

如果写成parentNode ele:first-of-type的格式，则选中的元素既包括父元素的子元素的最后一个选定类别的元素，也包括子元素最后一个选定类别的元素，依次类推
DOM结构和样式表：

<p>
        <em>我没有颜色 :(</em><br>
        <span><em>我有颜色!</em></span><br>
        <strong>我没有颜色 :(</strong><br>
        <em>我有颜色 :D</em><br>
        <span>
            <em>我在子元素里，但没有颜色!</em><br>
            <span style="text-decoration:line-through;">我没有颜</span> 
            <br>
            <em>我却有颜色！</em><br>
        </span>
        <br>
        <strong>我也没有颜色 :(</strong>
</p>
p em:last-of-type {
    color: #8470FF;
}

image.png

3）:nth-of-type(an+b)

<div>
        <div>这段不参与计数。</div>
        <p>这是第一段。</p>
        <p>这是第二段。</p>
        <div>这段不参与计数。</div>
        <p>这是第三段。</p>
        <p>这是第四段。</p>
</div>
<style>
  div p:nth-of-type(2n + 1) {
      color: #f00;
  }
  div p:nth-of-type(2n) {
      color: #8B864E;
  }
</style>

image.png
4）:nth-last-of-type(an+b) 与:nth-of-type的用法类似，只是这个倒序计数
5）:nth-child(an + b)::nth-child(an+b)这个 [CSS 伪类]首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...（从1开始计数）

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素
6）:nth-last-child(an + b): 与nth-child(an + b)的功能类似，只是该方法倒序计数
7）:first-child表示一组兄弟节点中的第一个

<div>
      <p>This text is selected!</p>
      <p>This text isn't selected.</p>
    </div>

    <div>
      <h2>This text isn't selected: it's not a `p`.</h2>
      <p>This text isn't selected.</p>
</div>
<style>
p:first-child {
    color: #FFD700;
}
</style>

image.png
8）:last-child 父元素的最后一个子元素
9）:only-child父元素的唯一子元素(可一直追溯到子元素的子元素)-->等价于:first-child:last-child / :nth-child(1):nth-last-child(1)

<main>
      <div>
        <i>I am a lonely only child.</i>
      </div>

      <div>
        <i>I have siblings.</i><br>
        <b>So do I!</b><br>
        <span>I also have siblings, <span>but this is an only child.</span></span>
      </div>
</main>
<style>
  main :only-child {
    color: #f00;
  }
</style>

image.png

10）:only-of-type 在所有的子元素中，只选中唯一类型的元素，而不管该元素有多少个兄弟节点。

<main id="main">
      <div>I am `div` #1.</div>
      <p>I am the only `p` among my siblings.</p>
      <div>I am `div` #2.</div>
      <div>I am `div` #3.
        <i>I am the only `i` child.</i>
        <em>I am `em` #1.</em>
        <em>I am `em` #2.</em>
      </div>
</main>
<style>
  #main :only-of-type {
    color: #0f0;
  }
</style>

image.png

11）关于a链接 :link :visited :hover :active这四个属性的定义顺序为：Love Hate

        a:link {
            color: #FFD39B;
        }
        a:visited {
            color: #FF6A6A;
        }

        a:hover {
            color: #FFC1C1;
        }
        a:active {
            color: #DAA520;
        }

定义顺序不对，可能会导致:active伪类失效

12）:focus当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发

伪元素扩展：

::before: {
}
::after {
}
// selection支持的元素：color  、background-color 、cursor 、caret-color(插入光标的颜色)、outline 、 text-decoration 、text-emphasis-color、text-shadow 
// 参考：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection)

::selection {
  background-color: cyan;
}
// 首行
::first-line {
}
// 首个字符（中文或者应为）
::first-letter {
}

[js] 写一个方法把下划线命名转成大驼峰命名

第5天

[html] 简述超链接target属性的取值和作用
- _blank：在浏览器新的标签页打开一个页面
- _parent：用于框架集或者iframe，在a链接所在页面的父窗口中载入a链接的页面
- _self：在当前窗口载入a链接的页面
- _top：用于框架集或者iframe，在顶级窗口中载入a链接页面
  _top和_parent 在框架集中跟top 、parent指向的窗口的含义一致
[css] CSS3新增伪类有哪些并简要描述
答案见第4天
[js] 写一个把字符串大小写切换的方法

function convertCase(str) {
    if (!str || (typeof str !== 'string')) {
        alert('请输入正确的字符串');
        return;
    }
    for (var i = 0, len = str.length; i < len; i++) {
        str = str.replace(str[i], str[i].search(/[a-z]/) > -1 ? str[i].toUpperCase() : str[i].toLowerCase());
    }
}
// 使用了字符串的全局匹配
function convertCase(str) {
    return str.replace(/([a-z]*)([A-Z]*)/g, function (m, $1, $2) {
        return $1.toUpperCase() + $2.toLowerCase();
    });
}

还可通过比较ASCII值来确定输入值是小写还是大写，但个人感觉不是很妥，还得需要记住ASCII值的大小。

第6天

[html] label都有哪些作用？并举相应的例子说明
- 主要用于绑定文本和表单元素
- 两种用法：
- <label for="username"></label><input type="text" id="username" class="username"> 或者 <label><input type="text" class="username"></label>
[css] 用css创建一个三角形，并简述原理
[js] 写一个去除制表符和换行符的方法

第7天

[html] iframe框架都有哪些优缺点？
[css] 简述你对BFC规范的理解
BFC是block-formatting-context，翻译过来就是块格式化上下文。它规定了块级元素在页面中的定位方式。它是页面中一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的生成：
- 根元素
- float的值不为none（left / right）
- overflow的值不为visible （hidden / scroll / auto）
- display的值为inline-block、table-cell、table-caption
- position为非relative和static （absolute / fixed / sticky）
BFC的作用：
- 阻止margin塌陷
- 阻止浮动元素被块元素覆盖
- 阻止父元素高度塌陷（如果两个子元素都有float属性，则父元素高度会变为0）
- 自适应两栏或多栏布局
  可参考：1）https://juejin.im/entry/59c3713a518825396f4f6969
  2）https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
  延伸 Inline formatting context(简称IFC)， G（grid）FC和F(flex)FC
[js] 统计某一字符或字符串在另一个字符串中出现的次数
个人写的比较挫的代码

function count(str, target) {
  var reg = new RegExp(target, 'g');
  var count = 0;
  while(reg.test(str)) {
    count++
  }
  return count;
}

GitHub上别人的代码：

// 1
function count(str, target) {
  var reg = new RegExp(target, 'g');
  return str.match(reg).length;
}
// 2
function count(str, target) {
  return str.split(target).length - 1;
}

第8天

GitHub题目答案及扩展
前端面试题，3+1模式，主要是每天督促自己，多积累一些基础知识。GitHub题目地址：https://github...
leetcode142.环形链表II
题目链接本题是对于上一题 leetcode141.环形链表的扩展题目，在我的文章链表相关基础题及答案解析中，...
02-勘察成果的应用
二、港口与航道实务-题目及答案如图 1、题目 2、答案四、港口与航道实务-题目及答案如图> 4月12日听课后加故...
Ubuntu下FastDFS环境配置及php FastDFS扩展
Ubuntu下FastDFS环境配置及php FastDFS扩展安装 https://github.com/hap...
为iOS面试做准备－面试题整理剑指offer部分(持续更新中)
答案为自己整理，未经校对，如有纰漏，还望指正指正。所有题目均存在Github。索引剑指offer相关题目数据...
为iOS面试做准备－面试题整理数据结构部分(持续更新中)
答案为自己整理，未经校对，如有纰漏，还望指正指正。所有题目均存在Github。索引剑指offer相关题目数据...
题目答案
1.Doctype作用？标准模式与兼容模式各有什么区别? （1）、声明位于位于HTML文档中的第一行，处于标签...
题目答案
因为艾青对祖国的土地还有感情。医护人员像战士一样，在一线已经几天前。有的医护人员已经几...
6月推荐网站
sourcegraph装了chrome扩展之后，比如在github上分析源码的好伙伴。提供定义跳转，引用及搜索等功...
Laravel5 优秀扩展包整理
本文整理Github上国内相对较常用Laravel5及以上版本的扩展包 laravel-generator（代码生...