js数组的方法

150 阅读5分钟

join

join():用指定的分隔符将数组每一项拼接为字符串

const a = [1,2,3,4,5]
a.join('-') // 1-2-3-4-5 返回新生成的字符串,不改变原数组

push

push():向数组的末尾添加新元素

const a = [1,2,3,4,5]
a.push(1) // [ 1, 2, 3, 4, 5, 1 ]

const b = [7,8,9,10]
a.push(...b) // [1, 2, 3, 4, 5, 7, 8, 9, 10] 可以用扩展运算符进行数组的拼接

pop

pop():删除数组的最后一项,把[数组长度]减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

const a = [1,2,3,4,5,6]
a.pop() // [1,2,3,4,5]

shift

shift():删除数组的第一项,数组为空时返回空数组

const a = [1,2,3,4,5,6]
a.shift() // [ 2, 3, 4, 5, 6 ]

unshift

unshift():向数组首位添加新元素

const a = [1,2,3,4]
a.unshift(8) // [ 8, 1, 2, 3, 4 ]

slice

slice():按照条件查找出其中的部分元素,不改变原数组

const a = [1,2,3,4,5,6]
a.slice(1) // [ 2, 3, 4, 5, 6 ]
a.slice(-3) // [ 4, 5, 6 ]
a.slice(1,3) // [ 2, 3 ]

const b = {
  length:2,
  0:'name',
  1:'sex'
} // 类数组
const arguments = Array.prototype.slice.call(b) // [ 'name', 'sex' ]

splice

splice():对数组进行增删改

const a = [1,2,3,4,5,6]
a.splice(1,2) //[ 2, 3 ] 返回删除的内容
a.slice(1,1,8)// [ 2 ] 返回被替换的值,原数组发生改变 [ 1, 8, 3, 4, 5, 6 ]
a.splice(1,0,'in') // 返回空数组,原数组发生改变 [1, 'in', 2, 3,4, 5, 6]

fill

fill(): 方法能使用特定值填充数组中的一个或多个元素

const a = new Array(5)
a.fill(1) // 原数组改变 [ 1, 1, 1, 1, 1 ]

const  b = [1,2,3,4,5,6]
b.fill(2,3) // 原数组改变 [ 1, 2, 3, 2, 2, 2 ] 2为填充的元素,3位填充元素的在数组中的起始位置

filter

filter():“过滤”功能 filter() 不会对空数组进行检测;filter() 不会改变原始数组

const a = [1,2,3,4,5,6]
a.filter(num => {
  return num === 1
}) // 返回一个符合过滤条件的数组

concat

concat():用于连接两个或多个数组,对象也是可以进行连接的

const a = [1,2,3,4,5,6]
const b = [7,8,9]
a.concat(b) // 返回新的数组[1, 2, 3, 4, 5, 6, 7, 8, 9]

const c = {
  1:1,
  2:2
}

a.concat(c) //返回新的数组 [ 1, 2, 3, 4, 5, 6, { '1': 1, '2': 2 } ]

indexOf

indexOf():检测当前值在数组中第一次出现的位置索引

const a = [1,2,3,4,5,6,7,8,1]
const index = a.indexOf(1) // 0

lastIndexOf

lastIndexOf():检测当前值在数组中最后一次出现的位置索引

const a = [1,2,3,4,5,6,7,8,1]
const index = a.lastIndexOf(1) // 8

every

every():判断数组中每一项都是否满足条件

const a = [1,2,3,4,5,6,7,-1]

const checked = a.every(num=>{
  return num > 0
}) // false

some

-  some():判断数组中是否存在满足条件的项

const a = [1,2,3,4,5,6,7]

a.some(num=>{
  return num >6
}) // true

includes

-  includes():判断一个数组是否包含一个指定的值

const a = [1,2,3,4,5,6,7,8]
const checked = a.includes(1) // true

sort

-  sort():对数组的元素进行排序

const a =  [1,2,3,4,5]
a.sort((a,b)=>{
  return b-a
}) // 按照从大到小排序 [ 5, 4, 3, 2, 1 ]
a.sort((a,b)=>{
  return a-b
}) // 按照从小到大排序 [ 1, 2, 3, 4, 5 ]

reverse

reverse():返回值为Array类型,返回元素顺序被反转后的数组对象

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

forEach

forEach():循环遍历数组每一项,且是同步执行,JavaScript 中的 forEach不支持 promise 感知,也支持 async 和await,所以不能在 forEach 使用 await 。,forEach不支持break,return在forEach循环体中是无效的,不要在循环体中删除原数组,forEach的index是隐性自增的

const a = [1,2,3,4]
a.forEach(item => {
}) 

map

map():循环遍历数组每一项

const a = [1,2,3,4,5]
const b = a.map(item=>{
  return 1
}) // [ 1, 1, 1, 1, 1 ] 返回一个新数组并不会改变原数组

const a = [1, 2, 3, 4, 5];

async function mapHttp() {
 const test = a.map( async (item) => {
    return { key: await http() };
  }); // 只会返回promise数组
  console.log(await Promise.all(test)); // [ { key: 1 }, { key: 1 }, { key: 1 }, { key: 1 }, { key: 1 } ]
}

function http() { // 模拟异步请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    });
  });
}

copyWithin

copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中

const arr = [1,2,3,4,5,7]
arr.copyWithin(0,3,4) // [ 4, 2, 3, 4, 5, 7 ] 0为被覆盖的开始位置,3为要复制的起始位置,4为被复制的结束位置

find

find():返回匹配的值

const a = [1,2,3,4,5,6,7,8]
const b = a.find(num=>{
  return num ===1
}) // 1 返回第一个符合条件条件的元素

findIndex

findIndex():返回匹配位置的索引

const a = [1,2,3,4,5,6,7,8]
const index = a.find(num=>{
  return num ===1
}) // 0 返回第一个符合条件的索引位置

toLocaleString

toLocaleString():将数组转换为字符串

const num = 121212121
num.toLocaleString(); // 121,212,121

toString

toString():将数组转换为字符串'

const num = 121212121
num.toLocaleString(); // 121212121

flat(ES6)

flat():扁平化数组

const a = [1,2,3,5,6,['a','b','c',[1,2,3]]]
const b  = a.flat() // [ 1, 2, 3, 5, 6, 'a', 'b', 'c', [ 1, 2, 3 ] ]
const b  = a.flat(Infinity) // [1,   2,   3,   5, 6,'a', 'b', 'c', 1, 2, 3]

// 那么如何我们去实现与flat相同功能的数组拉平方法呢
// 方法一
const text = a.toString().split(",") // 会将类型都转换为String

// 方法二

function _flat(arr, limit = 1) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i]) && limit > 0) {
      result = result.concat(_flat(arr[i], limit - 1));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
} // 可以传limit 控制解析多少层,且数据的类型不会发生变化

flatMap

flatMap():扁平化数组

entries

entries():遍历数组

keys

keys():遍历数组

values

values():遍历数组