前端面试练习24.3.7

目录

1.类型转换练习

2.数据之间运算

算术运算

比较运算

逻辑运算

3.动态执行JS(类似eval方法)

1.eval()方法

2.setTimeout

3.创建DOM节点进行添加

4.Function的最后一个参数当作函数体直接运行

4.promise工具函数练习

5.统计字符频率写法的发散思维

6.深拷贝和浅拷贝

深拷贝的一些方法

手动递归赋值

JSON的序列化与反序列化

第三方的库(略)


1.类型转换练习

对象转原始类型

1.先调用对象的valueOf方法,如果返回原始类型,则直接返回

2.如果valueOf返回的不是原始类型,则调用toString方法,如果返回原始类型,则直接返回

3.如果toString返回的不是原始类型,则报错

原始转字符串

例子:

  • String(null)'null'
  • String(undefined)'undefined'
  • String(123)'123'
  • String(true)'true'
  • String(true)'false'

原始转数字

  • Number(true)1
  • Number(false)0
  • Number(null)0
  • Number(undefined)NaN
  • Number('\n')0
  • Number('123')123
  • Number('123abc')NaN

所有转Boolean

记住为false的

  • Boolean(null)false
  • Boolean(undefined)false
  • Boolean(0)false
  • Boolean('')false
  • Boolean(NaN)false
// 定义所有的JS类型
let str = 'asdf'
let num = 123
let bool = true
let und = undefined
let nul = nulllet obj = {}
let arr = []//JS类型转换规则
// 对象转原始类型
// 1.先调用对象的valueOf方法,如果返回原始类型,则直接返回
// 2.如果valueOf返回的不是原始类型,则调用toString方法,如果返回原始类型,则直接返回
// 3.如果toString返回的不是原始类型,则报错// 原始转对象,不修改方法
const fun0 = () => {console.log(obj.valueOf(), obj.toString()) // [object Object],'[object Object]';console.log('obj->str', String(obj), String(obj.valueOf()), String(obj.toString())) // '[object Object]', '[object Object]', '[object Object]'console.log('obj->number', Number(obj), Number(obj.valueOf()), Number(obj.toString())) // NaN,NaN,NaN
}// 原始转对象,修改 valueOf 方法
const fun1 = () => {obj = {valueOf: function () {return 1}}console.log('obj->number', Number(obj), Number(obj.valueOf()), Number(obj.toString())) // 1,1,NaN
}
// 原始转对象,修改 valueOf 和 toString 方法
const fun2 = () => {obj = {valueOf: function () {return {}},toString: function () {return 1}}console.log('obj->number', Number(obj), Number(obj.valueOf()), Number(obj.toString())) // 1,NaN,1
}
// 原始转对象,修改 valueOf 和 toString 方法
const fun3 = () => {obj = {valueOf: function () {return {}},toString: function () {return {}}}console.log('obj->number', Number(obj), Number(obj.valueOf()), Number(obj.toString())) // 报错
}
fun1()
fun2()
fun3()// 其他的转换
const other_change = () => {// 原始转字符串console.log(String(null), String(undefined), String(123), String(true)); // 'null','undefined','123',true// 原始转数字console.log('bool->number', Number(true), Number(false)) // 1,0console.log('null/undefined->number', Number(null), Number(undefined));// 0,NaNconsole.log('str->number', Number('\n'), Number('123'), Number('123abc'));// 0,123,NaN// 所有转boolconsole.log(Boolean(null), Boolean(undefined), Boolean(0), Boolean(''), Boolean(NaN)) // false,false,false,false,false
}// other_change()

2.数据之间运算

算术运算

+,-, *, /, %, ++, --

规则:必须是原始数据类型

1.转换为数字然后运算

2.x+y其中一方是字符串,则都转换为字符串然后拼接

3.NaN和任何类型算术运算都得到NaN

比较运算

1.>,<,>=,<=,双方转原始

1.1转数字比较

1.2都是字符串,比较字典顺序

1.3两边存在NaN为false

2.===

2.1.类型和值必须相同

2.2两端存在NaN一定返回false

3.==

3.1两端类型相同比较值

