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

相关文章
|
6天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素。基本语法是`v-for=&quot;(item, index) in items&quot;`,支持遍历对象的键值对。注意与`v-if`同用时应使用`&lt;template&gt;`,组件上使用`v-for`需设`key`属性以优化性能。
15 2
|
4天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
|
6天前
|
JavaScript 索引
JS判断数组是否包含某个元素
JS判断数组是否包含某个元素
11 1
|
9天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
31 2
|
3天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
|
5天前
|
JavaScript 前端开发 Java
深入ES6:解锁 JavaScript 类与继承的高级玩法
深入ES6:解锁 JavaScript 类与继承的高级玩法
|
5天前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
5天前
|
存储 前端开发 JavaScript
JavaScript 数组魔法阵:解锁数据的无限潜能
JavaScript 数组魔法阵:解锁数据的无限潜能
|
6天前
|
JavaScript 索引
JS数组常用方法总结,含ES6新方法,附示例代码
JS数组常用方法总结,含ES6新方法,附示例代码