当前位置:网站首页 > C++编程 > 正文

数组方法find(数组方法slice)



英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节,我们学习了如何使用 JavaScript Array 的 splice() 方法删除现有元素、插入新元素和替换数组中的元素错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组05— splice():删除、插入和替换》进行学习。
那么,在今天的教程中,我们一起来学习JavaScript 数组 slice() 方法的实际用途。
Array.prototype 对象提供了 slice() 方法,该方法允许您提取数组的子集元素并将它们添加到新数组中。
slice() 方法接受两个可选参数,如下所示:
 
 
   
 
slice(start, stop);

startstop参数都是可选的。

start 参数确定从零开始提取的索引。如果start是undefined, slice() 从 0 开始。

stop参数,顾名思义,是一个从零开始的索引,在该索引处结束提取。slice() 方法提取到 stop-1。这意味着 slice() 方法不包含新数组中停止位置的元素。如果省略 stop 参数,slice() 方法将使用数组的长度作为 stop 参数。

slice() 返回一个包含原始数组元素的新数组。重要的是要记住,slice() 方法只执行元素到新数组的浅拷贝。此外,它不会更改源数组。

克隆一个数组

slice() 用于克隆一个数组,如下例所示:

 
 
   
 
var numbers = [1,2,3,4,5];var newNumbers = numbers.slice();

在此示例中,newNumbers 数组包含 numbers 数组的所有元素。

复制数组的一部分

slice() 方法的典型用途是在不修改源数组的情况下复制数组的一部分。下面是一个例子:

 
 
   
 
var colors = ['red','green','blue','yellow','purple'];var rgb = colors.slice(0,3);console.log(rgb); // ["red", "green", "blue"]

rgb 数组包含colors数组的前三个元素。源阵列colors保持不变。

将类数组对象转换为数组

slice() 方法用于将类数组对象转换为数组。例如:

 
 
   
 
function toArray() { return Array.prototype.slice.call(arguments);}
var classification = toArray('A','B','C');
console.log(classification); // ["A", "B", "C"]

在这个例子中, toArray() 函数的参数是一个类似数组的对象。在 toArray() 函数内部,我们调用 slice() 方法将参数对象转换为数组。

我们传递给 toArray() 函数的每个参数都将是新数组的元素。

您经常看到的另一个典型示例是将 NodeList 转换为数组,如下所示:

 
 
   
 
var p = document.querySelectorAll('p');var list = Array.prototype.slice.call(p);

在这个例子中,首先,我们使用document.querySelectorAll()来获取pHTML 文档的所有P的节点。这个方法的结果是一个NodeList对象,它是一个类似数组的对象。然后,我们调用slice()方法将NodeList对象转换为数组。

有时,您会看到以下语法:

 
 
   
 
var list = [].slice.call(document.querySelectorAll('p'));

在这个例子中,我们实例化了一个空数组[],并通过空数组间接访问了Array.prototype方法的slice()方法。效果和直接使用 Array.prototype 一样。

在今天的教程中,我们学习了如何使用 JavaScript 数组 slice() 方法复制整个数组或数组的子集,并将类数组对象转换为数组。

今天的内容就到这里了。

如果您还想学习前面的内容,请点击下文链接进行学习。

【JavaScript 教程】第六章 数组05— splice():删除、插入和替换

【JavaScript 教程】第六章 数组04— JavaScript 队列

【JavaScript 教程】第六章 数组03— Stack :使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length:如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

【JavaScript 教程】第五章 字符串11— includes():检查字符串是否包含子字符串

【JavaScript 教程】第五章 字符串10— slice():提取字符串的一部分

【JavaScript 教程】第五章 字符串09— substring():从字符串中提取子字符串

【JavaScript 教程】第五章 字符串08— lastIndexOf():查找字符串中子字符串最后一次出现的索引

【JavaScript 教程】第五章 字符串07— indexOf():获取字符串中子字符串第一次出现的索引

【JavaScript 教程】第五章 字符串05— concat():将多个字符串连接成一个新字符串

【JavaScript 教程】第五章 字符串04— padStart() 和 padEnd()

【JavaScript 教程】第五章 字符串03— trim()、trimStart() 和 trimEnd()

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

到此这篇数组方法find(数组方法slice)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 合并数组函数c++是哪个(c++中数组合并)2025-01-25 23:27:08
  • tcp工具坐标(tcp坐标的含义)2025-01-25 23:27:08
  • 佳能cp1500(佳能cp1500纸盒和墨盒尺寸错误)2025-01-25 23:27:08
  • 简述ceph存储的优势(ceph存储的优点)2025-01-25 23:27:08
  • mfc7360显示纸盒无纸(mfc7380显示无纸)2025-01-25 23:27:08
  • cmake 多文件夹(cmake 多个文件 多个目录)2025-01-25 23:27:08
  • msvcp140.dll无法继续执行代码(msvcp100.dll无法继续执行代码)2025-01-25 23:27:08
  • plc1200定时器有几种(plc1200定时器的用法)2025-01-25 23:27:08
  • msvcp140.dll找不到的解决方法(msvcp120.dll找不到的解决方法)2025-01-25 23:27:08
  • gmock原理(gmock doall)2025-01-25 23:27:08
  • 全屏图片