js基础-数组方法重构

已于 2023-04-15 12:13:42 修改
阅读量173 收藏 1
点赞数 1
文章标签： javascript 重构
于 2023-04-15 12:08:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036752/article/details/130167967
版权

Array.push()方法

function array_push(arr) {
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('错误参数');
  if (arguments.length === 1) return arr.length;
  for (var i = 1; i < arguments.length; i++) {
    arr[arr.length] = arguments[i];
  }
  // 给数组尾部一旦添加元素，arr.length就会自动重设
  return arr.length;
}

var arr = [];
var len = array_push(arr, 3, 4, 6, 2, 1);
console.log(len, arr);

Array.pop()方法

function array_pop(arr) {
  var item = arr[arr.length - 1];
  arr.length--;
  return item;
}

var arr = [4, 3, 2, 1];
var item = array_pop(arr);
console.log(arr, item);

Array.unshift()方法

function array_unshift(arr) {
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('错误参数');
  if (arguments.length === 1) return arr.length;
  var len = arguments.length - 1; //当前添加参数数量
  arr.length = len = len + arr.length; //添加元素后数组的新长度
  while (len > 0) {
    if (len > arguments.length - 1) {
      arr[len - 1] = arr[len - arguments.length];
    } else {
      arr[len - 1] = arguments[len];
    }
    len--;
  }
  return arr.length;
}

var arr = [1, 2, 3, 4];
array_unshift(arr, 0, 1, 23, 5);
console.log(arr);

Array.shift()方法

function array_shift(arr) {
  if (arr.length === 0) return;
  var item = arr[0];
  for (var i = 0; i < arr.length - 1; i++) {
    arr[i] = arr[i + 1];
  }
  arr.length--;
  return item;
}

var arr = [];
var item = array_shift(arr);
console.log(item, arr);

Array.concat()方法

function array_concat(arr) {
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('不是一个数组');
  var arr1 = [];
  for (var i = 0; i < arr.length; i++) {
    arr1[i] = arr[i];
  }
  if (arguments.length === 1) return arr1;
  for (var j = 1; j < arguments.length; j++) {
    if (arguments[j] && arguments[j].constructor === Array) {
      for (var k = 0; k < arguments[j].length; k++) {
        arr1[arr1.length] = arguments[j][k];
      }
    } else arr1[arr1.length] = arguments[j];
  }
  return arr1;
}

var arr = [1, 2, 3, 4];
var arr1 = array_concat(arr);
arr[0] = 100;

Array.join()方法

function array_join(arr, separator) {
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('不是一个数组');
  if (separator === undefined) separator = ',';
  separator = String(separator);
  var str = '';
  for (var i = 0; i < arr.length - 1; i++) {
    str += arr[i] + separator;
  }
  str += arr[arr.length - 1];
  return str;
}

var arr = [1, 2, 3, 4];
var str = array_join(arr, '');
console.log(str);

Array.fill()方法

function array_fill(arr, item, start, end) {
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('不是一个数组');
  if (start === undefined) start = 0;
  if (end === undefined) end = arr.length;
  for (var i = start; i < end; i++) {
    arr[i] = item;
  }
  return arr;
}

var arr = Array(10);
arr = array_fill(arr, 5, 2, 5);
console.log(arr);

Array.isArray()方法

Array.from_1 = function (list) {
  var arr = [];
  if (!list.length) return arr;
  for (var i = 0; i < list.length; i++) {
    arr[i] = list[i];
  }
  return arr;

  return Array.prototype.slice.apply(list);
  //return Array.prototype.slice.call(list);
 //return [].slice.apply(list);
  //return [].slice.call(list);
 //return [].concat.apply([], list);
  //return Array.prototype.concat.apply([], list);
};

Array.splice()方法

function array_splice(arr, start, deleteCount) {
  var arr1 = [];
  if (arr == undefined || arr.constructor !== Array)
    throw new Error('参数错误');
  if (start === undefined) return arr1;
  start = Number(start);
  if (isNaN(start)) start = 0;
  if (start < 0) start = start + arr.length < 0 ? 0 : start + arr.length;
  if (start > arr.length) start = arr.length;
  if (deleteCount === undefined) deleteCount = arr.length - start;
  deleteCount = Number(deleteCount);
  if (isNaN(deleteCount)) deleteCount = 0;
  if (deleteCount < 0) return arr1;
  if (deleteCount + start > arr.length) deleteCount = arr.length - start;
  for (var i = start; i < arr.length; i++) {
    if (i < deleteCount + start) arr1[arr1.length] = arr[i];
    arr[i] = arr[i + deleteCount];
  }
  arr.length -= deleteCount;
  var len = arguments.length - 3;
  var l = (arr.length += len);
  while (l > start) {
    if (l > start + len) arr[l - 1] = arr[l - len - 1];
    else arr[l - 1] = arguments[3 + (l - 1 - start)];
    l--;
  }

  return arr1;
}

