自己建商城型网站,四大软件外包公司,网站整体色彩的建设,太原市住房和城乡建设局网站首页js数据类型
简单数据类型 null undefined string number boolean bigint 任意精度的大整数 symbol 创建唯一且不变的值#xff0c;常用来表示对象属性的唯一标识 复杂数据类型 object#xff0c;数组#xff0c;函数,正则,日期等 区别 存储区别 简单数据类型因为其大小固定…js数据类型
简单数据类型 null undefined string number boolean bigint 任意精度的大整数 symbol 创建唯一且不变的值常用来表示对象属性的唯一标识 复杂数据类型 object数组函数,正则,日期等 区别 存储区别 简单数据类型因为其大小固定且经常使用存储在栈中 复杂数据类型因为占据空间太大大小不固定存储在堆中栈中存放指向他的指针 栈 内存分配效率高自动管理 堆 内存分配灵活需要手动管理 赋值方式的区别 复制的是值本身两个变量互不影响 复制的是引用一个变量修改影响其他变量
数据类型检测的方式
typeof 检查原始类型 返回类型字符串 null 比较特殊检查返回object 检查引用类型时,返回object,除了function返回’function’instance of (检查当前类型是否在当前实例的原型链上) 检查引用类型 返回布尔值object prototype tostring call 适用于所有类型的判断检测 返回的是该数据类型的字符串。
判断数组
instance ofArray.isArrayObject.prototype.toString.call() 与 的区别
1当两边类型不一致类型转换后比较相等
2不进行类型转化不止比较值相等还比较类型是否相等
null 与 undefinded的区别
类型检查区别 type of检查null 返回object比较操作区别 比较两个会认为相等都表示没有值 比较不相等因为是不同类型变量赋值区别 undefined是js引擎自动赋予未赋值变量当定义未初始化是变量的值为undefined null是开发者手动显示赋值表示变量没有值
变量提升
what: 变量提升是指JS的变量和函数声明会在代码编译期提升到用域顶部 如此可以在实际声明代码位置之前使用变量 how
变量提升成立的前提: 使用Var关键字进行声明的变量声明被提升赋值不会被提升函数的声明提升: 使用function声明,会比变量的提升优先。 函数表达式提升不可在声明之前调用
//函数声明提升
console.log(myFunction()); // 输出: Hello, World!
function myFunction() {return Hello, World!;
}//函数表达式console.log(myFunction2()); // 报错: myFunction2 is not functionvar myFunction2 function() {return Hello, World2!;}//变量提升console.log(myVariable); // 输出: undefinedvar myVariable 10;why
代码可读性与可维护性下降潜在bug使用未初始化的变量可能导致不可预测的问题 解决 ES6使用let和const声明的变量是不会创建提升 在初始化之前访问let和const创建的变量会报错。
作用域与作用域链
变量的作用范围 全局作用域 最外层作用域 函数作用域 在函数内部声明的变量只在函数内部可见 块级作用域 使用let/const 声明的变量作用域只在定义的代码块内
作用域链是当变量在当前作用域无法找到的时候js会一层一层向外寻找直到找到变量或到达全局作用域,这种层级关系就是作用域链
词法作用域 作用域在定义的时候确定 不在运行时确定 js采取的是静态作用域,函数的作用域在函数定义的时候就确定了,在取自由变量的值的时候,要到创建当前函数的作用域去取,而不是调用函数时的作用域
立即执行函数表达式
立即调用匿名函数来创建一个新的作用域避免污染全局作用域
用来封装独立的代码模块
说一说你对执行上下文的理解
代码在执行时所处的上下文环境
包括了代码在运行时能够访问的变量对象作用域链和this值 全局上下文 默认执行上下文当js代码开始执行全局上下文被创建this指向全局对象 函数执行上下文 每调用一个函数都会创建一个函数上下文可以被嵌套 Eval执行上下文
上下文内容 变量对象 包含函数所有的形参内部变量函数声明对于函数上下文它被称为活动对象作用域链 包含当前上下文的变量对象所有父级上下文的变量对象this值 全局上下文指向全局对象函数上下文this的值取决于函数调用方式上下文生命周期 创建阶段 创建变量对象包括函数参数函数声明变量声明不会立刻赋值 创建作用域形成作用域与当前上下文相连 确定this根据调用位置确定上下文的this 执行阶段 变量分配变量赋值函数引用开始执行 执行代码根据代码逻辑逐行执行
简单说js的闭包
一个函数,引用了另一个函数作用域中变量 也就是说能够从外部访问函数内部的变量 用于隐藏与封装
问题 垃圾回收器不会将闭包中变量销毁于是就造成了内存泄露内存泄露积累多了就容易导致内存溢出。
解释一下什么是原型与原型链
1每个js对象都有一个内部属性_proto_,
指向一个对象—-原型对象可以从原型对象上继承属性与方法
2原型对象也是对象也有_proto_,指向自己的原型对象
这样相互关联的原型对象形成的链式结构构成原型链 构造函数 构造函数有一个prototype属性指向原型对象 原型对象有constructor属性 指向构造函数
遍历对象属性的方法有哪些
1获取对象自身属性不包含原型链
返回值是属性数组Object.keys() //返回对象自身可枚举属性 Object.getOwnPropertyNames() //返回对象自身所有属性不包含Symbol属性
Object.getOwnPropertySymbols()//获取对象自身Symbol属性
Reflect.ownKeys()//获取对象自身所有属性包括字符串与Symbol属性
2获取对象自身属性以及原型链继承的属性
for……in
Object.hasOwnProperty() 判断是否是对象自身属性
new过程发生了什么 创建一个空对象 {} 将这个新对象的_proto_属性指向构造函数的原型对象 将构造函数的this绑定到新对象并执行构造函数中的代码 如果一个构造函数返回了一个对象那么new 表达式最后返回这个对象否则返回新创建的对象
call/apply/bind有什么区别
改变函数运行时的this指向 执行时机不同 call/apply 立即执行 bind 返回新函数手动调用新函数执行 传参方式不同 call 第一个参数 this的值参数2参数3,……… apply 第一个参数 this的值[参数1参数2,……] bind 第一个参数 this的值参数作为新函数的参数 修改this性质 call/apply 临时修改this指向 bind 永久修改this指向
this绑定的规则
1普通函数 this 指向函数的调用者是动态的 2箭头函数 所处上下文的this保持不变
箭头函数与普通函数的区别
箭头函数
没有自己的this 不适用事件绑定,定义对象上的方法 //this指向问题var dog { lives: 20, jumps: () { this.lives--; } }dog.jumps();console.log(dog.lives); // 20// this指向的是window对象,无法切换var button document.querySelector(button);button.addEventListener(click, () { this.classList.toggle(on); });继承的实现方式
原型链继承 所有实例共享父类的属性。修改子类可能影响所有的实例构造函数继承 子类构造函数中调用父类构造函数子类便可继承父类的属性 不能继承父类的原型方法组合继承 调用父类构造函数继承属性 通过原型链继承方法 调用两次父类构造函数开销较大寄生组合继承 在组合继承的基础上 通过原型链继承方法时使用 Object.create(Coder.prototype)class语法 extends/super关键字
深拷贝与浅拷贝实现方式
浅拷贝
拷贝的是普通类型,拷贝值拷贝的是对象类型,拷贝地址(修改其中一个,会影响另外一个,两个对象指向同一份地址空间)
深拷贝
拷贝的是普通类型,拷贝值拷贝的是对象类型,新建地址,复制原始地址中的值,放入新的地址中(修改不会影响原始对象)
什么是暂时性死区
代码块中使用 let 或 const 声明变量, 如果尝试在声明之前使用它们就会抛出 ReferenceError 错误。就形成了暂时性死区 好处 有利于防止在变量尚未初始化之前访问,避免潜在错误 什么是同步与异步js异步解决方案
同步: 指令按顺序指向,上一条指令未完成,下一条指令只能一直等待异步: 类似系统中断,在上一条指令执行期间,可以执行下一条指令js异步方案: 回调函数/promise/async,await
对事件循环的理解
事件循环是js的一个执行机制用于实现异步、非阻塞编程的操作。
在一个事件循环中程序会不断地检查事件队列如果有新事件到达就会触发相应处理程序的回调函数来执行。允许程序在等待 I/O 操作完成的同时继续执行其他任务而不会阻塞整个进程。
举个生活中的例子老师要收整个班级的作业可以找一位课代表课代表 每小时 循环检查所有同学交的作业情况如果发现有新的提交就通知老师批改。这样老师就不用一直等着学生完成作业I / O 操作不去做其他的事情。
宏任务与微任务
在任务队列中分为宏任务队列Task Queue和微任务队列Microtask Queue对应的里面存放的就是宏任务和微任务。
异步任务优先级 如果异步任务的优先级不区分,按照队列先进先出的机制,如果前一个任务耗时长,会影响后续任务
耗时长的异步任务放入宏任务队列 耗时短的异步任务放入微任务队列
宏任务DOM 渲染后触发如 setTimeout 、setInterval 、DOM 事件 、script 。微任务DOM 渲染前触发如 Promise.then 、MutationObserver 、Node 环境下的 process.nextTick 。
Promise以及常见方法
Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表了一个尚未完成但承诺会在未来某个时候完成的操作并允许你在操作完成前注册回调函数。
三个状态 pending fuilied rejected原型上的方法 then catch finnalyPromise类上的静态方法 Promise.all/allSettled/race/any/resovle/reject
async 与await关键字作用
async/await 是基于Promises的语法糖 async函数返回一个Promise await表达式会暂停async函数的执行并等待Promise解决然后恢复async函数的执行
这样一来就可以控制异步任务的执行顺序, 当后一个任务需要前一个任务的结果时就非常方便
proxy 与 Object.defineProperty
js中用于实现数据拦截和响应式处理
灵活性Proxy 更加灵活因为它可以拦截对象的几乎所有操作而 Object.defineProperty 只能控制属性的特性。兼容性Object.defineProperty 在 ES5 中就已经存在因此在兼容性方面可能更胜一筹。性能在某些情况下Proxy 的性能可能不如 Object.defineProperty因为 Proxy 需要在每次操作时都进行拦截和处理。适用场景Proxy 更适合需要动态改变对象行为或进行复杂操作拦截的场景而 Object.defineProperty 则更适合对属性进行精确控制的场景。
map与普通对象WeakMap的区别
Map 和 WeakMap 都是键值对的集合
键的类型 Map的键可以是任何数据类型。WeakMap的键只能是对象原始数据类型如字符串、数字不能作为WeakMap的键。 引用类型 Map对键是强引用。这意味着只要Map存在其中的键就不会被垃圾回收器回收除非显式地删除它们。WeakMap对键是弱引用。如果键不再被其他对象引用即它是不可达的那么垃圾回收器可以随时回收它同时WeakMap中对应的键值对也会自动消失。这个特性使得WeakMap非常适合用于缓存等场景因为它不会阻止垃圾回收器回收不再使用的对象。 遍历性 Map是可遍历的。它提供了keys()、values()、entries()和forEach()等方法来遍历Map中的键值对。WeakMap是不可遍历的。WeakMap 没有内置的迭代器因此不能直接遍历键值对。
Map与普通对象的区别
键的类型 Map对象的键可以是任何数据类型包括原始数据类型如字符串、数字和对象。普通对象的键只能是字符串或Symbol类型。如果你尝试使用其他类型的值作为键它们会被自动转换为字符串例如数字会被转换为字符串形式的数字。 键的顺序 Map对象保持键值对的插入顺序。普通对象不保证键值对的顺序。在不同的JavaScript引擎中对象的属性顺序可能会有所不同甚至在同一引擎的不同版本中也可能有所不同。 方法 Map对象提供了一些特殊的方法如size属性返回Map中键值对的数量、forEach()方法遍历Map中的每个键值对等。普通对象使用点语法或方括号语法来访问和操作键值对没有提供像size这样的内置属性来获取键值对的数量需要手动计算。 性能 在大多数情况下Map和对象的性能是相似的。然而在频繁添加和删除键值对的情况下Map可能会表现出更好的性能因为它的内部实现是基于哈希表的。
forforeachmap的区别/for infor of
forEach是数组的一个方法用于遍历数组中的每个元素并对每个元素执行一个提供的函数。 map也是数组的一个方法它创建一个新数组其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 for...in循环用于遍历对象的可枚举属性包括原型链上的属性。 for...of循环用于遍历可迭代对象如数组、字符串、Set、Map等的值。
array.forEach((item, index) { console.log(item); });
const newArray array.map(item item * 2); console.log(newArray);
const obj {a: 1, b: 2}; for (let key in obj) { console.log(key, obj[key]); }
const array [1, 2, 3]; for (let value of array) { console.log(value); }对ComonnJS与ES6模块化理解
1相同点 两者都是 JavaScript 的模块化规范都可以用来导入导出模块。 2不同点 ES Module (ESM) 是 ES6 引入的标准化模块系统支持动态导入在编译时加载可以异步加载模块。 export import CommonJS (CJS) 出现在 ES6 之前不支持动态导入在运行时加载采取的是同步加载模块的方式。 module.exports require
事件流的过程
事件流可以分为三个阶段事件捕获、目标阶段和事件冒泡。
事件捕获阶段事件从最外层的文档节点一直往下传递直到事件到达事件的目标元素。在这个过程中事件会经过父节点和祖先节点直到到达目标节点。如果在这个过程中有事件处理程序则事件将被调用。目标阶段事件到达了目标元素后将在目标元素上调用事件处理程序。如果有多个事件处理程序绑定到目标元素上将按照它们的顺序执行。事件冒泡阶段事件在目标元素上处理后会从目标元素开始向上传递回文档节点。在这个过程中事件也会遇到任何绑定的事件处理程序。
目前有两种事件流模型
W3C 标准事件模型DOM2级事件模型事件流由三个阶段组成捕获阶段、目标阶段和冒泡阶段。这种事件模型中事件处理程序的调用顺序与它们注册的顺序相同。Microsoft 事件模型IE 事件模型事件流由两个阶段组成目标阶段和冒泡阶段。在这个事件模型中事件处理程序的调用顺序与它们注册的相反。
事件委托
其核心思想是利用事件冒泡机制将子元素的事件委托到父元素从而通过一个事件处理程序来管理多个子元素的事件。
具体来说如果我们有多个子元素都需要响应某个事件比如点击与其在每个子元素上绑定事件处理器不如在它们的父元素上绑定一个事件处理器。当子元素触发事件时事件会冒泡传递到父元素由父元素的事件处理程序来处理这个事件。
e.target / e.currentTarget 区别
e.target: 触发事件的元素e.currentTarget 绑定事件的元素 div classparentbuttonclick Me/button/divscriptlet parent document.querySelector(.parent)let button document.querySelector(button)parent.addEventListener(click, function(e) {console.log(e.target: , e.target);//e.target: buttonclick Me/buttonconsole.log(e.currentTarget: , e.currentTarget);//e.currentTarget: div classparent…/div})讲一讲js垃圾回收机制
基于V8引擎使用标记-清除算法来管理内存
哪些操作会导致内存泄漏
定时器没有被清除 闭包 dom元素引用 循环引用
手写instanceof
防抖与节流实现
ES6新特性常用那些