3.2都是原始类型 转换成数字比较

3.3原始和对象,对象转原始,再都转数字

3.4undefined和null只有相互比较或是自身比较才返回 true

4.5两端存在NaN一定返回false

4.!= !== 相等取反

逻辑运算

!,&&, ||, ?:

转换为Boolean,然后比较

3.动态执行JS(类似eval方法)

1.eval()方法

同步执行,打印当前作用域

var a =1
const fun1 = (code)=>{var a =2eval(code)
}fun1('console.log("a",a)') // a 2
console.log('你好');
// 2 ,你号

2.setTimeout

异步,全局作用域

var a =1
const fun1 = (code)=>{var a =2setTimeout(code)
}fun1('console.log("a",a)') // a 1
console.log('你好');
//  你好,a 1

3.创建DOM节点进行添加

同步方法,全局作用域,弊端产生一个元素

var a =1
const fun1 = (code)=>{var a =2const script = document.createElement('script')script.innerHTML = codedocument.head.appendChild(script)
}fun1('console.log("a",a)') // a 1
console.log('你好');
//  a 1 你好

 

4.Function的最后一个参数当作函数体直接运行

同步方法,全局作用域

var a =1
const fun1 = (code)=>{var a =2new Function(code)()
}fun1('console.log("a",a)') // a 1
console.log('你好');
//  a 1 你好

4.promise工具函数练习

 promise的标准有PromiseA+和官方ES Promise

"thenable" 对象是指具有 then 方法的对象。

一个符合规范的 then 方法需要遵循以下要求:

  1. 它是一个函数,接受两个参数:onFulfilledonRejected,都是可选的回调函数。
  2. 当 Promise 状态变为 fulfilled 时,then 方法应该调用 onFulfilled 回调函数。
  3. 当 Promise 状态变为 rejected 时,then 方法应该调用 onRejected 回调函数。
  4. then 方法应该返回一个新的 Promise 对象。
// 定义 Promise.prototype.catch 方法,用于捕获 Promise 链中的错误
Promise.prototype.catch = function (onRejected) {// 返回一个新的 Promise 对象,通过调用 then 方法,指定 onRejected 回调函数return this.then(undefined, onRejected)
}// 定义一个函数,用于判断一个对象是否类似于 Promise
const isPromiseLike = function (obj) {// 如果对象存在且具有 then 方法,则认为它类似于 Promisereturn obj && typeof obj.then === 'function'
}// 定义 Promise.prototype.resolve 方法,用于创建一个已解决的 Promise 对象
Promise.prototype.resolve = function (value) {// 如果 value 已经是 Promise 对象,则直接返回if (value instanceof Promise) return value// 如果 value 类似于 Promise 对象,则返回一个新的 Promise 对象,并使用 value 的 then 方法if (isPromiseLike(value)) {return new Promise((resolve, reject) => {value.then(resolve, reject)})}// 如果 value 是普通值,则返回一个已解决的 Promise 对象return new Promise(resolve => resolve(value))
}// 定义 Promise.prototype.reject 方法,用于创建一个已拒绝的 Promise 对象
Promise.prototype.reject = function (reason) {// 返回一个新的 Promise 对象,立即执行 reject 函数,将 reason 作为拒绝的原因return new Promise((resolve, reject) => {reject(reason)})
}

5.统计字符频率写法的发散思维

简单类型的题目

一般写法

let str = 'qqwweqrqrqrqrqrqrqrsdvavsbbsavfGHSHJJMFJ'const my_sort = (str)=>{str = str.split('')str = str.sort((a,b)=>a>b ? 1: a===b ? 0 : -1)return str
}const fun1 = (str) => {let res = {}str = my_sort(str)for (let i = 0; i < str.length; i++) {if (res[str[i]]) {res[str[i]]++} else {res[str[i]] = 1}}return res
}
console.log(fun1(str))

独特写法

let str = 'qqwweqrqrqrqrqrqrqrsdvavsbbsavfGHSHJJMFJ'const my_sort = (str)=>{str = str.split('')str = str.sort((a,b)=>a>b ? 1: a===b ? 0 : -1)return str
}const fun2 = (str)=>{str = my_sort(str)let res = [...str].reduce((r,cur)=> (r[cur]++ || (r[cur] = 1),r),{})return res
}
console.log(fun2(str))