var arr1 = array_splice(arr, 7, 0, -1, -2, -3);
console.log(arr, arr1);

Array.slice()方法

function array_slice(arr, start, end) {
  var arr1 = [];
  if (isNaN(start)) start = 0;
  if (isNaN(end)) end = arr.length;
  start = parseInt(start);
  end = parseInt(end);
  if (start < 0) start = start + arr.length < 0 ? 0 : start + arr.length;
  if (end < 0) end = end + arr.length < 0 ? 0 : end + arr.length;
  for (var i = start; i < end; i++) {
    arr1[arr1.length] = arr[i];
  }
  return arr1;
}

var arr = [1, 2, 3, 4, 5];

var arr1 = array_slice(arr, 1, -7);
var arr2 = arr.slice(1, -7);
console.log(arr1, arr2);

Array.forEach()方法

function array_forEach(arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    if (i in arr) fn(arr[i], i, arr);
  }
}
var arr = [2, 4, 6, 8, 10];
array_forEach(arr, function (item, index, arr) {
  console.log(item, index, arr);
});

Array.map()方法

function array_map(arr, fn) {
  var arr1 = [];
  for (var i = 0; i < arr.length; i++) {
    if (i in arr) arr1[i] = fn(arr[i], i, arr);
  }
  return arr1;
}
function fn1(item, index, arr) {
  return item + 10;
}

var arr = [2, 4, 6, 8, 10];
var arr1 = array_map(arr, fn1);
console.log(arr1);

Array.some()方法

function array_some(arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    if (i in arr && Boolean(fn(arr[i], i, arr))) return true;
  }
  return false;
}

Array.every()方法

function array_every(arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    if (i in arr && !fn(arr[i], i, arr)) return false;
  }
  return true;
}

var bool = array_every(arr, function (item, index, arr) {
  return item > 5;
});
console.log(bool);

Array.filter()方法

function array_filter(arr, fn) {
  var arr1 = [];
  for (var i = 0; i < arr.length; i++) {
    // 回调函数返回为ture时，将元素添加到新数组的尾部
    if (i in arr && fn(arr[i], i, arr)) arr1[arr1.length] = arr[i];
  }
  return arr1;
}

var arr1 = array_filter(arr, function (item) {
  return item > 3;
});
console.log(arr1);

Array.reduce()方法

function array_reduce(arr, fn, initValue) {
    if (arr.length === 0) return;
    if (arr.length === 1) return arr[0];
    var index = 1;//后续判断从第几个开始循环，如果有初始值则从第0个开始循环，如果没有初始值从第一个开始循环
    var value = arr[0];
    if (initValue !== undefined) {
        index = 0;
        value = initValue;
        // 如果初始值存在value就是初始值，如果不存在，初始值就是数组的第0项
    }
    for (; index < arr.length; index++) {
        value = fn(value, arr[index], index, arr);
    }
    return value;
}

var val = array_reduce(arr, function (value, item) {
    console.log(value, item);
    return value + item;
})
console.log(val);

Array.flatmap()方法

var arr1 = array_flatmap(arr, function (item) {
  if (Array.isArray(item))
    item = array_flatmap(item, function (t) {
      return t;
    });
  return item;
});
console.log(arr1);

function array_flatmap(arr, fn) {
  var arr1 = [];
  for (var i = 0; i < arr.length; i++) {
    var value = fn(arr[i], i, arr);
    if (value && value.constructor === Array) {
      for (var j = 0; j < value.length; j++) {
        arr1[arr1.length] = value[j];
      }
    } else {
      arr1[arr1.length] = value;
    }
  }
  return arr1;
}

Array.reverse()方法

var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.reverse();
console.log(arr);
function reverse_1(arr) {
  for (i = 0; i < parseInt(arr.length / 2); i++) {
    var temp = arr[arr.length - i - 1];
    arr[arr.length - i - 1] = arr[i];
    arr[i] = temp;
  }
  return arr;
}
reverse_1(arr);
console.log(arr);

Array.sort()方法

var arr = [1, 2, 4, 0, 3, 10, 9, 24, 17, 13, 6, 5];
function sort_1(arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (fn(arr[j], arr[j + 1]) > 0) {
        var tem = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = tem;
      }
    }
  }
}
sort_1(arr, function (a, b) {
  return b - a;
});
console.log(arr);

目录

Array.push()方法

Array.pop()方法

Array.unshift()方法

Array.shift()方法

Array.concat()方法

Array.join()方法

Array.fill()方法

Array.isArray()方法

Array.splice()方法

Array.slice()方法

Array.forEach()方法

