走过！路过！不要错过！数组方法大总结！

欢宝吖_ 2023-09-16 原文

数组方法大全

数组是做项目中最常见的数据返回的形式，因此我们在处理数组数据的时候，就需要用到数组的方法。数组方法有很多种，我们在处理数据的时候，就得考虑用数组那个方法更简便的实现效果。这篇文章就来总结一下数组的常用的方法，记住最常用方法即可，有些方法了解就行。

push()——末尾追加

语法：arr.push(item1,item2,...,itemN)
push()方法：在数组尾部添加一个或者多个数组元素。
原数组会发生改变。
该方法有返回值，返回值是添加元素之后的数组长度。

push()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.push(5, 6, 7)
    console.log(arr) // [1,2,3,4,5,6,7]
    console.log(arr1) // 7
</script>

push.png

unshift()——首位追加

语法：arr.unshift(item1,item2,...,itemN)
unshift()方法：在数组的头部添加一个或者多个数组元素。
原数组会发生改变。
该方法有返回值，返回值是添加元素之后的数组长度。

unshift()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.unshift(5, 6, 7)
    console.log(arr) // [5,6,7,1,2,3,4]
    console.log(arr1) // 7
</script>

unshift.png

pop()——末尾删除

语法：arr.pop()
pop()方法：在数组的尾部删除一个数组元素。
原数组会发生改变。
该方法有返回值，返回值是这个被删除的数组元素。

pop()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.pop()
    console.log(arr) // [1,2,3]
    console.log(arr1) // 4
</script>

pop.png

shift()——首位删除

语法：arr.shift()
shift()方法：在数组的头部删除一个数组元素。
原数组会发生改变。
该方法有返回值，返回值是这个被删除的数组元素。

shift()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.shift()
    console.log(arr) // [2,3,4]
    console.log(arr1) // 1
</script>

shift.png

slice()——截取

语法：arr.slice(startIndex,endIndex)
slice()方法：截取数组元素。
参数：传的参数表示数组元素的索引值。不传参数，截取整个数组；传一个参数，从start索引开始截取，一直到数组结束；传两个参数，从start索引开始截取，一直到end索引结束，不包括end索引上的数组元素！！！
原数组不会发生改变。
该方法有返回值，返回值是截取的数组元素组成的新数组。

slice()方法案例

<script>
    let arr = ['apple', 'banana', 'orange', 'lemon']

    console.log('=====不传参数=====')
    let arr1 = arr.slice()
    console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
    console.log(arr1) // ['apple', 'banana', 'orange', 'lemon']

    console.log('=====传一个参数=====')
    let arr2 = arr.slice(1)
    console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
    console.log(arr2) // ['banana', 'orange', 'lemon']

    console.log('=====传两个参数=====')
    let arr3 = arr.slice(0, 2)
    console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
    console.log(arr3) // ['apple', 'banana']
</script>

slice.png

splice()——增加或者删除数组元素

语法：arr.splice(startIndex,howmany,item1,…,itemN)
splice()方法：增加或者删除数组元素。
参数和返回值：不传参数，不增加也不删除，原数组不改变，返回空数组；传一个参数，从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组；传两个参数，第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组；传三个或者多个参数，第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。

splice()方法案例

不传参数——不传参数，不增加也不删除，原数组不改变，返回空数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====不传参数=====')
    let arr1 = arr.splice()
    console.log(arr) // ['apple', 'banana', 'orange','lemon']
    console.log(arr1) // []

splice1.png

传一个参数——从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传一个参数=====')
    let arr2 = arr.splice(1)
    console.log(arr) // ['apple']
    console.log(arr2) // ['banana', 'orange', 'lemon']

splice2.png

传两个参数——第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传两个参数=====')
    let arr3 = arr.splice(0, 2)
    console.log(arr) // ['orange', 'lemon']
    console.log(arr3) // ['apple', 'banana']

splice3.png

传三个或者多个参数——第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传三个参数=====')
    let arr4 = arr.splice(1, 2, 'mango')
    console.log(arr) // ['apple', 'mango', 'lemon']
    console.log(arr4) // ['banana', 'orange']

splice4.png

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传多个参数=====')
    let arr5 = arr.splice(2, 1, 'mango', 'watermelon')
    console.log(arr) // ['apple', 'banana', 'mango' 'watermelon', 'lemon']
    console.log(arr5) // ['orange']

