浅谈Array –JavaScript内置对象

Array --JavaScript内置对象

描述

可以用一个变量存储多种数据类型的Array对象,Array不是关联数组,不能使用字符串作为索引访问数组元素,需要使用非负整数的下标访问数组中的元素。

和对象的某些特征很相似,例如:属性访问器一半相似,衍生出的使用 .call() 或者 .apply() 将数组方法赋予对象。

较为常用的几个方法

有的是通过改变原数组,又或是返回一个新数组的形式。方便记忆可以划分为:增删改查,排序,遍历,数据和数据集功能。

陈旧的:

此区域为增删区域

\1. push() - 在数组末尾添加一个或多个元素,并返回新的长度。

\2. pop() - 删除并返回数组的最后一个元素。

\3. shift() - 删除并返回数组的第一个元素。

\4. unshift() - 在数组的开头添加一个或多个元素,并返回新的长度。

此区域为修改区域(合并)

\5. splice() - 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

\6. slice() - 返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。

\7. concat() - 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。

\8. join() - 将数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

此区域为排序查找

\9. reverse() - 颠倒数组中元素的顺序。

\10. sort() - 对数组的元素进行排序。

\11. indexOf() - 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

\12. lastIndexOf() - 返回一个指定的元素在数组中最后出现的位置,如果不存在,则返回-1。

此区域为遍历

\13. forEach() - 对数组的每个元素执行一次提供的函数。

\14. map() - 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

\15. filter() - 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

\16. reduce() - 对数组中的所有元素执行一个由您提供的reducer函数(升序执行),将其结果汇总

新颖的:

此区域为数据和数据集功能

at() - 通过下标访问数组元素,区别于直接用方括号访问,可以使用负数访问。

flat() - 将数组扁平化,深度为1。通过传递一个数字参数修改深度。

flatMap() - flat() 和 map() 的结合,先扁平(深度1)再遍历。

Array.from() - 类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。例如字符串,map和set

Array.of() - 创建一个数组,区别于直接使用 Array() 创建数组,括号内的内容是数组的实际数据。假如你想创建一个长度为7的数组应该使用 Array(7) 而不是 Array.of(7) ,因为后者会创建一个[7]的数组。

entries() - 返回一个Array迭代器对象。

Array.length

array.length 改变length属性会发生的情况,假如length小于数组最大的下标,会将length之后的元素清除。

数组的长度跟许多方法是挂钩的,例如 entries() 方法,会通过获取数组长度访问每个整数索引。可以简单的通过 .call() 方法验证:

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
  console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]

可以以此俩想到楼下的通用数组方法访问 length 属性和索引访问数组元素。

空槽和数组方法

可以使用 Array(n) 创建一个长度为n的空槽数组。

对于空槽而言,许多数组方法都会照顾一下。例如 concat() 方法就会将空槽省去。亦或是将空槽视为 undefined 例如你能想到的 values()

数组遍历

forEach()for...in 两者在特殊情况下的不同效果

for...in可能会迭代对象的原型链上的属性,而array.forEach不会迭代数组的原型链上的属性。此外,array.forEach可以使用break和continue语句来控制迭代。而for...in不能。

const arr1 = [1, 2, 3];
arr1.name = "shit"


arr1.forEach((i) => {
  console.log(i);
}); // 1, 2, 3

for (const i in arr1) {
  console.log(arr1[i]);
}; // 1, 2, 3, shit

数组复制

深拷贝,浅拷贝 主要比较对象的引用是否一致。例如对象和数组这类数据类型可以想象成保存的是指向数据的地址,浅拷贝的本质是两个数组或者对象中的数据指向了同一个目标。而深拷贝则是两个完全不同的数据指向

自带的一个浅拷贝 slice()

简单的完成一个深拷贝可以使用 JSON 提供的 stringifyparse 方法,通过转成 JSON 对象再转回数组的方式。

通用数组方法

指数组的不访问数组对象的任何内部数据,只访问 length 属性和索引访问数组元素。可以使用call方法在类数组对象上调用。

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

由此来看,数组和对象的相似性还是蛮大的,又或者是较简单的数据形式,提供的简单方法能够让开发者更便捷的对数据集进行操作。

