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

已于 2023-11-27 12:53:58 修改
阅读量334 收藏 1
点赞数
分类专栏： JS进阶 文章标签： javascript 开发语言 前端
于 2023-11-26 23:36:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqlove1/article/details/134633194
版权

文章目录

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: '胡歌'}
忧郁火龙果
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript手写数组的常用函数总结
01-21
在开发过程中，我们常常使用数组的一些 api 相关操作，其中包含 forEach 、 filter 、 find 、 findIndex 、 map 、 some 、 every 、 reduce 、 reduceRight 等函数方法。 今天，我们试试手写这些函数，实现数组...
JavaScript数组去重的方法总结【12种方法，号称史上最全】
12-07
本文实例总结了JavaScript数组去重的方法。分享给大家供大家参考，具体如下： 数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的...
Js数组常见用法及面试题
weixin_43190804的博客
02-24 1275
一.判断是否为数组 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];
JS手写——数组常见方法的手写（forEach、map、filter、every、some、reduce、find、findIndex、fill、join、flat）
ZKH129的博客
07-03 473
数组常见方法的手写
数组常见方法，自己polyfill手写实现
qq_46325260的博客
04-16 370
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 567
前言:在JS操作当中，前端开发人员对数组的操作特别频繁，随着每一次ECMAScript的发版，对于数组所提供的API也会增多，以增强数组的操作能力。下面整理了一些在工作当中常用的数据操作方法的polyfill,方便大家更好的掌握其原理。 数组map和forEach方法 forEach方法的polyfill Array.prototype....
js操作数组方法总结
hmmmmm的博客
11-12 523
数组的常见方法 map（some,every,filter）es5 find findIndex es6 reduce forEach for of Array.form() of() reduce的用法，reduce名为收敛，叠加，返回的是叠加后的结果。reduce接受两个参数，第一个参数是回调函数，第二个参数是初始值。回调函数有四个参数， 1、total（必填）为当前所有的累积结果 2、cur（必填）是当前的值 3、currindex是当前索引 4、arr是调用方法的数组 let result=[
JS初识之常见的数组方法
web分享客的博客
06-17 127
  Array.prototype.slice():返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。arr.slice(); 选择的区间是[0, end]；arr.slice():选择的区间是[begin, end]；arr.slice(begin, end); 两个参数同时存在是[begin, end)；Array.prototype.conca...
手写常见JS方法
猫老板的豆
08-17 627
手写判断数据类型 手写深拷贝 手写对象是否全等 手写防抖 手写节流 手写数组扁平化 手写数组去重 手写new函数 手写ajax
js中常见的手写排序方法
qq_52569656的博客
04-13 468
一文归纳js中常见排序方法以及实现思路
深入探索：用 TypeScript 手写 20 个常见数组方法
前端达人
09-27 246
第一步：分门别类一口气写出20个数组方法有点难度，我们可以在脑海里对数组方法进行分类，同一类操作归为一类，这样写是不是更加简单了呢？添加元素类：push、unshift删除元素类：pop、shift、splice数组转字符串类：toString、join遍历类：forEach、reduce、reduceRight、map、filter、some、every排序：sort拼接：concat索引：in...
高性能js数组去重(12种方法，史上最全)
01-19
数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。 在真实的项目中碰到的数组去重，一般都是...
两种常用的javascript数组去重方法思路及代码
01-19
第一种是比较常规的方法 思路： 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素，用indexOf查找新数组中是否有该元素 3.若没有，则存到结果数组中 代码如下: Array.prototype.unique1 = ...
JavaScript数组对象实现增加一个返回随机元素的方法
01-19
本方法 来自个人手写 JavaScript 的实践，只涉及 JavaScript 1.5（ECMAscript 3 国际标准）语言本身，在所有 JS 引擎实现中通用~ 为Array对象新增random方法： (function () { function Random_SN(iArray) { ...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 186
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 615
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 223
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 751
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
43. 手写数组map方法？
11-17
根据提供的引用内容，没有直接与手写数组map方法相关的信息。但是，我们可以根据map方法的定义和实现方式来手写一个数组map方法。 数组map方法是一种高阶函数，它可以将一个数组中的每个元素都映射到一个新的元素上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

忧郁火龙果

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

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

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

打赏作者

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

抵扣说明：

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

余额充值