当前位置: 首页 > news >正文

20道前端高频面试题(附答案)

ES6新特性

1.ES6引入来严格模式变量必须声明后在使用函数的参数不能有同名属性, 否则报错不能使用with语句 (说实话我基本没用过)不能对只读属性赋值, 否则报错不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)不能删除不可删除的数据, 否则报错不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化不能使用arguments.caller (说实话我基本没用过)不能使用arguments.callee (说实话我基本没用过)禁止this指向全局对象不能使用fn.caller和fn.arguments获取函数调用的堆栈 (说实话我基本没用过)增加了保留字(比如protectedstaticinterface2.关于letconst新增的变量声明3.变量的解构赋值4.字符串的扩展includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
5.数值的扩展Number.isFinite()用来检查一个数值是否为有限的(finite)。Number.isNaN()用来检查一个值是否为NaN6.函数的扩展函数参数指定默认值
7.数组的扩展扩展运算符
8.对象的扩展对象的解构
9.新增symbol数据类型10.Set 和 Map 数据结构 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构。Map它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
11.ProxyProxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。Vue3.0使用了proxy
12.PromisePromise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。特点是:对象的状态不受外界影响。一旦状态改变,就不会再变,任何时候都可以得到这个结果。
13.async 函数 async函数对 Generator 函数的区别:(1)内置执行器。Generator 函数的执行必须靠执行器,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。(2)更好的语义。asyncawait,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。(3)正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。(4)返回值是 Promise。async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
14.Class classletconst一样:不存在变量提升、不能重复声明...ES6class可以看作只是一个语法糖,它的绝大部分功能ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
15.ModuleES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";importexport命令以及exportexport default的区别

常见的HTTP请求方法

  • GET: 向服务器获取数据;
  • POST:将实体提交到指定的资源,通常会造成服务器资源的修改;
  • PUT:上传文件,更新数据;
  • DELETE:删除服务器上的对象;
  • HEAD:获取报文首部,与GET相比,不返回报文主体部分;
  • OPTIONS:询问支持的请求方法,用来跨域请求;
  • CONNECT:要求在与代理服务器通信时建立隧道,使用隧道进行TCP通信;
  • TRACE: 回显服务器收到的请求,主要⽤于测试或诊断。

介绍下 promise 的特性、优缺点,内部是如何实现的,动手实现 Promise

1)Promise基本特性

  • 1、Promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)
  • 2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数,分别是成功时的回调resolve和失败时的回调reject;另外resolve的参数除了正常值以外, 还可能是一个Promise对象的实例;reject的参数通常是一个Error对象的实例。
  • 3、then方法返回一个新的Promise实例,并接收两个参数onResolved(fulfilled状态的回调);onRejected(rejected状态的回调,该参数可选)
  • 4、catch方法返回一个新的Promise实例
  • 5、finally方法不管Promise状态如何都会执行,该方法的回调函数不接受任何参数
  • 6、Promise.all()方法将多个多个Promise实例,包装成一个新的Promise实例,该方法接受一个由Promise对象组成的数组作为参数(Promise.all()方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例),注意参数中只要有一个实例触发catch方法,都会触发Promise.all()方法返回的新的实例的catch方法,如果参数中的某个实例本身调用了catch方法,将不会触发Promise.all()方法返回的新实例的catch方法
  • 7、Promise.race()方法的参数与Promise.all方法一样,参数中的实例只要有一个率先改变状态就会将该实例的状态传给Promise.race()方法,并将返回值作为Promise.race()方法产生的Promise实例的返回值
  • 8、Promise.resolve()将现有对象转为Promise对象,如果该方法的参数为一个Promise对象,Promise.resolve()将不做任何处理;如果参数thenable对象(即具有then方法),Promise.resolve()将该对象转为Promise对象并立即执行then方法;如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的Promise对象,状态为fulfilled,其参数将会作为then方法中onResolved回调函数的参数,如果Promise.resolve方法不带参数,会直接返回一个fulfilled状态的 Promise 对象。需要注意的是,立即resolve()的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。
  • 9、Promise.reject()同样返回一个新的Promise对象,状态为rejected,无论传入任何参数都将作为reject()的参数

