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

news2024/11/13 15:04:35

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的指向就指向第二个参数,不传第二个参数就指向window
  var _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.coloradmin.cn/o/1715107.html

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

相关文章

jmeter多用户并发登录教程

有时候为了模拟更真实的场景&#xff0c;在项目中需要多用户登录操作&#xff0c;大致参考如下 jmx脚本&#xff1a;百度网盘链接 提取码&#xff1a;0000 一&#xff1a; 单用户登录 先使用1个用户登录&#xff08;先把1个请求调试通过&#xff09; 发送一个登录请求&…

DSM驾驶行为分析系统在渣土车管理中的应用

随着科技的不断进步&#xff0c;智能交通系统正逐渐成为现代交通管理的重要工具。其中&#xff0c;DSM驾驶行为分析系统以其独特的功能和优势&#xff0c;在提升驾驶安全性、优化驾驶员管理等方面发挥着重要作用。索迪迈科技将DSM驾驶行为分析系统成功应用于渣土车管理中&#…

深兰科技获评2024年度人工智能出海先锋奖

5月25日&#xff0c;以“亚洲新势力&#xff1a;创新、融合与可持续发展”为主题的亚洲品牌经济峰会2024深圳会议在深圳益田威斯汀酒店举办。本次活动由中国亚洲经济发展协会指导&#xff0c;亚洲国际品牌研究院主办&#xff0c;旨在搭建品牌创新与经济发展交流平台&#xff0c…

服务器感染了. rmallox勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 近年来&#xff0c;随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;勒索病毒作为一种严重的网络威胁&#xff0c;对个人和企业数据造成了巨大的威胁。本文将重点介绍.rmallox勒索病毒的特点、传播途径以及应对策略&#xff0c;旨…

基于 FastAI 文本迁移学习的情感分类(93%+Accuracy)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

J.搬砖【蓝桥杯】/01背包+贪心

搬砖 01背包贪心 思路&#xff1a;要让重量更小的在更前面&#xff0c;价值更大的在更后面&#xff0c;vi−wj>vj−wi viwi>vjwj 第 i 个箱子放在第 j 个箱子下面就显然更优。所以进行排序再用01背包即可。 #include<iostream> #include<algorithm> #defi…

vs工程添加自定义宏

一、简介 用户可以添加自定义宏变量方便工程路径名称的修改和配置 例&#xff1a;$(SolutionDir) 为解决方案路径&#xff0c;$(PojectDir) 为工程所在路径 测试环境&#xff1a;vs2017&#xff0c;qt5.14.0 二、配置 1、打开属性窗口&#xff1a;视图-》其他窗口-》属性管…

Android笔记--应用安装

这一节了解一下普通应用安装app的方式&#xff0c;主要是唤起系统来安装&#xff0c;直接上代码: 申请权限 <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:name"android.permission.WRITE_EXT…

HaloDB 的 Oracle 兼容模式

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ 前倾回顾 前面介绍了“光环”数据库的基本情况和安装办法。 哈喽&#xff0c;国产数据库&#xff01;Halo DB! 三步走&#xff0c;Halo DB 安装指引 ★ HaloDB是基于原生PG打造的新一代高性能安…

Python Selenium 详解:实现高效的UI自动化测试

落日余辉&#xff0c;深情不及久伴。大家好&#xff0c;在当今软件开发的世界中&#xff0c;自动化测试已经成为保障软件质量和快速迭代的重要环节。而在自动化测试的领域中&#xff0c;UI自动化测试是不可或缺的一部分&#xff0c;它可以帮助测试团队快速验证用户界面的正确性…

爬虫案例(读书网)

一.我们还是使用简单的bs4库和lxml&#xff0c;使用xpath&#xff1a; 导入下面的库&#xff1a; import requests from bs4 import BeautifulSoup from lxml import etree 我们可以看见它的div和每个书的div框架&#xff0c;这样会观察会快速提高我们的简单爬取能力。 二.实…

Nginx网页服务

nginx的配置: 1、全局块&#xff1a;全局配置&#xff0c;对全局生效&#xff1b; 2、events块&#xff1a;配置影响 Nginx 服务器与用户的网络连接&#xff1b; 3、http块&#xff1a;配置代理&#xff0c;缓存&#xff0c;日志定义等绝大多数功能和第三方模块的配置&#xf…

C语言---文件操作

【C语言详解】——文件操作&#xff08;建议收藏&#xff09;_c语言 写文件原理-CSDN博客 一、文件的读取 # define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<errno.h> #include<string.h>int main() {FILE * pffopen("C:\\Users\\zhw\\De…

Java中的ORM框架——myBatis

一、什么是ORM ORM 的全称是 Object Relational Mapping。Object代表应用程序中的对象&#xff0c;Relational表示的是关系型数据库&#xff0c;Mapping即是映射。结合起来就是在程序中的对象和关系型数据库之间建立映射关系&#xff0c;这样就可以用面向对象的方式&#xff0c…

Vue3使用Composition API实现响应式

title: Vue3使用Composition API实现响应式 date: 2024/5/29 下午8:10:24 updated: 2024/5/29 下午8:10:24 categories: 前端开发 tags: Vue3CompositionRefsReactiveWatchLifecycleDebugging 1. 介绍 Composition API是Vue.js 3中新增的一组API&#xff0c;用于在组件中组…

服装服饰商城小程序的作用是什么

要说服装商家&#xff0c;那数量是非常多&#xff0c;厂家/经销门店/小摊/无货源等&#xff0c;线上线下同行竞争激烈&#xff0c;虽然用户群体广涵盖每个人&#xff0c;但每个商家肯定都希望更多客户被自己转化&#xff0c;渠道运营方案营销环境等不可少。 以年轻人为主的消费…

30【Aseprite 作图】桌子——拆解

1 桌子只要画左上方&#xff0c;竖着5&#xff0c;斜着3个1&#xff0c;斜着两个2&#xff0c;斜着2个3&#xff0c;斜着一个5&#xff0c;斜着一个很长的 然后左右翻转 再上下翻转 在桌子腿部分&#xff0c;竖着三个直线&#xff0c;左右都是斜线&#xff1b;这是横着水平线不…

使用NuScenes数据集生成ROS Bag文件:深度学习与机器人操作的桥梁

在自动驾驶、机器人导航及环境感知的研究中&#xff0c;高质量的数据集是推动算法发展的关键。NuScenes数据集作为一项开源的多模态自动驾驶数据集&#xff0c;提供了丰富的雷达、激光雷达&#xff08;LiDAR&#xff09;、摄像头等多种传感器数据&#xff0c;是进行多传感器融合…

检索字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;字符串对象提供了很多应用于字符串查找的方法&#xff0c;这里主要介绍以下几种方法。 &#xff08;1&#xff09;count()方…

Visual Studio 的调试

目录 引言 一、调试的基本功能 设置断点 启动调试 检查变量 逐步执行代码 调用堆栈 使用即时窗口 二、调试技巧 条件断点 日志断点 数据断点 异常调试 三、调试高级功能 远程调试 多线程调试 内存调试 性能调试 诊断工具 四、调试策略与最佳实践 系统化的…