近期在做任务的时候，发现自己对常用数组的方法理解不透彻，故写下此篇。
- map方法
map方法返回一个新数组，但是不改变原数组。
例如：
let a = [1, 2, 3, 4];
let b = a.map(v => v*2);
console.log(a); // [1, 2, 3, 4]
console.log(b); // [2, 4, 6, 8]
- forEach方法
感觉forEach和map是一对，做任务的时候有时候傻傻分不清，感觉都是对数组中每一个元素进行一番操作。
但是，与map方法不同的是，forEach方法没有返回值，仅仅是执行回调函数的行为。
我们来看看两者的对比:
let a = [1, 2, 3, 4];
let b = a.forEach( v => {
console.log(v); //some actions
}) ;
console.log(a);
console.log(b);
// 1
// 2
// 3
// 4
// [1, 2, 3, 4]
// undefined
map方法:
let a = [1, 2, 3, 4];
let b = a.map( v => {
console.log(v); //some actions
}) ;
console.log(a);
console.log(b);
// 1
// 2
// 3
// 4
// [1, 2, 3, 4]
// [undefined, undefined, undefined, undefined]
这让我想到日常用TablePage组件中，对其中某一项在进行“包装”时，应该用forEach更合理些。
如：
item.Money = <span>￥{item.money}</span>
- filter方法
filter方法顾名思义，就是筛选数组的意思。返回一个新数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组,不改变原数组。
例如：
let a = [1, 2, 3, 4];
let b = a.filter( v => v > 2 );
console.log(a); // [1, 2, 3, 4]
console.log(b); // [3, 4]
- some方法
我把filter方法和some方法放一起，因为我感觉他们都给我一种“筛选”的感觉，区别是filter方法会告诉你符合条件的是谁，有哪些；而some方法就只会告诉你这个数组中，是否还有符合条件的元素(至少一个)，有就回答true,没有就是false.
如：
let a = [1, 2, 3, 4];
let b = a.some( v => v > 2 );
console.log(a); // [1, 2, 3, 4]
console.log(b); // true
(注意：some方法并不是遍历所有元素哟，遇到第一个符合条件的元素便会结束。)
- every方法
给数组中每一项都运行给定的函数，每一项都返回true, 则返回true。不改变原数组。
let a = [1,2,3,4,5,6];
let b = a.every((value) => value < 10); //true
- indexOf和lastIndexOf方法
都可以接受两个参数：查找的值、查找的起始位置
此方法就是为了某个元素是否存在于数组a中，存在即返回该元素在数组a中的位置下标，否则返回-1.
let a = [1, 2, 3, 4];
let b = a.indexOf(2);
let c = a.lastIndexOf(4, 2);
console.log(b); // 1
7.splice方法
splice方法的第一个参数是确定你要删除的元素的下标，第二个参数是删除的个数。
我们首先来看看下面的代码：
let a = [1, 2, 3, 4];
let b = [1, 2, 3, 4];
a.splice(2, 1);
console.log(a); // [1, 2, 4]
b = b.splice(2, 1);
console.log(b); // [3]
为何会有上述结果的产生？原来是因为使用splice方法时，它虽然会对原数组进行处理，但是返回的被处理的数组。比如上述代码原意是为了删除数组 [1, 2, 3, 4]中的元素3，但是返回的恰恰是[3].
- slice方法
返回一个新数组，第一个参数是起始位置x，第二参数是结束位置y，包含从起始位置x到y-1的元素（不包含结束位置的元素）。不改变原数组。
let a = [1,2,3,4];
let b = a.slice(0,2);
console.log(a); // [1,2,3,4]
console.log(b); // [1,2]
- join方法
将数组中每一项放入一个字符串，可以在参数中制定分隔符，默认情况下是“，”。不改变原数组。
let a = [1,2,3,4]
let b = a.join(); // "1,2,3,4"
let c = a.join("/") // "1/2/3/4"
- concat方法
将两个数组合并成一个新数组返回，不改变原数组。
let a = [1,2,3,4];
let b =[5,6];
let c = a.concat(b);
console.log(a) // [1,2,3,4]
console.log(b) // [5,6]
console.log(c) // [1,2,3,4,5,6]
- pop方法
用于删除并返回数组最后一个元素。返回最后一个元素，改变原数组。
let a = [1, 2, 3];
let b = a.pop();
console.log(a); // [1,2]
console.log(b); // 3
- shift方法
用于删除并返回数组第一个元素。返回第一个元素，改变原数组。
let a = [1, 2, 3];
let b = a.shift();
console.log(a); // [2,3]
console.log(b); // 1
- push方法
用于在数组最后一个元素后加入新元素，返回加入后新数组的『长度』，改变新数组，可以传多个新元素。
let a = [1,2,3,4];
let b = a.push(6,7);
console.log(a); // [1,2,3,4,6,7]
console.log(b); // 6
- unshift方法
用于在数组第一个元素前加入新元素，返回加入后新数组的『长度』，改变新数组，可以传多个新元素。
let a = [1,2,3,4];
let b = a.unshift(6,7);
console.log(a); // [6,7,1,2,3,4]
console.log(b); // 6
- sort方法
按照Unicode code位置排序，改变原数组。
let a = [1,3,22,4];
let b = a.sort();
console.log(a); // [1,22,3,4]
console.log(b); // [1,22,3,4]
- reserve方法
reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。
let a = [1,3,22,4];
let b = a.reserve();
console.log(a); // [4,22,3,1]
console.log(b); // [4,22,3,1]
然后今儿运用上述方法来讲一个我任务总是遇到的算法：
1.数组求差集
此例是为了在selectedList数组中删除disabledList里含有的元素。
let selectedList = [ 2, 78, 0, 77, 5, 16 ];
let disabledList = [5, 77];
// 方法一
disabledList.forEach(item => {
let index = selectedList.indexOf(item);
if(index > -1) {
selectedList.splice(index, 1);
}
});
// 方法二
selectedList = selectedList.filter(v => !disabledList.includes(v));
参考：
1.公众号「Javascript」里的「JavaScript常用数组操作方法，包含ES6方法」一文。
网友评论