我的胃来食

外观

数组常用的方法 ​

作者:guo-zi-xin
更新于:9 个月前
字数统计:2.4k 字
阅读时长:9 分钟

Array.prototype.indexOf() ​

该方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

可以传两个参数 第一个参数为需要查找的元素， 第二个是可选参数， 表示开始搜索的索引(从0开始)， 会转换为整数

javascript
  const arr = [1, 2, 3, 4, 5]
 console.log(arr.indexOf(3)) // 2 满足条件的下标
 console.log(arr.indexOf(6)) // -1 找不到则返回 -1  
 console.log(arr.indexOf(3，3)) // -1 满足条件的下标, 从下标为3的元素开始查询 没有找到返回-1

Array.prototype.map() ​

该方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

javascript
  const arr = [1, 2, 3, 4, 5]
  const newArr = arr.map(x => x*2)
  //arr= [1, 2, 3, 4, 5]   原数组保持不变
  //newArr = [2, 4, 6, 8, 10] 返回新数组

Array.prototype.forEach() ​

该方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分

javascript
  const arr = [1, 2, 3, 4, 5]
  num.forEach(x => x*2)
  // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分

Array.prototype.filter() ​

该方法是将所有元素进行判断，将满足条件的元素生成一个新数组返回

javascript
  const arr = [1, 2, 3, 4, 5]
  const isBigEnough = (value) => value >= 3
  const newArr = arr.filter(isBigEnough )
  //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

Array.prototype.find() ​

该方法是将所有元素进行判断，并且返回符合条件的第一个元素的值， 否则返回undefined

javascript
  const arr = [1, 2, 3, 4, 5]
  const isBigEnough = (value) => value >= 3
  const newArr = arr.find(isBigEnough) // 3 满足条件的第一个元素

Array.prototype.every() ​

该方法是将所有元素进行判断，如果所有的元素都符合判断条件，则返回true 否则返回false

javascript
  const arr = [1, 2, 3, 4, 5]
  const isLessThan4 = (value) => value < 4
  const isLessThan6 = (value) => value < 6
  arr.every(isLessThan4 ) //false
  arr.every(isLessThan6 ) //true

Array.prototype.some() ​

该方法将所有元素进行判断， 如果存在至少一个元素符合判断条件，则返回true, 否则返回false

javascript
  const arr = [1, 2, 3, 4, 5]
  const isLessThan4 = (value) => value < 4
  const isLessThan6 = (value) => value > 6
  arr.some(isLessThan4 ) //true
  arr.some(isLessThan6) //false

Array.prototype.reduce()与 Array.prototype.reduceRight() ​

该方法是所有元素调用返回函数， 返回值为最后结果， 传入的类型必须为函数类型

两者区别是Array.prototype.reduceRight()方法从右向左操作的

javascript
const arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
const sum = arr.reduce(add)
//sum = 15  相当于累加的效果

Array.prototype.pop() ​

该方法是在数组后面删除最后一个元素，并返回删除的元素，该方法改变了数组的长度

javascript
const arr = [1,2,3,4,5]
arr.pop()
console.log(arr.pop()) // 5 表示被删除的元素
console.log(arr) // [1,2,3,4]

Array.prototype.push() ​

该方法是在数组最后一个元素后面添加一个或多个元素， 返回变化后数组长度，并且更改原数组

javascript
const arr = [1,2,3,4]
arr.push(5)
console.log(arr.push(5)) // 5 新数组的长度
console.log(arr) // [1,2,3,4,5]

Array.prototype.shift() ​

该方法是会删除掉数组的第一项， 返回数组删除的元素， 并且改变原数组

javascript
const arr = [1,2,3,4,5]
arr.shift()
console.log(arr.shift()) // 1 返回的是删除的那个元素
console.log(arr) // [2,3,4,5]

Array.prototype.unshift() ​

该方法是将一个或者多个元素添加到数组的开头， 返回新数组的长度， 改变原来的数组

javascript
  const arr = [1, 2, 3, 4, 5]
  arr.unshift(6, 7)
  console.log(arr) //[6, 7, 2, 3, 4, 5]
  console.log(arr.length) //7

Array.isArray() ​

该方法是判断目标元素是否为数组，返回布尔值， 这是属于数组原型的方法

javascript
  const arr = [1, 2, 3, 4, 5]
  console.log(Array.prototype.isArray(arr)) // true
  console.log(Array.prototype.isArray('1111')) // false

Array.prototype.concat() ​

该方法可以讲多个数组拼接成一个数组

javascript
const arr = [1,2,3,4]
const arr2 = [5,6,7]
const newArr = arr.concat(arr2)
console.log(arr) // [1,2,3,4,5,6,7]

INFO

在ES6中 我们可以使用解构的方式也可以合并两个或者多个数组：

javascript
  const arr = [1,2,3,4]
  const arr2 = [5,6,7]
  const newArr = [...arr, ...arr2]
  console.log(arr) // [1,2,3,4,5,6,7]

Array.prototype.join() ​

该方法是将数组中的元素拼接成字符串，拼接格式为join函数传入的参数, 不改变原数组， 并且没有参数时默认为逗号,连接

javascript
const arr = [1,2,3,4]
console.log(arr.join(',')) // '1,2,3,4'
console.log(arr.join('')) // '1234'
console.log(arr.join('#')) // '1#2#3#4'

