手写操作js数组的常见方法

文章目录

    • 1.push
    • 2.pop
    • 3.unshift
    • 4.shift
    • 5.slice
    • 6.splice
    • 7.forEach
    • 8.map
    • 9.filter
    • 10.some
    • 11.every
    • 12.concat
    • 13.join
    • 14.indexOf
    • 15.lastIndexOf
    • 16.reserve
    • 17.sort
    • 18.find
    • 19.reduce

1.push

// push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
// 末尾添加,返回的是长度,会改变原数组。
Array.prototype.myPush = function(){for(var i = 0; i < arguments.length; i++) {this[this.length] = arguments[i]}return this.length;
}let a = [1,2,3]
let b = a.myPush(4,5)
console.log(a);//[1,2,3,4,5]

2.pop

// pop() 方法用于删除并返回数组的最后一个元素。
// 返回最后一个元素,会改变原数组。
Array.prototype.myPop = function(){// 判断数组是否为空if(this.length === 0) return;// 先保存最后一个元素var atr = this[this.length - 1];// 通过设置数组的length属性来实现删除元素的效果this.length = this.length - 1;return atr;
}
let a = [1,2,3]
let b = a.myPop()
console.log(a);//[1,2,3]
console.log(b);//3

3.unshift

// unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
// 返回新长度,改变原数组。
Array.prototype.myUnshift = function(){for (let i = this.length + arguments.length; i >0 ; i--) {// 原数组的最后一个等于原数组的最后一个元素,依次减减,arguments没有了就给原数组赋值undefinethis[i-1] = this[i-arguments.length-1]}for (let j = 0; j < arguments.length; j++) {this[j] = arguments[j]}// 返回新长度return this.length
}
let a = [4,5]
let b =a.myUnshift(1,2,3)
console.log(a);//[1,2,3,4,5]
console.log(b);//5

4.shift

// shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
// 返回第一个元素,改变原数组。
Array.prototype.myShift = function(){// 保留第一个元素let atr = this[0]for (let i = 0; i < this.length ; i++) {this[i] = this[i+1]}this.length = this.length -1return atr
}let a  = [1,2,3] 
let b = a.myShift()
console.log(a);//[2,3]
console.log(b);//[1]

5.slice

// 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
// 返回选定的元素,该方法不会修改原数组。
Array.prototype.mySlice = function(){let newArr = []let start = arguments[0]let end = arguments[1] for (let i = start ; start <= i && i< end; i++) {newArr.push(this[i])}return newArr
}
let a = [1,2,3,4,5,6]
let b = a.mySlice(1,4)
console.log(b);//[2,3,4]

6.splice

// splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
// 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
// splice() 方法会直接对数组进行修改。
Array.prototype.mySplice = function () {let start = arguments[0]let end = arguments[1]let delArr = [] //被删除的元素let newArr = [] //没有被删除的元素// 如果没有元素需要替换,直接等于undefinedfor (let i = start; i >= start && i < end; i++) {// 没有替换元素,返回被删掉的元素if (arguments.length < 3) {delArr.push(this[i])this[i] = undefined} else {// 替换掉删除的元素delArr.push(this[i])this[i] = arguments[i - start + 2]}}// 删除元素组未undefine的元素for (let j = 0; j < this.length; j++) {if (this[j] !== undefined) {newArr.push(this[j])}}// 修改元素组for (let n = 0; n < newArr.length; n++) {this[n] = newArr[n]this.length = newArr.length}return delArr
}let a = [1, 2, 3, 4, 5, 6]
let b = a.mySplice(0, 3)
console.log(a);//[4,5,6]
console.log(b);//[1,2,3]let c = [1, 2, 3, 4, 5, 6]
let d = c.mySplice(0, 3,7,8,9)
console.log(c);//[4,5,6]
console.log(d);//[1,2,3]

7.forEach

// forEach 数组遍历
Array.prototype.myForEach = function(fn){for (let i = 0; i < this.length; i++) {fn(this[i])}
}
let items = ['item1','item2','item3']
let copy = []
items.myForEach((items)=>{copy.push(items)
})
console.log(copy);

8.map

// 遍历数组返回一个新的数组
Array.prototype.myMap = function(fn){let newArr = []for (let i = 0; i < this.length; i++) {newArr.push(fn(this[i])) }return newArr
}let obj = [{'name':'胡歌' ,'age':40},{'name':'刘德华' ,'age':41}
]
let res = obj.myMap((item)=>{return {'姓名':item.name,'年龄':item.age}
})
console.log(res);//[ { '姓名': '胡歌', '年龄': 40 }, { '姓名': '刘德华', '年龄': 41 } ]

9.filter

// 过滤掉满足条件的元素,返回一个新数组
Array.prototype.myFilter = function(fn){let newArr = []for (let i = 0; i < this.length; i++) {if(fn(this[i])){newArr.push(this[i])}}return newArr
}let a = ['胡歌','刘德华','张学友', '郭富城']
let b = a.myFilter((item)=>item !== '胡歌')
console.log(b);//[ '刘德华', '张学友', '郭富城' ]

10.some

// 该函数传入一个函数,返回一个条件,只要有一个元素满足条件就返回true
Array.prototype.mySome = function(fn){let num = []for (let i = 0; i < this.length; i++) {if(fn(this[i])){num.push(this[i])}}if(num.length > 0){return true}else{return false}
}let a = [1,2,3,4,5,6,7,8,9]
let b = a.mySome((item)=>  item < 5)
console.log(b);//true

11.every

// 接收一个函数,函数返回一个条件,数组全部返回ture,则该函数九返回ture
Array.prototype.myEvery = function (fn){let num = []for (let i = 0; i < this.length; i++) {// 满足条件的个数if(fn(this[i])){num.push(this[i])}}// 如果满足条件的元素与原数组的元素一样,返回ture,否则返回falseif(num.length == this.length){return true}else {return false}
}let a = [1,2,3,4,5,6,7]
let b = a.myEvery((item)=>{return item < 8
})
console.log(b);

12.concat

// concat() 方法用于连接两个或多个数组。
// 该方法不会改变现有的数组,仅会返回被连接数组的一个副本。
Array.prototype.myConcat  = function(oldArr){let newArr = thisfor (let i = 0; i < oldArr.length; i++) {newArr.push(oldArr[i])}return newArr
}let a = [1,2,3]
let b = [4,5,6]let c =  a.myConcat(b)
console.log(c);//[1,2,3,4,5,6]

13.join

// join() 方法用于把数组中的所有元素放入一个字符串。
// 元素是通过指定的分隔符进行分隔的,默认使用’,'号分割,不改变原数组
Array.prototype.myJoin = function(){let string =''for (let i = 0; i < this.length; i++) {string += this[i]}return string
}
let a = [1,2,3,4,5,6]
let b = a.myJoin()
console.log(b);//'123456'

14.indexOf

// indexOf(查找的元素,从第几个元素开始) 方法可返回数组或字符串中某个指定的元素位置。
// 该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。
// 如果在数组中没找到指定元素则返回 -1。Array.prototype.myIndexOf = function(){for (let i = arguments[1]; i < this.length; i++) {if(this[i] == arguments[0]){return i}}return -1
}
let a = [1,2,3,4,5,6]
let b = a.myIndexOf(4,3)
console.log(b);//3

15.lastIndexOf

// indexOf(查找的元素,从第几个元素开始) 方法可返回数组或字符串中某个指定的元素位置。
// 该方法将从尾到头地检索数组,看它是否含有对应的元素。如果找到一个 item,则返回 item 的第一次出现的位置。
// 如果在数组中没找到指定元素则返回 -1。Array.prototype.myIndexOf = function(){for (let i = arguments[1] ; i >= 0; i--) {if(this[i] == arguments[0]){return i}}return -1
}
let a = [1,2,3,4,5,6]
let b = a.myIndexOf(2,3)
console.log(b);//3

