巩固一下前端的基础知识

7次阅读

共计 6057 个字符，预计需要花费 16 分钟才能阅读完成。

很久没有回头看看 html 和 js 的一些基础知识了，周末闲来无事的时候看到了一篇关于面试题的文章，突然发现很多都忘记了，好的，那就趁热打铁，撸一波基础知识吧。

关于 HTML

html 是超文本标记语言(Hyper Text Markup Language）的简写，标准通用标记语言下的一个应用。HTML 不是一个编程语言，而是一种标记语言，是网页制作的必备。可包含图片、音乐、视频、链接、程序等非文本元素。

DOCTYPE 的作用

DOCTYPE 是 document type 的缩写，它并不是 html 的标签，它是一种标记语言的文档类型声明，意在告诉浏览器当前 HTML 是用什么版本编写的。览器要通过哪一种规范（DTD）解析文档（比如 HTML 或 XHTML 规范）。

HTML5 新增了哪些新标签以及优点

<head> 定义页面或者区域头部
<main> 规定文档主要内容
<footer> 定义页面或者区域底部
<article> 定义一篇文章
<nav> 定义导航链接
<scetion> 定义一个区域
<aside> 定义页面内容部分侧边栏
<hgroup> 用于对网页或者区域段的标题组合
<figure> 定义一组媒体内容以及标题
<figcaption> 定义 figure 元素标题
<address> 定义文章拥有者的联系信息

新增表单标签
date、time、email、url、search 等类型
video 标签
<video width=”” height=”” controls></video>
audio 标签
<audio src=””></audio>

优点：根据内容的结构化使用语义化标签，能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析。
关于 CSS

css 是层叠样式表 (英文全称：Cascading Style Sheets) 是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
什么是盒模型

盒模型也叫框模型 (Box Model)，包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。计算一个盒子的宽高：content+padding+border。

常用的 css 单位

1.px(表示像素，是绝对单位。不会因为其他元素的尺寸变化而变化，页面按照精确像素展示）
2.pt(磅 Points，是一种绝对单位，是物理长度单位，等于 1/72 寸。它的取值范围和 px 类似）
3.em(相对于当前对象内文本的字体大小，如，body 的 font-size:12px; 则 body 内部的子元素而言，1em=12px)
4.rem(相对于根元素字体大小的单位，也是一个相对单位，和 em 有点类似，只不过一个计算的规则依赖根元素一个依赖父元素)
5.vh(布局视口高度的 1 /100)
6.vw(布局视口高度的 1 /100)

清除浮动

什么时候需要清除浮动，清除浮动的方法有哪些？
当子元素设置了 float 属性之后，并且父元素没有设置宽高，是由子元素撑起来的，则会导致父元素的宽高坍塌，这个时候需要清除浮动。
方法：1、父元素设置属性 overflow:hidden || auto

 2、子元素最后一个元素添加 clear:both
 3、父级定义伪类：after 和 zoom 
 {display:block;clear:both;content:"",visibility:hidden;height:0}
 {zoom:1}
 4、父级定义 height
 5、父级也一起浮动

如何保持一个元素水平垂直居中

1、transform
.children{

position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%)

}
2.flexbox
.parent{

display:flex;
justify-content:center;
align-items: center;

}
3. 当子元素宽高固定，父元素宽高不为 0 时
.parent{

height:200px;

}
.children{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;

}

css 选择器有哪些以及优先级是怎样的

1、标签选择器（body、div 等）
2、类选择器（class=”box”)
3、ID 选择器（id=”app”)
4、全局选择器（*{}）
5、组合选择器（.header .header_box)
6、后代选择器（.#header ul li）
7、群组选择器（.box .header .content）
8、继承选择器（div p）
9、伪类选择器（link visited active hover）
10、字符串匹配的属性选择符（^ $ * 分别对应开始、结尾、包含）
11、子选择器（div>p）
12、css 相邻兄弟选择器（div+p）