Array.map()方法

Array.some()方法

Array.every()方法

Array.filter()方法

Array.reduce()方法

Array.flatmap()方法

Array.reverse()方法

Array.sort()方法

怎么不算菜呢？
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js 定义对象数组(结合)多维数组方法
01-19
在php中定义数组很简单，但是在js中如果搞成字符为下标会出错，所以结合对象来搞 var top_ = { 'index':'首页', 'user':'用户', 'tree':'模块树' } ; var all_list = [ { index: [ {'name':'网站栏目管理','url':'1.html'}, {'name':'网站栏目管理2','url':'2.html'} ] }, { user: [ {'name':'用户管理','url':'user.html'}, {'name':'用户添加','url':
js删除Array数组中指定元素的两种方法
12-08
本节内容： js删除Array数组中指定元素 方法一， /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ 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[dx]) { this[n++]=this[i] } } this.lengt
js 重构Array的sort排序方法
12-10
这个排序是进行两两比较。 拿这个数组进行降序排列var a = [3, 1, 5, 6, 4, 2]; 第一轮比较：用第一个数值和本数组的其他元素进行比对 3比1 3比5 //5大，所以所以进行交换 得a = [5, 1, 3, 6, 4, 2]; 5比6 //交换 得a = [6, 1, 3, 5, 4, 2]; 6比4 6比2 第一轮最终结果 a = [6, 1, 3, 5, 4, 2]; 第二轮比较：用第二个数值和这个数值之后的元素进行对比 1比3 //交换 得a = [6, 3, 1, 5, 4, 2]; 3比5 //交换 得a = [6, 5, 1, 3, 4, 2]; 5比4 5比
如何判断一个 js 变量是数组类型
m0_62728880的博客
01-19 5135
方法一:使用 instanceof 运算符， 该运算符左边是我们想要判断的变量， 右边则是我们想要判断的对象的类 let arr = [1, 2, 3] console.log(arr instanceof Array) // true 返回true，说明变量arr是数组类型 方法二 利用构造函数来判断他的原型是否为Array， 用法： 变量.constructor === 变量类型 let arr = [1, 2, 3] console.log(arr.constructor ===
前端随心记---------函数
09-24 441
some（） some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 注意：some() 不会对空数组进行检测。 注意：some() 不会改变原始数组。 every（） ever...
判断数组的几种方法
WY66987的博客
07-23 964
判断是数组的7种方法
关于constructor 属性查看对象是否为数组详情
shaleilei的博客
11-10 1965
关于constructor 属性查看对象是否为数组详情： myArray.constructor.toString().indexOf("Array") > -1;
constructor()方法
八佾舞于庭
02-21 5346
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。  class Point { constructor(x, y) { this.x = x;//this指当前实例 this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } ...
19-数组方法重构
m0_49233445的博客
09-26 71
数组方法重构 1.调用方式 2.参数 是否改变原数组 3.功能 4.返回值 //mypop 删除最后一个元素并返回删除的元素 Array.prototype.myPop = function(){ if(this.length=''){ return undefined; }else{ var temp = this[this.length - 1]; this.length--; return temp; } }
js 处理数组重复元素示例代码
12-11
代码如下: function doSz{ var kzly==[“a”,”a”,”c”,”a”,”b”]; for(var i=0;i<kzly.length;i++){ var targetNode = kzly[i]; for (var j=0; j<i; j++) { if(targetNode == kzly[j]){ kzly.splice(i,1...
Vue.js中数组变动的检测详解
11-25
最近在尝试用Vue.js重构公司的现有业务代码，组件化的设计思路和MVVM的思想让我深深沉迷于其中。但是是踩到了不少坑，就比如这篇文章介绍的数组绑定后的更新检测。 相信大家都知道Observer，Watcher，vm 可谓 Vue 中...
JavaScript-数组方法重构
wen110898的博客
08-31 242
前言： 数组API的调用使得我们在js的使用中更加方便和快捷，而今天我们要探索数组API方法的底层原理，接下来和大家一起学习数组中的一些方法重构。 我们主要学习一下，栈与队列方法、迭代方法两种数组API重构。 一、栈与队列方法 myPush() myPop() myUnshift() myshift() 1.myPush() 重写push方法() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度. //1.在原型中添加自写的push Array.prototype.myPush = f
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 119
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 197
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 856
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 188
【代码】echarts的柱状图使用。
Vue从入门到实战Day07
最新发布
ltt159264的博客
05-21 583
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
js map重构数组
09-16
// array_map函数实现数组重构 function array_map(arr, fn) { var arr1 = []; for (var i = 0; i ; i++) { if (i in arr) arr1[i = fn(arr[i], i, arr); } return arr1; } var arr = [1, 2, 3, 4, 5]; var ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值