前端面试题(JS篇三)

news2024/9/23 11:15:10

一、|| 和 && 操作符的返回值?

|| 和 && 首先会对第一个操作数执行条件判断,如果其不是布尔值就先进行 ToBoolean 强制类型转换,然后再执行条件判断。

对于 || 来说,如果条件判断结果为 true 就返回第一个操作数的值,如果为 false 就返回第二个操作数的值。

&& 则相反,如果条件判断结果为 true 就返回第二个操作数的值,如果为 false 就返回第一个操作数的值。

|| 和 && 返回它们其中一个操作数的值,而非条件判断的结果。

二、如何将浮点数点左边的数每三位添加一个逗号,如 12000000.11 转化为『12,000,000.11』?

// 方法一
function format(number) {
  return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
}
// 方法二
function format1(number) {
  return Intl.NumberFormat().format(number)
}
// 方法三
function format2(number) {
  return number.toLocaleString('en')
}

三、如何实现数组的随机排序?

// (1)使用数组 sort 方法对数组元素随机排序,让 Math.random() 出来的数与 0.5 比较,如果大于就返回 1 交换位置,如果小于就返回 -1,不交换位置。

function randomSort(a, b) {
  return Math.random() > 0.5 ? -1 : 1;
}

//  缺点:每个元素被派到新数组的位置不是随机的,原因是 sort() 方法是依次比较的。

// (2)随机从原数组抽取一个元素,加入到新数组

function randomSort(arr) {
  var result = [];

  while (arr.length > 0) {
    var randomIndex = Math.floor(Math.random() * arr.length);
    result.push(arr[randomIndex]);
    arr.splice(randomIndex, 1);
  }

  return result;
}

// (3)随机交换数组内的元素(洗牌算法类似)

function randomSort(arr) {
  var index,
    randomIndex,
    temp,
    len = arr.length;

  for (index = 0; index < len; index++) {
    randomIndex = Math.floor(Math.random() * (len - index)) + index;

    temp = arr[index];
    arr[index] = arr[randomIndex];
    arr[randomIndex] = temp;
  }

  return arr;
}

// es6
function randomSort(array) {
  let length = array.length;

  if (!Array.isArray(array) || length <= 1) return;

  for (let index = 0; index < length - 1; index++) {
    let randomIndex = Math.floor(Math.random() * (length - index)) + index;

    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
  }

  return array;
}

四、JavaScript 继承的几种实现方式?

我了解的 js 中实现继承的几种方式有:

(1)第一种是以原型链的方式来实现继承,但是这种实现方式存在的缺点是,在包含有引用类型的数据时,会被所有的实例对象所共享,容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。

(2)第二种方式是使用借用构造函数的方式,这种方式是通过在子类型的函数中调用超类型的构造函数来实现的,这一种方法解决了不能向超类型传递参数的缺点,但是它存在的一个问题就是无法实现函数方法的复用,并且超类型原型定义的方法子类型也没有办法访问到。

(3)第三种方式是组合继承,组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承,通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题,但是由于我们是以超类型的实例来作为子类型的原型,所以调用了两次超类的构造函数,造成了子类型的原型中多了很多不必要的属性。

(4)第四种方式是原型式继承,原型式继承的主要思路就是基于已有的对象来创建新的对象,实现的原理是,向函数中传入一个对象,然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型,只是对某个对象实现一种简单继承,ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。

(5)第五种方式是寄生式继承,寄生式继承的思路是创建一个用于封装继承过程的函数,通过传入一个对象,然后复制一个对象的副本,然后对象进行扩展,最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承,如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。

(6)第六种方式是寄生式组合继承,组合继承的缺点就是使用超类型的实例做为子类型的原型,导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型,这样就避免了创建不必要的属性。

资料参考:

《JavaScript 深入理解之继承》icon-default.png?t=N7T8http://cavszhouyou.top/JavaScript%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E4%B9%8B%E7%BB%A7%E6%89%BF.html