2)Promise优点

  • ①统一异步 API
    • Promise 的一个重要优点是它将逐渐被用作浏览器的异步 API ,统一现在各种各样的 API ,以及不兼容的模式和手法。
  • ②Promise 与事件对比
    • 和事件相比较, Promise 更适合处理一次性的结果。在结果计算出来之前或之后注册回调函数都是可以的,都可以拿到正确的值。 Promise 的这个优点很自然。但是,不能使用 Promise 处理多次触发的事件。链式处理是 Promise 的又一优点,但是事件却不能这样链式处理。
  • ③Promise 与回调对比
    • 解决了回调地狱的问题,将异步操作以同步操作的流程表达出来。
  • ④Promise 带来的额外好处是包含了更好的错误处理方式(包含了异常处理),并且写起来很轻松(因为可以重用一些同步的工具,比如 Array.prototype.map() )。

3)Promise缺点

  • 1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  • 2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  • 3、当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
  • 4、Promise 真正执行回调的时候,定义 Promise 那部分实际上已经走完了,所以 Promise 的报错堆栈上下文不太友好。

4)简单代码实现
最简单的Promise实现有7个主要属性, state(状态), value(成功返回值), reason(错误信息), resolve方法, reject方法, then方法

class Promise{constructor(executor) {this.state = 'pending';this.value = undefined;this.reason = undefined;let resolve = value => {if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;}};let reject = reason => {if (this.state === 'pending') {this.state = 'rejected';this.reason = reason;}};try {// 立即执行函数executor(resolve, reject);} catch (err) {reject(err);}}then(onFulfilled, onRejected) {if (this.state === 'fulfilled') {let x = onFulfilled(this.value);};if (this.state === 'rejected') {let x = onRejected(this.reason);};}
}

5)面试够用版

function myPromise(constructor){ let self=this;self.status="pending" //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 function resolve(value){//两个==="pending",保证了了状态的改变是不不可逆的 if(self.status==="pending"){self.value=value;self.status="resolved"; }}function reject(reason){//两个==="pending",保证了了状态的改变是不不可逆的if(self.status==="pending"){self.reason=reason;self.status="rejected"; }}//捕获构造异常 try{constructor(resolve,reject);}catch(e){reject(e);} 
}
myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this;switch(self.status){case "resolved": onFullfilled(self.value); break;case "rejected": onRejected(self.reason); break;default: }
}// 测试
var p=new myPromise(function(resolve,reject){resolve(1)}); 
p.then(function(x){console.log(x)})
//输出1

6)大厂专供版