优先级：
!important > 行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性

每个选择器的权值：
行内样式 1000
ID 选择器 100
class 选择器 10
HTML 标签选择器 1

sass

sass: 是一款强化 css 的辅助工具，它在 css 语法的基础上变量、嵌套、混合、导入等高级功能，可提高开发效率。
sass 有两种语法格式，首先是 scss，是在 css3 的语法基础上进行拓展，所有 css3 语法在 scss 中都是通用的，同时加入 sass 的特色功能。此外，scss 也支持大多数 css hacks 写法以及浏览器前缀写法，以及早期的 IE 滤镜写法，这种格式以.scss 作为拓展名。
另一种也是最早的 sass 语法格式，被称为缩进格式（Indented Sass）通常简称“sass”，只是与 scss 相比个别地方采取了不同的表达方式。
使用：
定义变量（$width:5rem #box{width:$width})
混合器（@Minxin class {

border-radius:5px;
background:#f00;

}
.box{

@include class

}
具体更多用法参考文档 sass 官方文档。

javascript 基础

1、js 有哪些数据类型：

原始数据类型 – String Number Boolean Undefined null
对象类型 – Array Function Object

null 和 undefined 的区别 – undefined 是一个特殊值，通常不是变量尚未赋值。null 是在计算机中具有保留的值，用于指示指针不引用有效对象。可以把 undefined 作为空的变量，null 看做是空的对象。
原始类型和引用类型的区别 – 基本类型指的是保存在栈内存中的简单数据段，
引用类型指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上是只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象。
访问的方式也不同 – 基本类型是按值访问，操作也是他们的实际保存的值，
引用类型是按引用方式访问，当查询时，我们需要先从栈中读取内存地址，然后再找到保存在堆内存中的值。
复制的类型也不同 – 基本类型变量的复制，从一个变量向另一个变量复制时，会在栈中创建一个新值，然后把值复制到新变量分配的位置上。
引用类型复制，复制的是存储在栈中的指针，将指针复制到栈中为新变量分配的空间中，而这个指针副本和原指针执行存储在堆中的同一个对象；复制结束后，两个变量实际上引用同一个对象，因此改变其中一个，讲影响另一个。

2、如何理解 prototype，什么时候用 prototype
在 javascript 中，所有的对象都是 Object 的实例，并且会继承 Object.prototype 的属性和方法，那么，Object.prototype 是所有对象的爸爸。我们在创建对象时，就会有一些已经定义好的属性，在定义函数时候，这个预定义的属性就是 prototype, 是函数的一个属性，是一个指向对象的指针。而定义一个普通对象时候，会生成一个__proto__, 指向的是对象的构造函数 prototype。
js 中构造函数和实例之间有着微妙的关系，构造函数通过定义 prototype 来约定其实例的规格，再通过 new 来构造实例，他们的作用就是产生对象。通过 new 构造对象的特点是，obj 的 prototype 指向了构造器的 prototype 属性。
什么时候用 prototype 呢？
使用 prototype 的好处是不会产生额外的内存，所有实例化后的对象都会从原型上继承这个方法，相当于公共方法，就是一个子类拥有父类的某些特性，又可以给自己添加一些独立的属性，而且不会影响父时使用 prototype。
prototype 通常来解决一个问题：对象的创建比较耗费资源，例如，对象创建的时候需要访问数据库、读取外部文件、需要使用网络。这些都是比较耗费时间和内存的。
写一个 prototype 小栗子：


            function Parent(name){this.drink = function(){return 'I Can Drink\t' + name}
            }
            let parent = new Parent('red wine')
            console.log(parent.drink())//I Can Drink red wine

            function Person (name, age) {Parent.call(this,'beer')
                this.name = name;
                this.age = age;
            }
            Person.prototype.sayName = function() {return this.name}

            let person =  new Person('sunny', 18)
            let person1 = new Person('cherry',28)
            console.log(person.sayName()) // sunny
            console.log(person1.drink())// I Can Drink beer

