【JavaScript 教程】第六章 数组18—push() :将一个或多个元素添加到数组的末尾...
来源 | https://www.javascripttutorial.net/
翻译 | 杨小爱
在今天的教程中,我们将学习如何使用 JavaScript Array push()方法将一个或多个元素添加到数组的末尾。
JavaScript Array push() 方法介绍
Array.prototype.push()方法将一个或多个元素添加到数组的末尾并返回新数组的长度。
下面显示了push()方法的语法:
push(newElement);push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);
push() 方法返回调用该方法的数组对象的长度属性的新值。
JavaScript Array push() 方法示例
让我们举一些使用 push() 方法的例子。
1)、 使用数组 push() 将一个元素追加到数组中
以下示例将数字 40 添加到 numbers 数组的末尾:
let numbers = [10, 20, 30];
const length = numbers.push(40);
console.log(length);console.log(numbers);
输出:
4[ 10, 20, 30, 40 ]
它是怎么工作。
首先,定义包含三个数字的 numbers 数组:
let numbers = [10, 20, 30];
其次,使用方法将数字添加到数组40的末尾并将返回值分配给变量:numbers push() length
const length = numbers.push(40);
第三、输出length变量和numbers数组:
console.log(length);console.log(numbers);
下图说明了该示例的工作原理:
2)、 使用数组 push() 将多个元素添加到数组末尾
以下示例显示了如何使用push()方法将多个元素添加到数组的末尾:
let numbers = [10, 20, 30];
const length = numbers.push(40, 50);
console.log(length);
console.log(numbers);
输出:
5[ 10, 20, 30, 40, 50 ]
下图说明了它是如何工作的:
3)、使用 push() 将一个数组的元素追加到另一个数组
假设您有两个数组colors和 cmyk:
let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];
并且,我们想将 cmyk 的元素附加到颜色数组中。
为此,我们可以使用 for...of 循环遍历 cmyk 数组的元素,并使用 push() 方法将每个元素附加到 colors 数组,如下所示:
let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];for (const color of cmyk) {colors.push(color);}console.log(colors);
输出:
['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']
从 ES6 开始,我们可以使用扩展运算符( ...) 来扩展cmyk数组的元素并同时将它们推送到colors数组中,如下所示:
let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];colors.push(...cmyk);console.log(colors);
对类数组对象使用 JavaScript Array push() 方法
Array.prototype.push() 方法被设计成是通用的。因此,我们可以在类数组对象上使用 call() 或 apply() 调用 push() 方法。
在底层, push() 方法使用 length 属性来确定插入元素的位置。如果 push() 方法无法将 length 属性转换为数字,它将使用 0 作为索引的值。
请参见以下示例:
let greetings = { 0: 'Hi', 1: 'Hello', length: 2,append(message) {[].push.call(this, message);},};greetings.append('Howdy');greetings.append('Bonjour');console.log(greetings);
输出:
{ '0': 'Hi', '1': 'Hello', '2': 'Howdy', '3': 'Bonjour', length: 4, add: [Function: add]}
这个是怎么运行的。
首先,定义具有三个属性 1、2 和length以及一个方法 append() 的 greetings 对象:
let greetings = { 0: 'Hi', 1: 'Hello', length: 2,append(message) {[].push.call(this, message);},};
append() 方法调用数组对象的 push() 方法将message附加到 greetings 对象。
第二、调用greetings对象的append()方法:
greetings.append('Howdy');greetings.append('Bonjour');
在每次调用中,push() 使用问候对象的长度属性来确定它附加新元素的位置并将长度属性增加一。
结果,greetings 对象在索引 2 和 3 处多了两个元素。调用后的 length 属性为 4。
第三,将greetings对象输出到控制台:
console.log(greetings);
要允许 append() 方法接受多个消息,我们可以像这样修改该方法:
let greetings = { 0: 'Hi', 1: 'Hello', length: 2,append() {[].push.call(this, ...arguments);},};greetings.append('Howdy', 'Bonjour');console.log(greetings);
它如何运行?
首先,从 append 方法中删除 message 参数。
其次,将 arguments 对象的元素展开,并将它们推送到 greetings 对象。
总结
使用 JavaScript 数组 push() 方法将一个或多个元素附加到数组。
push() 方法也适用于类似数组的对象。
更多教程
【JavaScript 教程】第六章 数组17—flatMap() :对每个元素执行映射函数并将结果展平
【JavaScript 教程】第六章 数组16—flat() :递归地将数组展平到指定的深度
【JavaScript 教程】第六章 数组15—join() :将所有元素连接成一个字符串
【JavaScript 教程】第六章 数组14—reduce() :将数组的元素减少为一个值
【JavaScript 教程】第六章 数组13— forEach() :遍历数组元素
【JavaScript 教程】第六章 数组12— map() :转换数组元素
【JavaScript 教程】第六章 数组11— filter() :过滤数组中的元素
【JavaScript 教程】第六章 数组10— sort() :对数组中的元素进行排序
【JavaScript 教程】第六章 数组09— some() :检查数组中是否至少有一个元素通过了测试
【JavaScript 教程】第六章 数组08— every() :检查数组中的每个元素是否都通过了测试
【JavaScript 教程】第六章 数组07— index() :在数组中定位一个元素
【JavaScript 教程】第六章 数组06— slice() :复制数组元素
【JavaScript 教程】第六章 数组05— splice():删除、插入和替换
【JavaScript 教程】第六章 数组04— JavaScript 队列
【JavaScript 教程】第六章 数组03— Stack :使用 Array 的push()和pop()方法实现堆栈数据结构
【JavaScript 教程】第六章 数组02— Array Length:如何有效地使用数组的长度属性
【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型
学习更多技能
请点击下方公众号
【JavaScript 教程】第六章 数组18—push() :将一个或多个元素添加到数组的末尾...相关推荐
- unshift() :将一个或多个元素添加到数组的开头
在今天的文章中,我们将学习如何使用 JavaScript Array unshift() 方法将一个或多个元素添加到数组的开头. JavScript Array unshift() 方法介绍 Arra ...
- 数组18—push() :将一个或多个元素添加到数组的末尾
在今天的教程中,我们将学习如何使用 JavaScript Array push()方法将一个或多个元素添加到数组的末尾. JavaScript Array push() 方法介绍 Array.prot ...
- unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度
var arr = [1, 2];arr.unshift(0); //result of call is 3, the new array length //arr is [0, 1, 2]arr.u ...
- 2022版Maven教程 - 第六章 单一架构案例
2022版Maven教程 - 第六章 单一架构案例 一.创建工程,引入依赖 1.架构 ①架构的概念 ②单一架构 2.创建工程 3.引入依赖 ①搜索依赖信息的网站 [1]到哪儿找? [2]怎么选择? ② ...
- java界面编辑教程_java程序设计基础教程第六章图形用户界面编辑.docx
java程序设计基础教程第六章图形用户界面编辑.docx 还剩 27页未读, 继续阅读 下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容要 ...
- Android[中级教程]第六章 XML解析之SAX解析器
Android[中级教程]第六章 XML解析之SAX解析器 分类: Android中级2011-10-06 01:52 125人阅读 评论(1) 收藏 举报 接上一章,这一章我们就来学习SAX解析器, ...
- linux教程第六章,Linux教程(第六章).ppt
Linux教程(第六章) 1 计算机专业必修课程linux第六章 系统管理 教师: 李晓红 信息科学与工程学院计算机系 2005/8 2 主要内容 性能及内核管理 软件包管理 用户和工作组管理 设备管 ...
- AArch64教程第六章
AArch64教程第六章 Nov 27, 2016 • Roger Ferrer Ibáñez • AArch64 到目前为止我们知道如何做一些计算和访问内存.今天我们将学习怎样修改我们程序的控制流. ...
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
编程题: 利用这样一章学到的知识,制作如图6-10所示的表格效果,并且要求代码语义化. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE ...
最新文章
- noip2010提高组3题题解 by rLq
- 单片机有什么好的网课?
- Python 获取接口数据,解析JSON,写入文件
- 读取文件:TypeError: an integer is required (got type str)
- 图解ARP协议(二)ARP攻击原理与实践
- 分析ASP.NET读取XML文件4种方法
- 教育资源数字化 计算机和通讯,《计算机网络技术课程数字化资源开发研究》.doc...
- TypeScript泛型约束
- oracle11g-RHEL5.8-Kernel Parameters and Resource Limits
- 最常用三极管导通电路
- DolphinScheduler征稿 —手把手教你如何使用小豚调度
- python安装失败0x80240017
- Word批量转TXT宏
- 英语句子成分和词类的关系
- python package什么意思_Python模块、包(Package)概念与用法分析
- 计算从100加到500的和
- 东芝推出新型低触发LED电流光继电器,满足电池供电设备的低功耗需求
- Google Maps基础及实例解析
- 嵌入式Linux应用开发详解
- 非稳态计算时间步和最大迭代数的设定(分享)