const PENDING = "pending"; 
const FULFILLED = "fulfilled"; 
const REJECTED = "rejected";
const resolvePromise = (promise, x, resolve, reject) => {if (x === promise) {// If promise and x refer to the same object, reject promise with a TypeError as the reason.reject(new TypeError('循环引用'))}// if x is an object or function,if (x !== null && typeof x === 'object' || typeof x === 'function') {// If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored.let calledtry { // If retrieving the property x.then results in a thrown exception e, reject promise with e as the reason.let then = x.then // Let then be x.then// If then is a function, call it with x as thisif (typeof then === 'function') {// If/when resolvePromise is called with a value y, run [[Resolve]](promise, y)// If/when rejectPromise is called with a reason r, reject promise with r.then.call(x, y => {if (called) returncalled = trueresolvePromise(promise, y, resolve, reject)}, r => {if (called) returncalled = truereject(r)})} else {// If then is not a function, fulfill promise with x.resolve(x)}} catch (e) {if (called) returncalled = truereject(e)}} else {// If x is not an object or function, fulfill promise with xresolve(x)}
}
function Promise(excutor) {let that = this; // 缓存当前promise实例例对象that.status = PENDING; // 初始状态that.value = undefined; // fulfilled状态时 返回的信息that.reason = undefined; // rejected状态时 拒绝的原因 that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数function resolve(value) { // value成功态时接收的终值if(value instanceof Promise) {return value.then(resolve, reject);}// 实践中要确保 onFulfilled 和 onRejected ⽅方法异步执⾏行行,且应该在 then ⽅方法被调⽤用的那⼀一轮事件循环之后的新执⾏行行栈中执⾏行行。setTimeout(() => {// 调⽤用resolve 回调对应onFulfilled函数if (that.status === PENDING) {// 只能由pending状态 => fulfilled状态 (避免调⽤用多次resolve reject)that.status = FULFILLED;that.value = value;that.onFulfilledCallbacks.forEach(cb => cb(that.value));}});}function reject(reason) { // reason失败态时接收的拒因setTimeout(() => {// 调⽤用reject 回调对应onRejected函数if (that.status === PENDING) {// 只能由pending状态 => rejected状态 (避免调⽤用多次resolve reject)that.status = REJECTED;that.reason = reason;that.onRejectedCallbacks.forEach(cb => cb(that.reason));}});}// 捕获在excutor执⾏行行器器中抛出的异常// new Promise((resolve, reject) => {//     throw new Error('error in excutor')// })try {excutor(resolve, reject);} catch (e) {reject(e);}
}
Promise.prototype.then = function(onFulfilled, onRejected) {const that = this;let newPromise;// 处理理参数默认值 保证参数后续能够继续执⾏行行onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason;};if (that.status === FULFILLED) { // 成功态return newPromise = new Promise((resolve, reject) => {setTimeout(() => {try{let x = onFulfilled(that.value);resolvePromise(newPromise, x, resolve, reject); //新的promise resolve 上⼀一个onFulfilled的返回值} catch(e) {reject(e); // 捕获前⾯面onFulfilled中抛出的异常then(onFulfilled, onRejected);}});})}if (that.status === REJECTED) { // 失败态return newPromise = new Promise((resolve, reject) => {setTimeout(() => {try {let x = onRejected(that.reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}if (that.status === PENDING) { // 等待态
// 当异步调⽤用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中return newPromise = new Promise((resolve, reject) => {that.onFulfilledCallbacks.push((value) => {try {let x = onFulfilled(value);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});that.onRejectedCallbacks.push((reason) => {try {let x = onRejected(reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}
};

对事件委托的理解

(1)事件委托的概念

事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点,父节点可以通过事件对象获取到目标节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方式称为事件委托(事件代理)。

使用事件委托可以不必要为每一个子元素都绑定一个监听事件,这样减少了内存上的消耗。并且使用事件代理还可以实现事件的动态绑定,比如说新增了一个子节点,并不需要单独地为它添加一个监听事件,它绑定的事件会交给父元素中的监听函数来处理。

(2)事件委托的特点

  • 减少内存消耗

如果有一个列表,列表之中有大量的列表项,需要在点击列表项的时候响应一个事件:

<ul id="list"><li>item 1</li><li>item 2</li><li>item 3</li>......<li>item n</li>
</ul>

如果给每个列表项一一都绑定一个函数,那对于内存消耗是非常大的,效率上需要消耗很多性能。因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是 ul 上,然后在执行事件时再去匹配判断目标元素,所以事件委托可以减少大量的内存消耗,节约效率。

  • 动态绑定事件

给上述的例子中每个列表项都绑定事件,在很多时候,需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件;如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的,所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

// 来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上:
// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {// 兼容性处理var event = e || window.event;var target = event.target || event.srcElement;// 判断是否匹配目标元素if (target.nodeName.toLocaleLowerCase === 'li') {console.log('the content is: ', target.innerHTML);}
});

在上述代码中, target 元素则是在 #list 元素之下具体被点击的元素,然后通过判断 target 的一些属性(比如:nodeName,id 等等)可以更精确地匹配到某一类 #list li 元素之上;

(3)局限性

当然,事件委托也是有局限的。比如 focus、blur 之类的事件没有事件冒泡机制,所以无法实现事件委托;mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的。

当然事件委托不是只有优点,它也是有缺点的,事件委托会影响页面性能,主要影响因素有:

  • 元素中,绑定事件委托的次数;
  • 点击的最底层元素,到绑定事件元素之间的DOM层数;

在必须使用事件委托的地方,可以进行如下的处理:

  • 只在必须的地方,使用事件委托,比如:ajax的局部刷新区域
  • 尽量的减少绑定的层级,不在body元素上,进行绑定
  • 减少绑定的次数,如果可以,那么把多个事件的绑定,合并到一次事件委托中去,由这个事件委托的回调,来进行分发。

代码输出问题

window.number = 2;
var obj = {number: 3,db1: (function(){console.log(this);this.number *= 4;return function(){console.log(this);this.number *= 5;}})()
}
var db1 = obj.db1;
db1();
obj.db1();
console.log(obj.number);     // 15
console.log(window.number);  // 40

这道题目看清起来有点乱,但是实际上是考察this指向的:

  1. 执行db1()时,this指向全局作用域,所以window.number * 4 = 8,然后执行匿名函数, 所以window.number * 5 = 40;
  2. 执行obj.db1();时,this指向obj对象,执行匿名函数,所以obj.numer * 5 = 15。

说一下怎么把类数组转换为数组?

//通过call调用数组的slice方法来实现转换
Array.prototype.slice.call(arrayLike)//通过call调用数组的splice方法来实现转换
Array.prototype.splice.call(arrayLike,0)//通过apply调用数组的concat方法来实现转换
Array.prototype.concat.apply([],arrayLike)//通过Array.from方法来实现转换
Array.from(arrayLike)