6.深拷贝和浅拷贝

知识点:

1.基本数据类型的赋值属于深拷贝,数据内容直接存放在栈中,赋值时直接是数据内容的给予

2.引用数据类型一般方法都属于浅拷贝

赋值时,新的对象获取到的是原对象存放在栈中的是一个指针,真实的数据内容是储存在堆中,栈中的指针指向队中的数据对应的地址。

所以修改新对象的值时,其实修改的是他们公共的堆内存的数据

 

所以为了一些不必要的错误,我们可以通过 

创建一个新的对象,遍历需要克隆的对象,将需要克隆对象的属性依次添加到新对象上,返回新对象。这种方式进行引用数据类型的深拷贝。

深拷贝的一些方法

手动递归赋值

function deepCopy(obj) {if (obj === null || typeof obj !== 'object') {return obj;}const newObj = Array.isArray(obj) ? [] : {};for (let key in obj) {newObj[key] = deepCopy(obj[key]);}return newObj;
}

JSON的序列化与反序列化

let originalObject = { a: 1, b: { c: 2 } };
let deepCopyObject = JSON.parse(JSON.stringify(originalObject));

第三方的库(略)

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

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

相关文章

js的类等于什么操作产生的?

class 类定义提升 class如和产生的对象&#xff1f; 类定义 实际上&#xff0c;类是“特殊的函数”&#xff0c;就像你能够定义的函数表达式和函数声明一样&#xff0c;类语法有两个组成部分&#xff1a;类表达式和类声明。 提升 函数声明和类声明之间的一个重要区别在于&am…

基于springboot+vue的医疗挂号管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

vcruntime140.dll丢失的修复办法详细介绍以及详细步骤

当电脑丢失vcruntime140.dll文件时&#xff0c;电脑会出现关于vcruntime140.dll丢失的错误提示&#xff0c;vcruntime140.dll文件包含许多重要的函数和资源&#xff0c;若缺少或丢失该文件&#xff0c;可能会导致电脑出现异常状况。今天就来和大家说说如果电脑出现关于vcruntim…

获取别人店铺的所有商品API接口

使用淘宝淘口令接口的步骤通常包括&#xff1a; 注册成为淘宝开放平台的开发者&#xff1a;在淘宝开放平台网站上注册账号并完成认证。 创建应用以获取API密钥&#xff1a;在您的开发者控制台中创建一个应用&#xff0c;并获取用于API调用的密钥&#xff0c;如Client ID和Clie…

【JavaEE初阶 -- 计算机核心工作机制】

这里写目录标题 1.冯诺依曼体系2.CPU是怎么构成的3.指令表4.CPU执行代码的方式5.CPU小结&#xff1a;6.编程语言和操作系统7. 进程/任务&#xff08;Process/Task&#xff09;8.进程在系统中是如何管理的9. CPU分配 -- 进程调度10.内存分配 -- 内存管理11.进程间通信 1.冯诺依曼…

javaweb学习(day07-手动实现tomcat)

一、引入案例 1 小案例 引出对 Tomcat 底层实现思考 1.1 完成小案例 1.1.1 运行效果 1.2 maven简要介绍 我们准备使用 Maven 来 创建一个 WEB 项目 , 先 简单给小伙伴介绍一下 Maven 是 什 么 , 更加详细的使用&#xff0c;我们还会细讲 , 现在先使用一把 1.3 创…

vue中常用的指令和自定义指令

在Vue中&#xff0c;常用的指令有v-bind、v-on、v-for、v-if、v-show等。自定义指令可以通过Vue.directive()方法来创建。 下面是常用指令和自定义指令的代码示例&#xff1a; v-bind&#xff1a;用于动态绑定HTML属性 <div v-bind:class"{active: isActive}"&…

多个变量指向同一个数组

多个变量中的内存地址是一样的&#xff0c;都是指向当前的数组&#xff0c;存储当前数组对象的地址&#xff0c;因此修改是对当前数组的值进行修改 数组中存储的是null&#xff0c;那么他将不会指向任何数组对象 System.out.println(arr) 输出结果为null&#xff0c;里面没有…

