前端学习--知识整理

2023-11-04

前端学习--知识整理

一、深、浅拷贝

作者:浪里行舟
链接:https://juejin.im/post/5b5dcf8351882519790c9a2e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

(1)深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的

原因:
基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:栈内存中存储地址,真实的数据存放在堆内存里
在这里插入图片描述
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

(2)赋值和浅拷贝的区别

当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的

在这里插入图片描述

(3)浅拷贝的实现方式

1.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); //wade

2.Array.prototype.concat()

let arr = [1, 3, {
    username: 'kobe'
    }];
let arr2=arr.concat();    
arr2[2].username = 'wade';
console.log(arr);

3.Array.prototype.slice()

let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr);

关于Array的slice和concat方法的补充说明:Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。

4.lodash_.clone(value):浅拷贝

(4)深拷贝的实现方式

1.JSON.parse(JSON.stringify())

let arr = [1, 3, {
    username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

在这里插入图片描述
原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

2.lodash_.cloneDeep(value):深拷贝

(5)这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数

2.手写递归方法
递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

二、JS两位小数相加会出现多位小数

在这里插入图片描述

原因:JS小数精度问题

解决方法:

根据需求要保留n位小数的,数据在计算前先 乘于n个10,再去计算。计算完成后再除于 n个10
在这里插入图片描述

三、css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制

参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。

四、有关JavaScript中 call和apply的描述

(1)call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性
(2)apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入
(3)call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
(4)call()方法和apply()方法的作用相同,他们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化,变化的是其余参数都直接传递给函数。(在使用call()方法时,传递给函数的参数必须逐个列举出来。使用apply()时,传递给函数的是参数数组)如下代码做出解释:

function add(c, d){
	return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

五、利用CSS Sprites(精灵图)能减少图片的字节,能很好地减少网页的http请求,从而大大的提高页面的性能

六、浏览器内核

Wekbit是一个开源的Web浏览器引擎,也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器,Apple手机的默认浏览器,Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由 此可见一斑,理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident,大名鼎鼎的Firefox便是使用的Gecko 内核,而微软的IE系列则使用的是Trident内核。

另外,搜狗浏览器是双核的,双核并不是指一个页面由2个内核同时处理,而是所有网页(通常是标准通用标记语言的应用超文本标记语言)由webkit内核处理,只有银行网站用IE内核

七、原型链

参看资料:https://www.nowcoder.com/questionTerminal/133157fbfae443d18780d5cec6d3334e

function A(x){
	this.x = x;
}
A.prototype.x = 1;

function B(x){
	this.x = x;
}
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;

//答案:2, undefined

//解析:
B.prototype = new A();//形成原型链
//B.prototype = { x: undefined}; 因为A()里存在this.x = x,但是new的时候没有传参,所以x == undefined
var a = new A(2);
//传入参数2,通过this.x = x,得到a.x == 2;
b = new B(3);
//同理 b.x == 3;
delete b.x;
//因为删除了b.x(注意这里的x是B自身的x,而不是prototype里的x。由于删除了b.x,b.x会过原型链找到构造函数A里面的this.x=x但是没有传参赋值,所以undefined)

八、同步、异步

console.log(1);
setTimeout(() => {console.log(2)}, 0);
console.log(3);
Promise.resolve(4).then(b => {
console.log(b);
});
console.log(5);
//1 3 5 4 2

console.log() -> 同步
promise -> 异步,微任务
setTimeout -> 异步,宏任务
执行顺序: 同步 > (异步,微任务) > (异步,宏任务)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端学习--知识整理 的相关文章

  • 如何使用 HTML 元素阻止 THREE.js 光线投射?

    我希望页面上的 HTML 元素阻止 THREE js 光线投射 我该如何执行此操作 我遇到的问题是 当用户单击打开的 DIV 元素时 光线投射会检索场景中的对象 它会检索 DIV 后面的对象 我不想在 DIV 打开时禁用光线投射 我纯粹希望
  • 如何在 Adob​​e Brackets 中使用 const 和 let 禁用 JSLint ES6 错误?

    我用 Google 搜索并浏览了这个网站 但我只能找到 JSHint 而不是 JSLint 的答案 为了摆脱 use function form of use strict 错误 我添加了 jslint node true 但要禁用使用错误
  • 使用 Google Apps 脚本处理数组中输入元素中的多个文件

    我有一个表单 允许从下拉列表中选择一个项目并上传文件 项目的名称和 ID 保存在电子表格文档中 适用于一个文件 但我想上传多个文件 你能帮我修改一下脚本吗 HTML 部分如下所示 div class col md 4 col sm 6 di
  • 谷歌脚本循环性能

    我是 google 脚本的新手 我不确定为什么与 Excel VBA 的简单循环相比 我的性能如此差 我附上了下面的代码 它是一个大约 1200 行的循环 每秒删除大约 2 3 行 我写的脚本效率很低吗 我还不熟悉 Javascript 但
  • Firebase HTTP Cloud Functions - 读取数据库一次

    我有 Firebase HTTPs 功能 该函数需要根据查询参数从 Firebase 数据库读取值 并根据该数据返回结果 Firebase JS SDK 表示要使用以下命令来执行此操作 return firebase database re
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡
  • 从 iframe 关闭父弹出窗口

    在domain1 com 上 我有一个链接 可以打开domain2 com 的弹出窗口 弹出窗口中有一个 iframe 也托管在 domain2 com 上 在 iframe 中 我试图关闭弹出窗口 我似乎对如何做到这一点感到困惑 在 if
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 检查某个元素是否在没有 jQuery 的情况下“聚焦”

    我几乎确信我能在这里找到答案 但我没有成功 您如何检查事件调用时是否选择 聚焦 某个对象 我试过if document activeElement object HTMLBodyElement 但显然 activeElementonLoad
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • Angular2 - 防止复选框被选中

    我有一个每行包含一个复选框的表 在表头中 我有一个Check All切换所有表格行框的复选框 我正在尝试实现一些逻辑 如果复选框的数量将超过特定限制 则显示错误并且不切换表行复选框或checkall盒子本身 有一个问题允许checkAll即
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • 如何使用jquery点击眼睛图标时显示和隐藏密码

    我需要在单击眼睛图标时显示和隐藏用户密码 因此我为此编写了脚本 当我单击眼睛图标时 只有类正在更改 但密码不可见 再次单击斜线眼睛图标 它应该隐藏这两个图标方法不起作用如何解决这个问题
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex
  • React 嵌入脚本标签不可样式化

    我打算将 SurveyMonkey 调查嵌入到我的网站中 用 React 制作 只是让它工作起来很麻烦 但最终这段代码工作了 let script let extractScript

随机推荐

  • SQLi LABS Less-29

    第29关使用GET请求提交参数 在url中构造payload即可 源码中并没有做什么过滤 直接测试注入点即可 在url中输入 1 and true a 源码中的SQL会拼接成下面这样 注释后面的内容不起作用 所以真正执行的SQL是这样的 a
  • Idea 14 最详细创建最简单web项目,并且发布在tomcat

    1 New Project 2 选择Empty Project 然后Next 3 填写Project名称 然后 finish 4 出现如下页面
  • 算法小题4→正整数分解质因数

    题目 将一个正整数分解质因数 例如 输入90 打印出90 2 3 3 5 程序分析 对n进行分解质因数 应先找到一个最小的质数k 然后按下述步骤完成 1 如果这个质数恰等于n 则说明分解质因数的过程已经结束 打印出即可 2 如果n lt g
  • Redis使用总结(三、缓存击穿问题)

    什么是缓存击穿 在谈论缓存击穿之前 我们先来回忆下从缓存中加载数据的逻辑 如下图所示 因此 如果黑客每次故意查询一个在缓存内必然不存在的数据 导致每次请求都要去存储层去查询 这样缓存就失去了意义 如果在大流量下数据库可能挂掉 这就是缓存击穿
  • MATLAB求解函数极值及函数图像

    MATLAB具有求解函数极值以及函数图像的功能 简单举一个例子 求解上述函数极值与图像 1 驻点求解 syms x gt gt y 3 x 2 4 x 4 x 2 x 1 gt gt dy diff y gt gt xz solve dy
  • 防火墙旁挂,策略路由引流

    1 案例拓扑图 2 核心设备AR2的主要配置 2 1AR2 acl number 2000 rule 5 permit source 192 168 1 0 0 0 0 255 匹配需要过滤的路由 traffic classifier li
  • Verilog中阻塞赋值与非阻塞赋值的区别

    最近有初学者会问阻塞 和非阻塞 lt 到底是有什么区别 可能确实有很多的文档对这两种语法的定义展开性讲的已经很天花乱坠 但是对于刚刚学习Verilog语法的小伙伴来说 确实有些绕 这边向大家总结一下个人对这两种赋值的一些简单想法 1 在组合
  • 【翻译】RFP有什么问题?

    科技行业充斥着首字母缩略词和缩写 有时会引发强烈的反应 RfP这些字母总是让我在黯然神伤和极度沮丧之间摇摆不定 为什么呢 因为征求建议书的过程突出了我们采购和交付软件和基础设施的方式是如何被打破的 从表面上看 传统的提案申请程序是非常合理的
  • 【js】Array.prototype.concat和Array.flat、Array.flatMap的关联使用

    Array prototype concat 用于合并两个或多个数组 返回一个新数组 不改变原数组 const arr1 1 2 3 const arr2 4 5 6 const arr3 7 8 9 const result arr1 c
  • 800个有趣句子帮你记忆7000个单词

    800个有趣句子帮你记忆7000个单词 1 With my ownears I clearly heard the heart beat of the nuclear bomb 我亲耳清楚地听到原子弹的心脏的跳动 2 Next year t
  • JS循环及调试

    break 终止某个循环 使程序跳到循环块外的下一条语句 在循环中位于break后的语句将不再执行 for var i 1 i lt 5 i let num parseInt prompt 输入第 i 人的成绩 if num lt 0 do
  • 基于SpringBoot+Vue框架前后端分离的在线购物平台的设计与实现

    系统合集跳转 一 系统环境 运行环境 最好是java jdk 1 8 我们在这个平台上运行的 其他版本理论上也可以 IDE环境 Eclipse Myeclipse IDEA或者Spring Tool Suite都可以 tomcat环境 To
  • 量化投资学习-34:缺口是制造恐慌和疯狂情绪的手段!

    缺口是制造恐慌和疯狂情绪的手段 发生在不同的阶段 目的是不一样的 底部向下 加速赶底 一般发生了连续下跌的末端 在最后制造疯狂下跌的恐慌 这是筑底的标志 底部向上 借助缺口 实现快速拉升 快速脱离底部成本区 大阳 底部跳空缺口是中级行情开始
  • ts项目打包报错 error TS6504: xxxxxx is a JavaScript file. Did you mean to enable the ‘allowJs‘ option?

    项目vue3 ts 打包时一个组件如下错误 解决 加上lang
  • 毕业设计-基于机器学习的网络舆情情感倾向分析

    目录 前言 课题背景和意义 实现技术思路 一 论坛文本采集方法研究 二 文本情感分析理论 三 论坛文本预处理 四 文本表示及特征抽取 五 情感倾向分类器 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业
  • Java中异常问题(异常抛出后是否继续执行的问题)

    public static void test throws Exception throw new Exception 参数越界 System out println 异常后 编译错误 无法访问的语句 代码2 异常被捕获 日志打印了异常
  • Python Pandas修改列类型

    使用astype如下 df column df column astype type type即int float等类型 示例 import pandas as pd data pd DataFrame 1 2 2 2 data colum
  • vue3 setup 组合式api props父子组件传值详解

    vue3组合式api中 父组件通过在子组件上通过v bind传递给子组件数据 子组件通过defineprops函数在子组件中定义父组件中传入子组件的数据就可以接收这些数据 然后可在template中直接使用 但是想要在setup中使用父组件
  • Python之爬虫 搭建代理ip池

    文章目录 前言 一 User Agent 二 发送请求 三 解析数据 四 构建ip代理池 检测ip是否可用 五 完整代码 总结 前言 在使用爬虫的时候 很多网站都有一定的反爬措施 甚至在爬取大量的数据或者频繁地访问该网站多次时还可能面临ip
  • 前端学习--知识整理

    前端学习 知识整理 一 深 浅拷贝 1 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的 2 赋值和浅拷贝的区别 3 浅拷贝的实现方式 1 Object assign 2 Array prototype concat 3