Javascript系列之—常见的Array对象汇总

 一、Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

二、Array 对象实例​​​​​​​

1、Array.map()

• 返回一个新数组，其中包含对该数组中每个元素调用提供的函数的结果。

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

2、Array.filter()

• 返回一个新数组，其中包含通过所提供函数实现的测试的所有元素。

const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

3、Array.reduce()

• 将数组减少为单个值。函数返回的值存储在累加器中（结果/总计）。

const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

4、Array.fill()

• 用静态值填充数组中的元素。

const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

5、Array.find()

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

const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

6、Array.indexOf()

• 返回可以在数组中找到给定元素的第一个索引，如果不存在则返回 -1。

const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

7、Array.lastIndexOf()

• 返回可以在数组中找到给定元素的最后一个索引，如果不存在，则返回 -1。从 fromIndex 开始向后搜索数组。

const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

8、Array.findIndex()

• 返回数组中满足提供的测试函数的第一个元素的索引。否则，返回 -1。

const array = [1, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

9、Array.includes()

• 如果给定元素存在于数组中，则返回 true。

const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

10、Array.pop()

• 从数组中删除最后一个元素并返回该元素。

const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

11、Array.push()

• 将新元素追加到数组的末尾，并返回新的长度。

const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

12、Array.shift()

• 从数组中删除第一个元素并返回该元素。

const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

13、Array.unshift()

• 将新元素添加到数组的开头，并返回新长度。

const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

14、Array.splice()

• 通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

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

15、Array.slice()

• 将数组的一部分的浅拷贝返回到从开始到结束（不包括结束）选择的新数组对象中，原始数组不会被修改。

const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

16、Array.join()

• 将数组的所有元素连接成一个字符串。

const list = [1, 2, 3, 4, 5];
list.join(','); // "1, 2, 3, 4, 5"

17、Array.reverse()

• 反转数组中元素的顺序。

const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

18、Array.sort()

• 对数组的元素进行就地排序并返回该数组。默认排序顺序是根据字符串 Unicode 代码点。

const array = ['D', 'B', 'A', 'C'];
array.sort(); //  ['A', 'B', 'C', 'D']

const array = [4, 1, 3, 2, 10];
array.sort(); // [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); //  [1, 2, 3, 4, 10]

19、Array.some()

• 如果数组中至少有一个元素通过了提供的函数实现的测试，则返回 true。

const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

20、Array.every()

• 如果数组中的所有元素都通过了提供的函数实现的测试，则返回 true。

const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

21、Array.from()

• 从类数组或可迭代对象创建一个新数组。

快速创建一个1~10的数组
Array.from({length:10},(t,i)=>i+1) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]