首页 > 编程语言 >JavaScript数组的方法大全(最新)

JavaScript数组的方法大全(最新)

时间:2023-02-20 17:27:16浏览次数:44  
标签:index arr JavaScript const 函数 元素 数组 大全

JavaScript数组方法大全

趁着有时间,总结了下数组所有的属性和方法,记录博客,便于后续使用

  • array.at()

    • at方法,用于获取数组中,对应索引位置的值,不能修改。
    • 语法:array.at(count);
    • 参数:count,数组的索引值
    • 返回值:返回该索引在数组中对应的值,如果count大于等于数组的长度时,返回undefined
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const len = arr.at(1)
      console.log(len);// 2
  • concat()

    • concat方法用于连接两个或多个数组
    • 语法:array.concat(arr1,arr2,arr...);
    • 参数: arr1, ...arrx,可选。该参数可以是具体的值,也可以是数组对象。可以是任意多个。参数为空时,将拷贝调用该方法的数组作为副本返回。
    • 返回值:Array,返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const arr1 = arr.concat();
      const arr2 = arr.concat(['我是lanny',12],['嘿嘿'],'啦啦啦');
      console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, '我是lanny', 12, '嘿嘿', '啦啦啦'];
  • constructor

    • constructor属性,返回数组的构造函数,其返回值是对函数的引用,而不是函数的名称,对于 JavaScript 数组,constructor 属性返回function Array() { [native code] },对于 JavaScript 对象,constructor 属性返回:function Object() { [native  code] }
    • 可以通过如下形式,对数据的类型进行判断
    • const arr = [1,2,3]
    • console.log(arr.constructor === Array);// true
  • copyWithin

    • copyWithin用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
    • 语法:array.copyWithin(target, start, end)
    • 参数:target-必需。复制到指定目标索引位置。start-可选。元素复制的起始位置。end-可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
    • 注意,该方法会改变原数组
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      arr.copyWithin(0,4,9);
      console.log(arr);// [5, 6, 7, 8, 9, 6, 7, 8, 9, 10]
  • entries()

    • entries方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key, 数组元素作为 value.
    • 语法:array.entries()
    • 返回值:Array Iterator一个数组的迭代对象。
    • const arr = ['lanny','jhon','alex','emily'].entries();
      for (const [key,value] of arr) {
            console.log(key,value)
      }
      //0 'lanny'
      //1 'jhon'
      //2 'alex'
      //3 'emily'
  • every()

    • every方法用于检测数组所有元素是否都符合指定条件, 指定函数检测数组中的所有元素:如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。
    • 语法:array.every(function(currentValue, index,arr),thisValue);
    • 注意: every() 不会对空数组进行检测。every() 不会改变原始数组。
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:boolean,true或者false。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const condition = arr.every(function(currentValue,index,arr){
           console.log(this);//arr
           return typeof currentValue === 'number'
       },arr)
       console.log(condition) // true
  • fill()

    • fill方法用于将一个固定值替换数组的元素。
    • 语法:array.fill(value,start,end);
    • 参数:value-必需。填充的值。start-可选。开始填充位置。end-可选。停止填充位置 (默认为 array.length)。
    • 返回值:Array,返回新替换的值作为数组的唯一项。
    • 注意:该方法会改变原数组
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const arr1 = arr.fill('嘟嘟',0,1);
      console.log(arr);//['嘟嘟', 2, 3, 4, 5, 6, 7, 8, 9, 10]
      console.log(arr1);//['嘟嘟']
  • filter()

    • filter方法用于过滤,返回指定函数中要求的条件,filter() 不会改变原始数组、不会对空数组进行检测。
    • 语法:array.filter(function(currentValue,index,arr), thisValue);
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:Array,返回一个新数组,满足所执行的函数条件
    • const arr = [1,2,3,"啦啦",6,7,"小L",9,10];
      const arr1 = arr.filter((item)=>typeof item === 'string');
      console.log(arr1);//["啦啦", "小L"]
  • find()

    • find方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。注意: find() 对于空数组,函数是不会执行的、 find() 并没有改变数组的原始值。
    • 语法:array.find(function(currentValue,index,arr), thisValue);
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:any,任意类型,满足函数条件的第一个对应值,如果都不满足,返回undefined。
    • const arr = [1,2,3,4,5,"嘟嘟",7,"嘿嘿",9,10];
      const value = arr.find((item)=>typeof item === 'number'));//2
      console.log(value);// 1
  • findIndex()

    • findIndex方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。注意: findIndex() 对于空数组,函数是不会执行的、findIndex() 并没有改变数组的原始值。
    • 语法:array.findIndex(function(currentValue, index, arr), thisValue);
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:number,索引值,返回符合条件的元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const index = arr.findIndex((item=>item === 9);
      console.log(index);//8  注意,是索引位置
  • findLast()

    • 该方法与find方法相同,唯一区别是,遍历调用函数查找时,是倒序查找,从数组末尾,向前查找的
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const last = arr.findLast((item)=>typeof item === 'number');
      console.log(last);//10
  • findLastIndex()

    • 该方法与findIndex方法相同,唯一区别是,遍历调用函数查找时,是倒序查找,从数组末尾,向前查找的.
    • const arr = [1,2,3,4,5,6,7,8,9,10];
      const lastIndex = arr.findLastIndex((item)=>typeof item === 'number');
      console.log(lastIndex);//9 注意,是索引位置
  • flat()

    • 该方法用于将嵌套的多维数组,转换成一维数组,该方法会自动删除,空的索引值,且不会改变原数组。
    • 语法:array.flat(hierarchy)
    • 参数值:hierarchy-数组的嵌套层级,number,或者 Infinity-不管嵌套多少层
    • 返回值:Array,转换之后的一维数组。
    • const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]];
      const arr1 = arr.flat(Infinity);
      console.log(arr1);//['a', 0, 5, 18, 29, '嘿嘿', {key:'002'}]
  • flatMap()

    • 先对数组中每个元素进行处理,再对数组执行 flat() 方法。
    • 语法:array.flatMap(function(currentValue,index,arr),thisValue);
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:Array,返回处理之后的数组。
    • const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]]
      const arrFlat = arr.flatMap(item=>{
          if(typeof item === 'string'){
              return item + '已处理'
          }else{
              return item
          }
      })
      console.log(arrFlat);// ['a已处理', 0, 5, [18,29], ['嘿嘿',{key:'002']]
  • forEach()

    • forEach().方法用于调用数组的每个元素,并将元素传递给回调函数,即遍历数组,在函数中进行操作。forEach() 对于空数组是不会执行回调函数的。该方法没有返回值,即undefined
    • 语法:array.forEach(callbackFn(currentValue, index, arr), thisValue);
    • 参数:
      • function(currentValue, index,arr)
        • 必须。函数,数组中的每个元素都会执行这个函数。
        • currentValue:必须。每次遍历循环时,当前元素的值。
        • index-可选。当前元素的索引值。
        • arr-可选。当前元素属于的数组对象。
      • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。
    • 返回值:无,undefined。
    • const arr = [1,"嘟嘟",3,4,5,6,7,8,9,10];
      arr.forEach((item,index)=>{
          if(typeof item === 'number'){
              arr[index] = item * 2
          }
      })
      console.log(arr);// [2, '嘟嘟', 6, 8, 10, 12, 14, 16, 18, 20]
  • includes()

    • includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
    • 语法:array.includes(searchElement, fromIndex);
    • 参数:searchElement必须。需要查找的元素值。fromIndex可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0,如果fromIndex大于等于数组长度,则返回 false,该数组不会被搜索。
    • 返回值:布尔值。如果找到指定值返回 true,否则返回 false。
    • const arr = ['嘟嘟', 4, 6, 8, 10, 12, 14, 16, 18, 20];
      console.log(arr.includes('嘟嘟'));// true

     

