前端笔记——一些很容易忽略，但是经常问的东西-CSDN博客

本文链接：https://blog.csdn.net/m0_54066656/article/details/140253701

1.JS的基本类型 - 数字、字符串、布尔型、空、未定义：Number、String、Boolean、null、undefined。

引用类型 - 函数、对象、数组：function、Object、Array。

undefined和null的区别：前者是未定义，也就是不存在的意思；后者是值为空，typeof返回的值是Object，也就是对象。但其实null并不是一个对象，它属于自己的类型null。

2.判断变量类型：

-typeof()，常用于基本数据类型，对于引用类型，除了function返回本身以外，别的都返回Object。

-instanceof()，主要用于区分引用数据类型，不大适用于简单数据类型的检测，比如说undefined、null等检测不出来。

-object.prototype.toString.call()原型链的方法

-constructor(用于引用数据类型)

3.HTML的语义化是什么意思，标签语义化。

在构建页面的时候，应该尽量避免大篇幅地使用无语义的标签。

无语义的标签：div、span。

有语义的标签：h1-h6（标题）、p（段落）等。

4.css盒模型 - box-sizing：

css盒定义了盒子的每个部分，包含margin（外边距）、padding（内边距）、border（边框）、content（内容），根据盒子的计算方式分为标准盒模型，和怪异模式。默认情况下，都是标准盒模型。

标准模型：给盒子设置宽高，其实就是设置content-box。如果再加上padding和border就是整个盒子的大小；box-sizing：content-box。

怪异模式：给盒子设置宽高，包含了padding和border，设置的宽高就是盒子的大小；box-sizing：border-box。

box-sizing的含义：用于改变盒子模型的属性，默认是content-box，也就是标准盒模型。

5.inherit：继承。

6.样式优先级：

-!important最高，但是应该尽量少用。

-引入方式，有行内样式、嵌入、外链，其中行内样式最高，嵌入和外链看插入顺序，后面的会覆盖前面的。

-选择器，也就是id选择器这类。其中id选择器＞类选择器/伪类选择器/属性选择器＞后代选择器/伪元素选择器＞子选择器/相邻选择器＞通配符选择器（也就是*）。

~~一堆没听过的，你敢信？~~

-继承样式，是所有样式中比较低的。

-默认样式，浏览器默认的样式。

7.css尺寸单位：

px：像素，大小取决于屏幕的分辨率，常用单位。

em：相对长度单位，常在于font-size中，是指相对于父元素的字体大小。

rem：相对长度单位，相对于根元素的字体大小。

vw、vh：相对长度单位，一个是相对视窗宽度/高度的1%。

注意：

-rem需要配合媒体查询或者flexible.js实现。

-vw常用在移动端响应式页面，优势是无需媒体查询和flexible.js。

8.BFC：全称block formatting context；中文：块级格式化上下文。

布局规则：

-内部盒子在垂直方向，一个一个放置。
-box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的Box的margin会发生重叠。

9.数组去重：

法一：利用对象数组中的key排除重复项，每次判断对象中是否存在该数组，不存在就存入新数组中，并且把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。

法二：利用Set类型数据无重复项：new一个Set，参数为需要去重的数组，Set会自动删除重复的元素，并返回新的数组，推荐使用，ES6新语法。

法三：利用filter➕indexof去重。数组调用filter方法遍历整个数组，利用indexof返回最先出现的数字索引，判断是否跟当前读取到的index是否一致，如果一致，则返回。

        /**
         * 法二：
         * 利用Set类型数据无重复项：new一个Set，参数为需要去重的数组，
         * Set会自动删除重复的元素，并返回新的数组，推荐使用，ES6新语法
         */
        // let a = new Set(arr)
        // console.log("a", a) // 返回的是Set对象
        // let b = Array.from(a) // 使用Array.from转化为数组
        // console.log("b", b)
        // let c = [...a] // 使用展开运算符转化为数组，ES6新语法
        // console.log("c", c)

        /**
         * 法三：
         * 利用filter➕indexof去重。
         * 数组调用filter方法遍历整个数组，利用indexof返回最先出现的数字索引，
         * 判断是否跟当前读取到的index是否一致，如果一致，则返回。
         */
        // item是当前处理的元素，index是当前元素的索引，arr是当前处理的函数
        // const a = arr.filter((item, index, arr) => {
        //     // 直接返回这些元素
        //     return arr.indexOf(item) === index
        // })
        // console.log(a)

法四：从头遍历数组，如果元素前面出现过，则将当前元素挪到后面，继续遍历，直到遍历完所有元素，之后将那些挪到后面的元素抛弃即可。

法五：reduce➕includes去重，利用reduce遍历原数组，并传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入到新数组中。

10.闭包：

一个函数和词法环境的引用捆绑在一起，这样的组合就是闭包。

A函数，return其内部函数B，被return出去的B函数可以在外部访问A函数的变量。

11.伪数组和数组的区别：

伪数组的类型不是Array，而是Object，这俩（Array、Object）都是引用数据类型。

伪数据具有length属性，按索引方式存储数据。没有数组方法。

伪数组转变成真数组的方法：Array.from(伪数组)，需要使用展开运算符（ES6）。

12.数组中方法foreach和map的区别：

foreach没有返回值，但map有，返回的是处理后的新数组。

这点需要注意，很多方法都需要注意是否有返回值。

13.JS变量提升。

var声明的变量声明提升，函数声明提升。

const、let不会。

14.src和href的区别：

src是外部资源的位置

href是网络资源所在位置

15.浅拷贝和深拷贝：

浅拷贝：创建一个新的对象，如果是基本数据类型，就会复制值；如果是引用类型，就会复制内存地址，也就是说，如果引用类型变了，它也会变。

深拷贝：将一个对象从内存中完整的拷贝出来一份，从堆内存中开辟一个新的区域存放新对象，修改了不会影响原对象。

16.数组方法-注意返回值：

pop()——尾部删除
push()——尾部添加
shift()——头部添加
unshift()——头部删除

17.JS的事件流模型：

-事件冒泡：事件逐级向上传播
-事件捕捉：事件逐级向下传播，一直到最具体的。
-dom事件流：三个阶段：事件捕捉、目标阶段、事件冒泡。

18.split和join的区别：

对象不同，split是操作String类型的，join是操作数组类型的。
返回值不同，split返回一个新数组，join返回一个字符串。

19.常用的字符串方法：
trim()去首尾空格
indexof(from, to)，返回str在父串中第一次出现的位置，没有则返回-1。
substring(from, to)，返回字符索引在from和to（不含to）之间的子串。
valueof()返回原始字符串值
toLowerCase()字符串转为小写
toUpperCase()字符串转为大写

20.未完待续。