JS原生对数组操作的常用方法

最新推荐文章于 2024-06-15 20:28:40 发布
最新推荐文章于 2024-06-15 20:28:40 发布
阅读量1k 收藏 8
点赞数 5
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46287150/article/details/121565466
版权

1.push()

语法：数组.push(数据)
作用：将数据追加到数组的末尾
返回值：追加数据后数组最新的长度

	//准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 push 方法
    var res=arr.push('追加的数据')

    console.log(arr)
    console.log(res)

在这里插入图片描述

2.pop()

语法：数组.pop()
作用：删除数组最后一个数据
返回值：被删除的数据

	//准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 pop 方法
    var res=arr.pop()

    console.log(arr)
    console.log(res)

在这里插入图片描述

3.unshift()

语法：数组.unshift(数据)
作用：将数据追加到数组的最前
返回值：添加数据后数组最新的长度

	//准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 unshift 方法
    var res=arr.unshift('哈哈')

    console.log(arr)
    console.log(res)

在这里插入图片描述

4.shift()

语法：数组.shift()
作用：删除数组最前一个数据
返回值：被删除的数据

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 shift 方法
    var res=arr.shift()

    console.log(arr)
    console.log(res)

在这里插入图片描述

5.reverse()

语法：数组.reverse()
作用：将数组反转
返回值：反转后的数组

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 reverse 方法
    var res=arr.reverse()

    console.log(arr)
    console.log(res)

在这里插入图片描述

6.splice()

语法：数组.splice(开始索引，多少个，要插入的数据)
---------开始索引：默认是 0
---------多少个：默认是 0
---------要插入的数据：默认是 没有
作用：删除数组中若干数据，并选择是否插入新的数据
返回值：以新数组的方式返回被删除的数据

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 splice 方法
    var res=arr.splice(1,1)

    console.log(arr)
    console.log(res)

在这里插入图片描述

7.sort()

语法：

  • 数组.sort()
  • 数组.sort(function(a,b){return a-b})
  • 数组.sort(function(a,b){return b-a})

作用：将数组排序
返回值：排序好的数组

sort() ----------按照 位 进行排序

    //准备一个原始数组
    var arr=[4,6,8,2,33,11,22,15,48,9,6,23]
    //输出一次
    console.log(arr)
    //执行 sort 方法
    var res=arr.sort()

    console.log(arr)
    console.log(res)

在这里插入图片描述

sort(function(a,b){return a-b}) ----------按照 从小到大 进行排序

    //准备一个原始数组
    var arr=[4,6,8,2,33,11,22,15,48,9,6,23]
    //输出一次
    console.log(arr)
    //执行 sort 方法
    var res=arr.sort(function(a,b){return a-b})

    console.log(arr)
    console.log(res)

在这里插入图片描述
sort(function(a,b){return a-b}) ----------按照 从大到小 进行排序

    //准备一个原始数组
    var arr=[4,6,8,2,33,11,22,15,48,9,6,23]
    //输出一次
    console.log(arr)
    //执行 sort 方法
    var res=arr.sort(function(a,b){return b-a})

    console.log(arr)
    console.log(res)

在这里插入图片描述

8.join()

语法：数组.join(连接符)
作用：将数组用连接符连接成一个字符串
返回值：连接好的字符串

    //准备一个原始数组
    var arr=[4,6,8,2,33]
    //输出一次
    console.log(arr)
    //执行 join 方法
    var res=arr.join('*')

    console.log(arr)
    console.log(res)

在这里插入图片描述

9.concat()

语法：数组.concat(其他数组)
作用：将其他数组和数组拼接在一起
返回值：拼接好的新数组

    //准备一个原始数组
    var arr=[4,6,8,2,33]
    //输出一次
    console.log(arr)
    //执行 concat 方法
    var res=arr.concat([100,200])

    console.log(arr)
    console.log(res)

在这里插入图片描述

10.slice()

语法：数组.slice(开始索引，结束索引)

  • 开始索引：默认是0
  • 结束索引：默认是数组长度

作用：截取数组中的某些数据
返回值：以新数组的形式返回截取出来的数据

    //准备一个原始数组
    var arr=[4,6,8,2,33]
    //输出一次
    console.log(arr)
    //执行 slice 方法
    var res=arr.slice(2,4)

    console.log(arr)
    console.log(res)

