带你读《现代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

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
51 2
2024年5月node.js安装(winmac系统)保姆级教程
|
4月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
62 2
|
4月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
79 3
|
4月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
48 0
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
73 1
|
4月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
62 0
|
4月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
65 4
|
4月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
67 4
|
4月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
34 0
|
4月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
46 5

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55