• JavaScript中数组方法总结（全）

    工作中发现掌握好数组和对象中所有方法，并灵活运用，绝对能大大提高你的编程效率，那还想什么呢，总结起来~

    目录

    push()后增方法

    pop()后删方法

    shift()前删方法

    unshift()前增方法

    concat()拼接方法

    reverse()反转方法

    sort()排序方法

    join()方法

    slice()剪切方法

    splice()修改删除方法

    forEach()方法

    indexOf()方法和lastIndexOf()方法

    filter()过滤方法

    every()方法

    some()方法

    Array.isArray()方法

    includes()方法

    find()方法

    findIndex()方法

    fill()方法

    map()方法

    push()后增方法

    在数组后面添加元素（一个或多个），返回值是新数组的长度；

    1.  const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2.  console.log(array1.push('都是水果呢')) // 6
    3.  console.log(array1) //  ['苹果', '香蕉', '桃子', '草莓', '火龙果', '都是水果呢']
    4.  
    5.  
    6.  const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    7.  console.log(array1.push('都是水果呢', '最爱的')) // 7
    8.  console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '都是水果呢', '最爱的']

    pop()后删方法

    删除数组最后一个元素，并且将删除的元素返回；

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.pop()) // 火龙果
    3. console.log(array1) // ['苹果', '香蕉', '桃子', '草莓']

    shift()前删方法

    删除数组中第一个元素，返回值为删除的该元素；

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.shift()) // 苹果
    3. console.log(array1) // ['香蕉', '桃子', '草莓', '火龙果']

    unshift()前增方法

    在数组开头添加一个或多个元素，返回值为新数组的长度；

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.unshift('橙子', '丑橘')) // 7
    3. console.log(array1) // ['橙子', '丑橘', '苹果', '香蕉', '桃子', '草莓', '火龙果']

    concat()拼接方法

    该方法可连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响；

    1.  const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2.  const array2 = ['橙子', '丑橘']
    3.  console.log(array1.concat(array2)) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '橙子', '丑橘']
    4.  console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    5.  
    6.  
    7.  const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    8.  const array2 = ['橙子', '丑橘']
    9.  const array3 = ['圣女果', '猕猴桃']
    10.  console.log(array1.concat(array2, array3)) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '橙子', '丑橘', '圣女果', '猕猴桃']
    11.  console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

    reverse()反转方法

    该方法用来反转数组，会直接修改原数组

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.reverse()) // ['火龙果', '草莓', '桃子', '香蕉', '苹果']
    3. console.log(array1) // ['火龙果', '草莓', '桃子', '香蕉', '苹果'] 原数组也进行了反转

    sort()排序方法

    对数组中的元素进行排序，默认按照Unicode编码进行排序，该方法也会影响原数组

    1. const array2 = [2, 9, 40, 0]
    2. console.log(array2.sort()) // [0, 2, 40, 9] // 按第一位排序
    3. console.log(array2) // [0, 2, 40, 9]

    join()方法

    将数组转换成一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可指定一个字符串作为参数，该参数将会成为数组中元素的连接符，若不指定连接符，则默认使用逗号，作为连接符；

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.join()) // 苹果,香蕉,桃子,草莓,火龙果
    3. console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.join('-')) // 苹果-香蕉-桃子-草莓-火龙果
    3. console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

    slice()剪切方法

    取数组的指定元素，不会影响原数组，将取出来的元素封装到一个新的数组中；

    该方法有两个参数，第一个参数是截取开始位置的索引（包含开始位置的索引），第二个参数是截取结束位置的索引（不包含结束的索引），若第二个参数省略不写，则表明会截取从开始索引往后的所有元素；

    如果索引值是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推

    1.  const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2.  console.log(array1.slice(0, 2)) // ['苹果', '香蕉']
    3.  console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.slice(3)) // ['草莓', '火龙果']
    3. console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    1.  const array3 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2.  console.log(array3.slice(-2)) // ['草莓', '火龙果']
    3.  console.log(array3) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    1.  const array3 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2.  console.log(array3.slice(-4, -1)) // ['香蕉', '桃子', '草莓']
    3.  console.log(array3) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

    splice()修改删除方法

    用于删除数组中的指定元素，该方法会影响原数组，返回值为删除的元素；

    该方法有三个参数：

            第一个参数，表示开始位置的索引（包括开始索引）；

            第二个参数，表示要删除的元素数量

            第三个参数及以后参数，可传递一些新元素，这些元素将会自动插入到开始位置索引前面；

    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.splice(1, 2)) // ['香蕉', '桃子']
    3. console.log(array1) // ['苹果', '草莓', '火龙果']
    1. const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
    2. console.log(array1.splice(1, 2, '哈密瓜', '水蜜桃', '葡萄')) // ['香蕉', '桃子']
    3. console.log(array1) // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']

    forEach()方法

    遍历数组的方法，参数为三元函数，该函数的参数：

    第一个参数：正在遍历的元素；

    第二个参数：当前遍历元素的索引；

    第三个参数：正在遍历的数组；

    不能ruturn

    1. array1.forEach(function(ele, index, arr) {
    2.     console.log(ele); // 苹果
    3.     console.log(index); // 0
    4.     console.log(arr); // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']
    5. })
    6.  
    7. array1.forEach((ele, index, arr) => {
    8.     console.log(ele); // 苹果
    9.     console.log(index); // 0
    10.     console.log(arr); // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']
    11. })

    indexOf()方法和lastIndexOf()方法

    都是用于查找某元素在数组中的位置，若存在，则返回第一个位置的下标，否则返回-1；不会改变原数组；

    其中，indexOf('查找的元素', startIndex)表示从startIndex开始，从头到尾查询；包含开始索引

    lastIndexOf参数一样，区别在于从尾到头查询；

    1. const array1 = ['苹果', '葡萄', '桃子', '苹果', '火龙果', '苹果']
    2. console.log(array1.indexOf('苹果', 0)) // 0
    3. console.log(array1.lastIndexOf('苹果', 0)) // 0
    4. console.log(array1.indexOf('苹果', 1)) // 3
    5. console.log(array1.indexOf('猕猴桃', 1)) // -1

    filter()过滤方法

    filter()方法返回数组中满足条件的元素组成的新数组，不改变原数组；

    该方法的参数也是个三元函数，

        第一个参数：正在遍历的元素；

        第二个参数：当前遍历元素的索引；

        第三个参数：正在遍历的数组；

    1. const array2 = [1,2,3,4,5]
    2. console.log(array2.filter(item => item >= 4 )); // [4, 5] 
    3.  
    4.  const array2 = [1,2,3,4,5]
    5.  const array3 = array2.filter(item => { return item >= 4 }); // [4, 5]
    6.  console.log(array2); // [1,2,3,4,5]
    7.  console.log(array3);  // [4, 5]

    every()方法

    用于检测数组中的所有元素是否都符合指定条件，若每一项都返回true，则返回true，反之若检测到有一项不满足条件，则返回false，并且剩下的元素不会再进行检测；

    该方法不会对空数组进行检测；并且不会改变原始数组；

    参数也是一个三元函数（与上相同）：

    1.  const array2 = [1,2,3,4,5]
    2.  console.log(array2.every((item, index, arr) => item >= 5 )); // false
    3.  console.log(array2.every(item => item >= 0)); // true
    4.  console.log(array2.every(item => { 
    5.     return item >= 0 
    6.  })); // true

    some()方法

    用于检测数组中的元素是否满足指定条件，若有一个元素满足条件，则返回true，并且不再检测剩余的元素；若没有满足条件的元素，则返回false；

    该方法不会对空数组进行检测；并且不会改变原始数组；

    参数也是一个三元函数（与上相同）：

    1. const array2 = [1,2,3,4,5]
    2. console.log(array2.some((item, index, arr) => item >= 5 )); // true
    3. console.log(array2.some((item, index, arr) => {
    4.     return item >= 5
    5. })); // true

    Array.isArray()方法

    判断是否是数组，参数是要判断的数组；

    1. const array2 = [1,2,3,4,5]
    2. console.log(Array.isArray(array2)); // true

    includes()方法

    用于判断一个数组是否包含一个指定的值，如果包含，则返回true，反之返回false；

    参数有两个：

    第一个元素： 要查找的元素值；

    第二个元素：开始查找的索引值，默认是0，即从头开始查找；

    1.  const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']
    2.  console.log(array1.includes('苹果')); // true
    3.  console.log(array1.includes('苹果', 3)); // false
    4.  console.log(array1.includes('葡萄', -3)); // false

    对于复杂数组，可用some()方法替代includes()方法；

    find()方法

    返回数组中满足条件的第一个元素的元素值；当有一个元素满足条件时，之后的值不会再被遍历到；若没有符合条件的元素，则返回undefined

    该方法不会改变原始数组；

    参数为三元函数（与上相同）；

    1.   const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']
    2.   console.log(array1.find(item => item === '葡萄')); // 葡萄
    3.   console.log(array1.find(item => item === '西瓜')); // undefined
    4.   console.log(array1.find(item => {
    5.     return item === '葡萄'
    6.   }));  // 葡萄

    该方法和filter()方法的区别在于： filter返回值是由所有满足条件的元素组成的数组；

    findIndex()方法

    findIndex()的作用同IndexOf()，返回第一个满足条件的元素位置；当有一个满足条件时，不再执行下一个；若都不满足，则返回-1；

    参数为一个三元函数（与上相同）：

    1. const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']
    2. console.log(array1.findIndex(item => item === '葡萄')); // 1
    3. console.log(array1.findIndex(item => item === '西瓜')); // -1
    4. console.log(array1.findIndex(item => { 
    5.     return item === '葡萄' 
    6. }));

    fill()方法

    该方法用于将一个固定值替换某个数组的元素；

    参数有三个：

            第一个参数：要填充的值；

            第二个参数：可选，表示开始填充的位置；

            第三个参数：可选，表示停止填充的位置，默认为array.length

    1.  const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']
    2.  console.log(array1.fill('西瓜', 1, 3)); // ['苹果', '西瓜', '西瓜', '桃子', '火龙果']

    map()方法

    该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；

    map()方法按照原始数组元素顺序依次处理元素；

    参数为三元函数（与上相同）；

    1. const array2 = [1, 2, 3, 4, 5]
    2. const array3 = array2.map(function(item, index, arr) { 
    3.       item = item + 1; 
    4.       return item 
    5. })
    6. console.log(array3); // [2, 3, 4, 5, 6]
    7. console.log(array2); // [1, 2, 3, 4, 5]
    8.  
    9. const array4 = array2.map(item => item = item + 2); 
    10. console.log(array4); // [3, 4, 5, 6, 7]

    总结

    会改变原数组的方法 (push、pop、shift、unshift、reverse、sort、splice)

    不会改变原数组的方法 （indexOf 、lastIndexOf 、every 、some 、filter 、map  、concat 、slice ）

    欢迎补充~

    补充：

    copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，数组长度不变，返回改变后的数组

    1. array.copyWithin(target, start, end)
    2. // target是复制到指定目标索引位置，必填
    3. // start 元素复制的起始位置。默认为 0 ，若为负值，则表示从后面开始复制
    4. // end 停止复制的索引位置。默认为array.length, 不包含end的索引，若为负值，则表示从后面开始复制
    5. // 停止复制索引位置后面的元素保持不变
    1. const arry1 = [1,2,3,4,5]
    2. console.log(arry1.copyWithin(0,2,4)); // [3,4,3,4,5]
    3. console.log(arry1.copyWithin(0,1,4)); // [4,3,4,4,5]

  • 相关阅读:
    题目0097-数组组成的最小数字
    从F5 BIG-IP RCE漏洞（CVE-2023-46747）来看请求走私的利用价值
    Linux（四）- Linux常用基本命令（帮助命令、文件目录类、搜索查找类、进程管理类）
    LinkedList的使用（Java）
    教育、卫生和社会服务-省级面板数据数据（1994-2019年）
    基于极限学习机 （ELM） 进行正弦波预测（Matlab代码实现）
    将dubbo暴露HTTP服务
    油猴浏览器（安卓）
    Java内部类分类
    Java数据库连接-JDBC
  • 原文地址：https://blog.csdn.net/ks795820/article/details/126477789