首页 > 其他分享 >JS数组有哪些常用原生方法?哪些能改变数组本身?

JS数组有哪些常用原生方法?哪些能改变数组本身?

时间:2023-08-05 15:44:41浏览次数:21  
标签:arr console log 哪些 JS 改变 数组 const

1. 数组和字符串的转换方法

toString 不改变原数组

const arr = [1, 2, 3]
console.log(arr.toString());  // 1,2,3

join 不改变原数组

join(str) 数组转字符串,接收一个参数,默认为逗号分隔符。

const arr = [1, 2, 3]
console.log(arr)             // [1, 2, 3]
console.log(arr.join())      // 1,2,3
console.log(arr.join(':'))   // 1:2:3

2. 数组尾部操作方法

pop 改变原数组

pop() 删除并返回数组最后一个元素。

const arr = [1, 2, 3]
console.log(arr)          // [1, 2, 3]
console.log(arr.pop())    // 3

push 改变原数组

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

const arr = [1, 2]
console.log(arr.push(3))  // 3
console.log(arr)          // [1, 2, 3]

3. 数组首部操作方法

shift 改变原数组

shift() 删除并返回数组第一个元素。

const arr = [1, 2, 3]
console.log(arr)          // [1, 2, 3]
console.log(arr.shift()) // 1

unshift 改变原数组

unshift() 向数组首部添加一个或多个元素,并返回新的长度。

const arr = [1, 2]
console.log(arr.unshift(3)) // 3
console.log(arr)            // [3, 1, 2]

4. 排序方法

reverse 改变原数组

reverse() 颠倒数组中元素顺序。

const arr = [1, 2, 3, 4]
console.log(arr.reverse()) // [4, 3, 2, 1]
console.log(arr)           // [4, 3, 2, 1]

sort 改变原数组

sort() 对数组进行排序。

const arr = [2, 4, 3, 1]
console.log(arr.sort()) // [1, 2, 3, 4]
console.log(arr)        // [1, 2, 3, 4]

sort() 按照数组元素数值的大小对数字进行排序,是按照字符编码的顺序进行排序,那怎么样根据元素数值大小进行排序呢?

const arr = [2, 4, 3, 1]
const arr1 = [...arr].sort((a, b) => a - b)
const arr2 = [...arr].sort((a, b) => b - a)
console.log(arr1)     // [1, 2, 3, 4]
console.log(arr2)     // [4, 3, 2, 1]

5. 数组连接的方法

concat 不改变原数组

arr1.concat(arr2) 连接两个或多个数组,返回一个新的数组。

const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const newArr = arr1.concat(arr2)
console.log(newArr)         // [1, 2, 3, 4, 5]
console.log(arr1)           // [1, 2, 3]

6. 数组截取方法

slice 不改变原数组

slice() 方法返回一个新的数组对象,这一对象是一个由 start 和 end 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
正数索引从0开始,负数索引从-1开始。

const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1))         // [2, 3, 4, 5]
console.log(arr.slice(1, -2))     // [2, 3]
console.log(arr.slice(-3, -1))     // [3, 4]
console.log(arr)                  // [1, 2, 3, 4, 5]

7. 数组插入方法

splice 改变原数组

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');   // 在索引1处插入元素
console.log(months);          // ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');   // 在索引4处替换1个元素
console.log(months);          // ["Jan", "Feb", "March", "April", "May"]

8. 数组索引方法

indexOf lastIndexOf 不改变原数组

两个方法都是返回要查找的项所在数组中首次出现的位置,没找到的话就返回-1。
arr.indexOf(item, start) 从数组的开头开始向后寻找。
arr.lastIndexOf(item, start) 从数组的末尾开始向前查找。

const arr = [2, 4, 1, 9, 1, 2]
console.log(arr.indexOf(2))       // 0
console.log(arr.lastIndexOf(1))   // 4
console.log(arr.indexOf(3))       // -1

9. 总结

改变原数组的方法 不改变原数组的方法
pop toString
push join
shift concat
unshift slice
reverse indexOf
sort lastIndexOf
splice

标签:arr,console,log,哪些,JS,改变,数组,const
From: https://www.cnblogs.com/zwx1123/p/17608032.html

相关文章

  • Abaqus 中最常用的子程序有哪些 硕迪科技
    在ABAQUS中,用户定义的子程序是一种重要的构件,可以将其插入到Abaqus分析中以增强该软件的功能和灵活性。这些子程序允许用户在分析过程中添加自定义材料模型、边界条件、初始化、加载等特定操作,以便更精准地模拟分析中的现象和现象。ABAQUS支持各种不同类型和用途的子程序,下面列举了......
  • JS中BOM事件,JS样式特效,表格对象和表单操作
    DOM事件1.DOM中的事件可以分为两类1.浏览器行为如:文档加载完成,图片加载完成2.用户行为如:输入框输入数据,点击按钮(2).常见的DOM事件onload浏览器已完成页面的加载支持事件的对象windowimageonchangeHTML元素改变onclick用户点击HTML元素o......
  • openGauss的SQL引擎在3.1.0版本中做了哪些优化?
    openGauss的SQL引擎在3.1.0版本中做了哪些优化?收录于合集#技术干货83个查询执行能力对数据库来说至关重要,这直接决定了查询语句生成的执行计划以何种方式进行执行,如果哪个执行算子的执行表现不好,将会对数据库的整体性能产生极大的影响。同时,执行算子的实现也极大考验一款数据库的工......
  • Python批量爬取B站法外狂徒张三所有视频【含jS逆向解密】
    传说中,有人因为只是远远的看了一眼法外狂徒张三就进去了......
  • 【JointJS】ref 属性和 calc 相对计算函数
    在define函数和calc相对计算函数中提到了calc相对计算函数,默认情况下,不指定ref属性,calc以这个g标签作为基点计算值。而一个图形下面(也就是一个g标签),会有很多其他子图形,例如,<ellipse>、<text>、<rect>等。如上图所示,这是一个由define函数自定义的图形,其包含了......
  • ThreeJs绘制线
    Threejs提供了绘制线的功能,先设定多个点数据,threeJs提供方法将多个点按照顺序连接起来,并提供线的材料颜色等,在上一篇中有讲到拖拽物体的功能,如果把线加入到可拖拽数组中,也可以实现拖拽线的功能,画线功能柜常用于地图编辑等,具体源码如下:<!DOCTYPEhtml><htmllang="en"><head>......
  • 二维数组花式遍历(旋转,螺旋) [labuladong-刷题打卡 day5]
    矩阵旋转48.旋转图像难点主要在于:用翻转和镜像处理逆反和旋转,和逆转单词一样“难者不会,会者不难”,思路简单镜像的坐标对应关系处理语言特性的利用,不同语言有不同api,实际代码中会有很大不同,但思想一致如果确定矩阵维数,通过线性代数应该可以直接计算答案...classSolution......
  • web前端技能方法总结(css、js、jquery、html)(3)
    HTML(HyperTextMarkupLanguage)就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素,如:图片、链接、音乐等等。它是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。HTML网页文件可以使用......
  • 基于NodeJS家政保姆网站
    21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准确、快速、完善,并能提高工作管理效率,促进其发展。论文主要是对家政保姆网站进行了介绍,包括研......
  • 将数组初始化为0并且逆置
    voidinit(int*arr,intsz){ inti=0; for(i=0;i<sz;i++) { arr[i]=0; }}voidprint(intarr[],intsz){ inti=0; for(i=0;i<sz;i++) { printf("%d",arr[i]); } printf("\n");}voidreverse(intarr[],intsz){ intleft=......