Javascript 基础知识 —— 重写数组方法

1、写一个函数,实现深度克隆对象

const obj = {name: "LIYUFAN",age: 25,career: "初级前端工程师",info: {field: ["JS", "CSS", "HTML"],framework: ["React", "Vue", "Angular"],partner: [{name: "张三",age: 18,},{name: "李四",age: 19,},],},hobby: ["study", "sleeping"],
};
function deepClone(origin, target) {var tar = target || {};var type = "[object Array]";for (var i in origin) {if (origin.hasOwnProperty(i)) {if (typeof origin[i] === "object" && origin[i] !== null) {tar[i] = Object.prototype.toString.call(origin[i]) === type ? [] : {};tar[i] = deepClone(origin[i], tar[i]);} else {tar[i] = origin[i];}}}return tar;
}
let res = deepClone(obj);
res.name = "Lee_Yu_Fan";
console.log(obj, res);

2、重写数组forEach方法

/** forEach 有两个参数,第一个参数是回调函数,第二个参数是回调函数this指向的值;如果不传this值为window* 回调函数执行的次数等于数组的长度*/
var arr = [{name:'张三',age:18},{name:'李四',age:18},{name:'王五',age:20}]Array.prototype.myForEach = function (cb) {var arg2 = arguments[1] || window; //this的指向,传第二个参数,this的指向就指向第二个参数,不传第二个参数就指向windowvar _arr = this; //目标对象,这里的this就是调用myForEach函数的数组(在javaScript中,this的指向一般指向调用者)var len = _arr.length; //数组的长度for (var i = 0; i < len; i++) {cb.apply(arg2, [_arr[i], i, _arr]); //执行回调函数,}
};
arr.myForEach(function (item, index, arr) {console.log(item, index, arr);
});

3、重写map

// 重写map
let arr = [{ name: "张三", age: 18 },{ name: "李四", age: 19 },{ name: "王五", age: 20 },
];
/*** 数组的map函数和forEach的用法差不多,唯一的区别是map函数可以返回一个新数组* 因为返回新数组了,就要考虑到深拷贝*/
//---------------- 核心代码开始 ----------------------
Array.prototype.myMap = function (cb) {var _this = arguments[1] || window;var _arr = this;var _len = _arr.length;var newArr = [];var res;for (var i = 0; i < _len; i++) {var _item = deepClone(_arr[i]);res = cb.apply(_this, [_item, i, _arr]);res && newArr.push(res); //有return的时候才返回新数组,没有return的时候返回[]}return newArr;
};
//----------------- 核心代码结束 ----------------------
let res = arr.myMap(function (item, index, arr) {console.log(item, index, arr);
});
console.log(res); //[]
let res2 = arr.myMap(function (item, index, arr) {return item.age + 2;
});
console.log(res2); // [20,21,22]

4、重写filter

// 重写 filter
let arr = [{ name: "张三", age: 18 },{ name: "李四", age: 19 },{ name: "王五", age: 20 },
];
// filter原理:通过true和false进行过滤。如果是true放进新数组中,如果是false就不放进新数组中
Array.prototype.myFilter = function (cb) {var _this = arguments[1] || window;var _arr = this;var _len = _arr.length;var newArr = [];var item;for (var i = 0; i < _len; i++) {item = deepClone(_arr[i]); //如果是对象,要进行深拷贝cb.apply(_this, [item, i, _arr]) ? newArr.push(item) : "";}return newArr;
};
let obj = {age: 18,
};
let result = arr.myFilter(function (item, index, arr) {return item.age > obj.age;
}, obj);
console.log(result); //[ { name: "李四", age: 19 },{ name: "王五", age: 20 },]

5、重写every

// 重写every
//原理:每次都是真才会返回true,有一个为假就会返回false
let arr = [{ name: "张三", age: 18 },{ name: "李四", age: 19 },{ name: "王五", age: 20 },
];
// -------------核心代码 start ---------------
Array.prototype.myEvery = function (cb) {var _this = arguments[1] || window;var _arr = this;var _len = _arr.length;var flag = true;for (var i = 0; i < _len; i++) {if (!cb.apply(_this, [_arr[i], i, _arr])) {flag = false;break;}}return flag;
};
// -------------核心代码 end ---------------
let res = arr.myEvery(function (item, index, arr) {return item.age < this.age;},{ age: 19 }
);
console.log(res); //false
let res2 = arr.myEvery(function (item, index, arr) {return item.age > this.age;},{ age: 17 }
);
console.log(res2); //true

6、重写some

//重写some
// 原理:有一个为真就返回true
let arr = [{ name: "张三", age: 18 },{ name: "李四", age: 19 },{ name: "王五", age: 20 },
];
// ------------ 重写代码start -----------------
Array.prototype.mySome = function (cb) {var _this = arguments[1] || window;var _arr = this;var _len = _arr.length;var flag = false;for (var i = 0; i < _len; i++) {if (cb.apply(_this, [_arr[i], i, _arr])) {flag = true;break;}}return flag;
};
// ----------------重写代码end -------------let res = arr.mySome(function(item,index,arr){return item.age < 18
})
console.log(res) //false
let res1 = arr.mySome(function(item,index,arr){return item.age > 19
})
console.log(res1) //true