splice5.png

reverse()——翻转数组

语法：arr.reverse()
reverse()方法：翻转数组。
原数组会发生改变。
该方法有返回值，返回值是翻转之后的数组。

reverse()方法案例

<script>
    let arr = ['apple', 'banana', 'orange', 'lemon']
    let arr1 = arr.reverse()
    console.log(arr) //  ['lemon', 'orange', 'banana', 'apple']
    console.log(arr1) //  ['lemon', 'orange', 'banana', 'apple']
</script>

reverse.png

sort()——数组排序

语法：arr.sort(sortfunction)
sort()方法：数组排序。
原数组会发生改变。
该方法有返回值，返回值是排序之后的数组。

sort()方法案例

没有参数的情况，按照数组元素首字母的顺序进行排序

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort()
    console.log(arr) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
    console.log(arr1) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
</script>

sort1.png

有参数的情况，参数是一个函数，a-b 从小到大排序。

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort(function(a, b) {
        return a - b //从小到大
    })
    console.log(arr) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
    console.log(arr1) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
</script>

sort2.png

有参数的情况，参数是一个函数，b-a 从大到小排序。

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort(function(a, b) {
        return b - a //从大到小
    })
    console.log(arr) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
    console.log(arr1) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
</script>

sort3.png

concat()——拼接数组

语法：arr.concat(arr1)
concat()方法：拼接数组。
原数组不会发生改变。
该方法有返回值，返回值是拼接之后的数组。

concat()方法案例

<script>
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = arr1.concat(arr2)
    console.log(arr3) //[1,2,3,4,5,6]
    console.log(arr1, arr2) // [1,2,3] [4,5,6]
</script>

concat.png

join()——拆分数组

语法：arr.join('指定分隔符')
join()方法：拆分数组，将每个数组元素转换成字符串，通过指定的分隔符进行分隔，最后连接成一个字符串
原数组不会发生改变。
该方法有返回值，返回值是一个新的字符串。

join()方法案例

<script>
    let arr = ['a', 'p', 'p', 'l', 'e']
    let str1 = arr.join('') //以空字符分隔
    let str2 = arr.join('-') //以-分隔
    let str3 = arr.join() //默认以，分隔
    console.log(arr)
    console.log(str1) //apple
    console.log(str2) //a-p-p-l-e
    console.log(str3) //a,p,p,l,e
</script>

join.png

indexOf()——查找数组元素

语法：arr.indexOf(value,startIndex)
indexOf()方法：查找元素在数组中第一次出现的位置，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。
原数组不会发生改变。

indexOf()方法案例

传一个参数，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。

<script>
    let arr = ['apple', 'banana', 'orange']
    console.log(arr.indexOf('banana')) //1
    console.log(arr.indexOf('lemon')) //-1
</script>

indexOf1.png

传两个参数，第一个参数是需要查找的元素，第二个参数是从第几个开始查找的索引值，查找元素从第startIndex索引开始一次出现的位置，如果存在，则返回元素在数组中的索引值；如果不存在，则返回-1。

<script>
    let arr = [1, 2, 5, 4, 3, 1, 2]
    console.log(arr.indexOf(1, 3)) // 5
    console.log(arr.indexOf(2, 0)) // 1
    console.log(arr.indexOf(2, 2)) // 6
    console.log(arr.indexOf(5, 3)) // -1
</script>

indexOf2.png

forEach()——遍历数组

forEach()方法的功能是循环遍历数组中的每一个元素；

forEach()方法会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

<script>
    var arr = ['张三', '李四', '王五']
    arr.forEach(function(item, index, arr) {
        console.log(item, index, arr)
    })
</script>

forEach.png

some()

判断数组中是否存在满足指定条件的数组元素，只要有一个数组元素满足指定条件就返回true

some()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.some(function(item, index, arr) {
        return item > 200//满足数组元素大于200
    })
    var newArr1 = arr.some(function(item, index, arr) {
        return item > 400//满足数组元素大于400
    })
    console.log(newArr)//返回true
    console.log(newArr1)//返回false
</script>

some.png

every()

判断数组中是否存在满足指定条件的数组元素，只有所有数组元素都满足指定条件才会返回true，只要有一个数组元素不满足条件都会返回false

