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

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