JavaScript中自定义实现Array方法

最新推荐文章于 2023-10-31 09:22:43 发布
最新推荐文章于 2023-10-31 09:22:43 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30638831/article/details/99131196
版权

JavaScript中自定义实现Array方法

isArray

  • 判断是否为数组
  • 提供一下方法
function isArray(arr) {
    // 方法１
    return arr.constructor == Array;
    
    // 方法2
    // https://github.com/nianxiongdi/fore-end/issues/4

    // 方法3
    // Array.isArray

    // 方法4 
    // arr instanceof Array
}

console.log(isArray([1,2,3])) // true
console.log(isArray(123)) // false

join

  • 连接字符串
console.log([1,2,3].join(',')); // 1,2,3

//通过call方法，这个方法也可以用于字符串或类似数组的对象。
console.log(Array.prototype.join.call("abc", '-')); //a-b-c

console.log(Array.prototype.join.call([1,2,3], '-')); //1-2-3

var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-') // 'a-b'

concat

  • 多个数组的连接, 返回新的数组
  • 然后返回一个新数组，原数组不变。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

[1, 2, 3].concat([4, 5, 6])
// [1, 2, 3, 4, 5, 6]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]

reverse

  • 数组的翻转
  • 返回改变后的数组。注意，该方法将改变原数组
let a = [1,2,3];
let arr = a.reverse()
arr // [3,2,1]

slice

  • 对数组进行分割
  • 返回新数组,原数组不变。
  • arr.slice(开始位置, 结束位置(不包含));

a = ['asdsa','dsadassa','csadsadsa']
a.slice(0) //["asdsa", "dsadassa", "csadsadsa"]
a.slice(1) // ["dsadassa", "csadsadsa"]
a.slice(1,2) //["dsadassa"]
a.slice(2,6) //["csadsadsa"]
a.slice() //["asdsa", "dsadassa", "csadsadsa"]

应用 - 类似数组的对象转为真正的数组。

  • 参数都不是数组，但是通过call方法，在它们上面调用slice方法，就可以把它们转为真正的数组。
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']

Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

splice

  • 删除原来的数组元素，并且可以在删除数组元素的位置，添加新的元素
  • 返回删除元素的列表
  • arr.splice(start, length, addElement1, addElement2, …);　ｌength代表删除元素的长度

a //["a", "b", "c", "d", "e", "f"]

a.splice(4,2) // 返回删除的元素 ["e", "f"]

a // ["a", "b", "c", "d"]

a.splice(1, 2, 'add1', 'add2'); // ["b", "c"]

a //["a", "add1", "add2", "d"]

应用 - 插入元素

  • 如果只是单纯地插入元素，splice方法的第二个参数可以设为0。

a = ["a", "b", "c"]

//插入到第一个元素的后面
a.splice(1,0,2); //[] 因为没有删除元素,所以返回为[]

a // ["a", 2, "b", "c"]

sort

  • sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。