Vue+OpenLayers7入门到实战:webgl图层叠加大量Icon图片到地图,解决叠加超大数据量图片导致浏览器卡住变慢的问题

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 前言 之前已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题。本章介绍补充一下叠加大量图片图标要素到地图的情况下的问题。 二、依赖和使用 "ol": "7.5.2"使用npm安装依…

Vue+OpenLayers7入门到实战:OpenLayers7如何使用gifler库来实现gif动态图图片叠加到地图上

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 前言 OpenLayers7本身不支持gif图片作为图标要素显示到地图上,所以需要通过其他办法来实现支持gif图片。 本章介绍如何使用OpenLayers7在地图上使用gifler库先生成canvas画板,然后通过canvas画板的重绘事件来重新渲染地图…

leetcode 热题 100_最大子数组和

题解一&#xff1a; 动态规划&#xff1a;这是一道经典的动态规划题。维护一个dp数组&#xff0c;dp[i]表示0~i组成的数组的最大子数组和。当数组长度为1时&#xff0c;最大和连续子数组是它本身&#xff0c;也就是dp[i]nums[i]。当数组长度每增加1时&#xff0c;最大和连续子数…

LVGL在VScode中安装模拟器运行配置笔记教程

1、LVGL模拟器工程搭建 LVGL(Light and Versatile Graphics Library,轻巧而多功能的图形库)是一个免费的开放源代码图形库,它提供创建具有易于使用的图形元素,精美的视觉效果和低内存占用的嵌入式GUI所需的一切。本文主要讲述如何实现在VScode中实现LVGL模拟器环境的搭建运行。…

遗传算法理解与代码实战(一)- demo(python手写代码)

遗传算法&#xff08;Genetic Algorithm, GA&#xff09;是模拟自然界中生物进化的机制来搜索最优解的方法。遗传算法属于进化计算的一部分&#xff0c;它借鉴了达尔文的自然选择和孟德尔的遗传学原理。 1、算法背景 遗传算法的灵感来源于生物进化过程。在自然界中&#xff0…

Linux CentOS系统安装Spug并结合内网穿透实现远程访问本地运维平台

目录 前言 1. Docker安装Spug 2 . 本地访问测试 3. Linux 安装cpolar 4. 配置Spug公网访问地址 5. 公网远程访问Spug管理界面 6. 固定Spug公网地址 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊Linux CentOS系统安装Spug并结合…

嵌入式学习day31 网络

网络: 数据传输,数据共享 1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报…

Upload 上传(图片/文件),回显(图片),下载(文件)

1.前端技术&#xff1a;V3 Ant Design Vue 2.后端技术&#xff1a;Java 图片上传/回显&#xff1a; 文件上传回显&#xff1a; 表结构&#xff1a;单文件/图片上传为A表对文件C表 &#xff08;A表field字段 对应 C表id字段&#xff09; 如图&#xff1a;A表中的 vehicle_d…

OracleXE112、plsqldev1207的安装和基本配置

OracleXE112、plsqldev1207的安装和基本配置 OracleXE112、plsqldev1207的安装和基本配置Oracle安装oracle是什么Oracle两个版本下载安装包 安装OracleXE112_Win64注意&#xff1a;安装到空目录下&#xff1b;输入口令&#xff08;记住啊&#xff01;&#xff09;安装成功&…

【b站咸虾米】ES6 Promise的用法,ES7 async/await异步处理同步化,异步处理进化史

课程地址&#xff1a;【ES6 Promise的用法&#xff0c;ES7 async/await异步处理同步化&#xff0c;异步处理进化史】 https://www.bilibili.com/video/BV1XW4y1v7Md/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 图文地址&#xff1a;https://www.b…

批量爬取网站图片脚本

不分文件夹 import requests from bs4 import BeautifulSoup import os from concurrent.futures import ThreadPoolExecutordef download_image(img_url):# 检查图片后缀是否为.jpg或.jpegif img_url.lower().endswith((.jpg, .jpeg)):try:img_response requests.get(img_ur…