16.reserve

// reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组
Array.prototype.myReverse = function(){let newArr = []for (let i = this.length - 1; i >= 0; i--) {newArr.push(this[i])}return newArr
}let a = [1,2,3,4,5,6]
let b = a.myReverse()
console.log(b);//[ 6, 5, 4, 3, 2, 1 ]

17.sort

// 返回一个新数组,对元素进行排序,这里简单的对数字进行一下排序,主要是排序思想(冒泡排序)
Array.prototype.mySort = function(fn){// 升序if(fn(2,1) == 1){// 第一轮遍历for (let i = 0; i < this.length; i++) {// 第二轮遍历for (let j = 0; j < this.length; j++) {// 第i个元素与下一个元素进行对比,交换位置let tem if(this[j] > this[j+1] ){// 升序tem = this[j] this[j] = this[j+1]this[j+1] =tem}}}// 降序}else{// 第一轮遍历for (let i = this.length -1; i >= 0; i-- ){// 第二轮遍历for (let j = this.length -1; j >=0 ; j--) {// 第i个元素与下一个元素进行对比,交换位置let tem if(this[j] > this[j-1] ){// 升序tem = this[j] this[j] = this[j-1]this[j-1] =tem}}}}return this
}let a = [2,6,1,3,5,0]
// 升序
let b = a.mySort((a,b)=> a-b)
// 降序
// let c = a.mySort((a,b)=> b-a)
console.log(b);
// console.log(c);

18.find

// find() 方法是 JavaScript 中用于在数组中查找特定条件的第一个元素,如果找到一个元素使得回调函数返回true,
// 则该元素作为结果返回;如果没有找到这样的元素,则返回undefined,该函数不会修改原始数组。
Array.prototype.myFind = function(fn){for (let i = 0; i < this.length; i++) {if(fn(this[i])){return this[i]}}
}
let a = [{id: 1, name: '刘德华'},{id: 2, name: '胡歌'},{id: 3, name: '刘华强'}]
let b = a.myFind((item)=> item.id == 2)
console.log(b);// {id: 2, name: '胡歌'}

19.reduce

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

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

相关文章

BGP选路实验

要求 1 使用PreVal策略&#xff0c;确保R4通过R2到达192.168.10.0/24 2 使用AS_Path策略&#xff0c;确保R4通过R3到达192.168.11.0/24 3 配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24 4 使用Local Preference策略&#xff0c;确保R1通过R2到达192.168.1.0/24 5 使…

服务器tar压缩解压文件

文章目录 一、前言二、命令2.1、解压2.2、压缩 三、最后 一、前言 前端上传dist代码到服务器上后&#xff0c;是在linux上操作&#xff0c;所以和window有所不同。一般是打好dist&#xff0c;然后压缩成gz传输到服务器&#xff0c;此时在服务器上可能涉及到解压和压缩的操作&a…

力扣日记11.25-【二叉树篇】对称二叉树

力扣日记&#xff1a;【二叉树篇】对称二叉树 日期&#xff1a;2023.11.25 参考&#xff1a;代码随想录、力扣 101. 对称二叉树 题目描述 难度&#xff1a;简单 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,…

操作系统题目分类总结 | 进程管理 内存管理 文件系统 设备管理

系列文章如下 学习过程中一定要有系统观念&#xff08;知识框架&#xff0c;每一章开头都会有一个思维导图&#xff09;&#xff0c;知道目前自己在学习的是哪一板块的内容&#xff0c;和前面有什么样的联系 操作系统的很多知识点前后都是联系非常紧密的&#xff0c;去一点一…