every()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr1 = arr.every(function(item, index, arr) {
        return item < 200//满足数组元素小于200
    })
    var newArr2 = arr.every(function(item, index, arr) {
        return item <= 400//满足数组元素小于等于400
    })
    console.log(newArr1)//返回false
    console.log(newArr2)//返回true
</script>

every.png

filter()

筛选出满足指定条件的数组元素，并且返回由满足指定条件的数组元素组成的新数组

filter()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var arr = [100, 200, 300, 400]
    var newArr = arr.filter(function(item) {
        return item < 400//满足数组元素小于400
    })
    console.log(newArr)//返回[100,200,300]
</script>

filter.png

map()

根据指定的条件来处理数组元素，并且返回处理之后的数组元素组成的新数组

map()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.map(function(item) {
        return item * 2 //将数组元素乘以2
    })
    var newArr1 = arr.map(function(item) {
        return item / 2 //将数组元素除以2
    })
    console.log(newArr) //返回[200,400,600,800]
    console.log(newArr1) //返回[50，100，150，200]
</script>

map.png

reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce()方法会自己遍历数组，它会接收一个函数；这个函数包含四个形参，分别为：preval，item, index, array, 用不到时可以不写

preval代表上一次调用回调函数的返回值，item 表示该数组中的当前正在处理的数组元素，index 表示该数组中的当前正在处理的数组元素的下标，array 表示原数组

注意: reduce() 对于空数组是不会执行回调函数的。

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.reduce(function(preval, item, index, arr) {
        console.log(preval, item, index, arr)
        return preval + item
    })
    console.log(newArr)
</script>

reduce.png

Array.of()——创建数组

语法：Array.of(item1,item2,...,itemN)
Array.of()方法：创建数组，将参数中所有的值作为数组元素组成一个数组作为返回值；如果参数为空，则返回空数组。
参数的值可以不用为同一类型。

<script>
    console.log(Array.of()) //[]
    console.log(Array.of(1, 2, 3, 4, 5)) //[1,2,3,4,5]
</script>

Array.of.png

find()

查找数组中符合条件的元素，若有多个符合条件的元素，则返回第一个符合条件的元素。

<script>
    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.find(item => item > 2)
    console.log(arr1) //3
</script>

findIndex()

查找数组中符合条件的元素索引，如果有多个符合条件的元素，则返回第一个满足条件的元素索引。

<script>
    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.findIndex(item => item > 2)
    console.log(arr1) //2
</script>

includes()——检测数组中是否包含一个值

语法：arr.includes(value,startIndex)
includes()方法：检测数组中是否包含一个值，如果包含则返回true，如果不包含则返回false。
参数：传一个参数，检测数组中是否包含一个值；传两个值，检测数组从startIndex索引开始到数组结束是否存在value值；如果存在则返回true，如果不存在则返回false。

<script>
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.includes(2)) //true
    console.log(arr.includes(7)) //false

    console.log(arr.includes(3, 1)) //true
    console.log(arr.includes(3, 3)) //false
</script>

扩展运算符...

拼接合并数组

<script>
    let arr = [1, 2, 3]
    let arr1 = [4, 5, 6]
    let arr2 = [...arr, ...arr1]
    console.log(arr2) //[1,2,3,4,5,6]
</script>

扩展运算符.png

路过走过 section arr console

有关走过！路过！不要错过！数组方法大总结！的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
Ruby 方法() 方法 - 2
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
ruby - 多次弹出/移动 ruby 数组 - 2
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案

走过！路过！不要错过！数组方法大总结！

数组方法大全

push()——末尾追加

push()方法案例

unshift()——首位追加

unshift()方法案例

pop()——末尾删除

pop()方法案例

shift()——首位删除

shift()方法案例

slice()——截取

slice()方法案例

splice()——增加或者删除数组元素

splice()方法案例

reverse()——翻转数组

reverse()方法案例

sort()——数组排序

sort()方法案例

concat()——拼接数组

concat()方法案例

join()——拆分数组

join()方法案例

indexOf()——查找数组元素

indexOf()方法案例

forEach()——遍历数组

some()

every()

filter()

map()

reduce()

Array.of()——创建数组

find()

findIndex()

includes()——检测数组中是否包含一个值

扩展运算符...

有关走过！路过！不要错过！数组方法大总结！的更多相关文章

随机推荐