js中数组常用方法的简单重构(部分)，帮助你加快理解数组中常用方法

最新推荐文章于 2023-11-02 14:38:24 发布
最新推荐文章于 2023-11-02 14:38:24 发布
阅读量395 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li123128/article/details/105179046
版权

　　将指定数字插入到数组的末尾,返回值为新数组的长度
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　ary.length = 5;
　　
　　ary.push(1) ;
　　
　　ary = [1,2,3,4,5,1];
　　
　　ary.length = 6;
　　
　　//方法重构:
　　
　　Array.prototype.myPush = function () {
　　
　　for (i = 0; i < arguments.length; i++) {
　　
　　this[this.length] = arguments[i];
　　
　　}
　　
　　return this.length
　　
　　}
　　
　　pop
　　
　　将数组最后的元素删除，返回值为删除掉的元素
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var num = ary.pop();
　　
　　console.log(num); == 5
　　
　　//方法重构:
　　
　　Array.prototype.myPop = function () {
　　
　　var num = this[this.length - 1];
　　
　　this.length--
　　
　　return num
　　
　　}
　　
　　unshift
　　
　　将指定的数字插入到元素的前面，返回值为新数组的长度
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　ary.length = 5;
　　
　　ary.unshift(1) ;
　　
　　ary = [1,1,2,3,4,5];
　　
　　ary.length = 6;
　　
　　//方法重构:
　　
　　Array.prototype.myUnshift = function () {
　　
　　var len = this.length; //用一个变量存储原来的数组的长度
　　
　　this.length += arguments.length; //传入进来几个参数，数组的长度就增加传入进来的参数的长度
　　
　　for (var i = 0; i < arguments.length; i++) {
　　
　　/* 整体需要进行几轮的循环，循环的轮数应该与传入进来的实参长度相等，因为第一轮的时候只是将数组整体往后面移了一个位置，想要前面能够有足够实参插入的长度，那么循环的轮数就是由实参的长度所确定的*/
　　
　　for (var j = len; j > 0; j--) {
　　
　　/* 因为往前面插入，所以将数组的中原来的值往后移动，并且从最后一位开始移动才能使数组中的元素不被覆盖 */
　　
　　this[j] = this[j - 1];
　　
　　/* 让后面为空的元素等于前面的值，将数组的值依次往后移动 */
　　
　　}
　　
　　len++; /* 内部循环完毕后，此时的原数组的最后一位已经往后移动了一位，如果还需要将数组往后继续进行移动的话，那么就应该从原数组的最后一位继续往后移动，所以此时的len就应该加一。如果不进行加一操作的话，会把后面的元素覆盖掉，并且整个数组将不会再往后移动，后面都是空元素 */
　　
　　}
　　
　　return this.length
　　
　　}
　　
　　shift
　　
　　将数组的第一个元素删除并返回，返回值为被删除的元素
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var num = ary.shift();
　　
　　console.log(num); === 1
　　
　　//方法重构:
　　
　　Array.prototype.myShift = function () {
　　
　　var num = this[0];
　　
　　var len = this.length;
　　
　　for (var i = 0; i < len; i++) {
　　
　　this[i] = this[i + 1];
　　
　　}
　　
　　this.length--;
　　
　　return num
　　
　　}
　　
　　concat
　　
　　将数组进行拼接，返回值是拼接后的数组(传入的参数中有数组，并且其中存在空元素，空元素也会进行拼接)
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var ary1 = ary.concat([1, 2, 3, , 4], {a:1})
　　
　　console.log(ary1) === [1, 2, 3, 4, 5, 1, 2, 3, , 4, {a:1}]
　　
　　//方法重构:
　　
　　Array.prototype.myConcat = function () {
　　
　　var ary = this;
　　
　　for (var i = 0; i < arguments.length; i++) {
　　
　　if (arguments[i].constructor === Array) {
　　
　　for (var j = 0; j < arguments[i].length; j++) {
　　
　　ary[ary.length] = arguments[i][j];
　　
　　}
　　
　　} else {
　　
　　ary[ary.length] = arguments[i];
　　
　　}
　　
　　}
　　
　　return ary
　　
　　}
　　
　　join
　　
　　将数组用传入的参数进行拼接，返回值为拼接后的字符串(不传入参数，默认为"")
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var str = ary.join();
　　
　　console.log(str) === "1,2,3,4,5"
　　
　　//方法重构:
　　
　　Array.prototype.myJoin = function () {
　　
　　var str = "";
　　
　　if (arguments[0] === "" || arguments[0] === undefined) {
　　
　　for (i = 0; i < this.length - 1; i++) {
　　
　　str += this[i] + ",";
　　
　　}
　　
　　} else {
　　
　　for (i = 0; i < this.length - 1; i++) {
　　
　　str += this[i] + arguments[0];
　　
　　}
　　
　　}
　　
　　str += this[this.length - 1];
　　
　　return str
　　
　　}
　　
　　some
　　
　　第一个传入的参数为一个函数，该函数有三个参数，分别为item、index、ary，将该函数执行，返回执行结果，如果结果中有一个true结束运行，没有true将一直查找下去。返回值为布尔值
　　
　　//原方法示例:
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var bool = ary.some(function(item,index,ary){
　　
　　return item > 4;
　　
　　})// true
　　
　　//方法重构:
　　
　　Array.prototype.mySome = function () {
　　
　　for (var i = 0; i < this.length; i++) {
　　
　　var bool = arguments[0](this[i], i, this);
　　
　　if (bool) return true;
　　
　　}
　　
　　return false;
　　
　　}
　　
　　every
　　
　　第一个传入的参数为一个函数，该函数有三个参数，分别为item、index、ary，将该函数执行，返回执行结果，如果结果中有一个false结束运行，没有false将一直查找下去。返回值为布尔值
　　
　　//原方法示例
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var bool = ary.every(function(item,index,ary){
　　
　　return item > 1;
　　
　　})// false
　　
　　//方法重构
　　
　　Array.prototype.myEvery = function () {
　　
　　for (var i = 0; i < this.length; i++) {
　　
　　var bool = arguments[0](this[i], i, this);
　　
　　if (!bool) return false;
　　
　　}
　　
　　return true;
　　
　　}
　　
　　slice
　　
　　可传入两个参数，第一个参数代表这起始下标位置,第二个参数选填,代表到这个数字下标前结束.
　　
　　不传参数，默认截取到末尾,参数也可为负数.
　　
　　返回值截取的数组成的数组,原数组不变
　　
　　//原方法示例：
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　ary.slice() ===> [1, 2, 3, 4, 5];
　　
　　ary.slice(1,3) ===> [2, 3]
　　
　　ary.slice(-3,-1) ===> [3, 4]
　　
　　//方法重构：
　　
　　Array.prototype.mySlice = function () {
　　
　　/*
　　
　　分为两种情况：
　　
　　1、当arguments[1]为0时,或者为undefined时,此时有以下情况：
　　
　　1、如果此时的arguments[1]是undefined时有以下情况：
　　
　　1、当arguments[0]大于等于0时,从arguments位下标开始往后截取
　　
　　2、当arguments[0]为undefined时,复制一份原数组
　　
　　3、其他情况都返回空数组
　　
　　2、当arguments[1]为true时，有以下情况：
　　
　　1、正常情况下，当arguments[0]小于等于arguments[1]时，有以下情况
　　
　　1、两个参数都是大于0的情况下(arguments[0]可等于0)，从arguments[0]位下标开始复制到arguments[1]位下标前一位结束
　　
　　2、两个参数都小于0时，此时的开始位置(arguments[0])和结束位置(arguments[1])应该都加上数组的长度
　　
　　2、除去上面的情况，都为非正常情况，所以都返回空数组
　　
　　*/
　　
　　var ary = [];
　　
　　if (arguments[1] > this.length) arguments[1] = this.length;
　　
　　//判断传入的第二个参数是否超出数组的长度，如果超出，则让它默认为数组的长度
　　
　　if (!arguments[1]) {
　　
　　//当argumens为0或者不传时
　　
　　if (typeof arguments[1] === 'undefined') {
　　
　　//判断当argumens[1]是否为undefined,如果是,进入此语句
　　
　　if (arguments[0] >= 0) { //当argumens[0]
　　
　　for (var i = arguments[0]; i < this.length; i++) {
　　
　　ary[ary.length] = this[i];
　　
　　}
　　
　　return ary
　　
　　} else if (typeof arguments[0] === 'undefined') {
　　
　　for (var j = 0; j < this.length; j++) {
　　
　　ary[ary.length] = this[i];
　　
　　}
　　
　　return ary
　　
　　}
　　
　　} else return ary //除去上述情况都为非正常情况，返回空数组
　　
　　} else {
　　
　　//否则当argument[1]>0时进入此语句
　　
　　if (arguments[0] <= arguments[1]) {
　　
　　//正常情况下开始位置总会小于等于结束位置
　　
　　if (arguments[0] >= 0 && arguments[1] > 0) {
　　
　　//第一种情况：两个都大于0时(arguments[0]可以等于0)
　　
　　for (var k = arguments[0]; k < arguments[1]; k++) {
　　
　　//直接复制
　　
　　ary[ary.length] = this[k];
　　
　　}
　　
　　return ary
　　
　　} else if (arguments[0] < 0 && arguments[1] < 0) {
　　
　　//第二种情况：两个都小于0时
　　
　　for (var n = arguments[0] + this.length; n < arguments[1] + this.length; n++) {
　　
　　//首先需要将两个负的参数都加上数组的长度变为正
　　
　　ary[ary.length] = this[n];
　　
　　}
　　
　　return ary
　　
　　} else return ary //除去上述情况都为非正常情况，返回空数组
　　
　　} else return ary //除去上述情况都为非正常情况，返回空数组
　　
　　}
　　
　　}
　　
　　forEach
　　
　　将数组中的每一项进行遍历，不遍历空元素，无返回值
　　
　　Array.prototype.myForEach = function () {
　　
　　var len = this.length-1;
　　
　　for (var item in this) {
　　
　　if (len === 0) break;
　　
　　arguments[0](this[item],item,this);
　　
　　len--;
　　
　　}
　　
　　}
　　
　　map
　　
　　将数组中的每一项进行遍历，返回一个与原数组长度相同的数组
　　
　　// 原方法示例：
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　ary.map(function(item,index,ary){
　　
　　return item * 2
　　
　　}) === [2,4,6,8,10]
　　
　　// 方法重构：
　　
　　Array.prototype.myMap = function () {
　　
　　var ary = [];
　　
　　ary.length = this.length;
　　
　　var len = ary.length-1;
　　
　　for (var item in this) {
　　
　　if (len === 0) break;
　　
　　ary[item] = arguments[0](this[item],item.this);
　　
　　len--;
　　
　　}
　　
　　return ary
　　
　　}
　　
　　filter
　　
　　第一个传入的参数为一个函数，函数中可传入三个参数，分别为item、index、ary，返回值是一个由所有满足条件的元素所组成的数组
　　
　　//原方法示例：
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　ary.filter(function(item,index,ary){
　　
　　return item > 2
　　
　　}) === [3,4,5]
　　
　　//方法重构：
　　
　　Array.prototype.myFilter = function () {
　　
　　var ary = [];
　　
　　for (var i = 0; i < this.length; i++) {
　　
　　var bool = arguments[0](this[i], i, this);
　　
　　if (bool) {
　　
　　ary[ary.length] = this[i];
　　
　　}
　　
　　}
　　
　　return ary
　　
　　}
　　
　　reduce
　　
　　第一个传入的参数为一个函数，函数中可传入四个参数，分别为value、item、index、ary，返回计算后第一个参数的值，返回值为一个值
　　
　　如果有传入第二个参数，那么第一个参数的第一个参数的默认值就为它，并且第一个参数的第二个参数从数组的第0位起始;
　　
　　否则，未传入，那么第一个参数的第一个参数就时数组的第0位，并且第一个参数的第二个参数从数组的第1位起始
　　
　　//原方法示例：
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var num = ary.reduce(function(value,item,index,ary){
　　
　　return value + item;
　　
　　})
　　
　　console.log(num) === 15
　　
　　//方法重构：
　　
　　Array.prototype.myReduce = function () {
　　
　　var initValue;
　　
　　var i = 0;
　　
　　if (arguments[www.yongshiyule178.com] || arguments[1] ==www.javachenglei.com= 0) {
　　
　　initValue = arguments[1];
　　
　　} else {
　　
　　initValue = this[0];
　　
　　i++;
　　
　　}
　　
　　while (i < this.length) {
　　
　　initValue = arguments[0](initValue, this[i], i, this);
　　
　　i++;
　　
　　}
　　
　　return initValue;
　　
　　}
　　
　　reduceRight
　　
　　第一个传入的参数为一个函数，函数中可传入四个参数，分别为value、item、index、ary，返回计算后第一个参数的值，返回值为一个值
　　
　　如果有传入第二个参数，那么第一个参数的第一个参数的默认值就为它，并且第一个参数的第二个参数从数组的第length-1位起始;
　　
　　否则，未传入，那么第一个参数的第一个参数就时数组的第length-1位，并且第一个参数的第二个参数从数组的第length-2位起始
　　
　　//原方法示例：
　　
　　var ary = [1, 2, 3, 4, 5];
　　
　　var num = ary.reduceRight(function(www.yixingylzc.cn  value,item,index,ary){
　　
　　return value + item;
　　
　　})
　　
　　console.log(num) === 15
　　
　　//方法重构：
　　
　　Array.prototype.myReduceRight = function (www.javachenglei.com) {
　　
　　var initValue;
　　
　　var i = this.length - 1;
　　
　　if (arguments[1] || arguments[1] === 0) {
　　
　　initValue = arguments[www.lecaixuanzc.cn];
　　
　　} else {
　　
　　initValue = this[this.length -shentuylzc.cn   1];
　　
　　i--;
　　
　　}
　　
　　while (i >= www.shentuylgw.cn ) {
　　
　　initValue = arguments[0](initValue, this[i], i, this);
　　
　　i--
　　
　　}
　　
　　return initValue

liudahai777
关注
JavaScript数组以及重构
flag_yang的博客
11-24 823
数组:数据驱动显示 定义：是一个无序元素的紧密结构的有序列表 1.有序列表：排序 2.紧密结构：列表是具备长度的，而且这个长度会自动根据列表内容变化而变化，添加删除消耗性能大，速度慢； 另外，可以遍历有对应的下标，可以根据下标遍历到数组的所有元素。 3.无序元素：意味着元素可以不区分先后顺序，而且不能避免重复 新建数组 1.字面量创建 数组长度不固定（在js中数组长度是可以改变的） var arr = [] 2.实例化创建（构造函数实例化） var arr = new Array()
JS中数组方法重构
m0_60518344的博客
09-12 584
1.pop pop() 方法用于删除数组的最后一个元素并返回删除的元素。 思路： 先用一个temp来接收数组的最后一个元素，并且作为返回值返回 再把数组的长度减一 2.push push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 思路： 因为有可能传入多个参数，所以使用argument argument：一个类数组对象，包含着传入函数中的所有参数（不介意传递参数的个数以及参数类型） 使用for循环遍历数组的长度，遍历到最后一个的时候，就把新的参数放入数组里 ..
js数组之方法重构
WHTGS的博客
04-26 738
数组方法的重构，在一些面试中会经常遇到，这里对其中一部分方法的重构进行了汇总。 1 push方法实现 push就是在数组后面添加一个新元素，返回新数组的长度，数组改变 function push(arr,elem){ // 将添加的元素放在数组的末尾 arr[arr.length]=elem; return arr.length; } var arr = [1,2,5,6,7]; conso...
js按照需求重构数组
qq_38368356的博客
11-29 218
// 饼图 async screenTablespace() { const result = await screenTablespace(); if (result) { const colors = [ "#014CF5", "#06D9D9", "#06B7D9", ...
js 重构数组
zhengzhengwang的专栏
08-05 358
letarr=[[1,4,'a'],[2,5,'b'],[3,6,'c']]; constcount=arr[0].length; arr=arr.flat(); letresult=[]; for(leti=0;i<arr.length;i++){ constindex=i%count; if(!result[index]){ result[index]=[]; }...
javascript数组方法及其重构
weixin_43366084的博客
03-25 511
Array方法及其重构 创建数组： 直接创建：var arr = [ 1,2,3 ] 创建数组对象：var arr = new Array(size) var arr = new Array(1,2,3) 根据对象创建数组： var arr = new Object([]) 清空数组：arr.length = 0 使用in运算符可以判断数组元素是否为空 var arr = [1,2,3,,4]; 3 in arr // false 0 in arr // true // 数字3和0 表示
javascript 删除数组元素和清空数组的简单方法
12-07
- 自定义方法：可以通过遍历并重构数组来实现删除。 ```javascript Array.prototype.remove = function(dx) { if (isNaN(dx) || dx > this.length) return false; for (var i = 0, n = 0; i ; i++) { if (this...
js删除Array数组中指定元素的两种方法
12-08
* 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<...
js 定义对象数组(结合)多维数组方法
01-19
在php中定义数组很简单，但是在js中如果搞成字符为下标会出错，所以结合对象来搞 var top_ = { 'index':'首页', 'user':'用户', 'tree':'模块树' } ; var all_list = [ { index: [ {'name':'网站栏目...
JS中数组重构
qq_49171551的博客
08-31 488
3.unshift()向数组的最前面添加一个元素，有参数，返回的是新数组的长度，原数组被改变。1.push()向数组的尾部添加一个元素，有参数，返回新的数组元素，改变原数组。2.pop()删除数组的最后一个元素，无参数，返回的是被删掉的元素，改变原数组。5.some（）遍历数组，只要有一个符合条件就返回true,否则返回false。4.shift()删除数组的第一个元素，无参数，返回被删掉的值，原数组被改变。9.forEach()遍历输出数组中的每一个元素。7.map对每一个数组做操作，返回新的数组。...
Js数组方法重构
qq_45863001的博客
08-30 135
push：向数组最后面添加值 重构方法： Array.prototype.myPush=function(){ for(i=0;i<arguments.length;i++){ //遍历参数 并将参数添加到数组后面 this[this.length]=arguments[i] } //返回新数组长度 return this.length } var arr=[1,2,3,4,5] console.log(arr); var result=arr.myPush(
jS数组+数组方法重构
qq_47824967的博客
08-31 326
javaScript数组方法介绍和JS数组方法重构
JavaScript - 重构数组方法
最新发布
weixin_52540797的博客
11-02 133
重构JavaScript数组方法
JavaScript-数组方法重构
wen110898的博客
08-31 274
前言： 数组API的调用使得我们在js的使用中更加方便和快捷，而今天我们要探索数组API方法的底层原理，接下来和大家一起学习数组中的一些方法重构。 我们主要学习一下，栈与队列方法、迭代方法两种数组API重构。 一、栈与队列方法 myPush() myPop() myUnshift() myshift() 1.myPush() 重写push方法() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度. //1.在原型中添加自写的push Array.prototype.myPush = f
数组方法重构
weixin_45274554的博客
08-31 211
重构数组方法需要注意的点 调用方式 参数，是否改变原数组 实现的功能 返回值 pop()方法 功能：删除数组的最后一个元素 返回值：删除的元素 参数：无 Array.prototype.mypop=function(){ if(this.length==''){ return undefined; } else{ var result=this[this.length-1]; this.length--; retur
javaScript中数组方法重构
Dorothy1017的博客
08-26 214
1.push（p1,p2...）；入栈，在数组最后面添加元素 　　参数：要入栈的元素　　返回值：数组长度； 2.pop();出栈 最后一个元素出栈 　　参数：none； 　　返回值：出栈元素 结果： shift();出队，第一个元素出队 　　参数：none 　　返回值：出队元素 运行结果： sort(comparator);排队 　　compa...
JS方法重构
m0_57993363的博客
06-27 232
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。参数:增加的数组元素 返回值:新数组的长度 修改原数组。shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。pop() 方法用于删除数组的最后一个元素并返回删除的元素。map() 方法按照原始数组元素顺序依次处理元素。
JavaScript数组迭代方法重构与短路原理详解
本文档主要探讨了JavaScript和Java中的数组迭代方法，并提供了重构建议，重点关注如何使用数组的内置方法以及自定义迭代函数。以下是关键知识点的详细解释： 1. **迭代方法**： - **every()**: 这个方法用于检查...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值