标签:index,arr,JavaScript,const,函数,元素,数组,大全
From: https://www.cnblogs.com/LannyChung/p/17138183.html

相关文章

  • 判断JavaScript数据是否为空
    getObjType=(obj)=>{consttype=Object.prototype.toString.call(obj)constarray=type.split(/\s/g)returnarray[1].replace(']','')}is......
  • [Javascript Tips] Use Promise.allSettled instead of Promise.all
    Promise.all: Problem:let'ssaywehavetwopromises,P1,P2,P1rejectin1s,andP2rejectin3s.Whatwillhappenincatchblock?ItonlyabletocatchP1......
  • 力扣简977 有序数组的平方
    自己写了一版空间占用太高了看了题解差不多也就这样packageLeetcode;/*给你一个按非递减顺序排序的整数数组nums,*返回每个数字的平方组成的新数组,要求也按......
  • 数组
    数组的定义数组是相同类型数据的有序集合数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成其中,每一个数据称作一个数组元素,每个数组元素可以通过一个......
  • 每日一练(剑指offer)二维数组中的查找
    描述在一个二维数组array中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个......
  • JavaScript 库-localforage离线存储
    localforage是一个使用Web存储API(例如IndexedDB、WebSQL或localStorage)来提供简单的异步数据存储的JavaScript库。localforage可以用来在客户端存储数据,比如本......
  • odoo 通过Javascript显示或隐藏form自带按钮
    实践环境Odoo14.0-20221212(CommunityEdition)需求描述如下,根据条件对form视图自带按钮的显示、隐藏进行控制代码实现隐藏、显示编辑和创建按钮为例odoo14/custo......
  • AcWing 3956. 截断数组 [前缀和]
    AcWing3956.截断数组[前缀和]原题链接讲解视频思路题意是将一串数字从中间切两刀分成三段。每一段的和都相等。要求这三段每一段的和都相等,那么总和肯定是3的倍数,......
  • 树状数组
    树状数组介绍首先我们需要知道树状数组可以维护一些什么值,树状数组主要维护的值就是区间的前缀和。因此普通的树状数组需要满足结合律和可差分的性质。比如乘法、加法、异......
  • react中类组件和函数组件的理解?有什么区别
    react中类组件和函数组件的理解?有什么区别一、类组件类组件,顾名思义,也就是通过使用ES6类的编写形式去编写组件,该类必须继承React.Component如果想要访问父组件传递过来......