3. 什么是闭包、使用场景有哪些、闭包会引起什么问题
概念：闭包就是一种可以重复使用变量而且不会造成全局变量污染的机制，它是一种特殊的对象。
它由两部分组成：函数以及创建该函数的环境。而环境是由闭包创建时在作用域中的任何局部变量组成。可以用来定义私有属性和方法。
小栗子：

function sum(){
    let x = 1,y = 2;
    function res(){ // 闭包
        return x + y
    }
    return res // 闭包函数
}
let result = sum();
result() // 3

从上面的这个简单的闭包例子可以看出，在外部函数的内部创建一个内部函数。并且内部函数读取着外部函数作用域中定义的局部变量，而内部函数又作为外部函数的返回值。所以总结一下：闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
使用场景：需要设计私有变量和方法的时候。
举栗子：

function Person() {
    let name = 'sunny'
    this.getName = () => name}
let person = new Person;
person.name //undefined
person.getName() // sunny

闭包引起的问题：正常情况下，一个函数的作用域和其所有变量在函数执行后都会被销毁，但是在创建一个闭包后，这个函数会一直保存，直到闭包不存在为止。也就是闭包函数会一直保存着父函数的执行期上下文。这样就会造成内存泄露。
举个栗子：

const handleDom = () => {let dom = document.getElementById('#el');
    let id = dom.id;
    dom.onclick = () => {console.log(id)
    }
    dom = null;
}

上面这个函数中的闭包函数里保存着一个 HTML 元素，这就意味着这个元素无法销毁，所以我们应该在操作完元素之后要主动销毁。
还有一个场景是缓存机制，栗子在下面：

(() => {
    let num = 0;
    setInterval(() => {console.log(num++);
    }, 1000)
})() // 1 2 3 4 5 6 ....

这个就验证了是吗的说法：闭包函数会一直拿着外部函数的变量，并且不会销毁，所以会一直用着加 1 之后的最新值。

4. 什么是浅拷贝和深拷贝？怎么实现一个深拷贝？
在这之前要先理解一下 js 的基本类型和引用类型的区别：
基本类型：直接存储在栈中的数据（String、Number、Boolean、Undefined、Null)
引用类型：是把该对象的引用地址存储在栈中，对象里的数据放在堆中（Array、Function、Object)
浅拷贝：只拷贝一层，不会拷贝对象的子元素，相当于直接赋值。
深拷贝：会克隆出一个对象，数据是相同的，但是引用地址不同。
举栗子说明：

let person = {
    name:'sunny',
    age:13,
    sayName:function(){console.log(this.name)
    }
}
let person1 = person;
console.log(person1) // 和 person 的相同
person1.name = 'cherry'
console.log(person1.name) //cherry
console.log(person.name) //cherry

因为是引用的用一个地址，所以 person1 的改变也修改 person 的值；

深拷贝：
es6 的 “…” 可以实现一个深拷贝，其实也说不上深拷贝，如果对象里面包含引用类型，也会失败。

let obj = {
    name:'sunny',
    age: 30,
    arr: [1,2,3,4]
}
let obj1 = obj
// console.log(obj1)
// obj1.name = 'cherry'
// console.log(obj1)
let copyObj = {...obj}
copyObj.name = 'cherry'
copyObj.arr[0] = 8
console.log(copyObj)

console.log(obj)//obj 的 arr 被改变了，但是基本类型没有受到影响

深拷贝实例：

const deepClone = (val) => {
  let res;
  if (val && Array.isArray(val)) {res = [];
    val.forEach((item) => {res.push(deepClone(item));
    });
  } else if (typeof val === 'object' && val !== null) {res = {};
    for (let key of Object.keys(val)) {res[key] = deepClone(val[key]);
    }
  } else {res = val;}
  return res;
}

—————————– 分割线 ————————

先更到这里，有时间继续补全~~~

正文完