五、Javascript 的作用域链?

作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问,通过作用域链,我们可以访问到外层环境的变量和函数。

作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象(也就是全局对象)始终是作用域链的最后一个对象。

当我们查找一个变量时,如果当前执行环境中没有找到,我们可以沿着作用域链向后查找。

作用域链的创建过程跟执行上下文的建立有关....

资料参考:

《JavaScript 深入理解之作用域链》icon-default.png?t=N7T8http://cavszhouyou.top/JavaScript%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E4%B9%8B%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1926995.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

磁环编码器原理

目录 概述 1 编码器介绍 2 实现原理介绍 2.1 磁环功能分析 2.2 硬件实现方式 3 编码器参数 3.1 编码器精度 3.2 影响编码器精度的因素 4 角度计算方法 4.1 单对极编码器 4.2 磁游标编码器 4.2.1 游标方案实现原理 4.2.2 一个实例磁环分析 5 磁刻线编码器 概述 本…

算法题-二叉树

二叉树 二叉树的理论知识 二叉树的种类 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的节点和度为2的节点&#xff0c;并且度为0的节点在同一层&#xff0c;则此二叉树为满二叉树&#xff08;深度为k&#xff0c;有2^k-1个节点的二叉树&#xff09;。 完全二叉…

PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题&#xff1f;一、了解长事务阻塞的原因&…

降Compose十八掌之『利涉大川』| Canvas

公众号「稀有猿诉」 原文链接 降Compose十八掌之『利涉大川』| Canvas 任何一个GUI框架都会提供大量的预定义的UI部件&#xff0c;让开发者构建UI页面&#xff0c;但有些时候预定义的部件无法满足需求&#xff0c;这时就需要定制&#xff0c;甚至是自定义绘制的内容。对…

快手ip地址为什么会乱跳城市

在数字化时代&#xff0c;网络IP地址已成为我们数字身份的一部分&#xff0c;它既是网络空间中的“门牌号”&#xff0c;也是我们在网络世界中的“身份证”。然而&#xff0c;近期有不少快手用户反映&#xff0c;他们的IP地址在使用过程中出现了乱跳城市的现象&#xff0c;引发…

用好六西格玛培训中的DOE工具,让产品和过程优化不再难——张驰咨询

在六西格玛培训中&#xff0c;试验设计&#xff08;Design of Experiments&#xff0c;简称DOE&#xff09;是一种至关重要的工具&#xff0c;它不仅有助于系统地规划和分析试验&#xff0c;还能显著提升产品和过程的改进效率。DOE通过最小化试验次数&#xff0c;同时最大化信息…

大数据基础:Hadoop之Yarn重点架构原理

