带你读《现代Javascript高级教程》四、JavaScript数组(3)

简介: 带你读《现代Javascript高级教程》四、JavaScript数组(3)

带你读《现代Javascript高级教程》四、JavaScript数组(2)https://developer.aliyun.com/article/1349684?groupCode=tech_library


实现数组遍历的方法

// 模拟实现 forEach() 方法Array.prototype.myForEach = function(callbackFn) {
  for (let i = 0;
 i < this.length; i++) {
    callbackFn(this[i], i, this);
  }};
// 模拟实现 map() 方法Array.prototype.myMap = function(callbackFn) {
  const mappedArray = [];
  for (let i = 0; i < this.length; i++) {
    mappedArray.push(callbackFn(this[i], i, this));
  }
  return mappedArray;};
// 示例使用const myArray = [1, 2, 3];
myArray.myForEach((value, index) => {
  console.log(`Element at index indexis{index} is {value}`);});
const doubledArray = myArray.myMap(value => value * 2);
console.log(doubledArray);  // 输出:[2, 4, 6]

实现数组转换和连接的方法

// 模拟实现 toString() 方法Array.prototype.myToString = function() {
  let result = '';
  for (let i = 0; i < this.length; i++) {
    if (i > 0) {
      result += ', ';
    }
    result += this[i];
  }
  return result;};
// 模拟实现 join() 方法Array.prototype.myJoin = function(separator = ',') {
  let result = '';
  for (let i = 0; i < this.length; i++) {
    if (i > 0) {
      result += separator;
    }
    result += this[i];
  }
  return result;};
// 示例使用const myArray = [1, 2, 3];
console.log(myArray.myToString());      // 输出:'1, 2, 3'
console.log(myArray.myJoin('-'));       // 输出:'1-2-3'

实现数组排序和搜索的方法

// 模拟实现 sort() 方法Array.prototype.mySort = function(compareFn) {
  const length = this.length;
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - 1 - i; j++) {
      if (compareFn(this[j], this[j + 1]) > 0) {
        [this[j], this[j + 1]] = [this[j + 1], this[j]];
      }
    }
  }
  return this;};
// 模拟实现 indexOf() 方法Array.prototype.myIndexOf = function(searchElement, fromIndex = 0) {
  const length = this.length;
  for (let i = Math.max(fromIndex, 0); i < length; i++) {
    if (this[i] === searchElement) {
      return i;
    }
  }
  return -1;};
// 示例使用const myArray = [5, 2, 1, 4, 3];
console.log(myArray.mySort());        // 输出:[1, 2, 3, 4, 5]
console.log(myArray.myIndexOf(4));  // 输出:3

实现其他常用方法

// 模拟实现 isArray() 方法
Array.myIsArray = function(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';};
// 模拟实现 find() 方法Array.prototype.myFind = function(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i], i, this)) {
      return this[i];
    }
  }
  return undefined;};
// 示例使用const myArray = [1, 2, 3, 4, 5];
console.log(Array.myIsArray(myArray));    // 输出:true
console.log(myArray.myFind(value => value > 3)); // 输出:4

 

以上是一些简单的模拟实现示例,用于帮助理解数组方法的实现原理。


带你读《现代Javascript高级教程》四、JavaScript数组(4)https://developer.aliyun.com/article/1349682?groupCode=tech_library

相关文章
|
8月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
335 19
|
11月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
10647 23
|
11月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
624 2
2024年5月node.js安装(winmac系统)保姆级教程
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
286 2
|
JavaScript 前端开发
js教程——函数
js教程——函数
328 4
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
449 4
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
471 3
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
216 1

热门文章

最新文章