面试题三（6道）_面试6钟3道题上传-CSDN博客

本文涵盖了前端面试中常见的六道题目，包括超链接target属性的作用，CSS3新增伪类，字符串大小写切换的多种实现，label元素的功能与应用，使用CSS创建三角形的技巧，以及如何去除文本中的制表符和换行符。通过对这些知识点的解析，有助于提升对前端基础知识的理解和应用。

1. 简述超链接target属性的取值和作用

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认值。在当前窗口或者框架中加载目标文档。
_parent	在父框架集中打开被链接文档。当 a 标签本身在顶层时，则与 _self 相同。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。
‘任意字符’	若该链接不是已打开的页面，则在新窗口中打开，与_blank一致；若该链接已经打开，则跳转到该标签页并刷新页面

2. CSS3新增伪类有哪些并简要描述

CSS3伪类	作用
:root	文档根元素，总是返回html
:last-child, :only-child, :only-of-type	文本的最后一个 / 唯一一个 / 指定类型的唯一一个子元素
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n),	第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个子元素
:enabled, :disabled	启用 / 禁用
:checked	已勾选
:default	默认，例如radio group中默认选中的radio
:valid, :invalid, :required, :optional, :in-range, :out-of-range	校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input
:not()	括号内条件取反
:empty	没有子元素的元素
:target	URL片段标识符指向的元素

3. 写一个把字符串大小写切换的方法

写法一：

function caseConvert(str) {
  return str.split('').map(s => {
    const code = s.charCodeAt();
    if (code < 65 || code > 122 || code > 90 && code < 97) return s;
    
    if (code <= 90) {
      return String.fromCharCode(code + 32)
    } else {
      return String.fromCharCode(code - 32)
    }
  }).join('')
}

console.log(caseConvert('AbCdE')) // aBcDe 

function caseConvertEasy(str) {
  return str.split('').map(s => {
    if (s.charCodeAt() <= 90) {
      return s.toLowerCase()
    }
    return s.toUpperCase()
  }).join('')
}

console.log(caseConvertEasy('AbCxYz')) // aBcXyZ

写法二：

function caseConvert(str) {
    return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2) => {
        return `${s1.toUpperCase()}${s2.toLowerCase()}`
    })
}
console.log(caseConvert('AsA33322A2aa')); //aSa33322a2AA

写法三：

let str = 'aBcDeFgH'
let arr = []
for(let item of str) {
  if (item === item.toUpperCase()) {
    item = item.toLowerCase()
  } else {
    item = item.toUpperCase()
  }
  arr.push(item)
}
let newStr = arr.join('')
console.log(newStr)
// AbCdEfGh

在这里插入图片描述

4. label都有哪些作用？并举相应的例子说明

label 标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用zhi户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

利用label"模拟"button来解决不同浏览器原生button样式不同的问题

<input type="button" id="btn">
<label for="btn">Button</label>

<style>
input[type='button'] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background: #456;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
  border-radius: 2px;
}
</style>

结合checkbox、radio表单元素实现纯CSS状态切换，这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码。详细实例地址

<input type="checkbox" id="controller">
<label class="icon" for="controller">
  <div class="play"></div>
  <div class="pause"></div>
</label>
<div class="animation"></div>

<style>
...
#controller:checked ~ .animation {
  animation-play-state: paused;
}
...
</style>

还有一个基于 radio 的实例：摩斯密码键盘

input的focus事件会触发锚点定位，我们可以利用label当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接

<div class="box">
  <div class="list"><input id="one" readonly>1</div>
  <div class="list"><input id="two" readonly>2</div>
  <div class="list"><input id="three" readonly>3</div>
  <div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
  <label class="click" for="one">1</label>
  <label class="click" for="two">2</label>
  <label class="click" for="three">3</label>
  <label class="click" for="four">4</label>
</div>

<style>
.box {
  width: 20em;
  height: 10em;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list {
  height: 100%;
  background: #ddd;
  text-align: center;
  position: relative;
}
.list > input { 
  position: absolute; top:0; 
  height: 100%; width: 1px;
  border:0; padding: 0; margin: 0;
  clip: rect(0 0 0 0);
}
</style>

5. 用css创建一个三角形，并简述原理

创建一个div，宽高都为0，实现效果如下，发现border的四个边都是一个三角形，要实现三角形只需将其中几个边background设置为transparent，即可得到三角形

<div class='rect'></div>
<style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid rgb(34, 230, 220);
      border-left: 100px solid rgb(202, 146, 25);
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid rgb(16, 204, 101);
    }
</style>

在这里插入图片描述

.rect {
    width: 0;
    height: 0;
    background-color: #fff;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 100px solid rgb(29, 156, 194);
    border-bottom: 100px solid transparent;
}

在这里插入图片描述

6. 写一个去除制表符和换行符的方法

<script>
    /**
     * \f  匹配换页字符。
     * \n  匹配换行字符。
     * \r  匹配回车符字符。
     * \t  匹配制表字符。
     * \v  匹配垂直制表符。
     * @param str
     * @returns {void | string}
     */
    const removeEmpty = (str) => str.replace(/[\t\n\v\r\f]/g, "");

    console.log(removeEmpty(`大家好\n早上好\t蛤?`))
</script>