欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js操作数组的方法

程序员文章站 2023-12-26 10:51:57
...

var array = [];

一、改变原数组

1、array.splice();

2、array.fill();

3、array.push(); 

4、array.pop(); 

5、array.copyWithin();

6、array.sort();

7、arr.reverse();

8、array.shift();

9、array.unshift();

二、不改变原数组

1、array.concat();

2、array.every(); 

3、array.reduceRight();

4、array.filter();

5、array.find();

6、array.entries();

7、array.toLocaleString()

8、array.slice();

9、array.reduce();

10.array.some();

11、array.toString() ;

12、array.join();

13、array.findIndex();

14、array.keys();

15、array.values();

16、array.includes(); 

17、array.flat();

18.array.lastIndexOf();

三、可能改变也可能不改变

array.map();

arr.forEach();

四、会产生新数组的方法

array.reduce()
array.reduceRight()
array.slice()

array.from()
array.of()
array.concat()
array.filter()
array.flat()
array.flatMap()
array.map()


语法解析

一. 会修改原数组

1、array.splice();
    删除指定个数元素:array.splice(index, deleteCount);
    删除指定个数元素并添加元素:array.splice(index, deleteCount, addItem1, ....., addItemX);

2、array.fill(); arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

栗子:

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

3、array.push(); 一个或多个元素添加到数组的末尾,并返回该数组的新长度:arr.push(element1, ..., elementN);

4、array.pop(); 从数组中删除并返回最后一个元素(当数组为空时返回undefined)。此方法更改数组的长度:array.pop();

5、array.copyWithin(); arr.copyWithin(target[, start[, end]]);

浅复制数组的一部分到同一数组中的另一个位置,并返回改变后的数组,不会改变原数组的长度。
    target:
        0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。
    如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列
    将被修改以符合 arr.length。
    start
        0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。
    如果 start 被忽略,copyWithin 将会从0开始复制。
    end
        0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end
    这个位置的元素。如果是负数, end 将从末尾开始计算。
    如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。

6、array.sort();对数组元素进行排序,改变原数组,返回该数组

7、arr.reverse(); 颠倒数组中元素的顺序,改变原数组,返回该数组

8、array.shift();把数组的第一个元素删除,若空数组,不进行任何操作,返回undefined,改变原数组,返回第一个元素的值
9、array.unshift();向数组的开头添加一个或多个元素,改变原数组,返回新数组的长度

二、不改变原数组

1、array.concat(); array.concat([1,2,3], [a,b,c]);合并两个或多个数组,返回新数组。

2、array.every(); arr.every(callback[, thisArg]);

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

3、array.some();方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

4、array.map();

var new_array = arr.map(function callback(currentValue[, index[, array]]) {

   // Return element for new_array

}[, thisArg])

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
6、array.filter();

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
7、array.find();arr.find(callback[, thisArg])返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

8、arr.entries();返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

9、arr.forEach(); arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);对数组的每个元素执行一次提供的函数。

10、array.slice();从已有的数组中返回选定的元素,提取部分元素,放到新数组中。

参数解释:1:截取开始的位置的索引,包含开始索引;2:截取结束的位置的索引,不包含结束索引。

不改变原数组,返回一个新数组

11、array.reduce();

12、array.join();把数组中所有元素放入一个字符串,将数组转换为字符串,不改变原数组,返回字符串

13、array.toString();   把数组转为字符串,不改变原数组,返回数组的字符串形式

14、array.findIndex(); arr.findIndex(callback[, thisArg]) 数组中通过提供测试函数的第一个元素的索引。否则,返回-1

15、array.keys();返回一个包含数组中每个索引键的Array Iterator对象。

16、array.values();返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

17、array.includes(); arr.includes(valueToFind[, fromIndex])返回一个布尔值 Boolean

用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

18、array.flat();会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

var newArray = arr.flat([depth])

depth 可选:指定要提取嵌套数组的结构深度,默认值为 1。

栗子:扁平化嵌套数组

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

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

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

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

扁平化与数组空项

flat() 方法会移除数组中的空项:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

替代方案:

使用 reduce 与 concat

reduce + concat + isArray + recursivity

forEach+isArray+push+recursivity。。。。

上一篇:

下一篇: