js基础-数组方法重构

已于 2023-04-15 12:13:42 修改
阅读量530 收藏 1
点赞数 1
文章标签： javascript 重构
于 2023-04-15 12:08:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036752/article/details/130167967
版权
该文详细介绍了JavaScript中数组的一些核心方法的实现，包括push、pop、unshift、shift、concat、join、fill、isArray、splice、slice、forEach、map、some、every、filter、reduce和flatmap等，展示了对数组元素的增删改查以及转换操作。
摘要由CSDN通过智能技术生成

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()方法

前端随心记---------函数
09-24 493
some（） some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 注意：some() 不会对空数组进行检测。 注意：some() 不会改变原始数组。 every（） ever...
判断数组的几种方法
WY66987的博客
07-23 1000
判断是数组的7种方法
关于constructor 属性查看对象是否为数组详情
shaleilei的博客
11-10 2008
关于constructor 属性查看对象是否为数组详情： myArray.constructor.toString().indexOf("Array") > -1;
constructor()方法
八佾舞于庭
02-21 5410
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。  class Point { constructor(x, y) { this.x = x;//this指当前实例 this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } ...
数组
weixin_39583421的博客
08-14 154
数组 1.数组也是对象的一种 2.数组的创建方式： 1）字面量（直接量） Eg：var arr = [1,2,3,4,5]; 注意：a)数组中的元素是可读写的； b)arr[6.6]=8 中括号中的6.6表示属性名，8表示属性值 ...
19-数组方法重构
m0_49233445的博客
09-26 87
数组方法重构 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; } }
JavaScript-数组方法重构
wen110898的博客
08-31 274
前言： 数组API的调用使得我们在js的使用中更加方便和快捷，而今天我们要探索数组API方法的底层原理，接下来和大家一起学习数组中的一些方法重构。 我们主要学习一下，栈与队列方法、迭代方法两种数组API重构。 一、栈与队列方法 myPush() myPop() myUnshift() myshift() 1.myPush() 重写push方法() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度. //1.在原型中添加自写的push Array.prototype.myPush = f
JavaScript - 重构数组方法
weixin_52540797的博客
11-02 133
重构JavaScript数组方法
Javascript——常用数组方法重构
xiangxiang的博客
08-17 277
数组方法重构
js代码-tmp--数组中的逆序对-改
07-16
"js代码-tmp--数组中的逆序对-改"这个标题可能表示我们正在处理一个已经存在的JavaScript代码实现，该实现可能计算一个数组中的逆序对数量，但存在某些问题需要改进。这可能涉及到优化算法效率，修复错误，或者改进...
js 定义对象数组(结合)多维数组方法
01-19
在php中定义数组很简单，但是在js中如果搞成字符为下标会出错，所以结合对象来搞 var top_ = { 'index':'首页', 'user':'用户', 'tree':'模块树' } ; var all_list = [ { index: [ {'name':'网站栏目...
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循环遍历数组的长度，遍历到最后一个的时候，就把新的参数放入数组里 ..
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 452
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
如何编译 Cesium 源码
ismartcube的博客
11-13 1223
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 910
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
最新发布
佚名程序员
11-16 1113
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 173
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 575
nuxt
JavaScript数组迭代方法重构与短路原理详解
本文档主要探讨了JavaScript和Java中的数组迭代方法，并提供了重构建议，重点关注如何使用数组的内置方法以及自定义迭代函数。以下是关键知识点的详细解释： 1. **迭代方法**： - **every()**: 这个方法用于检查...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值