7、重写reduce (累计求和)

//原理:回调函数中的第一个参数等于,myReduce函数的第二个参数(全等)
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
Array.prototype.myReduce = function (cb) {var total = arguments[1] || 0;var _arr = this;var _len = _arr.length;for (var i = 0; i < _len; i++) {total = cb(total, _arr[i], i, arr);}return total;
};let res1 = arr.myReduce(function (total, item, index, arr) {return total + item;
});
console.log(res1); //36
let res2 = arr.myReduce(function (total, item, index, arr) {return total + item;
}, 4);
console.log(res2); //40

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

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

相关文章

521源码-免费手游下载-【烽火中原H5】深度体验:横版网页国战手游及WIN学习手工端

【烽火中原H5】深度体验&#xff1a;横版网页国战手游及WIN学习手工端全面解析,烽火中原H5】横板网页国战手游WIN学习手工端语音视频教程营运后台CDK授权后台, 喜欢国战手游的玩家们&#xff0c;你们期待已久的【烽火中原H5】现已上线&#xff01;这款游戏以横版网页的形式呈现…

揭开神秘的“位移主题”面纱 no.16

Kafka中神秘的内部主题&#xff08;Internal Topic&#xff09;__consumer_offsets。 consumer_offsets在Kafka源码中有个更为正式的名字&#xff0c;叫*位移主题*&#xff0c;即Offsets Topic。为了方便今天的讨论&#xff0c;我将统一使用位移主题来指代consumer_offsets。需…

记录贴 Elasticsearch的RestClient进行DSL查询

must&#xff1a;必须匹配每个子查询&#xff0c;类似“与” should&#xff1a;选择性匹配子查询&#xff0c;类似“或” must_not&#xff1a;必须不匹配&#xff0c;不参与算分&#xff0c;类似“非” filter&#xff1a;必须匹配&#xff0c;不参与算分 import cn.huto…

Kali 我来了

Kali 我来了 1、官网下载2、修改密码3、开启SSH远程登录服务4、关闭kali图形化界面 1、官网下载 官方链接: https://www.kali.org/ 下载链接: https://cdimage.kali.org/kali-2024.1/kali-linux-2024.1-vmware-amd64.7z 解压后 直接导入 VmWare 就可使用可爱的小 Kali 了。 …

LabVIEW机器设备的振动监测

振动监测是工业和机械维护中重要的一部分&#xff0c;通过检测和分析机械振动&#xff0c;提前发现潜在故障&#xff0c;确保设备的可靠运行。LabVIEW是一种强大的图形化编程环境&#xff0c;非常适合用于振动监测系统的开发和实施。以下从多个角度详细介绍LabVIEW在振动监测中…

管理能力学习笔记十一:如何通过反馈做好辅导

关于辅导的常见错误 辅导过于细致 辅导的首要障碍: 不相信对方的潜力需要有成长型思维&#xff1a;即便员工现在不OK&#xff0c;未来会更好因材施教&#xff1a;对不同风格的下属&#xff0c;采取不同的辅导风格 凡事亲力亲为 作为管理者&#xff0c;我们要做的是&#xf…

【Unity2D 2022:Particle System】添加粒子特效

一、创建粒子系统游戏物体 1. 创建粒子系统游戏物体Smog Effect 2. 给粒子特效添加精灵贴图 &#xff08;1&#xff09;启用Texture Sheet Animation&#xff08;纹理表动画&#xff09; &#xff08;2&#xff09;点击加号添加一个纹理&#xff0c;并将两张厌恶图片导入到纹理…

【YashanDB知识库】OCI驱动类问题定位方法

【标题】OCI驱动类问题定位方法 【需求分类】故障分析 【关键字】OCI 【需求描述】由于我们的OCI接口目前尚不完善&#xff0c;经常会遇见OCI接口能力不足导致应用功能无法运行的问题&#xff0c;需要定位手段确定底层是哪个接口报错 【需求原因分析】方便一线数据库管理员…

使用jdk自带jhat工具排查OOM问题