原文链接:https://www.cnblogs.com/waterrec/p/17266687.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈Array –JavaScript内置对象 - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • JavaScript中的this指向问题详解

    JavaScript中的this指向问题详解 1. this的概念 在JavaScript中,每个函数都有自己的上下文环境,而this关键字就是指向这个上下文环境,表示当前函数的执行环境。 2. this的指向 全局环境下,this指向全局对象(浏览器中为window对象)。 函数内部,this指向调用该函数的对象,如果没有上下文对象,则为window对象。…

    JavaScript 2023年6月10日
    00
  • 如何使用Bootstrap创建表单

    当使用Bootstrap创建表单时,可以利用Bootstrap提供的现成的组件和样式来快速搭建一个美观、易用、响应式的表单。 创建Bootstrap表单的步骤 引入Bootstrap的CSS和JS库文件。可以直接从官网下载(http://getbootstrap.com/),或者通过CDN引入。 <!– Bootstrap CSS –> &l…

    JavaScript 2023年6月10日
    00
  • JS正则表达式详解[收藏]

    JS正则表达式详解[收藏] 正则表达式概述 正则表达式(Regular Expression)是一种文本模式,可以用于字符串的搜索、匹配和替换操作。它在计算机科学中广泛应用,涉及到文本处理、自然语言处理、网络安全等领域。 JS正则表达式对象 在JS中,可以通过正则表达式对象来实现对字符串的操作。正则表达式对象的常用属性和方法如下: 常用属性 source:获…

    JavaScript 2023年6月10日
    00
  • HTML5中Localstorage的使用教程

    HTML5中Localstorage是用于在客户端浏览器上存储数据的API,这使得我们可以在浏览器中存储和检索数据,而不需要服务器的帮助。这篇文章将会介绍HTML5 Localstorage在Web应用程序中的使用方式,包括了创建,添加和检索基于关键字的数据,并且提供了两个本地存储的例子,帮助读者更好地理解Localstorage的使用。 简介 Locals…

    JavaScript 2023年6月11日
    00
  • JS赋值、浅拷贝和深拷贝(数组和对象的深浅拷贝)实例详解

    JS赋值、浅拷贝和深拷贝 在JavaScript开发中,我们经常需要对变量进行赋值操作,同时还需要将对象或数组复制到另一个变量中。这些操作看起来很简单,但如果不理解JavaScript中变量存储的方式,就容易引出一些微妙的问题。本文将简单介绍JS赋值、浅拷贝和深拷贝。 JS赋值 JS赋值操作可以将一个变量的值赋给另一个变量。这是一种基本的操作,也是很容易看懂…

    JavaScript 2023年5月27日
    00
  • JS获取字符对应的ASCII码实例

    首先我们来说明一下什么是ASCII码。ASCII码是一种常见的字符编码方案,使用7位二进制数来表示128个字符(包括字母、数字、符号等)。 接下来,我们将介绍如何使用JavaScript获取字符对应的ASCII码。 1. 使用charCodeAt()方法 charCodeAt()方法返回指定位置字符的Unicode编码,我们可以使用charCodeAt()方…

    JavaScript 2023年5月28日
    00
  • JavaScript实现多维数组的方法

    实现多维数组的方法主要分为两种:数组嵌套和扁平化转换。本文将详细介绍这两种方法,并附上代码示例。 数组嵌套 在 JavaScript 中,多维数组最简单的实现方法就是使用数组嵌套。例如,下面是一个二维数组的示例: const arr2d = [ [1, 2], [3, 4], ]; 要创建三维数组,只需在二维数组的基础上再嵌套一层数组: const arr3…

    JavaScript 2023年5月27日
    00
  • js根据后缀判断文件文件类型的代码

    让我们来详细讲解一下“js根据后缀判断文件类型的代码”的完整攻略。 前置知识 在开始之前,我们需要了解一些前置知识: 如何通过 JavaScript 获取文件的后缀名。 如何根据后缀名判断文件类型。 获取文件后缀名 要获取文件的后缀名,我们可以使用 JavaScript 的 split() 方法。例如,对于一个文件名为 example.jpg 的文件,可以使…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部