脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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数组头部添加元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js创建对象几种方式的优缺点对比

    js创建对象几种方式的优缺点对比

    这篇文章主要对比了js创建对象几种方式的优缺点，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • css与javascript跨浏览器兼容性总结

    css与javascript跨浏览器兼容性总结

    这篇文章主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
    2014-09-09
  • js中function()使用方法

    js中function()使用方法

    通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递，下面为大家介绍下函数的使用语法
    2013-12-12
  • JS如何修改对象数组的key值

    JS如何修改对象数组的key值

    这篇文章主要介绍了JS如何修改对象数组的key值,使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可,需要的朋友可以参考下
    2024-02-02
  • Bootstrap CSS使用方法

    Bootstrap CSS使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • element-table表格中插入颜色块显示数据状态的示例代码

    element-table表格中插入颜色块显示数据状态的示例代码

    这篇文章主要介绍了element-table表格中插入颜色块显示数据状态,代码部分分为dom部分和data部分及css部分,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • JS利用循环解决的一些常见问题总结

    JS利用循环解决的一些常见问题总结

    循环输出问题是面试中经典的题目,一般会给出代码,让我们解释原因,并给出若干解决方案,下面这篇文章主要给大家介绍了关于JS利用循环解决的一些常见问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • js 实现打印网页中定义的部分内容的代码

    js 实现打印网页中定义的部分内容的代码

    有时候页面需要打印功能，如果再做一个页面不利于优化，两个页面内容一样了，所以可以用js实现内容的打印不需要的就不打印。
    2010-04-04
  • 小程序图片长按识别功能的实现方法

    小程序图片长按识别功能的实现方法

    这篇文章主要介绍了小程序图片长按识别功能的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 一文解决前端JS小数运算精度问题

    一文解决前端JS小数运算精度问题

    在做项目的时候,前端需要在表格的底部做一个汇总的功能,在采用reduce对当前属性所有值汇总时,发现汇总结果存在好长的小数位,本文给大家介绍了如何解决前端JS小数运算精度问题,需要的朋友可以参考下
    2024-02-02

最新评论