Skip to content
本页目录

数组方法

at

接受一个整数值并返回该索引对应的元素,允许正数和负数

语法:arr.at(index)

javascript
const arr = [32, 5, 6, 2, 5, 76];

console.log(arr.at(4)); //5
console.log(arr.at(-1)); //76

concat

合并两个或多个数组,不更改现有数组,返回一个新数组

语法:arr.concat(arr1,arr2,...,arrN)

javascript
const arr = [32, 5, 6, 2, 5, 76];
const arr1 = [24, 58];
console.log(arr.concat(arr1)); //[32, 5, 6, 2, 5, 76, 24, 58]

copyWithin

复制数组的一部分到同一数组的另一个位置,并返回它,不会改变原数组的长度

语法:arr.copyWithin(tagetIndex,start,end)

  • tagetIndex 复制序列到该位置
  • start 和 end 时表示需要复制的元素的下标
  • 包括 start 下标的值不包括 end 下标的值
javascript
const arr = [32, 5, 6, 2, 5, 76];

arr.copyWithin(1, 2, 4);

console.log(arr); //[32, 6, 2, 2, 5, 76]

entries

返回一个新的数组迭代器对象,该对象包含数组中每个索引的键值对

语法:arr.entries()

javascript
const arr = [32, 5, 6, 2, 5, 76];

const interator = arr.entries();

console.log(interator); //Array Iterator {}

console.log(interator.next().value); // [0, 32]

for (let i of interator) {
  console.log(i);
}

// [(1, 5)][(2, 6)][(3, 2)][(4, 5)][(5, 76)];

every

测试一个数组内所有元素是否都能通过某个指定函数的测试,返回一个布尔值

javascript
const arr = [32, 5, 6, 2, 5, 76];

const aaa = (e, index, arr) => {
  return e >= 2;
};

console.log(arr.every(aaa)); //true

const bbb = (e, index, arr) => {
  return e >= 5;
};

console.log(arr.every(bbb)); //false

fill

此方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法:fill(value, start, end)

  • value,用来填充的值
  • start,默认值为 0
  • end,默认值为 arr.length
js
const arr = [1, 2, 3, 4, 8, 10];
console.log(arr.fill(7, 2, 5)); //[1, 2, 7, 7, 7, 10]
console.log(arr.fill(7)); //[7, 7, 7, 7, 7, 7]

filter

创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。

语法:

  • 箭头函数 arr.filter((el, index, array) => { /* … */ } )
  • 回调函数 arr.filter(callbackFn[, thisArg])
  • 内联回调函数 arr.filter(function(el, index, array) { /* … */ }, thisArg)
  • thisArg,执行回调时用作 this 的对象
js
const c = {
  b: 7,
};

function aa(el, index, arr) {
  return el > this.b;
}

arr = [21, 31, 4, 23, 5, 6, 7, 7, 8, 45, 24, 2];

console.log(arr.filter(aa, c)); //  [21, 31, 23, 8, 45, 24]

const res = arr.filter((el, index, arr) => {
  return el > 6;
});
console.log(res); // [21, 31, 23, 7, 7, 8, 45, 24]

find

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法:

  • 箭头函数 arr.find((el, index, array) => { /* … */ } )
  • 回调函数 arr.find(callbackFn[, thisArg])
  • 内联回调函数 arr.find(function(el, index, array) { /* … */ }, thisArg)
  • thisArg,执行回调时用作 this 的对象
javascript
const c = {
  b: 7,
};

function aa(el, index, arr) {
  return el > this.b;
}

arr = [21, 31, 4, 23, 5, 6, 7, 7, 8, 45, 24, 2];

console.log(arr.find(aa, c)); //  21

const res = arr.find((el, index, arr) => {
  return el > 21;
});
console.log(res); // 31

const res2 = arr.find((el, index, arr) => {
  return el > 45;
});
console.log(res2); //undefined

findIndex

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

语法:

  • 箭头函数 arr.findIndex((el, index, array) => { /* … */ } )
  • 回调函数 arr.findIndex(callbackFn[, thisArg])
  • 内联回调函数 arr.findIndex(function(el, index, array) { /* … */ }, thisArg)
  • thisArg,执行回调时用作 this 的对象
javascript
const c = {
  b: 7,
};

function aa(el, index, arr) {
  return el > this.b;
}

arr = [21, 31, 4, 23, 5, 6, 7, 7, 8, 45, 24, 2];

console.log(arr.findIndex(aa, c)); //0

const res = arr.findIndex((el, index, arr) => {
  return el > 21;
});
console.log(res); //1

const res2 = arr.findIndex((el, index, arr) => {
  return el > 45;
});
console.log(res2); //-1

findLast

返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素,则返回 undefined

语法:

  • 箭头函数 arr.findLast((el, index, array) => { /* … */ } )
  • 回调函数 arr.findLast(callbackFn[, thisArg])
  • 内联回调函数 arr.findLast(function(el, index, array) { /* … */ }, thisArg)
  • thisArg,执行回调时用作 this 的对象
javascript
const c = {
  b: 7,
};

function aa(el, index, arr) {
  return el > this.b;
}

arr = [21, 31, 4, 23, 5, 6, 7, 7, 8, 45, 24, 2];

console.log(arr.findLast(aa, c)); // 24

const res = arr.findLast((el, index, arr) => {
  return el > 24;
});
console.log(res); // 45

const res2 = arr.findLast((el, index, arr) => {
  return el > 45;
});
console.log(res2); //undefined

findLastIndex

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

语法:

  • 箭头函数 arr.findLastIndex((el, index, array) => { /* … */ } )
  • 回调函数 arr.findLastIndex(callbackFn[, thisArg])
  • 内联回调函数 arr.findLastIndex(function(el, index, array) { /* … */ }, thisArg)
  • thisArg,执行回调时用作 this 的对象
javascript
const c = {
  b: 7,
};

function aa(el, index, arr) {
  return el > this.b;
}

arr = [21, 31, 4, 23, 5, 6, 7, 7, 8, 45, 24, 2];

console.log(arr.findLastIndex(aa, c)); //10

const res = arr.findLastIndex((el, index, arr) => {
  return el > 24;
});
console.log(res); //9

const res2 = arr.findLastIndex((el, index, arr) => {
  return el > 45;
});
console.log(res2); //-1

flat

会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flat([depth]) -- depth 指定要提取嵌套数组的结构深度,默认值为 1。

javascript
var arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

注意:

WARNING

使用 Infinity 参数,可展开任意深度的嵌套数组