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

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

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


3. 数组属性

JavaScript数组还有一些常用的属性,用于描述和操作数组的特性和状态。

 

  • length:返回数组的长度。
  • constructor:返回创建数组对象的原型函数。
  • prototype:数组对象的原型对象,用于添加新的方法和属性。

这些属性可以帮助我们了解数组的结构和信息,以便更好地处理和操作数组。

4. 实现数组API

为了更好地理解数组的方法和实现原理,我们可以尝试自己模拟实现一些数组API的方法。以下是一些常用的数组方法的简单模拟实现示例:

实现添加和删除元素的方法

// 模拟实现 push() 方法Array.prototype.myPush = function(...elements) {
  const len = this.length;
  let i = 0;
  while (i < elements.length) {
    this[len + i] = elements[i];
    i++;
  }
  return this.length;};
// 模拟实现 pop() 方法Array.prototype.myPop = function() {
  if (this
.length === 0) return undefined;
  const lastElement = this[this.length - 1];
  delete this[this.length - 1];
  this.length--;
  return lastElement;};
// 模拟实现 unshift() 方法Array.prototype.myUnshift = function(...elements) {
  const originalLength = this.length;
  for (let i = originalLength - 1; i >= 0; i--) {
    this[i + elements.length] = this[i];
  }
  for (let i = 0; i < elements.length; i++) {
    this[i] = elements[i];
  }
  this.length = originalLength + elements.length;
  return this.length;};
// 模拟实现 shift() 方法Array.prototype.myShift = function() {
  if (this.length === 0) return undefined;
  const firstElement = this[0];
  for (let i = 0; i < this.length - 1; i++) {
    this[i] = this[i + 1];
  }
  delete this[this.length - 1];
  this.length--;
  return firstElement;};
// 示例使用const myArray = [1, 2, 3];
console.log(myArray.myPush(4, 5));    // 输出:5
console.log(myArray);                  // 输出:[1, 2, 3, 4, 5]
console.log(myArray.myPop());        // 输出:5
console.log(myArray);                  // 输出:[1, 2, 3, 4]
console.log(myArray.myUnshift(0)); // 输出:5
console.log(myArray);                  // 输出:[0, 1, 2, 3, 4]
console.log(myArray.myShift());     // 输出:0
console.log(myArray);                  // 输出:[1, 2, 3, 4]

实现修改和访问元素的方法

// 模拟实现 splice() 方法Array.prototype.mySplice = function(startIndex, deleteCount, ...elements) {
  const removedElements = [];
  const len = this.length;
  const deleteEndIndex = Math.min(startIndex + deleteCount, len);
  const moveCount = len - deleteEndIndex;
  // 保存删除的元素
  for (let i = startIndex; i < deleteEndIndex; i++) {
    removedElements.push(this[i]);
  }
  // 移动剩余元素
  for (let i = 0; i < moveCount; i++) {
    this[startIndex + deleteCount + i] = this[startIndex + deleteCount + i + moveCount];
  }
  // 插入新元素
  for (let i = 0; i < elements.length; i++) {
    this[startIndex + i] = elements[i];
  }
  // 更新长度
  this.length = len - deleteCount + elements.length;
  return removedElements;};
// 示例使用const myArray = [1, 2, 3, 4, 5];
console.log(myArray.mySplice(2, 2, 'a', 'b')); // 输出:[3, 4]
console.log(myArray);                             // 输出:[1, 2, 'a', 'b', 5]


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

相关文章
|
5天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
5天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
32 10
|
3天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
3天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
5天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
9 0
|
5天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
5天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
9 0
|
5天前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
【5月更文挑战第4天】本文介绍了如何使用JavaScriptExecutor在自动化测试中实现元素高亮显示。通过创建并执行JS代码,可以改变元素的样式,例如设置背景色和边框,以突出显示被操作的元素。文中提供了一个Java示例,展示了如何在Selenium中使用此方法,并附有代码截图和运行效果展示。该技术有助于跟踪和理解测试过程中的元素交互。
13 0
|
5天前
|
JavaScript 前端开发
js关于数组的方法
js关于数组的方法
11 0
|
5天前
|
JavaScript 前端开发
js怎么清空数组?
js怎么清空数组?
14 0