JavaScript数组方法大全(分为会不会改变原数组)

若看不懂注释的输出方式可以将代码粘贴到浏览器中执行观看

1. 数组通用方法

Array.from: 将一个类数组转化成数组
类数组:Set, Map,对象等可遍历对象皆为类数组

Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
Array.from([1, 2, 3], x => x + x) //[2, 4, 6]

Array.isArray: 判断传递的值是否是一个 Array 类型

Array.isArray([1,2,3])  // true
Array.isArray({a: 'a'}) // false
Array.isArray('hello')  // false
Array.isArray(Array(3)) // true
Array.isArray(null)     // false

Array.of: 把所有的参数放到一个数组中返回

const arr = Array.of(1, 2, 3); // [1, 2, 3]
const arr1 = Array.of();        // []

2. 改变原数组的方法

Array.pop: 删除原数组的最后一个元素
Array.push: 在原数组的末尾添加一个元素
Array.shift: 删除原数组的第一个元素
Array.unshift: 在原数组开头添加一个元素

const arr = [1,2,3]
arr.pop()       // 3; arr: [1,2]
arr.shift()     // 1; arr: [2]
arr.push(3)     // 2; arr: [2,3]
arr.unshift(4)  // 2; arr: [4,2,3]

Array.sort

const asc = (a,b) => a - b
const des = (a,b) => b - a
const arr = [3,1,4,2,7,10]
arr.sort(asc) // [1, 2, 3, 4, 7, 10]
arr.sort(des) // [10, 7, 4, 3, 2, 1]
arr.sort() // [1, 10, 2, 3, 4, 7] 字典序

Array.reverse: 颠倒原数组中元素的顺序

const arr = [1,2,3]
arr.reverse() // [3,2,1]

Array.splice: 删除原数组中的子串

const arr = [1,2,3,4,5]
arr.splice(1,2) // [2,3]; arr: [1,4,5]

Array.copyWithin: 从数组的指定位置拷贝元素到另一个指定位置

const arr = [1,2,3,4,5,6]
arr.copyWithin(4, 1, 3) 
console.log(arr) // [1,2,3,4,2,3]

Array.fill: 用一个固定值替换数组中的元素

/*
 *  第一个参数:填充的值
 *  第二个参数:填充的开始位置(闭区间)
 *  第三个参数:填充的结束位置(开区间)
 */

const arr = [1,2,3,4,5,6]
arr.fill(0, 1, 3) // [1,0,0,4,5,6]
Array(2).fill(0)  // [0,0]

3.不改变原数组的方法

Array.concat: 合并多个数组并返回一个新数组

const arr1 = [1, 2]
const arr2 = ['a', 'b']
const arr3 = arr1.concat(arr2)  // [1, 2, 'a', 'b']

Array.entries: 返回一个数组的迭代对象(Iterator)

const arr = [1,2,3]
const it = arr.entries()
console.log(it.next())  // {value: [0,1], done: false}
console.log(it.next())  // {value: [1,2], done: false}
console.log(it.next())  // {value: [2,3], done: false}
console.log(it.next())  // {value: undefined, done: true}

Array.every:对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。
Array.some:对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。

const arr = [1,2,3]
arr.every(v => { console.log(v); return v < 2})  // 1 2 false
arr.some(v => { console.log(v); return v < 2})  // 1 true

Array.filter: 创建一个新数组,返回原数组中满足条件的所有元素

const arr = [
  { age: 10, name: '10'},
  { age: 23, name: '23'},
  { age: 16, name: '16'},
  { age: 11, name: '11'},
  { age: 37, name: '37'}
]
let newArr = arr.filter(v => v.age < 18)
//{age: 10, name: '10'}
//{age: 16, name: '16'}
//{age: 11, name: '11'}

Array.map: 返回一个新数组,数组中的元素为原数组经过处理后的值

const arr1 = [{id:1}, {id:2}, {id: 3}]
arr1.map(v => v.id) // [1, 2, 3]

Array.find: 返回数组中第一个满足条件的元素
Array.findIndex: 返回数组中第一个满足条件的元素的索引值

const arr = [
  { age: 10, name: '10'},
  { age: 23, name: '23'},
  { age: 16, name: '16'},
  { age: 11, name: '11'},
  { age: 37, name: '37'}
]
arr.find(v => v.age > 18)  // { age: 23, name: '23'}
arr.findIndex(v => v.age > 18)  // 1

Array.indexOf: 找到满足条件的元素的索引值,第一个参数是开始寻找的位置
Array.lastIndexOf: 寻找顺序与indexOf相反

const arr1 = ['a', 'b', 'c','b']
arr1.indexOf('b') // 1
arr1.lastIndexOf('b') // 3

Array.flat: 创建一个新数组,扁平化原嵌套数组,参数为扁平的层数,该方法会移除空项

const arr = [1, , [2, [3, , [4]]]]
let newArr = arr.flat()      // [1,2,[3, , [4]]]
let newArr = arr.flat(2)     // [1,2,3,[4]]
let newArr = arr.flat(3)     // [1,2,3,4]

Array.forEach: 遍历数组中的每一个元素

const arr1 = [1,2,3]
arr1.forEach(v => console.log(v))  // 1,2,3

Array.includes: 判断一个数组中是否包含一个元素

const obj = {id: 2, value: '2'}
const arr = [
  obj,
  'hello',
  {id: 1, value: '1'}
]

arr.includes({id: 1, value: '1'}) // false
arr.includes(obj) // true
arr.includes('hello') // true

Array.join: 将元素连接成一个字符串,并用分隔符分割(第一个参数),元素会执行 toString

const arr = [1, 'b', {c: 2}, [3,4]]
arr.join(' & ') // "1 & b & [object Object] & 3,4"

Array.slice: 提取数组中的子串到新数组

const arr = [1,2,3,4,5]
arr.slice(2,4)  // [3,4];
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值