前端笔试题记录（一）

Sonder,

已于 2022-08-31 21:02:37 修改

阅读量272

点赞数 1

分类专栏：前端面试文章标签：前端 javascript 开发语言

于 2022-08-31 21:00:57 首次发布

本文链接：https://blog.csdn.net/qq_43178432/article/details/126631378

版权

前端面试专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前端笔试题记录

常考输出题

setTimeout(function() {
    console.log('1')
}, 3000)
new Promise(function(resolve) {
    console.log('2')
    let a = 12
    for (var i = 0; i < 100000; i++) {
        a += i
    }
    resolve()
}).then(function() {
    setTimeout(function() {
        console.log('3')
    })
    console.log('4')
})
console.log('5')
// 2 5 4 3 1

function Foo() {
 var i = 0
  return function() {
      console.log(i++)
  }
}
var f1 = Foo()
f2 = Foo()
f1() //0
f1() //1
f2() //0

const promise1 = new Promise((resolve, reject) => {
    console.log('promise1')
    resolve('resolve')
})
const promise2 = promise1.then(res => {
    console.log(res)
})
console.log('1', promise1)
console.log('2', promise2)

在这里插入图片描述

console.log({} === {}) //false
console.log(NaN == NaN) //false
console.log(typeof null === 'object') //true

function test(a) {
            if (a) {
                console.log('true')
            } else {
                console.log('false')
            }
        }
        test('undefined') //true
        test('false') //true
        test('') //false

for (var i = 0; i < 10; i++) {
   setTimeout(function() {
        console.log(i)
    }, 1000)
}
//10个10

console.log(['1', '2', '3'].map(parseInt)) //1,NaN,NaN
//  parseInt('1', 0) -> 1   radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；
//  parseInt('2', 1) -> radix 为 1，超出区间范围，所以结果为 NaN；
//  parseInt('3', 2) -> NaN radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。

// 因为parseInt接收两个参数，所以结果为 [1, NaN, NaN]

解释参见

跨域

可以参考
JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。document.domain

iframe 跨域：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了
同域。
location.hash + iframe 跨域：a 欲与 b 跨域相互通信，通过中间页 c 来实现。三个
页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通
信。
window.name + iframe 跨域：通过 iframe 的 src 属性由外域转向本地域，跨域数据即
由 iframe 的 window.name 从外域传递到本地域。
postMessage 跨域：可以跨域操作的 window 属性之一。
CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带
cookie 请求，前后端都需要设置。
代理跨域：启一个代理服务器，实现数据的转发

语义化标签

在这里插入图片描述
常见的语义化标签

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 

<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

总结语义化优点：