前端每日一题笔记收集

  1. 在元素input中,若未定义name的属性,在后台获取了填入该input中的值么?

    • 后台确实获取了该元素的值,但是不知道该怎么用,不会在后台中显示出来
  2. 使用一个box-shadow和多个box-shadow在样式展现上有什么区别么?为什么要使用多个?

    • 叠加,效果好看
  3. a标签的download属性是做什么?

    • 此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。
    • <a href="./img/img01.jpg" download="dog.jpg">下载图片</a>
    • 参考MDN
  4. form标签的method属性是做什么的?有哪些取值?

    • 用来设置提交表单的方式,常见的取值有getpost
    • 参考MDN
  5. ruby标签是做什么?

    • 用来展示东亚文字注音或字符注释
    • 参考MDN
        <ruby>
            明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp>
        </ruby>
      
  6. HTML标签的tabindex属性是做什么的?它的值为正、为负、为零时分别表示什么意思?

    • 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)。
    • tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。
    • tabindex="0" ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。
    • tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。
    • 参考MDN
  7. HTML中的【空元素】是什么?

    • 一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element
    • 没有闭合的标签,如<br> 、<input>、<img>等,称为空元素
    • 参考MDN
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maxinum-scale=1, user-scalable=no">这是手机淘宝页面的代码,请问其作用是什么?其中content中五个字段分别是什么意思?

    • 作用是设置 viewport 视口。
      width=device-width意思是视口宽度等于设备宽度。
      initial-scale=1 意思是初始缩放为1.
      minimum-scale=1 是最小缩放为1.
      maximum-scale=1是最大缩放为1
      user-scalable=no 是不允许用户缩放。
  9. CSS选择器a.item:hover+ul{display: block;}是什么意思?

    • 意思是当类为 itema 标签被 hover 时,它同级后面的 ul标签样式为 display: block
  10. CSS选择器[title^=i]匹配什么样的元素?

    • 匹配所有title属性值以i开头的元素
  11. CSS选择器:not(div):not(span)匹配什么样的元素?

    • 匹配divspan以外的所有元素
  12. #one {position: sticky ; top: 10px;}会有什么效果?

    • 参考MDN
    • 单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。具体点击这里
  13. JS的数据类型有哪7个?

    • number、string、bool、undefined、null、symbol、object
  14. JS的falsy值有哪5个?

    • 0、NaN、''、null、undefined
  15. var、let、const的区别是什么?

    • var 声明的变量属于函数作用域,let 和 const 声明的变量属于块级作用域;
    • var 存在变量提升现象,而 let 和 const 不存在变量提升;
    • var 变量可以重复声明,而在同一个块级作用域,let变量不能重新声明,const 变量不能修改。
  16. const a = {name: 'a'}; const b = a; b.name = 'b';请问现在a.name的值是多少?为什么?

    • 值是b,因为b和a引用了同一个对象,改变b.name的值就会改变a.name的值
  17. const fn = ()=>{console.log(this)}; fn.call("hi"),请问打印出来的this的值是什么?为什么?

    • this的值是window,因为箭头函数里面的this就是外面的this,而外面的this默认是window
  18. function fn(){}; fn.a = 'aaa',为什么fn上可以添加a属性?

    • 因为函数也是一种对象
  19. let name = 'x'; let obj = {name: 'y'},请问obj[name]是多少?

    • undefined
    • 因为 1. obj[name]等价于obj['x'] 2. obj['x']不存在,为undefined,所有obj[name]undefined
    • 如果要访问y,则应使用obj.nameobj['name'],这两种写法才是等价的
  20. function fn(){return '返回值'},请问fnfn()的区别是什么?

    • fn是函数名,是一个纸箱一块内存空间的指针,里面存储的是一段代码的地址
    • fn()是执行fn这个地址执行的代码片段得到执行结果
    • fn是一个引用函数(不调用),fn()是调用一个函数得到返回值(调用了),本题中fn()等价于'返回值',是一个字符串
  21. function f1(f2){ f2() } ,请问一般应该如何调用f1,给出代码示例

    • f1传一个函数即可:
    • f1(function(){console.log(1)})
    • f1(()=>{console.log(2)})
    • let f2 = function(){}; f1(f2)
  22. function f3(){ setTimeout( ()=>{return 123} )},问f3的返回值是多少?

    • undefined
    • 因为 f3 没有 return,默认返回 undefined。setTimeout 里面的 return 是箭头函数的 return,跟 f3 无关。
    • 如果函数体内没有return 语句,那么函数默认返回undefined;若函数体内有return语句,那么返回return后面的值,若return语句后面没有跟东西,也返回undefined.
  23. functon fn(){},请问fn()new fn()有什么区别?

    • fn() 返回 undefined, new fn() 返回一个用 fn 初始化的对象
    • 参考链接
  24. 如何让一个对象a的proto属性指向另一个对象b,代码中不能使用proto,因为这不是一个标准属性。

    1.  a=Object.create(b)
    2. temp = function(){};
       temp.prototype =  b;
       a =  new temp();
    
  25. super关键字的做什么用的?

    • super可以用来调用父类的构造方法或静态方法。在子类的构造方法中调用时,需要用在this前面
  26. mixin是什么?

  • 就是把一个对象的属性,复制到另一个对象上(即混入)
  1. Object.assign是深拷贝还是浅拷贝?
  • 浅拷贝,但是不是那么浅。第一层还是深的,第二层就是不是深的类。JS没有提供对象的完全深拷贝方法,需要自己写。
  1. Object.seal有什么用?
  • Object.seal()方法封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置
  1. AJAX的全称是什么?其中的X被什么取代了?
  • 全称是JavaScript和XML(Async JavaScript And XML),其中XML已经被JSON取代了。
  1. HTTP中,幂等是什么?
  • 幂等的意思是某个操作执行一次和执行任意多次,造成的影响结果相同。比如读取资源(get)对服务器的影响相同,而创建资源(post)一次和多次的结果就不相同
  1. HTTP中,301和302的区别是什么?
  • 301是永久重定向,请求的网页已永久移动到新位置
  • 302是临时重定向
  1. Cookie和LocalStorage的区别是什么?
  • Cookie会自动被上传到服务器,LocalStorage不会[自动]被上传到服务器。他们支持的最大存储空间也不同
  1. LocalStorage和SessionStorage的区别是什么?
  • LocalStorage不会自动过期,SessionStorage会在会话结束自动过期
  1. 类和对象的关系是什么?
  • 如果一些对象拥有一样的属性,就是通一类对象,那么我们就可以先创建类,然后把类当作模版来创建对象。
  • 类是对象的设计图,对象的类的实现
  1. 前端MVC中的M、V、C分别代表什么?
  • M 是 Model,表示数据,所有跟数据有关的操作放在 M 里。V 是 View,表示视图,所有 DOM 操作都应该放在这里。C 是 Controller,表示控制器,没有什么特定的意思,所有其他操作都放到 C 里。
  1. 事件委托是什么意思?
  • 抽象问题举例回答:加上有3个按钮,我们不用对每个按钮进行一次监听,可以直接监听3个按钮的父容器,然后根据 e.target 的值知道是哪个按钮被点击。
  1. 发布订阅模式是什么?
  • 事件完全可以理解成“信号”,如果存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”
  • 抽象问题举例回答:发布订阅模式就是有一个 eventBus 对象,提供 .on / .emit / .off 属性,使用 eventBus.on 可以监听事件,使用 eventBus.emit 可以触发事件,eventBus.off 可以取消事件监听
  1. JS中的模板是什么?
  • 抽象问题举例回答:把字符串中的占位符替换成具体的数据,就是模板。比如 compile('Hello {{name}}', {name:'frank'}) 就是一个模板的使用示例。
  1. Vue的数据响应式原理是什么?
  1. React的受控组件是什么?
  1. Vue组件的生命周期钩子有哪些?
  • beforeCreate / created / beforeMount / mounted / beforeUpdate / updated / beforeDestroy / destroyed
  1. React组件的生命周期钩子有哪些?
  • constructor / getDerivedStateFromProps / render / componentDidMount / shouldComponentUpdate / getSnapshotBeforeUpdate / componentDidUpdate / componentWillUnmount 等
  1. Vue的methods和computed有什么区别?
  1. Vue Router的hash模式和history模式有什么区别?
  • 开放问题,主要区别:
    一、实现原理不同,前者用锚点,后者用 history API
    二、对后端的要求不同,前者不需要后端支持,后者需要后端做页面重定向,所有 URL 都重定向到一个页面
    三、其他细节参考 https://juejin.im/post/5a61908c6fb9a01c9064f20a
  1. React的class组件和函数组件有什么区别?
    主要区别:
    一、class 组件主要用 class 和生命周期,函数组件用函数和 hooks API
    二、其他参考 https://zhuanlan.zhihu.com/p/62767474

  2. Webpack loader和plugin的区别?

  • 先翻译成中文,loader 是加载器,loader 用于加载某些资源文件;plugin 是插件,用于扩展webpack的功能。然后分别举例,loader 有什么,plugin 有什么。
  1. React的Hooks有哪些?分别有什么用?
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,106评论 0 21
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,146评论 0 3
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,550评论 0 5
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,574评论 0 7