Array.prototype.toString() ​

该方法也是将数组转化为字符串，与join方法不同的是， 拼接格式与函数参数无关，都是以逗号,拼接

javascript
const arr = [1,2,3,4]
console.log(arr.toString()) // '1,2,3,4'
console.log(arr.toString('')) //'1,2,3,4'

题外话

toString()方法和 String(element) 都是将元素转变为字符串的方法, 但两者又有一些地方有差别：

  • 存在性检查

    • 在使用toString()方法时， 如果调用方法的元素是null、undefined时， 会返回报错，因为这些类型的数据没有toString()方法；
    • 而在使用String(element)方法时候， 如果传入的元素是null、undefined、object, 则不会返 回报错 并且返回的结果是字符串的'null'、'undefined', object返回的是'[object Object]'

  • 原始值转换

    • 对于原始值（例如数字、布尔值等基本数据类型），它们有各自的 toString() 方法，可以被直接调用
    • 使用String(element) 时，会根据规则隐式调用原始值的 toString() 方法

Array.prototype.slice() ​

该方法传入一个数字， 表示从传入的数字为要处理的元素的下标， 并把小于这个下标对应的元素的元素都删除掉，如果传入负数，则以最后一项的下标为-1开始计算，并且删除元素 不会改变原数组

javascript
const arr = [1,2,3,4,5]
console.log(arr.slice(2)) // [3,4,5]
console.log(arr.slice(-2)) // [4,5] 元素5对应的下标为 -1 元素4对应的下标为-2 以此类推

console.log(arr) // [1,2,3,4,5]

Array.prototype.splice() ​

该方法通过移除或者替换已存在的元素和/或添加新元素，并且就地改变一个数组的内容。

最多只支持三个参数

  • 只传入一个参数 这个参数代表下标， 表示替换掉这个下标元素后面的元素为空，其实也是删除功能、

  • 传入两个参数 第一个参数代表下标， 第二个元素代表要删除的数量

  • 传入三个参数 第一个参数代表下标， 第二个元素代表要删除的数量， 第三个以及后面的多个参数表示从第一个参数的值的位置开始被插入的元素

javascript
const arr = [1,2,3,4,5];

arr.splice(1) // [2,3,4,5]  表示删除掉下标为1的元素后面的元素,         原数组变更为 [1]
arr.splice(1,0) // [] // 表示从下标为1的元素开始删除，删除0个元素,      原数组变更为[1,2,3,4,5]
arr.splice(1,1) // [2] 表示从下标为1的元素开始删除,删除一个元素,        原数组变更为[1,3,4,5]
arr.splice(1,1, 66)  // [2] 表示从下标为1的元素开始替换 替换一个元素,   原数组变更为[1,66,3,4,5]

Array.prototype.includes() ​

该方法用来判断一个数组是否包含一个指定的值，如果有则返回true， 否则返回false

javascript
  const arr = [1,2,3,4,5]
  console.log(arr.includes(2)) // true
  console.log(arr.includes(66)) // false

Array.prototype.flat() ​

方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

可以传一个可选参数 指定要提取嵌套数组的结构深度，不传值默认值为 1。

Infinity 传入这个参数表示提取嵌套数组的所有的结构深度

javascript
  const arr = [1, 2, 3, 4, 5]
  console.log(arr.indexOf(3)) // 2 满足条件的下标
  console.log(arr.indexOf(6)) // -1 找不到则返回 -1  
  console.log(arr.indexOf(3，3)) // -1 满足条件的下标, 从下标为3的元素开始查询 没有找到返回-1

Array.prototype.from() ​

该方法从可迭代对象或类数组对象创建一个新的浅拷贝的数组实例。

  • 可迭代对象: 例如 Map和 Set 对象， 或者对象是不可迭代的

  • 类数组对象: 表示带有length属性和索引元素的对象(函数的arguments参数也是累数组对象)

javascript
  const arr = [1,2,3,4,5]
  const str = '1234'
  const setMap = new Set([1,2,3,4,5,5])
  const newMap = new Map([[1,2],[3,4],[5,6]])
  console.log(Array.form(arr)) // [1,2,3,4,5] 
  console.log(Array.form(str)) // ['1','2','3','4']
  console.log(Array.form(setMap)) // [1,2,3,4,5] 
  console.log(Array.form(newMap)) // [[1,2], [3,4],[5,6]]

Array.form()还支持传入箭头函数，可以进行函数操作：

javascript
// 使用箭头函数作为映射函数去操作多个元素
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 生成一个数字序列。因为数组在每个位置都使用 `undefined` 初始化，下面的 `v` 值将是 `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

序列生成器(range) ​

javascript
// 序列生成器函数（通常称为“range”，例如 Clojure、PHP 等）
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);

// 生成的数字范围 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// 生成的数字范围 1..10，步长为 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// 使用 Array.from 生成字母表，并将其序列排序
range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
  String.fromCharCode(x),
);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",
//  "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Array.prototype.flatMap() ​

该方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10]
// 筛选出奇数项， 并且获取它们各自的平方的数组
const newArr = arr.flatMap((item) => item % 2 !== 0 ? [item * item]: [])
// 返回 [1,9,25,49,81]

人生没有捷径，就像到二仙桥必须要走成华大道。

Copyright © 2019-present guozixin