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

相关文章
|
15天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
1天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
25 10
|
3天前
|
JavaScript 前端开发
js关于数组的方法
js关于数组的方法
9 0
|
3天前
|
JavaScript 前端开发
js怎么清空数组?
js怎么清空数组?
10 0
|
3天前
|
存储 JavaScript 前端开发
js处理数组的方法
js处理数组的方法
12 2
|
10天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
10天前
|
JavaScript 前端开发
JavaScript 数组的添加删除和排序
JavaScript 数组的添加删除和排序
|
13天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
22 4
|
20天前
|
JavaScript 前端开发
js数组过滤,从简单到多条!
js数组过滤,从简单到多条!
|
21天前
|
存储 JavaScript

热门文章

最新文章