['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]


[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

// 对象排序
[
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

map

  • [].map(function(elem, index, arr){})
    • map方法的回调函数有三个参数，elem为当前成员的值，index为当前成员的位置，arr为原数组
  • 将成员依次传入函数,每次执行的结果,返回一个新的数组
  • 返回新的数组

简单的实现map


/**
 * 参数1 - 回调函数
 * 参数2 - 改变this指向,此时指向obj 
 **/
Array.prototype.map = function() {

    let len = arguments.length;
    let new_arr = [];
    if(len === 1) {
        for(let i=0; i<this.length; i++) {
            new_arr.push( arguments[0].call(this, this[i]) );
        }
    }else if(len === 2) {
            new_arr.push( arguments[0].call(arguments[1], this[i]) );;
        }
    }

    return new_arr;
}

// test1
let arr = [1, 2, 3, 4, 5];
let new_arr = arr.map(function(item) {
    return item * item;
});
console.log( new_arr ); // [1, 4, 9, 16, 25];

// test2

arr = ['a', 'b', 'c'];
let new_arr = [1, 2].map(function (e) {
    return this[e];
}, arr);
console.log(new_arr); // ['b', 'c']

// test3

var f = function (n) { return 'a' };
console.log([1, undefined, 2].map(f)) // ["a", "a", "a"] map方法不会跳过undefined和null，但是会跳过空位。

forEach

  • 两个参数
    • 参数1,是一个函数,接收三个参数当前值、当前位置、整个数组。
    • 绑定参数函数的this变量。
  • 注意，forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。
    • arr.forEach(function(item) {console.log(item);break;}); //Uncaught SyntaxError: Illegal break statement - 原因 - break只能在for循环中出现这里相当于是 funcrion func(){ break； } 会直接报错误的
  • 相当于是for循环
 let arr = [1, 2, 3, 4, 5];

Array.prototype.forEach = function() {
    if(arguments.length === 1) {
        for(let i=0; i<this.length; i++) {
            arguments[0].call(this, this[i]);
        }
    }else if(arguments.length === 2) {
        for(let i=0; i<this.length; i++) {
            arguments[0].call(arguments[1], this[i]);
        }
    }  
}

// test1
arr.forEach(function(item) {
    console.log(item);
}); 

// test2
var out = [];
[1, 2, 3].forEach(function(elem) {
    this.push(elem * elem);
}, out);
console.log( out ); // [1, 4, 9]

filter

  • 过滤数组成员，满足条件的成员组成一个新数组返回。
  • 参数
    • 参数1 - 一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。 此函数有三个参数:当前成员，当前位置和整个数组。
    • 参数2 - 用来绑定参数函数内部的this变量。

简单的实现filter

let arr = [1, -2, 3, -4, 5];

Array.prototype.filter = function() {
    let new_arr = [];
    if(arguments.length === 1) {
        for(let i=0; i<this.length; i++) {
            const flag = arguments[0].call(this, this[i]); // 我这边只传递了当前成员, `当前位置`和`整个数组`。没有进行传递,加上后面就可以了
            flag&&new_arr.push(this[i]);
        }
    }else if(arguments.length === 2) {
        for(let i=0; i<this.length; i++) {
            const flag = arguments[0].call(arguments[1], this[i]);
            flag&&new_arr.push(this[i]);
        }
    }
    return new_arr;
}
// test1
let new_arr = arr.filter(function (item) {
    return (item > 0);
})
console.log( new_arr );//[1, 3, 5]

// test2
var obj = { MAX: 3 };
var myFilter = function (item) {
    if (item > this.MAX) 
        return true;
    };
arr = [2, 8, 3, 4, 1, 3, 2, 9];
new_arr = arr.filter(myFilter, obj) // [8, 4, 9]

some

  • 断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。
  • some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
  • 参数:
    • 参数1: 参数是函数,也有三个参数:当前成员，当前位置和整个数组。
    • 参数2: some和every方法还可以接受第二个参数，用来绑定参数函数内部的this变量。

简单的实现some


 let arr = [1, -2, 3, -4, 5];

Array.prototype.some = function() {

    let fun = arguments[0];

    // 类型判断
    if(typeof fun != 'function') {
        throw new TypeError();
    }

    for(let i=0; i<this.length; i++) {
        if(fun.call(arguments[0], this[i])) 
            return true;
    }

    return false;
}
// test1
isArr = arr.some(function(item) {
    return item > 3;
});
console.log(isArr); // true

// test2
isArr = arr.some(function(item) {
    return item > 10;
});
console.log(isArr); // false

every

  • 断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。
  • 所有成员的返回值都是true，整个every方法才返回true，否则返回false。
  • 参数:
    • 参数1: 参数是函数,也有三个参数:当前成员，当前位置和整个数组。
    • 参数2: some和every方法还可以接受第二个参数，用来绑定参数函数内部的this变量。

简单的实现every

let arr = [1, -2, 3, -4, 5];

Array.prototype.every = function() {

    let fun = arguments[0];

    // 类型判断
    if(typeof fun != 'function') {
        throw new TypeError();
    }

    for(let i=0; i<this.length; i++) {
        if( !fun.call(this, this[i], i, this)) 
            return false;
    }

    return true;
}

//test1
isArr = arr.every(function(item) {
    return item > -10;
});
console.log(isArr); // true

// test2
isArr = arr.every(function(item) {
    return item > 10;
});
console.log(isArr); // false

// test3
function isEven(x) { return x % 2 === 0 }
[].some(isEven) // false
[].every(isEven) // true

reduce

  • 最终累计为一个值
  • 参数
    • 参数1: 为函数,接受两个参数;(累积变量(默认为数组的第一个成员), 当前值(默认为数组的第二个成员), 当前位置（从0开始), 原数组;
    • 参数2: 默认值，处理空数组时尤其有用。

简单的实现reduce


let arr = [ ];

Array.prototype.reduce = function() {

    let fun = arguments[0];

    // 类型判断
    if(typeof fun != 'function') {
        throw new TypeError();
    }

    let total = 0;
    if(arguments.length === 1) {
        for(let i=0; i<this.length; i++) {
            total = arguments[0].call(this, total, this[i]);
        }
        return total;
    }else if(arguments.length === 2) {
        total = arguments[1];
        for(let i=0; i<this.length; i++) {
            total = arguments[0].call(this, total, this[i]);
        }
        return total;
    }

}

// test1
let sum = [1, 2, 3, 4, 5].reduce(function (total, next) {
    return total + next;
})
console.log(sum); // 15

// test2
sum = [1, 2, 3, 4, 5].reduce(function (total, next) {
    return total + next;
}, 5)
console.log(sum); // 20

reduceRight

  • 则是从右到左（从最后一个成员到第一个成员），其他完全一样。
[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15


// 理解reduce和reduceRight
function substract(prev, cur) {
  return prev - cur;
}

[3, 2, 1].reduce(substract) // 0
[3, 2, 1].reduceRight(substract) // -4

应用 - 找出最长的字符串

function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"

indexOf

  • 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。
  • indexOf方法还可以接受第二个参数，表示搜索的开始位置。
var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.indexOf('y') // -1

['a', 'b', 'c'].indexOf('a', 1) // -1

lastIndexOf

  • 返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
  • indexOf和lastIndexOf注意，这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN。
var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1
// 这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN是唯一一个不等于自身的值。

参考

JavaScript内置对象 - Array数组（三）- 自定义ArrayList
觉醒法师的专栏
10-02 1981
ArrayList是一种数据结构，它可以用来存储一组数据。特点是可以动态地增加或删除数据，并且可以随机访问其中的元素。在JavaScript中，没有内置的ArrayList数据结构，但是我们可以使用类对象来实现它。 将集合存储在对象本身上，并使用在 Array.prototype.push 上使用的 call 来调用该方法，使其认为正在处理数组，而它只是像平常一样运作，这是JavaScript 允许我们建立任意的执行上下文。尽管 Object不是数组，但是 push 方法成功地使 Object
JS自定义数组方法（简单运算类）
Nikki_u的博客
04-30 992
一、自定义forEach Array.prototype.myForEach = function(callback) { for(let i=0;i<this.length;i++){ callback(this[i],i,this) } } const arr1=[1,2,3] arr1.myForEach((item, index,data)=>{ console.log(item) console.log(index) console.log
js中，如何给Array、String新增自定义方法？
weixin_34384681的博客
04-25 891
js中，诸如Array的push()、String的substring()方法都是在各自的prototype上定义的。基于这点，我们可以在Array、String对应的原型上自定义一个方法，来满足特定需求； 比如： 1、如何实现下列代码：[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]复制代码 >>实现...
JS自定义方法
weixin_39885843的博客
02-19 1639
一.数组  Array.prototype.distinct = function () {                 var arr = this,                     len = arr.length;                 arr.sort(function (a, b) {  //对数组进行排序才能方便比较                     re...
JavaScript中的Array
m0_51636525的博客
05-16 1791
对象允许存储键值集合，但是在某些情况下使用键值对来访问并不方便 我们需要一种有序的集合，里面的元素是按照某一种顺序来排列的 这个有序的集合，我们可以通过索引来获取到它 这个结构就是数组Array 数组的元素是从0开始编号的（索引index） 有些编程语言允许我们使用负数索引，但是JavaScript不支持这种写法 1.数组的创建方式 创建数组有两种语法 var arr1 = [] var arr2 = new Array() 在创建的时候也可以直接写入创建的内容 var .
javascript自定义in_array()函数实现方法
10-23
以下是关于这个自定义in_array()函数实现方法的相关知识点： 1. 函数定义：首先定义了一个名为in_array的函数，它接受两个参数，what和where。what是我们想要在数组where中查找的值，where是被搜索的数组。 2. ...
Javascript remove 自定义数组删除方法
01-19
Javascript自定义数组删除方法remove()</title> [removed] Array.prototype.remove=function(dx){ if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++){ if(this[i]!=this...
用javascript实现自定义标签
12-01
在JavaScript中实现自定义标签是一种常见的技术，它允许开发者扩展HTML的基本功能，为网页增加新的样式和行为。这里，我们看到一个例子，作者`zdzhuo`通过JavaScript创建了几个自定义标签，如`<red>`、`<big>`和`...
JavaScript自定义数组排序方法
12-11
本文实例讲述了JavaScript自定义数组排序方法。分享给大家供大家参考。具体分析如下： Array中有自带的排序功能，这个使用起来比较方便，我们有一点必须清楚，就是排序的依据，如果sort不传入参数的话，那就是按照...
js中数组定义Array
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
09-12 3363
全栈工程师开发手册 （作者：栾鹏） js系列教程1-数组操作全解js中数组定义js中数组的定义非常简单，包含以下5中方式。不过首先要明确的是数组是Array类型的。不是基本数据类型代码如下：var names=[]; //定义数组并初始化为空 names = ["小明","小红","小刚"]; //赋值，可以在定义时赋值 nam
js模拟实现Array的Map、Every、Some、Reduce、Find方法
weixin_44492275的博客
01-04 359
Array.prototype.myMap = function(callback){ var newArr = [] for(var i = 0; i<this.length; i++) { // this 是arr // 当前循环的元素放到自定义的函数中 进行运行并且 吧返回的结果放到新数组的对应索引 newArr[i] = callback(this[i], i, this) // this[i]是当前的元素 i是当前的索引 console.log('ca
如何给所有Array对象添加新方法
学习笔记本
12-03 704
通过 Array.prototype.方法名=function(){ } 即可给所有Array对象添加新方法。 <script> Array.prototype.sum = function () { var sum = 0 for (let i = 0; i < this.length; i++) sum += ...
JavaScript高级应用之创建自定义类继承Array类
weixin_30647065的博客
03-24 120
之前公司有个考试题目，如下： 请使用JavaScript编写一个Iterator类，该类创建对象时，以一个ArrayExt对象为参数，并实现对ArrayExt对象中的元素的迭代，方法列表如下： 方法名 参数 功能描述 hasNext() 无 查询是否存在下一个元素 next() 无 ...
前端学习笔记202310学习笔记第一百零玖天-vue3-链式调用&对象属性与遍历&this指向&caller_callee之9
最新发布
qq_41632427的博客
10-31 101
前端
重学TypeScript
weixin_42244691的博客
08-11 392
基础 强类型语言：不允许改变数据类型，除非强制转换数据类型 弱类型语言：变量允许被赋予任意类型 静态类型语言：在编译阶段确定所有变量的类型 动态类型语言：在执行阶段确定所有变量的类型 # 创建 ts 配置文件 tsconfig.json $ tsc --init 工程 实战 ...
数组的创建以及数组原型上添加自定义方法
R398562246的博客
09-26 1119
1.构造函数法 var arr=new Array(); 说明arr是array的实例 2.字面量法 var arr1=[ ] ; arr1也是Array的实例； 结论：所有的数组都是Array的实例，所以所有的数组都可以访问Array的原型 数组的常用方法都是放在原型上的 3.给数组的原型上添加一个自定义方法 <script> var ...
伪数组是什么？伪数组与数组的区别，将伪数组变成真数组。
热门推荐
吴小迪的博客
08-18 4万+
当我们了解伪数组之前先了解下普通的数组的特点 数组是用来存储一系列值的一个集合，而每个值在数组里面都有一个对应的索引，也可以叫做下标，索引是从0开始的，依次递增。 比如： let arr = ['a','b','c']; // 字符串a，b，c对应的下标分别为0， 1， 2，使用 数组名字[索引] 的方法即可取到对应的值。 数组的length为数组当中所存值的总个数，比如上方定义的arr数组的l...
Array.prototype.slice.call()方法的理解
qq_41988669的博客
11-19 961
上一篇文章 《「前端面试题系列 4」this 的原理以及用法》 中，提到了 call 和 apply。它们最主要的作用，是改变 this 的指向。在平时的工作中，除了在写一些基础类，或者公用库方法的时候会用到它们，其他时候 call 和 apply 的应用场景并不多。不过，突然遇到的时候，需要想一下才能转过弯来。所以今天，就让我们好好地探究一下，这两个方法的区别以及一些妙用。最后，还会介绍与之用法相似的 bind 的方法。call 和 apply 的共同点。
有关 Array.prototype.slice.call() 和 Array.prototype.slice.apply() 方法的详解
weixin_45242865的博客
09-08 4258
对 Array.prototype.slice.call() 和 Array.prototype.slice.apply() 的简要理解 1. 逐步拆分解析 slice：可从已有的数组中返回选定的元素，不改变原数组。 注：有关 splice 方法的详解可参考 有关 Array.prototype.slice() 方法的详解 Array：Array 是 javascript 的一个引用类型，Array.prototype 属性表示 Array 构造函数的原型，其上有一个方法叫 slice()。 注：因此，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值