ps:包前不包后
在这里插入图片描述

11.indexOf()

语法：数组.indexOf(数据)
作用：查找数据在数组中索引的位置
返回值：

  • 有该数据，返回第一次出现的索引位置
  • 没有该数据，返回**-1**

ps：indexOf()的O大写

    //准备一个原始数组
    var arr=[4,6,8,2,33,1,6]
    //输出一次
    console.log(arr)
    //执行 indexOf 方法
    var res=arr.indexOf(6)

    console.log(arr)
    console.log(res)

在这里插入图片描述

12.forEach()

语法：数组.forEach(function(item,index,arr){})
作用：遍历数组
返回值：无

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 forEach 方法
    var res=arr.forEach(function(item,index,arr){
        
        console.log(item)
        console.log(index)
        console.log(arr)
        console.log('-----------------')
    })

在这里插入图片描述

13.map()

语法：数组.map(function(item,index,arr){})
作用：映射数组
返回值：映射后的新数组

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 map 方法
    var res=arr.map(function(item,index,arr){
    	//以return的方式书写映射条件
        return item*10
    })
    console.log(arr)
    console.log(res)

在这里插入图片描述

14.filter()

语法：数组.filter(function(item,index,arr){})
作用：过滤数组
返回值：过滤后的新数组

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 filter 方法
    var res=arr.filter(function(item,index,arr){
        //以return的方式书写映射条件
        return item>=300
    })
    console.log(arr)
    console.log(res)

在这里插入图片描述

15.every()

语法：数组.every(function(item,index,arr){})
作用：判断数组是不是每一项都满足条件
返回值：一个布尔值 (false/true)

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 every 方法
    var res=arr.every(function(item,index,arr){
        //以return的方式书写映射条件
        return item>=300
    })
    console.log(arr)
    console.log(res)

在这里插入图片描述

16.some()

语法：数组.some(function(item,index,arr){})
作用：判断数组是不是有某一项都满足条件
返回值：一个布尔值 (false/true)

    //准备一个原始数组
    var arr=[100,200,300,400]
    //输出一次
    console.log(arr)
    //执行 some 方法
    var res=arr.some(function(item,index,arr){
        //以return的方式书写映射条件
        return item>=300
    })
    console.log(arr)
    console.log(res)

在这里插入图片描述
以上就是js中常用的对数组操作的方法，理解起来很容易，多用，多记
在这里插入图片描述