使用jdk自带jhat工具排查OOM问题 OOM java.lang.OutOfMemoryError: Java heap space排查步骤 编写一个测试类 public class TestJVM {Testpublic void test1() throws InstantiationException, IllegalAccessException {List<A> list new ArrayList<>();for (i…

做抖音小店什么类目最容易爆单?搞懂这三点就明白了!

大家好&#xff0c;我是电商糖果 我们刚接触电商的时候&#xff0c;一定经常听一些同行念叨&#xff0c;选择大于努力&#xff0c;类目大于一切。 很多电商人把选类目比做定生死。 类目选对了&#xff0c;让你轻松飞升不是问题&#xff0c;类目选错了&#xff0c;基本被判了…

【YOLOv10】使用yolov10训练自己的数据集/验证 /推理 /导出模型/ONNX模型的使用

YOLOv10: 实时端到端的目标检测。 性能 YOLOv10比最先进的YOLOv9延迟时间更低&#xff0c;测试结果可以与YOLOv9媲美&#xff0c;可能会成为YOLO系列模型部署的“新选择”。 目录 1 数据准备 2 配置文件 3 训练 4 验证 5 预测 6 导出模型 7 ONNX模型的使用 官方论文地址…

学习笔记——动态路由协议——OSPF(OSPF网络类型1)

五、OSPF网络类型 网络类型&#xff1a;是指运行OSPF网段的二层链路类型。 1、OSPF网络类型简介 (1) OSPF网络类型 MA(Multi-Access &#xff0c;多路访问)在一个网段内的节点数量不限制(一条链路上有多个访问点)。MA的网络一般分为两种&#xff1a; 1)广播式多路访问网络…

oracle数据库无法连接问题排查

查看数据库告警日志如下图。发现问题时间段&#xff0c;没有数据库服务故障报错&#xff0c;但是存在较多TNS-12535、12560、12170、00505错误&#xff1a; 通过检查问题时间段应用日志&#xff0c;也记录了Caused by:java.sql.SQLRecoverableException: IO 错误: Connection r…

音乐传奇告别之作:《杰作》未解之谜❗❗

坂本龙一的《杰作》不仅是一部音乐会纪录电影&#xff0c;更是他赠予世界的一封深情告别信。 这部影片精心收录了这位音乐巨匠生前最后一场钢琴独奏音乐会的珍贵瞬间&#xff0c; 其中涵盖了《圣诞快乐&#xff0c;劳伦斯先生》、《末代皇帝》、《水》等二十首令人陶醉的经典…

誉天Linux云计算架构师就业班要学习哪些内容?

课程设计思路&#xff1a; 根据十多年来毕业学员的就业和反馈&#xff0c;对数百名学员的就业回访;Linux运维&#xff0c;云计算&#xff0c;高并发&#xff0c;分布式&#xff0c;容器&#xff0c;云原生&#xff0c;自动化等是目前市场上就业情况最好&#xff0c;需求量最大&…

Python面向对象学习笔记

Python面向对象编程 记录人&#xff1a; 李思成 时间&#xff1a; 2024/05/01至2024/05/23 课程来源&#xff1a; B站Python面向对象 1.面向对象编程概述 官方概述 程序是指令的集合&#xff0c;运行程序时&#xff0c;程序中的语句会变成一条或多条指令&#xff0c;然后…

AI企业需要“联盟营销”?一文带你探索AI企业营销新玩法!

为什么联盟营销对AI业务有较大优势 联盟营销在电商领域、saas领域与其他产品领域同样有效。在AI业务中&#xff0c;它有效的原因与其他领域大不相同。 高好奇心和试用率 AI领域是创新的热点。它吸引了一群渴望探索和尝试每一项新技术的人群。这种蓬勃的好奇心为聪明的AI企业提…

webpack快速入门---webpack的安装和基本使用

webpack是什么 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 bund…

【Text2SQL 论文】评估 ChatGPT 的 zero-shot Text2SQL 能力

论文&#xff1a;A comprehensive evaluation of ChatGPT’s zero-shot Text-to-SQL capability ⭐⭐⭐⭐ arXiv:2303.13547 这篇论文呢综合评估了 ChatGPT 在 zero-shot Text2SQL 任务上的表现。 dataset 使用了 Spider、Spider-SYN、Spider-DK、Spider-Realistic、Spider-CG…

拼多多(PDD)社招一面原题

未成年游戏退费 5 月 28 日&#xff0c;中国互联网协会发布《未成年人网络游戏服务消费管理要求&#xff08;征求意见稿&#xff09;》团体标准。 该标准是游戏行业首个完整的消费管理规范&#xff0c;可用于未成年人游戏消费退费纠纷解决&#xff0c;也可为相关行政部门、司法…