文章目录 Hadoop之Yarn重点架构原理 一、Yarn介绍 二、Yarn架构 三、Yarn任务运行流程 四、Yarn三种资源调度器特点及使用场景 Hadoop之Yarn重点架构原理 一、Yarn介绍 Apache Hadoop Yarn(Yet Another Reasource Negotiator&#xff0c;另一种资源协调者)是Hadoop2.x版…

Windows安装PostgreSQL

PostgreSQL是一种功能齐全的对象-关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;它以加州大学伯克利分校计算机系开发的POSTGRES项目为基础&#xff0c;经过多年的发展&#xff0c;已成为一个高度可扩展、支持多种数据类型、具备复杂查询能力的数据库系统。在…

MoonBit 全新语法:级联运算符

✨MoonBit 引入了 “..” 操作符&#xff0c;能够优雅地对可变 API 进行链式调用&#xff0c;同时保持可变 API 签名的整洁&#xff08;依然返回 Unit&#xff09;

昇思25天学习打卡营第19天|sea_fish

打卡第19天。本次学习的内容为生成式中的Diffusion扩散模型。记录学习的过程。 模型简介 什么是Diffusion Model&#xff1f; 如果将Diffusion与其他生成模型&#xff08;如Normalizing Flows、GAN或VAE&#xff09;进行比较&#xff0c;它并没有那么复杂&#xff0c;它们都…

PHP转Go系列 | ThinkPHP与Gin框架之OpenApi授权设计实践

大家好&#xff0c;我是码农先森。 我之前待过一个做 ToB 业务的公司&#xff0c;主要是研发以会员为中心的 SaaS 平台&#xff0c;其中涉及的子系统有会员系统、积分系统、营销系统等。在这个 SaaS 平台中有一个重要的角色「租户」&#xff0c;这个租户可以拥有一个或多个子系…

Text Control 控件教程:文本和表格相互转换

文档布局中的一项典型任务是将使用制表位创建的纯文本表格转换为完全格式化的表格。在本文中&#xff0c;我们将向您展示如何通过检测制表位并将其转换为包含位置的表格单元格&#xff0c;将纯文本表格转换为表格。 TX Text Control 是一款功能类似于 MS Word 的文字处理控件&…

统计HTML 标签CSS 属性 和 JS 关键字

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>统计HTML 标签、CSS 属性 和 JS 关键字</title> </head> <style>#container {display: flex;}li {list-style: none;} </styl…

【青书学堂】2024年第一学期 平面设计(高起专) 作业

【青书学堂】2024年第一学期 平面设计(高起专) 作业 为了方便日后复习&#xff0c;青书学堂成人大专试题整理。 若有未整理的课程&#xff0c;请私信我补充&#xff0c;欢迎爱学习的同学们收藏点赞关注&#xff01;文章内容仅限学习使用&#xff01;&#xff01;&#xff01; 第…

MacCleaner Pro Mac系统综合清理工具包 释放磁盘空间,提高整体性能

MacCleaner Pro 是一款专为 Mac 用户设计的软件工具&#xff0c;用于优化和清理他们的系统。它提供了一系列功能来帮助用户加速他们的 Mac&#xff0c;释放磁盘空间&#xff0c;并提高整体性能。 MacCleaner Pro 的一些主要功能包括&#xff1a; 系统清理&#xff1a;此功能有…

捷配笔记-如何确保PCB信号完整性?

三十年的电子设计历程&#xff0c;是一段从微米到纳米的跨越之旅。1987年&#xff0c;0.5微米工艺曾被视为技术的极限&#xff0c;而如今22纳米工艺已成为行业的新标准。本文将回顾这段技术革新的历程&#xff0c;并探讨在这一过程中我们所面临的挑战与应对策略。 技术演进的里…

python自动化flask库-从数据库里取出数据

实现效果&#xff1a;写一个接口&#xff0c;从mysql数据库读到user表的数据&#xff08;用户名和密码&#xff09;&#xff0c;把数据作为回参 用到的库&#xff1a;flask&#xff0c;pymysql 代码&#xff1a; from flask import Flask, jsonify import pymysql# 连接数据…

python-箭形图案(赛氪OJ)

[题目描述] 小理学习了循环&#xff0c;老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“ ∗ ”组成的箭形图案。输入格式&#xff1a; 一行一个整数 n。输出格式&#xff1a; 针对输入的 n &#xff0c;输出用“ ∗ ”组成的箭形。 …

AirSim+PX4联合仿真

AirSim启动设置 windows上的AirSim要想通过PX4进行控制,需要配置一下参数,进入如下路径的AirSim文件,找到settings.json文件,采用记事本打开,并编辑里面的内容。 可以参考如下内容:其中ip要对应,linux上PX4导入的ip即为此处的localhostip,也是WSL服务的ip。 {"S…

Java中的Stack(栈)(如果想知道Java中有关Stack的知识点,那么只看这一篇就足够了!)

前言&#xff1a;栈&#xff08;Stack&#xff09;是一种基础且重要的数据结构&#xff0c;以其后进先出&#xff08;LIFO, Last In First Out&#xff09;的特性广泛应用于计算机科学和编程中。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼…