js基础（一）：常用数组方法

冷不防 2021-12-03 12:49 417阅读 0赞

**（0）Array.isArray()**

**Array.isArray() **用于确定传递的值是否是一个 数组

Array.isArray([1, 2, 3]);// true
    Array.isArray({ foo: 123 });// false
    Array.isArray("foobar");// false
    Array.isArray(undefined);// false

**（1）map() **

`map()` 给原数组中的每个元素执行一次 `callback` 函数。每个元素执行后的返回值组合起来形成一个新数组。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    let newArr = data.map((item, index, array) => {
      return item['value']
    })
    console.log(newArr);//["a", "b", "c"]
    //或者简写
    let newArr2 = data.map((item, index, array) => item['value'])
    console.log(newArr2);//["a", "b", "c"]
    // map不会改变原数组，但可以在callback执行时改变原数组
    let newArr3 = data.map((item, index, array) => {
      item['key'] = item['key'] * 2
      return item
    })
    console.log(data)// [ {key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]
    console.log(newArr3)// [ {key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]

**（2）forEach() **

`forEach()对数组的每个元素执行提供的函数，使用方法类似map()，但没有返回值。forEach方法类似于for...of语句，但无法使用break，return等结束循环。`

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    let newArr = data.forEach((item, index, array) => {
      item['key'] = item['key'] * 2
    })
    console.log(data)//[{key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]
    console.log(newArr)//undefined
    for (let item of data) {
      item['key'] = item['key'] * 3
      // break;
    }
    console.log(data);//[{key: 6, value: "a"}, {key: 12, value: "b"},  {key: 18, value: "c"}]

**（3）find()**

`find()` 方法返回数组中满足提供的第一个元素的值，否则返回 `undefined，`方法接收三个参数。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.find(item => item['key'] == 1))// {key: 1, value: 'a'}

**（4）`findIndex`()**

`findIndex()`方法返回数组中满足提供的测试函数的第一个元素的**索引**。否则返回-1`，`方法接收三个参数。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.findIndex(item => item['key'] == 1))// 0
    console.log(data.findIndex(item => item['key'] == 10))// -1

** （5）filter()**

`filter()` 返回满足条件的新数组，否则返回空数组，方法接收三个参数。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.filter(item => item['key'] > 1))// [{ 
    console.log(data.filter(item => item['key'] == 0))// []

**（6）some()**

`some()` 方法用于检测数组中的元素是否满足指定条件，如果找到符合条件的值，则立即返回true，**若为空数组返回false**，方法接收三个参数。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.some(item => item['key'] >= 1))// true
    console.log(data.some(item => item['key'] < 0))// false

**（7）every()**

**every**`()` 方法用于检测数组中的元素是否**全部符合**指定条件，如果有任何不符合条件的值，则立即返回false，**若为空数组返回true**，方法接收三个参数。

*  item：当前遍历到的元素
 *  index：当前遍历到的索引（可选）
 *  array：数组本身（可选）

let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.every(item => item['key'] > 0))// true
    console.log(data.every(item => item['key'] > 2))// false

**（8）includes()**

includes`()` 方法用来判断一个数组是否包含一个指定的值，，如果是返回 true，否则false。方法接收二个参数。

*  value：要查找的值，区分大小写
 *  fromIndex：（可选）从该索引处开始查找。如果fromIndex大于等于数组长度，则不查找，返回-1。若索引为负值，则从倒数位置开始升序查找，即-1从最后一个元素往后查找，-2从倒数第二个往后查找，依次类推。默认值为0.

let arr = ['a', 'b', 'c']
    console.log(arr.includes('b'))// true
    console.log(arr.includes('b', 5))// false
    console.log(arr.includes('s'))// false

**（9）indexOf()**

indexOf`()` 返回元素在数组中**第一次出现**时的索引，如果不存在，则返回-1。方法接收二个参数。

*  value：要查找的值，区分大小写
 *  fromIndex：（可选）从该索引处开始查找。如果fromIndex大于等于数组长度，则不查找，返回-1。若索引为负值，则从倒数位置开始升序查找，即-1从最后一个元素往后查找，-2从倒数第二个往后查找，依次类推。默认值为0.

let arr = ['a', 'b', 'c']
    console.log(arr.indexOf('b'))// 1
    console.log(arr.indexOf('b', 5))// -1

**（10）lastIndexOf()**

**lastIndexOf**`()` 返回元素在数组中**最后一次出现时**的索引，如果不存在，则返回-1。方法接收二个参数。

*  value：要查找的值，区分大小写
 *  fromIndex：（可选）从该索引处开始往前查找。如果fromIndex大于等于数组长度，则查找全部。若索引为负值，则从倒数位置开始降序查找，即-1从最后一个元素往前查找，-2从倒数第二个往前查找，依次类推。默认值为数组长度减1

let arr = ['a', 'b', 'c']
    console.log(arr.lastIndexOf('c'))// 2
    console.log(arr.lastIndexOf('c', 1))// -1

**（11）pop()**

**pop**`()` 从数组中删除最后一个元素，并返回该元素的值。

let arr = ['a', 'b', 'c']
    console.log(arr.pop())// c

**（12）push()**

**push**`()` 将一个或多个元素添加到数组的末尾，并返回该数组的新长度

let arr = ['a', 'b', 'c']
    console.log(arr.push('e', 'f', 'g'))// 6
    console.log(arr)// ["a", "b", "c", "e", "f", "g"]

**（13）shift()**

**shift**`()` 从数组中删除第一个元素，并返回该元素的值。

let arr = ['a', 'b', 'c']
    console.log(arr.shift())// a

**（14）`unshift`()**

**`unshift`**`()` 将一个或多个元素添加到数组的开头，并返回该数组的新长度

let arr = ['a', 'b', 'c']
    console.log(arr.unshift('1', '2', '3'))// 6
    console.log(arr)// ["1", "2", "3", "a", "b", "c"]

**（15）slice()**

**slice**`()` 从已有的数组中返回选定的元素，方法不改变原数组。方法可接收两个参数。

*  start：选取的开始位置，负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
 *  end：选取的结束位置，如果没有指定此参数，则选取start到数组结尾的所有元素。负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

let arr = ['a', 'b', 'c']
    console.log(arr.slice(1, 2))// ["b"]

**（16）splice()**

splice`()` 从数组中添加/删除项目，然后返回被删除的项目。方法可接收三个参数。

*  start：修改的开始位置，负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
 *  `deleteCount` ：要移除的数组元素的个数，如果deleteCount未指定，或者deleteCount大于等于`array.length - start，则删除start之后的所有元素。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。`
 *  `item1, item2：可选，要添加进数组的元素。`

let arr = ['a', 'b', 'c']
    console.log(arr.splice(1, 1))// ["b"]   arr=["a", "c"]
    console.log(arr.splice(1, 0, 'e'))// []   arr=["a", "e", "c"]

**（17）concat()**

**concat**`()` 用于合并两个或多个数组，并返回合并后的数组。此方法不改变原数组。

let arr1 = ['a', 'b', 'c']
    let arr2 = [1, 2, 3]
    let arr3 = [4, 5, 6]
    console.log(arr1.concat(arr2, arr3))// ["a", "b", "c", 1, 2, 3, 4, 5, 6]

**（18）copyWithin()**

copyWithin`()` 在当前数组内部，将指定位置元素覆盖到数组的另一个位置中，并返回当前数组。方法可接收三个参数。

*  target：复制元素到该位置。负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
 *  start：可选，复制元素的起始位置，如果是负数，start 将从末尾开始计算。默认值为从0开始复制
 *  `end：可选，复制元素的结束位置（但不包括当前元素），如果为负值，表示倒数。默认值为数组长度。`

let arr = ['a', 'b', 'c', 'd', 'e']
    console.log(arr.copyWithin(-2))// 复制['a', 'b', 'c', 'd', 'e']到 d 位
    let arr2 = [1, 2, 3]
    console.log(arr2.copyWithin(0, 1, 2))// 复制[2]到 1位置 arr2=[2, 2, 3]

**（19）fill()**

**fill**`()` 方法用固定值填充数组指定范围内的元素，并返回数组，方法可接收三个参数。

*  value：用来填充数组元素的值。
 *  start：可选，开始索引，默认值为0。
 *  `end：可选，终止索引，默认值为数组长度。`

let arr = [1, 2, 3]
    console.log(arr.fill(4))// [4, 4, 4]
    let data = [
      { key: 1, value: 'a' },
      { key: 2, value: 'b' },
      { key: 3, value: 'c' }
    ]
    console.log(data.fill(1, 1, 2))// [{ key: 1, value: 'a' },1, { key: 3, value: 'c' }]

**（20）join()**

**join**`()` 将数组所有元素转成字符串，再连接成一个字符串

*  separator：连接字符串的分隔符，默认为","。如果为空字符串，则元素之间没有任何字符

let arr = [1, 2, 3]
    console.log(arr.join('~')) // 1~2~3
    let arr2 = [{ 'a': 1 }, { 'b': 2 }, { 'c': 3 }]
    console.log(arr2.join('~')) // [object Object]~[object Object]~[object Object]

**（21）reduce()**

reduce`()`  为数组中的每一个元素依次执行回调函数（升序执行），返回一个具体的结果。

*      function(total, currentValue, currentIndex, arr):

*  　total：初始值，或者累计器回调的返回值
 *      currentValue：正在处理的元素
 *      currentIndex：正在处理元素的索引
 *      arr：数组本身

*  initialValue：可选，传递给函数的初始值

// 求数组的和
    let arr = [1, 2, 3, 4, 5]
    let res = arr.reduce((total, current, currentIndex, arr) => {
      return total + current
    })
    console.log(res)// 15
    // 求字符串中每个字符出现的次数
    let str = 'aabbccdddd'
    let obj = str.split('').reduce((res, current) => {
      res[current] = res[current] ? ++res[current] : 1
      return res
    }, {})
    console.log(obj)// {a: 2, b: 2, c: 2, d: 4}

**（22）reduceRight()**

reduceRight`()`  为数组中的每一个元素依次执行回调函数（降序执行），返回一个具体的结果。方法的功能和 [reduce()][reduce] 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

**（23）reverse****()**

**reverse**`()`  方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

var sourceArray = ['a', 'b', 'c']
    var reverseArray = sourceArray.reverse()
    console.log(sourceArray)// ["c", "b", "a"]
    console.log(reverseArray)// ["c", "b", "a"]

**（24）sort****()**

**sort**`()`  方法用于对数组的元素进行排序。默认排序顺序是根据字符串Unicode排序。

*  sortby(a,b)：可选，必须是函数。比较函数应该具有两个值，a：第一个用于比较的元素，b：第二个用于比较的元素。
    
     *  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
     *  若 a 等于 b，则返回 0。
     *  若 a 大于 b，则返回一个大于 0 的值

var arr = [1, 4, 3]
    console.log(arr.sort())// [1, 3, 4]
    let arr2 = [
      {
         'name': 'a', 'value': 1},
      {
         'name': 'b', 'value': 3},
      {
         'name': 'c', 'value': 4},
      {
         'name': 'c', 'value': 3}
    ]
    // a-b则为升序排序 [{name: "a", value: 1},{name: "b", value: 3},{name: "c", value: 3},{name: "c", value: 4}]
    console.log(arr2.sort((a, b) => { return a['value'] - b['value'] }))
    // b-a则为降序排序 [{name: "c", value: 4},{name: "c", value: 3},{name: "b", value: 3},{name: "a", value: 1}]
    console.log(arr2.sort((a, b) => { return b['value'] - a['value'] }))

**（23）flat****()**

**flat**`()`  按照一个指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

*  `depth` ：可选，要遍历的结构深度，默认值为1

let arr = [1, 2, [3, 4]];
    console.log(arr.flat())//[1, 2, 3, 4]
    var arr2 = [1, 2, [3, 4, [5, 6]]];
    console.log(arr2.flat())// [1, 2, 3, 4, [5, 6]]
    console.log(arr2.flat(2))// [1, 2, 3, 4, 5, 6]
    var arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
    console.log(arr3.flat(Infinity))// [1, 2, 3, 4, 5, 6, 7, 8]  Infinity表示展开任意深度的嵌套数组

**（24）flatMap****()**

**flatMap**`()`  方法对原数组的每个成员执行一个函数，返回一个新的数组。相当于执行map()方法，然后对返回值flat()。

let arr1 = [1, 2, 3, 4];
    console.log(arr1.map(x => [x * 2]))//压缩成新数组 [[2], [4], [6], [8]]
    console.log(arr1.map(x => [x * 2]).flat())// [2, 4, 6, 8]
    console.log(arr1.flatMap(x => [x * 2]))// [2, 4, 6, 8]

转载于:https://www.cnblogs.com/eyu1993/p/11081039.html

[reduce]: https://www.runoob.com/jsref/jsref-reduce.html

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中转json数组常用方法

不管你用什么方法，前提是你的数据必须符合json数据格式！！！不然就会报错！ 1、首先是JSON.parse()方法，可以将在后台序列化后的json规范的字符串转为json

待我称王封你为后i/ 2023年07月25日 06:20/ 0 赞/ 22 阅读

相关 js基础---数组方法

数组数据的排序及去重　　 -------------------- 　　　　　　　　　　　　　　sort无形参的排序方式　　　　　　　　　　　　　　arr

た入场券/ 2023年06月10日 13:22/ 0 赞/ 17 阅读

相关 js数组常用方法整理

[js数组常用方法整理][js] 学疏才浅，若有不对的地方，希望大家可以帮忙指正出来。 1.　Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长

朴灿烈づ我的快乐病毒、/ 2023年06月10日 06:28/ 0 赞/ 6 阅读

相关 js数组常用方法，sort方法，reduce方法

克隆：（1）赋值索引也指向原地址（2）浅克隆——js中基本上都是浅克隆，克隆原始值、克隆引用值的索引，使其指向同一个地址。开辟内容和原地址内容一样的新空间，

小咪咪/ 2023年02月18日 12:52/ 0 赞/ 20 阅读

相关 JS 常用数组方法封装（包含splice）

数组基本操作方法 > 以下方法均改变原数组，需要操作数组的 length 属性 Push 返回值：新数组的长度思路：数组的长度等于 `argumen

￡神魔★判官ぃ/ 2022年12月28日 00:45/ 0 赞/ 247 阅读

相关常用js数组方法

push、pop push(): 把里面的内容添加到数组末尾，并返回修改后的长度。 pop()：移除数组最后一项，返回移除的那个值，减少数组的length。

偏执的太偏执、/ 2022年11月15日 03:44/ 0 赞/ 221 阅读

相关 JS数组常用方法返回值问题

总是记错是否返回原数组，不妨整理一遍 Array 改变原数组 `.push()` :末尾新增 `unshift()`:首位新增 `pop()`:

亦凉/ 2022年10月29日 10:23/ 0 赞/ 210 阅读

相关 js基础（一）：常用数组方法

（0）Array.isArray() Array.isArray() 用于确定传递的值是否是一个数组 Array.isArray([1, 2, 3]);// t

冷不防/ 2021年12月03日 12:49/ 0 赞/ 418 阅读

相关 JS数组常用方法练习题

1.将 border-left-width 转换成 borderLeftWidth （原创） / 将 border-left-width 转换成 borderLeft

拼搏现实的明天。/ 2021年11月14日 11:54/ 0 赞/ 453 阅读

相关 js 数组常用方法

> 零碎知识点： > ① 当给子元素设置了绝对或者固定定位且父元素设置了`overflow:hidden`，若不给父元素设置高/宽，会出现子元素隐藏的现象 > ② 火狐

我不是女神ヾ/ 2021年11月02日 00:48/ 0 赞/ 559 阅读