参考 前端进阶面试题详细解答

代码输出结果

Promise.resolve('1').then(res => {console.log(res)}).finally(() => {console.log('finally')})
Promise.resolve('2').finally(() => {console.log('finally2')return '我是finally2返回的值'}).then(res => {console.log('finally2后面的then函数', res)})

输出结果如下:

1
finally2
finally
finally2后面的then函数 2

.finally()一般用的很少,只要记住以下几点就可以了:

  • .finally()方法不管Promise对象最后的状态如何都会执行
  • .finally()方法的回调函数不接受任何的参数,也就是说你在.finally()函数中是无法知道Promise最终的状态是resolved还是rejected
  • 它最终返回的默认会是一个上一次的Promise对象值,不过如果抛出的是一个异常则返回异常的Promise对象。
  • finally本质上是then方法的特例

.finally()的错误捕获:

Promise.resolve('1').finally(() => {console.log('finally1')throw new Error('我是finally中抛出的异常')}).then(res => {console.log('finally后面的then函数', res)}).catch(err => {console.log('捕获错误', err)})

输出结果为:

'finally1'
'捕获错误' Error: 我是finally中抛出的异常

代码输出结果

function Person(name) {this.name = name
}
var p2 = new Person('king');
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null后面没有了,报错
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null后面没有了,报错
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是实例,没有prototype属性
console.log(Person.constructor)//Function 一个空函数
console.log(Person.prototype)//打印出Person.prototype这个对象里所有的方法和属性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null

这道义题目考察原型、原型链的基础,记住就可以了。

代码输出结果

async function async1 () {console.log('async1 start');await new Promise(resolve => {console.log('promise1')})console.log('async1 success');return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

输出结果如下:

script start
async1 start
promise1
script end

这里需要注意的是在async1await后面的Promise是没有返回值的,也就是它的状态始终是pending状态,所以在await之后的内容是不会执行的,包括async1后面的 .then

代码输出结果

function foo() {console.log( this.a );
}function doFoo() {foo();
}var obj = {a: 1,doFoo: doFoo
};var a = 2; 
obj.doFoo()

输出结果:2

在Javascript中,this指向函数执行时的当前对象。在执行foo的时候,执行环境就是doFoo函数,执行环境为全局。所以,foo中的this是指向window的,所以会打印出2。

setInterval 模拟 setTimeout

描述:使用setInterval模拟实现setTimeout的功能。

思路setTimeout的特性是在指定的时间内只执行一次,我们只要在setInterval内部执行 callback 之后,把定时器关掉即可。

实现

const mySetTimeout = (fn, time) => {let timer = null;timer = setInterval(() => {// 关闭定时器,保证只执行一次fn,也就达到了setTimeout的效果了clearInterval(timer);fn();}, time);// 返回用于关闭定时器的方法return () => clearInterval(timer);
}// 测试
const cancel = mySetTimeout(() => {console.log(1);
}, 1000);  
// 一秒后打印 1

说一下vue3.0你了解多少?

 <!-- 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty --><!-- 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项,他是组件内使用Composition API 的入口 --><!-- 模板语法变化slot具名插槽语法 自定义指令 v-model 升级 --><!-- 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件针对一些特殊的场景做了处理。基于treeshaking优化,提供了更多的内置功能。 -->

代码输出结果

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

输出结果如下:

1
2
3
[1, 2, 3]

首先,定义了一个Promise,来异步执行函数runAsync,该函数传入一个值x,然后间隔一秒后打印出这个x。

之后再使用Promise.all来执行这个函数,执行的时候,看到一秒之后输出了1,2,3,同时输出了数组[1, 2, 3],三个函数是同步执行的,并且在一个回调函数中返回了所有的结果。并且结果和函数的执行顺序是一致的。

Promise.race

描述:只要promises中有一个率先改变状态,就返回这个率先改变的Promise实例的返回值。

实现

Promise.race = function(promises){return new Promise((resolve, reject) => {if(Array.isArray(promises)) {if(promises.length === 0) return resolve(promises);promises.forEach((item) => {Promise.resolve(item).then(value => resolve(value), reason => reject(reason));})}else return reject(new TypeError("Argument is not iterable"));});
}

异步任务调度器

描述:实现一个带并发限制的异步调度器 Scheduler,保证同时运行的任务最多有 limit 个。

实现

class Scheduler {queue = [];  // 用队列保存正在执行的任务runCount = 0;  // 计数正在执行的任务个数constructor(limit) {this.maxCount = limit;  // 允许并发的最大个数}add(time, data){const promiseCreator = () => {return new Promise((resolve, reject) => {setTimeout(() => {console.log(data);resolve();}, time);});}this.queue.push(promiseCreator);// 每次添加的时候都会尝试去执行任务this.request();}request() {// 队列中还有任务才会被执行if(this.queue.length && this.runCount < this.maxCount) {this.runCount++;// 执行先加入队列的函数this.queue.shift()().then(() => {this.runCount--;// 尝试进行下一次任务this.request();});}}
}// 测试
const scheduler = new Scheduler(2);
const addTask = (time, data) => {scheduler.add(time, data);
}addTask(1000, '1');
addTask(500, '2');
addTask(300, '3');
addTask(400, '4');
// 输出结果 2 3 1 4

说一下常见的检测数据类型的几种方式?

typeof  其中数组、对象、null都会被判断为Object,其他判断都正确instanceof 只能判断引用数据类型,不能判断基本数据类型constructor 它有2个作用 一是判断数据的类型,二是对象实例通过constructor对象访问它的构造函数。需要注意的事情是如果创建一个对象来改变它的原型,constructor就不能来判断数据类型了Object.prototype.toString.call()

Number() 的存储空间是多大?如果后台发送了一个超过最大自己的数字怎么办

Math.pow(2, 53) ,53 为有效数字,会发生截断,等于 JS 能支持的最大数字。

Promise.allSettled

描述:等到所有promise都返回结果,就返回一个promise实例。

实现

Promise.allSettled = function(promises) {return new Promise((resolve, reject) => {if(Array.isArray(promises)) {if(promises.length === 0) return resolve(promises);let result = [];let count = 0;promises.forEach((item, index) => {Promise.resolve(item).then(value => {count++;result[index] = {status: 'fulfilled',value: value};if(count === promises.length) resolve(result);}, reason => {count++;result[index] = {status: 'rejected'.reason: reason};if(count === promises.length) resolve(result);});});}else return reject(new TypeError("Argument is not iterable"));});
}

Object.is 实现

题目描述:

Object.is不会转换被比较的两个值的类型,这点和===更为相似,他们之间也存在一些区别。1. NaN在===中是不相等的,而在Object.is中是相等的2. +0-0===中是相等的,而在Object.is中是不相等的

实现代码如下:

Object.is = function (x, y) {if (x === y) {// 当前情况下,只有一种情况是特殊的,即 +0 -0// 如果 x !== 0,则返回true// 如果 x === 0,则需要判断+0和-0,则可以直接使用 1/+0 === Infinity 和 1/-0 === -Infinity来进行判断return x !== 0 || 1 / x === 1 / y;}// x !== y 的情况下,只需要判断是否为NaN,如果x!==x,则说明x是NaN,同理y也一样// x和y同时为NaN时,返回truereturn x !== x && y !== y;
};

大数相加

题目描述:实现一个add方法完成两个大数相加

let a = "9007199254740991";
let b = "1234567899999999999";function add(a ,b){//...
}

实现代码如下:

function add(a ,b){//取两个数字的最大长度let maxLength = Math.max(a.length, b.length);//用0去补齐长度a = a.padStart(maxLength , 0);//"0009007199254740991"b = b.padStart(maxLength , 0);//"1234567899999999999"//定义加法过程中需要用到的变量let t = 0;let f = 0;   //"进位"let sum = "";for(let i=maxLength-1 ; i>=0 ; i--){t = parseInt(a[i]) + parseInt(b[i]) + f;f = Math.floor(t/10);sum = t%10 + sum;}if(f!==0){sum = '' + f + sum;}return sum;
}

相关文章:

20道前端高频面试题(附答案)

ES6新特性 1.ES6引入来严格模式变量必须声明后在使用函数的参数不能有同名属性, 否则报错不能使用with语句 (说实话我基本没用过)不能对只读属性赋值, 否则报错不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)不能删除不可删除的数据, 否则报错不能删除变量delete p…...

android EditText设置后缀

有两种实现方案。 方案一&#xff1a;是自己写一个TextWatcher。 方案二&#xff1a;是重写TextView的getOffsetForPosition方法&#xff0c;返回一个计算好的offset。 我在工作时&#xff0c;使用的是方案一。在离职之后&#xff0c;我还是对这个问题耿耿于怀&#xff0c;所以…...

prometheus+cadvisor监控docker

官方解释 cAdvisor&#xff08;ContainerAdvisor&#xff09;为容器用户提供了对其运行容器的资源使用和性能特性的了解。它是一个正在运行的守护程序&#xff0c;用于收集、聚合、处理和导出有关正在运行的容器的信息。具体来说&#xff0c;它为每个容器保存资源隔离参数、历史…...

正演(1): 二维声波正演模拟程序(中心差分)Python实现

目录 1、原理&#xff1a; 1&#xff09;二维声波波动方程: ​编辑 2&#xff09;收敛条件&#xff08;不是很明白&#xff09; 3&#xff09;雷克子波 4&#xff09;二维空间衰减函数 5&#xff09;边界吸收条件 (不是很明白。。) 2、编程实现 1&#xff09;参数设置&…...

珠海数据智能监控器+SaaS平台 轻松实现SMT生产管控

数据智能监控器 兼容市面上99%的SMT设备 直接读取设备生产数据与状态&#xff0c;如&#xff1a;计划产出、实际产出、累计产出、停机、节拍、线利用率、直通率、停产时间、工单状态、OEE…… 产品功能价值 ◎ OEE不达标报警&#xff0c;一手掌握生产效能 ◎ 首检/巡检/成…...

习题22对前面21节的归纳总结

笨方法学python --习题22 Vi---Rum 于 2021-01-12 14:16:10 发布 python 习题22 这节内容主要是归纳总结 ex1.py 第一次学习 1.print&#xff1a;打印 2.# &#xff1a;是注释的意思&#xff0c;井号右边的内容不再执行 3.end"":,在句子结尾加上这个就不会再换行…...

使用Vite快速构建前端React项目

一、Vite简介 Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite3,Vite全新的插件架构、丝滑的开发体验,可以和Vue3完美结合。 相比Webpack和Gulp等构建工具…...

人工智能高等数学--人工智能需要的数学知识_微积分_线性代数_概率论_最优化---人工智能工作笔记0024

然后我们看一下人工智能中需要的数学知识 数学知识是重要的,对于理解人工智能底层原理来说很重要,但是工作中 工作中一般都不会涉及的自己写算法之类的,只是面试,或者理解底层原理的时候需要 然后看一下人工智能需要哪些数学知识 这里需要微积分 线性代数 概率论 最优化的知识…...

阿里大数据之路总结

一、数据采集 二、数据同步 2.1、数据同步方式&#xff1a; 数据同步的三种方式&#xff1a;直连方式、数据文件同步、数据库日志解析方式 关系型数据库的结构化数据&#xff1a;MYSQL、Oracle、DB2、SQL Server非关系型数据库的非结构化数据&#xff08;数据库表形式存储&am…...

ABAP中Literals的用法(untyped literal vs. typed literal)

1. 什么是Literals ? Literals的字面意思即“文字”。其实&#xff0c;Literals就是在ABAP代码中直接指定的一个字符串&#xff0c;但注意哦&#xff0c;这个字符串并不意味着其类型一定是string哦。 要弄清这个概念&#xff0c;就要清楚ABAP对于Literals 的定义和处理方式。…...

tensorflow1.14.0安装教程

1首先电脑安装好Anaconda3&#xff08;Anaconda介绍、安装及使用教程 - 知乎 (zhihu.com)&#xff0c;&#xff09; 蟒蛇 |全球最受欢迎的数据科学平台 (anaconda.com) 2打开Anaconda Prompt&#xff08;本人更新win11后&#xff0c;主菜单不再显示&#xff0c;那么我们可以打…...

C++赋值运算符重载

赋值运算符重载 目录赋值运算符重载示例1&#xff1a;示例2&#xff1a;示例3&#xff1a;示例4&#xff1a;很巧妙的是&#xff0c;在编写这篇文章时&#xff08;2023年2月27日&#xff09;&#xff0c;再加100天就是6月7日&#xff0c;恰好是今年高考的百日誓师&#xff01; …...

网络性能总不好?专家帮你来“看看”— CANN 6.0 黑科技 | 网络调优专家AOE,性能效率双提升

随着深度学习模型复杂度和数据集规模的增大&#xff0c;计算效率的提升成为不可忽视的问题。然而&#xff0c;算法网络的多样性、输入数据的不确定性以及硬件之间的差异性&#xff0c;使得网络调优耗费巨大成本&#xff0c;即使是经验丰富的专家&#xff0c;也需要耗费数天的时…...

Qss自定义属性

QSS自定义属性 更多精彩内容&#x1f449;个人内容分类汇总 &#x1f448;&#x1f449;QSS样式学习 &#x1f448;文章目录QSS自定义属性[toc]前言一、实现效果二、使用方式1.QSS设置Q_PROPERTY属性样式2.QSS设置动态属性样式3.qproperty-<属性名称>语法14.qproperty-&…...

连接金蝶云星空,数据交互轻松搞定!丨三叠云

金蝶云星空 路径 拓展 >> 插件 功能简介 新增插件「金蝶云星空」。 用户可通过配置「金蝶云星空」插件&#xff0c;就可以实时获取「金蝶云星空」的数据&#xff0c;同时支持回填数据至金蝶系统内。 地图视图 路径 表单 >> 表单设计 功能简介 新增「地图视…...

JSX是什么,React为什么使用JSX,babel怎么转译JSX的

JSX是什么&#xff0c;React为什么使用JSX&#xff0c;babel怎么转译JSX的 在前端的框架中有两种“描述UI”的方案&#xff0c;一种是JSX语法&#xff0c;一种是模板语言。 其中React就是选择的JSX&#xff0c;Vue就是选择的模板语言。 JSX其实就是一个语法糖&#xff0c;在…...

从工地转行软件测试,拿下13k+年终奖是种什么体验?

最近&#xff0c;一则名为《我&#xff1a;毕业五年&#xff0c;存款5000。她:中传硕士&#xff0c;火锅店保洁》的视频走红网络&#xff0c;两位名校毕业生看似高开低走的就业经历&#xff0c;引起了很多人的共鸣。她们所传达的并不是所谓的躺平、摆烂&#xff0c;而是希望更多…...

前端面试题 —— 计算机网络(二)

目录 一、POST和PUT请求的区别 二、GET方法URL长度限制的原因 三、页面有多张图片&#xff0c;HTTP是怎样的加载表现&#xff1f; 四、HTTP2的头部压缩算法是怎样的&#xff1f; 五、说一下HTTP 3.0 六、HTTP协议的性能怎么样&#xff1f; 七、数字证书是什么&#xff1f…...

山东大学机器学习期末2022

接力&#xff1a;山东大学机器学习期末2021 本来是不想写的&#xff0c;因为不想回忆起考试时啥也不会的伤痛&#xff0c;没想到最后给分老师海底捞&#xff0c;心情好了一些&#xff0c;还是一块写完 备考建议&#xff1a;多看ppt&#xff0c;多看ppt&#xff0c;多看ppt 山东…...

FEBC2022|打造VR内容生态闭环 佳创视讯持续加码轻量化内容建设

2月24日&#xff0c;由陀螺科技主办的未来商业生态链接大会作为 2023 癸卯兔年开年率先召开的行业重要影响力盛会在深圳成功召开。今年大会云集了科技、软件、游戏、XR等元宇宙领域的世界500强、上市公司及行业独角兽企业&#xff0c;围绕游戏、元宇宙、XR、数字营销等多项热门…...

Redis常见的数据类型命令

文章目录Redis 常见的数据类型及命令一、常见的NoSQL二、Redis 简介三、key 键的一些操作命令四、Redis的五种基本数据结构1、String&#xff08;字符串&#xff09;介绍常用命令1.1 set/get1.2 append1.3 strlen1.4 setex1.5 mset/mget1.6 setrange/getrange1.7 setnx1.8 incr…...

Python3+Selenium3自动化测试-(准备)

最近在学习selenium自动化测试相关的内容&#xff0c;所以将实际准备情况做一记录&#xff0c; # 系统&#xff1a;win10(64位) # 浏览器&#xff1a;Chrome(67.0)、Firefox(61.0)、IE # python版本&#xff1a;3.6.5 # Selenium&#xff1a;3.13.0Selenium简介 Selenium是一…...

VUE的安装和创建

安装node.js 进入node官网进行下载&#xff0c;然后一直下一步。 测试是否安装成功&#xff1a; 命令提示窗下执行&#xff1a;npm -v 若出现版本号&#xff0c;则安装成功。 安装npm源&#xff1a; npm config set registry http://registry.npm.taobao.org 查看&#xff1a;…...

ETL工具(kettle) 与 ETL产品(BeeloadBeeDI) 差之毫厘,谬以千里

E T L——是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。工具——原指工作时所需用的器具&#xff0c;后引申为达…...

轻松入门H3C无线AC上线AP【入门篇】

我们知道华三的最新模拟器支持了无线AC的配置&#xff0c;今天就浅浅的出个无线AC的教程&#xff0c;你上也会的那种。今天我们模拟的是二层环境下&#xff0c;笔者准备了2个AP&#xff0c;以此展示AP上线到AC的教程&#xff0c;并且用手机测试WiFi连接正常&#xff0c;且客户端…...

尚医通(二十五)就医提醒和预约统计

目录一、就医提醒1、搭建定时任务模块二、后台管理系统-预约统计功能1、开发每天预约数据接口2、封装远程调用接口3、搭建统计分析模块4、整合统计功能前端一、就医提醒 我们通过定时任务&#xff0c;每天8点执行&#xff0c;提醒就诊 1、搭建定时任务模块 &#xff08;1&…...

网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取

文章目录一、网页中的音频数据源二、FFT&#xff1a;时域转频域三、信号的特征分析四、信号的识别提取附录音频数字信号处理 Audio DSP (Digital Signal Processing) 是一个复杂又专业的话题&#xff0c;本文介绍的是如何从音频中实时分析和识别出特定频率信号的一种方法&#…...

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案

uniapp结合腾讯云及时通信IM的聊天记录本地存储方案 UniApp 是一个跨平台的应用开发框架&#xff0c;可以使用 Vue.js 开发多端应用&#xff08;如H5、小程序、App等&#xff09;。在 UniApp 中&#xff0c;可以使用 uni-app 提供的文件系统 API 完成本地文件存储的操作。 1.…...

PyQGIS开发 -- 基础学习笔记

1、自主学习QGIS开发虽然QGIS本身功能强大&#xff0c;但还是架不住我们要编写新的功能、新的业务流程、新的算法。前文中我们提到&#xff0c;扩展QGIS有2种方法&#xff0c;一是用Python、C来写QGIS的插件&#xff1b;另一种就是基于QGIS的C API开发独立应用程序。然而后者资…...

一篇了解模块打包工具之 ——webpack(1)

本篇采用问题引导的方式来学习webpack&#xff0c;借此梳理一下自己对webpack的理解&#xff0c;将所有的知识点连成一条线&#xff0c;形成对webpack的记忆导图。 最终目标&#xff0c;手动构建一个vue项目&#xff0c;目录结构参考vue-cli创建出来的项目 一、问问题 1. 第…...

安装 wordpress多用户/广告投放网

this.p{ m:2,b:2,loftPermalink:,id:fks_087065080095089068082086086065072084084066087087095066082,blogTitle:梯度的极坐标表达式,blogAbstract:\r\n\r\n有同学问&#xff1a;梯度的极坐标表达式是怎么得来的&#xff1f; 下面给出推导详细过程。\r\n\r\n\r\n\r\n\r\n,blog…...

怎么免费做自己的网站/长沙网络推广哪家

可以采用以下方法在o(n)时间内选出最大值。 图示&#xff1a; 代码&#xff1a; int Max(int *A, int arraysize) {int max A[0], i;for(i0; i<arraysize; i){if(max < A[i]){max A[i];}}return max; }//总共比较 n-1 次 现在有两个问题&#xff1a; 1&#xff09;如何…...

国外学做咖啡的网站/在线培训考试系统

安装ORALCE 在做检验时提示缺少依赖包&#xff0c;其实是因为系统是64位系统而这些包都是32位的&#xff0c;This is a prerequisite condition to test whether the package "libaio-0.3.105" is available on the systemThis is a prerequisite condition to test…...

校本教研网站建设方案/优化设计答案四年级上册语文

Numpy数组的索引是一个内容丰富的主题&#xff0c;因为选取数据子集或单个元素的方式有很多。一维数组很简单&#xff0c;跟Python列表的功能差不多 1 In [1]: import numpy as np2 3 In [2]: arr np.arange(10)4 5 In [3]: arr 6 Out[3]: array([0, 1, 2, 3, 4, 5, 6, 7, 8, …...

国外网站 国内做镜像/seo公司发展前景

实现思想&#xff1a; 1、定义好成员全局私有变量&#xff0c;2、将事件监听器封装成一个方法&#xff0c;3、GUI图像界面写在构造方法里面&#xff0c;4、将事件监听器在构造方法中调用&#xff0c;5、在主方法中定义下拉框内容&#xff0c;用数组与二维数组实现给构造方法传参…...

西安官网优化报价/百度seo权重

我的游戏学习日志57———类型游戏策划&#xff08;1.4&#xff09;—动作游戏&#xff08;4&#xff09; (上接)1.动作游戏策划-设计元素&#xff1a; <9>惊喜 产生惊喜的方式&#xff1a;设置隐藏元素、跳关、额外奖励 ①隐藏元素&#xff1a;包括隐藏道具、隐藏关卡、…...