常见的对数组中元素操作方法

1.concat 合并

concat(): 在现有数组的全部元素基础上拷贝副本并创建一个新数组,将方法中所有参数添加到新数组末尾,并返回这个新数组; 原数组不受影响

JS集合-Array操作方法_JS集合

强制不打平数组: concat()方法默认是打平数组参数,打平数组参数行为可以重写。需要在参数数组上指定一个特殊的符号:Symbol.isConcatSpreadable=false.  (强制打平,参数数组Symbol.isConcatSpreadable=true)

JS集合-Array操作方法_JS集合_02

  

2.slice() 切割

slice() 用来创建一个包含原有数组中一个或多个元素的新数组。 slice() 方法不影响原始数组。

JS集合-Array操作方法_Array_03

 

slice() 只有一个参数,则返回该索引到数组末尾的所有元素;

slice() 有两个参数,则返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。

 

3.splice() 粘接

有3中方式使用这个方法:主要目的是在数组中间插入元素。

splice() 删除:需要传2个参数, 如:splice(0,2) 从索引0开始删除2个元素。 第一个参数表示要删除的元素位置,第二个参数表示要删除的元素数量;

splice() 插入: 需传3个或以上参数,开始位置,0(要删除的元素数量),和要插入的元素。 如splice(2,0,"red","green") 从索引2开始插入字符串“red”和“green”;

splice() 替换: 需传3个或以上参数,开始位置,要删除的元素数量,要插入的新元素; 如splice(2,1,"red","green") 在索引2位置删除一个元素,然后从该位置向数组插入“red”和“green”;

 

4.搜索和位置方法

严格相等的搜索方法:indexOf()、lastIndexOf() 和 includes().

indexOf() 从数组前头开始向后搜索,返回要查找的元素在数组中的位置; 两个参数:第一个参数表示要查找的元素,第二个参数可选,表示开始搜索的位置;

 includes() 从数组前头开始向后搜索,数组中是否含有要查找的元素。返回boolean 值;

lastIndexOf() 从数组末尾向前搜索,返回要查找的元素在数组中的位置;两个参数:第一个参数表示要查找的元素,第二个参数可选,表示开始搜索的位置;

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

alert(numbers.indexOf(4)); // 3

alert(numbers.lastIndexOf(4)); // 5

alert(numbers.includes(4)); // true

alert(numbers.indexOf(4, 4)); // 5 ,

alert(numbers.lastIndexOf(4, 4)); // 3

alert(numbers.includes(4, 7)); // false

let person = { name: "Nicholas" };

let people = [{ name: "Nicholas" }];

let morePeople = [person];

alert(people.indexOf(person)); // -1

alert(morePeople.indexOf(person)); // 0

alert(people.includes(person)); // false

alert(morePeople.includes(person)); // true

 

以上三个方法,在对比数组中元素和要查找的元素时,使用全等(===)进行比较,也就是两项必须严格相等。

 

断言函数搜索find() 和 findIndex()

如:

const people = [

{

name: "Matt",

age: 27

},

{

name: "Nicholas",

age: 29

}

];

alert(people.find((element, index, array) => element.age < 28));

// {name: "Matt", age: 27}

alert(people.findIndex((element, index, array) => element.age < 28));

 

在找到匹配项后,这两个方法都不会继续搜索。

 

5.迭代方法

5个迭代方法:

every():对数组每一项都运行传入的函数,如果对每一项函数都返回 true,则这个方法返回 true。

filter():对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。

forEach():对数组每一项都运行传入的函数,没有返回值。

map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。

some():对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true。

这些方法都不改变调用它们的数组。

 

//every()

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

let everyResult = numbers.every((item, index, array) => item > 2);

alert(everyResult); // false

let someResult = numbers.some((item, index, array) => item > 2);

alert(someResult); // true

 

//filter()

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

let filterResult = numbers.filter((item, index, array) => item > 2);

alert(filterResult); // 3,4,5,4,3

 

//map()

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

let mapResult = numbers.map((item, index, array) => item * 2);

alert(mapResult); // 2,4,6,8,10,8,6,4,2

 

//foreach()

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

numbers.forEach((item, index, array) => {

// 执行某些操作

});

 

//some() 和every() 相同,只不过some()返回 true 是因为至少有一项满足条件。every()返回 false 是因为并不是每一项都能达到要求。

 

6.归并方法

reduce()和 reduceRight()这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。

reduce()方法从数组第一项开始遍历到最后一项。

reduceRight()从最后一项开始遍历至第一项。

 

let values = [1, 2, 3, 4, 5];

let sum = values.reduce((prev, cur, index, array) => prev + cur);

alert(sum); // 15

第一次执行归并函数时,prev 是 1,cur 是 2。第二次执行时,prev 是 3(1 + 2),cur 是 3(数

组第三项)。如此递进,直到把所有项都遍历一次,最后返回归并结果。