PCL 计算一条直线与一条线段的距离

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里的线段我们仍然使用一种参数化的表示,即 Q [ 0 ] + s [ 0 ] ∗ ( Q [ 1 ] − Q [ 0

Blender 连续 5 天遭受大规模 DDoS 攻击

Blender 发布公告指出&#xff0c;在2023年11月18日至23日期间&#xff0c;blender.org 网站遭受了持续的分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;攻击者通过不断发送请求导致服务器超载&#xff0c;使网站运营严重中断。此次攻击涉及数百个 IP 地址的僵尸…

ATK-ESP8266 WIFI模块串口通信通用实现方案

ATK-ESP8266 WIFI模块是一种常用的无线模块&#xff0c;它可以通过串口与外部设备进行通信&#xff0c;实现数据的收发和控制。本文将介绍一种通用的实现方案&#xff0c;帮助您在项目中使用ATK-ESP8266 WIFI模块进行串口通信。 【方案概述】 这个通用实现方案涵盖了ATK-ESP82…

springboot(ssm付费自习室管理系统 自习室预约平台Java(codeLW)

springboot(ssm付费自习室管理系统 自习室预约平台Java(code&LW) 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&am…

算法-技巧-中等-颜色分类

记录一下算法题的学习12 颜色分类 题目&#xff1a;给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝…

Android 相机库CameraView源码解析 (二) : 拍照

1. 前言 这段时间&#xff0c;在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。 由于CameraView封装的比较到位&#xff0c;在项目前期&#xff0c;的确为我们节省了不少时间。 但随着项目持续深入&#xff0c;对于CameraView的使用进入深水区&#xff0c;逐…

了解JSX

在React中使用JSX <!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>JSX</title> </head> <body> JSX <!-- JSX 概念&#xff1a;JSX是JavaScript和XML的缩写&#xff0c;表示在js代码中编写…

初次使用vs code时go模块安装失败的解决办法

问题分析 go语言在vs code中下载模块时&#xff0c;会使用自己的代理&#xff0c;这个代理在大陆无法访问&#xff0c;需要将代理修改为国内的&#xff0c;模块就可以正常下载了&#xff0c;阿里的代理我试过了&#xff0c;有问题。 解决步骤 确保已经配置了go的环境变量&am…

开源与闭源:大模型未来的发展之争

在当今数字化时代&#xff0c;开源与闭源软件一直是技术界争论的热点话题。随着人工智能技术的快速发展&#xff0c;特别是大模型&#xff08;如GPT-4等&#xff09;的广泛应用&#xff0c;这个辩论在大模型技术的背景下变得更加引人注目。本文将探讨开源与闭源的优劣势比较&am…

WordPress无需插件禁用WP生成1536×1536和2048×2048尺寸图片

我们在使用WordPress上传图片媒体文件的时候&#xff0c;是不是看到媒体库中有15361536和20482048的图片文件&#xff0c;当然这么大的文件会占用我们的服务器空间&#xff0c;如何禁止掉呢&#xff1f; function remove_default_image_sizes( $sizes) {unset( $sizes[1536x15…

spring-webmvc练习-日程管理-访问后端展示列表数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…

[架构之路-253]:目标系统 - 设计方法 - 软件工程 - 软件设计 - 结构化设计的主要评估指标:高内聚(模块内部)、低耦合(模块之间)的含义

目录 前言&#xff1a; 一、软件工程中的软件设计种类&#xff1a;根据宏观到微观分 &#xff08;1&#xff09;软件架构设计&#xff08;层次划分、模块划分、职责分工&#xff09;&#xff1a; &#xff08;2&#xff09;软件高层设计、概要设计&#xff08;功能模块的接…

【c++随笔14】虚函数表

【c随笔14】虚函数表 一、虚函数表&#xff08;Virtual Function Table&#xff09;1、定义2、查看虚函数表2.1、 问题&#xff1a;三种类型&#xff0c;包含一个int类型的class、一个int类型的变量、int类型的指针&#xff1a;这三个大小分别是多少呢&#xff1f;2.2、怎么发现…

Vue项目创建

1.首先按WinR&#xff0c;输入cmd&#xff0c;开启命令行 2.跳转到项目目标位置&#xff0c;比如我的项目创建位置是E:\Vue-test&#xff0c;因而输入&#xff1a; e: cd E:\Vue-test 3.输入npm init vuelatest&#xff08;初始化Vue&#xff09;&#xff0c;如果是第一次用…

IT问题解答类型网站源码

问答网是一款为IT工程师提供的问答平台&#xff0c;旨在帮助用户在线获取专业知识和相关问题的答案。在问答网&#xff0c;用户可以轻松找到其他人的问答问题&#xff0c;并在这里寻求解答。如果您有任何想要解决的问题&#xff0c;都可以在此发布问题并得到其他同行的解答。 …

kafka kraft 集群搭建保姆级教学 包含几个踩坑点

一.为啥弃用zookeeper kafka 弃用 ZooKeeper 而采用 KRaft 的主要原因是为了改进 Kafka 集群的可靠性和可管理性。 在传统的 Kafka 架构中&#xff0c;ZooKeeper 用于存储和管理集群的元数据、配置信息和状态。然而&#xff0c;使用 ZooKeeper 作为协调服务存在一些限制和挑战…