脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS数组头部添加元素

JS在数组头部添加元素的3种方法

 更新时间：2023年10月08日 15:07:41   作者：zzzyyyyy丶  
JS数组是一种特殊的对象,JS没有真正的数组,只是用对象模拟数组,下面这篇文章主要给大家介绍了关于JS在数组头部添加元素的3种方法,需要的朋友可以参考下

1. 使用Array.unshift()方法,在数组头部插入元素

let person= ['张三', '李四', '王五'];
console.log(person.unshift('小明')); // 4
console.log(person); // ["小明", "张三", "李四", "王五"]
// 注意: 此方法的返回值是数组的长度 且改变原数组

2. 使用ES6的扩展运算符(...)

// 定义一个数组
let arr = ['张三', '李四']
let arr2 = ['王五', ...arr]
console.log(arr2) // 王五 张三 李四
// 定义一个数组，在头部写好需要插入的项后使用扩展运算符对原数组进行展开

3. 使用Array.contact方法,将数组进行拼接

// contact方法连接两个或多个数组
let arr1 = ['前端', 'JAVA']
let arr2 = ['攻城狮', '程序猿'] // 需添加在头部的元素
console.log(arr2.contact(arr1)) // 攻城狮 程序猿 前端 JAVA
// 注: contact方法不改变原数组

附：在数组中添加删除或替换元素

splice();在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;

splice()方法会修改原数组的值;

只有一个值时，从当前位置删除到数组末尾

let arr=[1,2,3,4,5]；
let num1=arr.splice(1)
console.log(num1;arr)//num=[2,3,4,5];arr=[1];

有两个值时，第一个值为删除的位置，第二个值为删除的个数;

let arr=[1,2,3,4,5]；
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1;arr);// num1=[3,4,5],arr=[1,2]

有三个或者多个值时，第一个值为插入元素的位置，第二个值为替换的个数，后面的值都为插入的新元素；

let arr=[1,2,3,4,5]；
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8
//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2;arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

总结 

到此这篇关于JS在数组头部添加元素的3种方法的文章就介绍到这了,更多相关JS数组头部添加元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Three.js实现3D乒乓球小游戏(物理效果)

    Three.js实现3D乒乓球小游戏(物理效果)

    本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
    2023-03-03
  • javascript 事件查询综合 推荐收藏

    javascript 事件查询综合 推荐收藏

    javascript 事件查询综合,需要的朋友可以参考下。
    2010-03-03
  • 前端实现电子签名的步骤及注意事项

    前端实现电子签名的步骤及注意事项

    本文详细介绍了前端技术中电子签名的实现方法,包括技术选型如HTML5 Canvas和SVG,以及实现步骤和数据安全措施,电子签名确保了法律效力和数据的安全性,适用于多种文件签署需求,需要的朋友可以参考下
    2024-11-11
  • JS实现将数据导出到Excel的方法详解

    JS实现将数据导出到Excel的方法详解

    这篇文章主要为大家介绍了JavaScript实现将数据导出到Excel的两种方法详解，文中的示例代码简洁易懂，感兴趣的小伙伴可以动手尝试一下
    2022-06-06
  • 纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js，程序源代码如下，感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript类型检测的方法实例教程

    JavaScript类型检测的方法实例教程

    这篇文章主要给大家介绍了关于JavaScript类型检测的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • layui-select动态选中值的例子

    layui-select动态选中值的例子

    今天小编就为大家分享一篇layui-select动态选中值的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript实现标签切换代码示例

    javascript实现标签切换代码示例

    本文给大家分享的事tab切换的两段js，均可实现标签切换功能，大家根据自己的需求自由选择
    2016-05-05
  • js实现图片粘贴到网页

    js实现图片粘贴到网页

    这篇文章主要为大家详细介绍了js实现图片粘贴到网页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • javascript学习之json入门

    javascript学习之json入门

    本文主要对javascript中的JSON进行详细介绍。相信对于初学者具有很好的参考价值，下面就跟着小编一起来看下吧
    2016-12-12

最新评论