2022前端知识点总结（更新中）

七彩猫猫虫

已于 2022-07-27 09:48:50 修改

阅读量364

点赞数

分类专栏：工作中的小问题自己动手丰衣足食文章标签：前端 javascript vue.js

于 2022-07-20 14:24:34 首次发布

本文链接：https://blog.csdn.net/sdaw_1/article/details/125891491

版权

工作中的小问题同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

自己动手丰衣足食

14 篇文章 0 订阅

订阅专栏

1、浅拷贝：Object.assign()和es6展开运算符

相信不少人都了解Object.assign()实现浅拷贝的用法，经个人测试，发现es6的展开运算符也可以实现，具体写法如下：

				var aaa ={
                    name:'张三'
                }
                var bbb = {
                    ...aaa
                }
                bbb.name = '李四'
                console.log(aaa,'aaa')//{name: "张三"} "aaa"
                console.log(bbb,'bbb')//{name: "李四"} "bbb"

2、Vue中data数据为什么定义为函数形式（引用类型的特点）

原因：

1，data组件都是vue的实例

2，组件共享data属性，当data的值是用一个引用类型的时候，改变其中的值会影响到其他的

3，组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件，都会返回一份新的data，类似于给没个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

如果单纯的写成对象形式，就会使所有组件实例共用了一份data数据，会造成一个改变全部跟着改变的结果

引用类型：（1、Object类型；2、Function类型；3、Array类型；4、Date类型）

类型将指针存在栈中，将值存在堆中。当我们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值，数组对象

3、事件委托

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件冒泡与事件捕获：

事件冒泡与事件捕获是浏览器触发事件的两种情况，一种是从html标签一直往下，一直到你触发事件的元素，一种是从你点击的事件处开始冒泡，把事件当做泡泡一直浮动到html标签。学习事件处理的机制可以在实际开发中做一些相关优化。如下：

<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

我们想要通过点击li获取li的数字，我们怎么做，第一时间想到的，在每一个li上面绑定事件，通过事件传入每一个li本身，获取innnerHTML.如下

<li onclick="clickLi(this)">1</li>

function clickLi(li) {
		console.log(li.innerHTML);
	}

但可以设想，如果li多了，我们每一个li都绑定一个点击事件，且不说性能问题，单是这样看起来已经很蠢了好吧，结合上面我们说的事件冒泡，点击事件会一路传递到html标签，那么我们可以在父元素ul上面监听点击事件。如下

<ul onclick="cliclUl()">

4、map和forEach区别

map：有返回值，可以开辟新空间，return出来一个length和原数组一致的数组，即便数组元素是undefined或者是null。
forEach：默认无返回值，返回结果为undefined，可以通过在函数体内部使用索引修改数组元素。
map的处理速度比forEach快，而且返回一个新的数组，方便链式调用其他数组新方法。

5、在一个JS文件中引用另一个JS文件

方法一

  在调用文件的顶部加入下例代码：

  document.write(”<script language=javascript src='js/import.js’></script>”);

  (注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来)

方法二

  通过中间界面对js进行应用，就是我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。

方法三

将下边代码放入Body中：

new_element=document.createElement(”script”);
new_element.setAttribute(”type”,”text/javascript”);
new_element.setAttribute(”src”,”import.js”);
document.body.appendChild(new_element);

我们来分析一下关键的几句代码：

  首先，我们利用document.createElement(”script”)生成了一个script的标签，设置其 type属性为text/javascript，src为import.js(这里的1.js同2.js放在同一个目录，也可放在不同的目录)。最后将这个标签动态 地加入body中。如此一来，我们就可以调用到不同js文件中的方法了。

  注意：<script language=”JAVASCRIPT” src=’1.js’></script>一定要放在body下面。因为在2.js中用到了body（document.body.appendChild(new_element);）如果将引如2.js的代码放在body上面，也就是说，进入页面后，还没有生成body就已经执行b.js里的document.body.appendChild(new_element);了。这时body不存在就会抛javascript错误。