字节前端二面凉经

12.9 字节前端二面（80min）

自我介绍
跟我谈了很多类似于学习路线的东西
last-child 与 last-of-type 的差别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box p:last-child{
            color:green;
        }
        .box1 p:last-of-type {
            color:red;
        }
    </style>
</head>
<body>
    <div class='box'>
        <p>p1</p>
        <p>p2</p>
        123
    </div>

    <div class="box1">
        <p>11</p>
        <p>22</p>
        <i>5555</i>
    </div>
</body>
</html>

p会不会被选中。

js里面有多少种节点类型
谈一下语义化
为什么有利于搜索引擎的SEO
section跟div的差别
section跟article的差别

MDN:

<section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
<section>
    <h2>Introduction</h2>
    <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

如果元素的内容作为一个独立的有意义的集合，article元素可能是更好的选择。

div
这个标签一直是我们见得最多、用得最多的标签。它本身无任何语义，用作布局以及样式化标签。
section
与div相似，但它有更进一步的语义。section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
　<section>
　　　　<h1>section元素的</h1>标题
　　　　<p>section区块的主题部分</p>
　　</section>
article
article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。
<article>
      <header>         
　　　　<h1>标题</h1>
           <p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>
　　<p>article的使用方法</p>   
　　<footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
　　</footer>
</article>
区别
div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。
关于section元素的使用禁忌

不要将section元素用作设置样式的页面容器，那是div元素的工作；
如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素；
不要为没有标题的内容区块使用section元素。

作者：hanyuntao
链接：https://www.jianshu.com/p/b818ceeedd13
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

下面三种方式有什么差别 v

let a = {}

let b = Object.create(null)

let c = new Object()

this的问题 x

let Person = function(){
    this.name = 'unknown'
    this.address = {
        province : 'yunnan'
    }
}

let p1 = new Person()
let p2 = new Person()
p1.name = 'hello'
p1.address.province = 'gd'

console.log(p1.name, p1.address.province)
console.log(p2.name, p2.address.province)

<script>
const foo = function(){
    console.log(this.a)
}
// var a = 2
let a = 2
foo()

var obj = {
    a:5,
    foo
}

obj.foo()
</script>

const foo = function(){
    console.log(this.a)
}


var a = 2
foo()

var obj = {
    a:5,
    foo
}

obj.foo()

<script>
'use strict'
const foo = function(){
    console.log(this.a)
}


var a = 2
foo()

var obj = {
    a:5,
    foo
}

obj.foo()

</script>

'use strict'

const foo = function(){
    console.log(this.a)
}


var a = 2
foo()

var obj = {
    a:5,
    foo
}

obj.foo()

这里还拓展了比较多的知识

比如严格模式，let var const 等等

用vue来写一个倒计时的组件

<template>
    <div>

    </div>
</template>

<script>
export default {
    data(){
        return {
            a: null
        }
    },
    mounted(){
        this.b = xx        

    }
}

</script>

a与b有什么差别

如果在data中定义b有什么副作用。