问题先导

• html标签的src属性和href属性的区别？【html】

• css选择器有哪些？这些选择器的优先级如何判断？【css】

• js的基本数据类型有哪些？有何区别？【js】

• 合并两个有序数组【算法】

  给定两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。

知识梳理

html标签的src属性和href属性的区别？

src属性是source的缩写，意为来源，一般作为媒体元素HTMLDediaElement的媒体资源映射URL。比如图片、脚本的资源路径：

<img src="images/like.gif">
<iframe src="inner.html">
<script src="index.min.js"></script>

src加载媒体资源时是阻塞式的，也就是页面的其他资源会暂停处理，这就是为什么一般把script脚本标签放到文档末尾加载的一个原因。

而href是Hypetext Reference的缩写，意为超文本引用，由于是非媒体资源，外部引用，也就是页面无需呈现出来的资源，所以加载这种资源的时候是非阻塞式的。比如link和a标签：

<link rel="stylesheet" src="style/main.css">
<a href="./home/login">login</a>

总结来说就是，src属性是媒体资源的路径映射，是阻塞式加载的，而href是超链，是非阻塞式的。

我们可以理解为媒体资源是需要实实在在显示在页面上的，是DOM结构中的实实在在的数据，因此会阻塞加载，而超链相当于一个属性，一条引用，并不需要把真实的资源呈现到页面上，也就无需阻塞页面加载了。

值得注意的一问题是，js脚本并不是媒体资源，也不是DOM需要的数据，为什么js脚本要用src而css就可以用href呢？实际上，这是设计之初的决定，可能设计者认为js脚本的执行会改变页面，也就是改变DOM，当然需要随页面一起加载，而CSS只是页面的样式，并不会改变DOM，也就属于超链了，从这层含义理解，就知道是否阻塞页面和引用的资源大小无关了，而是和是否实际改变了页面DOM有关。

标签：HTML、资源加载

css选择器有哪些？如何判断优先级？

四类选择器

css选择器可以分为四大类：

1. 基本选择器
2. 分组选择器
3. 组合选择器
4. 伪选择器

最常用的就是基本选择器，一般来说有五种基本选择器：

• 通用选择器：*，匹配所有元素
• 元素选择器：使用元素名称进行元素匹配，比如p、a
• 类选择器：通过类名匹配元素，比如.class
• 属性选择器：通过元素的属性来匹配元素，如a[href]
• id选择器：通过元素id来匹配元素，如#app。值得注意的是，id选择器不是匹配一个元素而是多个（当然我我们不希望页面有相同id的元素）。

这五种基本选择器是另外几种选择器使用的基础。

为了扩展选择器的适用范围，比如我希望同时选择p元素和类为red的元素，这时就需要把基本选择器组合起来，我们使用,把选择器分开，就得到了选择器的组合，这就是分组选择器：

p, .red {
    color: red;
}

同时，有时候为了选择器更精确，也就是缩写选择器的范围，我们就需要使用组合选择器，组合选择器主要有四种（两后代两兄弟）：

• 后代选择器：使用空格进行组合，比如#app div
• 直接子元素组合器：使用>进行组合，比如div > p
• 兄弟选择器：使用~进行组合，比如p ~ p能匹配到p元素之后的兄弟元素。（注意，只能匹配到之后的兄弟元素）
• 紧邻兄弟选择器：有时候为了选择紧邻的兄弟元素，我们使用+来进行组合，比如p + a

此外，还有些元素比较特殊，比如被访问过的a标签，悬浮状态下的div等等，这些都是某些场景下的特殊状态，为了捕获到这些具有特殊状态的标签，我们需要使用伪类选择器，这些伪类描述了不同状态的标签，比如:hover表示鼠标悬浮状态下的标签，a:visited表示被访问过的a标签，div:first-child表示div的第一个子元素。

除了伪类，还有一种元素称之为伪元素，伪元素是真实存在的元素，但又不能被html表达出来，比如p元素的首字母，首行，这种元素称不上元素，因为只是元素的一部分，但又是真实存在的，因此称为伪元素，目前html提供了五种伪元素选择器：

• ::brefore：插入元素之前的内容
• ::after：插入元素之后内容
• ::first-letter：元素的首字母
• ::first-line：元素的首行
• ::selection：元素被选中的部分

而伪类是记录特殊状态的元素，目前有几十种，这里不再一一列举。

选择器优先级

由于我们编写css时可能会有多个选择器匹配到同一个元素，而又具有不同的样式，这时候就需要判断哪个选择器优先级更高，就选哪个选择器指定的样式。

我们知道css叫层叠样式表，也就是样式是层叠覆盖的，如果两个选择器的权重一致，则后面的选择器会覆盖前面的选择器。此外，继承而来的样式相当于样式的初始化，优先级是最低的。

选择器的权重参考值如下所示，权重越高，优先级越高：

• 元素选择器：元素选择器、伪元素选择器，权重为1
• 类选择器：类选择器、伪类选择器、属性选择器，权重为10
• id选择器：权重为100
• 内联样式：权重为1000
• !important标记权重值最高

总结来说就是：!important > 内联样式 > id选择器 > 类/属性选择器 > 元素选择器。而通配符选择器是没有权重的。

标签：css基础

js数据类型有哪几种？有何区别？

目前最新的ECMAScript标准定义了9中数据类型。

其中，有7种基本数据类型：

• undefined：未定义
• null：空对象
• boolean：布尔
• number：数字
• string：字符串
• bigint：大整数。es6新增的类型，一般用于描述大于2^53 - 1的整数，这原本是 Javascript中可以用 Number，但如果不使用BigInt()函数或整数字面量n来封装数字，返回类型还会是number
• symbol：符号。symbol也是es6新增的基本类型，由Symbol()返回一个唯一的值，所以symbol类型永远不会重复。

2种引用类型：

• Object：对象。
• Function：函数。

我们可以简单的把Object理解为实例，而Function理解为未实例化的构造器，也就是其他语言常说的类。

为何将数据类型划分为基本数据类型和引用数据类型？这是因为它们在内存中的存储方式是不一样的，

• 基本数据类型由于占用空间不会太大，且具有相对固定的空间大小，因此是直接存放在栈（stack）中的
• 引用数据类型由于占用空间大、占用空间大小不稳定，如果频繁创建会造成性能问题，所以实体数据将存放到堆(heap)数据结构中，而在栈中只用记录该数据的堆地址即可，使用的时候再根据堆地址去堆内存中查找。

扩展：从数据结构和内存来比较栈和堆，

堆和栈的概念存在于数据结构中和操作系统内存中：

• 栈结构中的数据存取方式为先进后出。
• 堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。完全二叉树是堆的一种实现方式。

在操作系统中，内存被分为栈区和堆区：

• 栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
• 堆区内存一般由程序员分配释放，若程序员不释放，程序结束时可能由垃圾回收机制回收。

标签：js数据类型

合并两个有序数组

给定两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。

注意题目已经告知两个数组已经是有序的了，所以我们可以使用双指针法就能从两个数组中找打最大值，一个指针指向nums1末端，一个指针指向mums2末端，比较两个数组的最大值，并放到数组末端，直到nums2放置结束即可。

function merge(nums1, m, muns2, n) {
    let k = m + n - 1
    let p1 = m -1, p2 = n - 1
    while(p2 >= 0) {
        if(p1 < 0){
           nums1[k--] = nums2[p2--]
        } else {
           nums[k--] = nums1[p1] > nums2[p2] ? nums1[p1--] : nums2[p2--];
        }
    }
}

标签：算法、LeetCode