皮蛋solo粥！
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript常用数组操作方法
weixin_33721344的博客
04-15 398
数组是用于储存多个相同类型数据的集合，平时在数据的处理中用到最多，JavaScript中常用的操作方法 1、concat()concat()方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); /...
JS数组常用方法
qq_45684708的博客
08-12 170
1、Array.push()------在数组后面增加元素。 var array = [1, 2, 3 ] //push里面的参数被加到数组array的后面了（参数可以有多个） array.push(4,5,6,7,8); console.log(array); -------[1,2,3,4,5,6,7,8] 2、Array.pop()------取出数组中的最后一项，修改length属性。 var array = [1,2,3,4,5,6,7]; var last = array.p
7个常用的原生JS数组方法
nunumaymax的博客
03-03 882
JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法，可以代替 for 循环，将JS开发技能升级，并使代码库更具可维护性。
Vue变异方法及修改响应式数据 数组响应式变化 数据的变化影响页面的显示
weixin_45723025的博客
09-23 515
Vue 变异方法 push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。 pop()方法用于删除并返回数组的最后一个元素。 shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。 splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。 sort()方法用于对数组的元素进行排序。 reverse()方法用于颠倒数组中元素的顺序。 替换数组 filter()...
Javascript数组的pop()方法
最新发布
听海边涛声
06-15 175
Javascript数组的pop()方法
JS原生对字符串操作的常用方法
weixin_46287150的博客
11-26 627
1.charAt() 语法：字符串.charAt(索引) 作用：获取对应索引位置的字符 返回值：对应索引位置的字符 //准备一个原始字符串 var str='你好啊，皮蛋' //输出一次 console.log(str) //执行一下 charAt 方法 var res=str.charAt(4) //输出一下返回值 console.log(res) 2.toLowerCase() 语法：字符串.toLowerCase() 作用：将字符串内
浅学一下JavaScript中的闭包函数
m0_56825253的博客
03-16 354
最最最最最详细的JavaScript闭包函数的总结，千万不要错过呦😘
JS：33种原生JS数组方法（8种改变原数组方法，25种不涉及数组改变的方法）
qq_45820271的博客
03-13 2475
本文介绍了JS原生数组方法的作用以及反回值，并进行了举例说明。对改变原数组值和不改变原数组值的方法进行了分类。
常用的JavaScript WEB操作方法分享
10-24
数组方法是JavaScript编程中最常用的一类，它们提供了对数组进行操作的各种功能。在给定的代码示例中，我们看到以下几个关键的数组方法： 1. **index**: 这个函数用于查找数组中特定元素的位置，如果元素存在，返回...
JavaScript原生对象常用方法总结(推荐)
11-24
JavaScript原生对象包含了许多实用的方法，这里主要针对Array类进行详细的总结。Array类是JavaScript中最基本的数据结构之一，用于存储一组有序的元素。以下是一些常用的方法及其详细说明： 1. **创建数组**： ...
js中数组插入、删除元素操作的方法
12-09
通过`splice()`方法，我们可以灵活地对数组进行各种操作，包括但不限于插入、删除、替换等。在实际编程中，`splice()`是处理动态数组非常有用的工具，但需要注意的是，由于它会改变原始数组，所以在使用时需谨慎，...
JavaScript原生数组函数实例汇总
10-14
以下是一些JavaScript原生数组函数的详细介绍： 1. **循环：.forEach** `.forEach()`方法为数组的每个元素执行一次回调函数，回调函数接受三个参数：`value`（当前元素）、`index`（当前元素的索引）和`array`（被...
原生js在线科学计算器特效代码
03-20
【原生JS在线科学计算器特效代码】是一种使用JavaScript语言实现的计算器应用，它不仅具备基本的四则运算功能，还提供了高级的科学计算特性，如对数、指数、平方根、三角函数等，适用于学生进行数学计算，也可以作为...
JS原生方法（数组篇）
AC_Surprise的博客
09-04 644
在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解 通过这篇文章可以学到什么呢？ 重新巩固数组各种方法的使用方式 巩固基础，即便没有这些方法，也能靠基础语法去实现 文章目录定义一个测试数组ForEachMapFilterEverySomeReduceFindindexFindFillIncludesJoinFlat 定义一个测试数组 co
前端随心记---------函数
09-24 457
some（） some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 注意：some() 不会对空数组进行检测。 注意：some() 不会改变原始数组。 every（） ever...
javascript 中搜索数组的四种方法
热门推荐
CRMEB小程序商城的博客
05-18 2万+
前端经常要通过 javaScript 来处理数组中的数据，其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值，这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前，最常用的方法就是通过 for 循环来遍历数组中的所有项目并对项目执行操作。现在我们可以通过内置的使用方法来完成在数组中搜索值的常见任务。 本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter
原生js 传数组作为参数 之get /post
linecloud的博客
10-31 1万+
 1.get 方式  var getData={         questionIDs:qustionArr }  var questionArr=[]   questionArr.push(12345678) // 定义一个函数  关键就在这里 原生的请求传数组是行不通的,需要将数据做一个格式化处理 function formatDate() {       for(var i i...
JavaScript （2）
zhuxyyds的博客
09-29 113
1.JavaScript 对象 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。 var person={firstname:"John", lastname:"Doe", id:5566}; 上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。 空格和折行无关紧要。声明可横跨多行。 对象属性有两种调用方式。 name=person.lastname;name=person["last
Js原生函数之操作数组的方法总结
DaYesahh
08-16 1134
1、concat:会创建新数组，将多个数组相连(下面创建的数组，后面延用)          var arr = new Array("a","b","c","d","e");          var arr2 = new Array("g","x","y");          var arr1 = arr.concat(arr2);  
js 原生实现reduce 组装新对象方法
09-08
2. 然后，使用reduce方法对数组进行迭代，将每个对象中的属性值组装成一个新对象。 3. 在reduce方法中，我们可以提供一个初始值作为新对象的基础，并定义一个回调函数来处理每个对象。 4. 在回调函数中，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值