js数组用法梳理

1、map()

//返回一个新数组

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

2、filter()

//返回一个新数组

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

3、reduce()

//将数组减少为单个值,函数返回的值存储在累加器中

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

4、reduceRight()

//对数组的每个元素执行一个 reducer 函数,从而产生一个输出值(从右到左)

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

5、fill()

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

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

6、find()

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

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

7、indexOf()

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

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

8、lastIndexOf()

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

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

9、findIndex()

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

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

10、includes()

//如果给定元素存在于数组中,则返回 true

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

11、pop()

//删除并返回数组的最后一个元素

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

12、push()

//向数组的末尾添加一个或多个元素,并返回新的长度。

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

13、shift()

//删除并返回数组的第一个元素。

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

14、unshift()

//向数组的开头添加一个或者多个元素,并返回新的长度。

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

15、splice()

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

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

16、slice()

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

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

17、join()

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

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

18、reverse()

//此数组可以反转数组中元素的顺序。

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

19、sort()

//对数组的元素进行就地排序并返回该数组。

const array = ['D', 'B', 'A', 'C'];
array.sort(); //  ['A', 'B', 'C', 'D']
// OR
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]

20、some()

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

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

21、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

22、from()

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

const list = '12345'
Array.from(list);  //  ['1', '2', '3', '4', '5']

23、of()

//使用可变数量的参数创建一个新数组,而不管参数的数量或类型。

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

24、isArray()

//如果给定值是一个数组,则返回 true。

Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

25、at()

//返回指定索引处的值。

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

//说明:js里面不支持负索引的方式。 不过es6新增了一个at方法,可以获取数组的指定索引的元素,并且支持负索引。负索引从后往前计算,-1表示最后一个,-2 表示倒数第二个,依此类推

26、copyWithin()

//复制数组中的数组元素,并返回修改后的新数组。

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

//说明:第一个参数是开始复制元素的目标。 第二个参数是开始复制元素的索引。 第三个参数是停止复制元素的索引。

27、flat()

//返回一个新数组,其中所有子数组元素递归连接到指定深度。

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

28、flatMap()

//返回通过将给定的回调函数应用于数组的每个元素而形成的新数组。

const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

》》后续迭代

你可能感兴趣的:(js数组用法梳理)