事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为三个阶段，分别为：捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；目标阶段：真正的目标节点正在处理事件的阶段；冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。捕获阶段：!DOCTYPEhtml
html

head
metacharset=UTF-8
metaname=viewportcontent=width=device-width,initial-scale=1.0
metahttp-equiv=X-UA-Compatiblecontent=ie=edge
titleDocument/title
style
.father{
overflow:hidden;
width:300px;
h

赋值和浅拷贝的区别一直以为对象赋值和对象浅拷贝是一样的，但实际上它们还是有很大差异。先看赋值，将一个对象赋值给一个新的对象的时候，赋的其实是该对象在栈中的地址，而不是堆中的数据。 也就是一个对象的改变就会改变另外一个对象。再看浅拷贝，浅拷贝会创建一个对象，再去遍历原始对象，如果原对象的属性值是基础类型，那么就拷贝基础类型，如果是引用类型，则拷贝的是指针。是不是有点蒙蔽？看一个例子：varobj1={
name:'前端大杂货铺',
content:['前端','生活']
}

//赋值
varobj2=obj1

obj2.n

JS数组求和的常用方法。一、for循环vararr=[1,2,3];
functionsum(arr){
vars=0;
for(vari=0;iarr.length;i++){
s+=arr[i];
}
returns;
}
console.log(sum(arr));//6二、forEach遍历vararr=[1,2,3];
functionsum(arr){
vars=0;
arr.forEach(function(val,idx,arr){
s+=val;
},0);
returns;
};
console.log(sum(arr));//6三、reducevararr=[1,2,3];
functionsum(arr){
returnarr.reduce(function(acr,cur){
returnacr+cur;
});
}
console.log(sum(arr));//6四、递归vararr=[1,2,3];
functionsum(arr){
if(arr.lengt

要比较两个函数哪个性能更好，一个直观且公平的方法就是计算两个函数分别执行完的时间。良好的性能更容易好的用户体验，而好的用户体验更能留住用户。 研究表明，由于性能问题，在88％的在线消费者对用户体验不满意后，他们不太可能会二次使用。这也是为什么要提高性能的一个重要原因。 特别是使用 JS 开发时，编写的每一行 JS 都可能会阻塞DOM，因为它是单线程语言。本次分享，我们主要介绍如何计算函数的性能。Performance.nowPerformance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全

为什么要进行事件委托？首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。为了实现这个小功能，你需要选择按钮，然后再用addEventListener()方法来附加事件监听器：buttonid=buttonIdClickme/button

script
document.getElementById('buttonId')
.addEventListener('click',()=console.log('Clicked!'));
/script以上就是侦听单个元素（尤其是按钮）上事件的方式。如果需要监听多个按钮上的事件呢？下面是一种可能的实现：divid=buttons
buttonclass=buttonClassClickme/button
buttoncla

毫无疑问，JavaScript 是Web开发中最流行的编程语言之一。 无论使用的是 React，Vue 还是Angular，都只是 JavaScript。 JS围绕着广阔而至关重要的生态系统发展，提供了无数的框架和库，可帮助我们更快地开发应用程序。但是有时候最好退一步，尝试了解如何在没有使用库的情况下做事。 看看下面的代码片段，它们以优雅的方式解决了简单的问题，在日常项目也很实用，所以记好笔记，当遇到问题时就可直接来用使用。1.字符串反转在此示例中，我们使用展开运算符，Array的reverse方法和 String 的join方法来反转给定的字符串。constreverseStrin

reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。reduce()方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce()方法有两个参数，第一个是回调函数，第二个是初始值。回调函数回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。Accumulator（累加器）——累加器累加回调函数的返回值。Current Value（当前值）——处理数组的当前元素。Current Index（当前索引）——处理数组

本篇文章给大家分享一份window.location备忘单！了解如何更改URL属性以及如何在JavaScript中重定向或刷新页面。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如果你想获取站点的URL信息，那么window.location对象什么很适合你！使用其属性获取有关当前页面地址的信息，或使用其方法进行某些页面重定向或刷新window.location.origin→'https://segmentfault.com'
.protocol→'https:'
.host→'segmentfault.com'
.hostname→'segmentfault.com'
.port→''
.pathname→&

这是一份备忘单，展示了不同的导出方式和相应的导入方式。 它实际上可分为3种类型：名称，默认值和列表 。//命名导入/导出
exportconstname='value'
import{name}from'...'

//默认导出/导入
exportdefault'value'
importanyNamefrom'...'

//重命名导入/导出
export{nameasnewName}
import{newName}from'...'

//命名+默认|ImportAll
exportconstname='value'
exportdefault'value'
import*asanyNamefrom'...'

//导出列表+重命名
export{
name1,

前言我们知道Javascript语言的执行环境是单线程。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步和异步。本文主要介绍异步编程几种办法，并通