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

已于 2023-11-27 12:53:58 修改
阅读量394 收藏 1
点赞数
分类专栏： JS基础 文章标签： javascript 开发语言 前端
于 2023-11-26 23:36:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LQlove1/article/details/134633194
版权
本文详细介绍了JavaScript中的18种数组操作方法，如push(),pop(),unshift(),shift(),slice(),splice()等，并展示了如何使用这些方法进行数组增删改查以及数据处理。
摘要由CSDN通过智能技术生成

文章目录

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没有了就给原数组赋值undefine
      this[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 -1
    return 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 = [] //没有被删除的元素
    // 如果没有元素需要替换，直接等于undefined
    for (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，否则返回false
    if(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 = this
    for (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: '胡歌'}
忧郁火龙果
关注
专栏目录
JS手写——数组常见方法的手写（forEach、map、filter、every、some、reduce、find、findIndex、fill、join、flat）
ZKH129的博客
07-03 537
数组常见方法的手写
手写js的几个数组方法：map，filter，forEach等等
bzaZJU的博客
05-06 455
实现js常见数组方法 map方法接收两个参数，第一个为函数，第二个一般为this，我们在使用map函数的时候，一般只用添加函数即可。 let arr=[1,2,3,4,5]; Array.prototype.mapArray=function(fn,thisArgs){ let length=this.length; console.log(t
JavaScript进阶手写系列，手写13个数组方法的原理实现
秋天，黄叶坠地，凉风有信。
03-22 2394
文章目录JavaScript进阶手写系列，手写数组方法的原理实现1、forEach2、map3、filter4、every5、some6、reduce7、findIndex8、find9、fill10、includes11、join12、flat13、splice JavaScript进阶手写系列，手写数组方法的原理实现 1、forEach 参数代表含义 item：遍历项 index：遍历项的索引 arr：数组本身 // forEach Array.prototype.myForEach = func
JS数组方法手写代码实现（一）
m0_55315930的博客
11-17 716
JavaScript的Array方法的原生JavaScript代码实现。
js手写数组常用的方法（面试常问）push、pop、unshift、shift、splice、indexOf、concat、reverse、forEach、map、filter、every等方法
2301_76553269的博客
04-02 281
面试中经常会问到，比如让手写一个push方法等等，这期就写一些数组常用的方法喜欢的话可以关注一下博主。
Js数组常见用法及面试题
weixin_43190804的博客
02-24 1351
一.判断是否为数组 1.1 instanceof操作符 这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。 var arr = [1,2,3]; console.log(arr instanceof Array) 1.2 ES6方法 Array.isArray var arr = [12,32,3]; console.log(Array.isArray(arr)); 二.数组的去重 2.1 使用ES6的Set高阶函数 var arr = [1, 2, 3, 4, 3, 7, 7];
数组常见方法，自己polyfill手写实现
qq_46325260的博客
04-16 429
1. forEach() forEach()方法可接收两个参数。 通常情况下，我们只知道接收一个回调函数，但其实它有第二个参数 参数1: 回调函数，（item, index, originArr）item: 数组的每一项，index：索引，originArr：原数组。 参数2：_this,要修改的this指向, 不写第二个参数，默认指向的是 window const arr = ["a", "b", "c"]; const o = { age: 18 }; arr.forEach(func...
手写数组操作常见方法的polyfill
weixin_33890526的博客
09-06 595
前言:在JS操作当中，前端开发人员对数组的操作特别频繁，随着每一次ECMAScript的发版，对于数组所提供的API也会增多，以增强数组的操作能力。下面整理了一些在工作当中常用的数据操作方法的polyfill,方便大家更好的掌握其原理。 数组map和forEach方法 forEach方法的polyfill Array.prototype....
手写JavaScript数组常用函数详解与实现
本文主要介绍了如何在JavaScript中手写常用的数组函数，包括forEach、filter、find、findIndex、map、some、every、reduce和reduceRight。这些函数在开发过程中是极其常见的，它们提供了对数组进行遍历、筛选、查找...
es6手写几个数组去重
07-15
在ES6中，可以采用以下几种方法来手写数组去重： 1. 使用Set数据结构: 使用Set数据结构是一种简单且高效的方法，由于Set不允许重复值，因此可以利用这一特性快速实现数组去重： ```javascript const arr = [1,...
手写JavaScript代码实现数组扁平化
在JavaScript编程中，数组扁平化是一个常见的操作，即将一个多层嵌套的数组转换为一个单层数组。这个过程在处理来自不同来源的数据，尤其是处理具有复杂结构的JSON对象时非常有用。在ES6（ECMAScript 2015）之后，...
手写JavaScript实现数组去重
python_bug262的博客
09-12 22
当我们需要从一个数组中删除重复的元素时，可以使用各种方法来实现这个功能。接下来，我将展示一种手写JavaScript代码的方式来实现数组去重功能。如果索引为-1，表示该元素尚未添加到结果数组中，我们将其添加进去。这样就可以保证结果数组中的元素都是唯一的。通过以上的代码，我们可以实现一个简单而高效的数组去重功能。然而需要注意的是，该方法在处理大型数组时可能效率较低，因为它需要多次调用。在处理大型数组时，我们可以考虑其他更高效的算法或数据结构来实现数组去重。在上面的示例中，我们定义了一个包含重复元素的数组。
Echarts 折线图
weixin_44443380的博客
11-08 253
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 604
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 395
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
React Native 全栈开发实战班 - 导航栈定制
最新发布
做一个道者
11-11 166
React Navigation 允许开发者通过或options属性自定义导航栏的样式和行为。// App.jsreturn (},},
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1355
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
时间管理应用（可复制源码）
无限大的博客
11-08 388
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript。
【TS】九天学会TS语法——4.TypeScript 接口深入解析
m0_59873661的博客
11-07 995
今天学习 TypeScript 的接口，以及了解如何定义对象的形状等内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

忧郁火龙果

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值