array 数组去重过滤空值等方法

去重操作

第一种方式, ES 6 引入的新书据结构 Set 本身就是没有重复数据的, 可以使用这个数据结构来转化数组.
时间复杂度 O(n)

const target = [];
const sourceArray = [1,1,2,3,4,2,3,4,5,6,5,7];
new Set(sourceArray).forEach(current => {
  target.push(current);
});
console.log(target);  // [ 1, 2, 3, 4, 5, 6, 7 ]

第二种方式, 使用 indexOf 或者 lastIndexOf 两个方法, 判断循环位置到整个数组的开始或者结束, 是不是还存在相同值
时间复杂度 O(n), 可能比上面的循环要长, 少一步 Set 的构建

const source = [1,1,2,3,4,2,3,4,5,6,7,6,5,4];

function noRepeat(array) {
  let tempArr = [];
  for(let i = array.length - 1; i >= 0; i -= 1) {
    let firstIndex = array.indexOf(array[i]);
    if(firstIndex === i) {
      tempArr.unshift(array[i]);
    }
  }
  return tempArr;
}

console.log(noRepeat(source));  //[ 4, 5, 6, 7, 3, 2, 1 ]

过滤 null 和 undefined

const source = [1,2,3, null, undefined, 4, null];
const target = source.filter(current => {
  return current !== null && current !== undefined;
})

取得每个元素的指定属性

const lists = [{ name: 'a', value: 1}, { name: 'b', value: 2 }, { name: 'c', value: 3}];
function pluck(args, current) {
  let tempArr = [];
  for(let i in args) {
    tempArr.push(args[i][current])
  }
  return tempArr;
}
pluck(lists, name)

取最大值最小值

1
2

Math.max.apply(null, [0,1,2,3,4,5,-1,-2]);  //5
Math.min.apply(null, [0,1,2,3,4,5,-1,-2]);  //-2

Array.isArray 类型判断方法

这个方法会判断传入参数是不是一个数组, 这是一个浏览器的原生方法, 需要 IE 9+ 的支持

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

Array.of 创建方法

使用参数创建数组, 和 Array() 不一样的是, 如果传入的参数是一个数值, 依然会被当作数组元素, 而不是数组长度

1
2

Array(3).fill('a')  // ['a', 'a', 'a']
Array.of(3).fill('a')  // ['a']

对值操作的方法

这一部分的方法基本不会对原数组产生影响

concat

这个方法用来合并数组, 而且是生成一个新数组返回, 不会影响到原来的数组, 所以可以用来做数组平坦话操作和克隆操作

[1, 2, 3].concat()  // 返回一个新的 [1, 2, 3]
[1, 2, 3].concat(4)  // [1, 2, 3, 4]
[1, 2, 3].concat([4])  // [1, 2, 3, 4]
[1, 2, 3].concat(4, [5])  // [1, 2, 3, 4, 5]

有一个地方需要注意, 数组是一个引用类型的值, 如果存在嵌套数组的情况, 被嵌套数组的引用会被合并到返回数组当中, 这就会对原数组产生影响了

let a = [[1]];
let b = [2, [3]];
let c = a.concat(b);  // [[1], 2, [3]]
c[0].push(4);
c;  //[[1, 4], 2, [3]]
a;  //[[1, 4]]

slice

方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改.

1
2
3

[1,2,3].slice();  //[ 1, 2, 3 ]
[1,2,3].slice(1, 1)； //[]
[1,2,3].slice(1, 2)； //[ 2 ]

这个方法经常用来把类数组元素转化为数组

`1`	`[].slice.call({ 0: 0, 1: 1, 2: 2, length: 3}); //[ 0, 1, 2 ]`

copyWithin

使用数组内部值, 返回一个对原数组的修改结果, 同样不会修改原数组

filter

从原数组进行筛选, 选出符合条件的值创建新数组

1
2

'1234567'.split('').filter(value => value > 3);  //[ '4', '5', '6', '7' ]
'abcde'.split('').filter(() => true);  //[ 'a', 'b', 'c', 'd', 'e' ]

join

把数组当中的所有元素拼接成一个字符串.
这个方法可以看作是和 String.prototype.split 互为反操作

1
2

[ '1', '2', '3', '4', '5' ].join('_');  //'1_2_3_4_5'
'1_2_3_4_5'.split('_');  //[ '1', '2', '3', '4', '5' ]

map

收集操作, 数组当中的值会一次被传入一个函数当中执行, 所有的结果组合成新数组返回.

`1`	`[1,2,3].map(value => value**2); //[ 1, 4, 9 ]`

reduce, reduceRight

归化操作, 把数组中的所有元素合并成为一个值.
reduce 的顺序是从左向右, reduceRight 的顺序是从右开始的

1
2
3

const arr = 'abcde'.split('');
arr.reduce((prevent, current) => prevent + current);  //'abcde'
arr.reduceRight((prevent, current) => prevent + current);  //'edcba'

对原数组修改的方法

fill 填充数组

使用传入的参数填充数组, 传入的参数会被当作是固定值来处理, 如果是一个函数, 会首先计算出函数取值, 然后再填充到需要作修改的位置.
这个函数还可以按照位置进行填充

1
2

Array(3).fill(Math.random() * 100 >> 2);  //[ 18, 18, 18 ]
'abcde'.split('').fill(0, 2,4);  //[ 'a', 'b', 0, 0, 'e' ]

push, pop

push, 在数组的最右面增加新值, 函数的返回值为新值.
pop, 在数组的最右面删除值, 被删除的值会作为返回值返回.

let a = [1, 2, 3];  //undefined
a.push(4);  //4
a;  //[ 1, 2, 3, 4 ]
a.pop();  //4
a;  //[ 1, 2, 3 ]

shift, unshift

shift, 删除数组的第一个元素, 并且返回这个元素的值
unshift, 在数组的第一个位置增加一个元素

let a = '12345'.split('');
a;  //[ '1', '2', '3', '4', '5' ]
a.shift();  //'1'
a;  //[ '2', '3', '4', '5' ]
a.unshift(0);  //5
a;  //[ 0, '2', '3', '4', '5' ]

reverse

这个方法会把原数组当中的位置的颠倒.
数组和字符串可以相互转换, 这个方法还可以用来颠倒字符串.

1
2

[1,2,3].reverse();  //[ 3, 2, 1 ]
'12345'.split('').reverse().join('');  //'54321'

sort

这个方法会对原数组进行排序, 默认根据 unicode 码点进行排序, 可以传入比较参数进行 DIY

1
2
3

[1,2,3,11,22,33].sort();  //[ 1, 11, 2, 22, 3, 33 ]
let a = [1,2,3,11,22,33].sort((left, right) => left > right);
a;  //[ 1, 2, 3, 11, 22, 33 ]

splice

通过删除, 或者增加一个元素的方式, 来变更数组内容

let a = '12345'.split('');
a.splice(2, 2, 0);  //[ '3', '4' ]
a;  //[ '1', '2', 0, '5' ]
a.splice(2, 1);  //[ 0 ]
a;  //[ '1', '2', '5' ]

条件判断方法

every

需要所有数组中的元素都满足条件, 才会返回 true.

1
2

[1, 2, 3].every(value => value > 0);  //true
[1, 2, 3].every(value => value > 2);  //false

some

只要有一个元素满足条件, 就会返回 true.

`1`	`[1, 2, 3].some(value => value > 2); //true`

includes

判断一个数组是否包含指定值

`1`	`[1, 2, 3].includes(2); //true`

查找方法

find 查找值, 函数参数

返回第一个满足条件的值, 没有就返回 undefined

`1`	`[1,2,3,4,5].find(value => value > 3); //4`

findIndex 查找索引

返回第一个满足条件的索引, 否则返回 -1

`1`	`[1,2,3,4,5].findIndex(value => value > 3); //3`

indexOf 查找索引, 值参数

1
2

[1, 2, 3].indexOf(2);  //1
[1, 2, 3].indexOf(0);  //-1

lastIndexOf 查找最后一个索引

1
2

[1, 2, 3, 1, 2, 3].lastIndexOf(2);  //4
[1, 2, 3, 1, 2, 3].lastIndexOf(0);  //-1

遍历方法

forEach 循环整个数组

对数组中的每个元素执行一次传入函数, 不可以中断

1
2
3

let count = '';
'abcde'.split('').forEach(value => count += value);
count;  //'abcde'

entries 迭代方法

返回一个数组的迭代器, 包含元素的索引和值

let a = 'abcde'.split('');  //undefined [ 'a', 'b', 'c', 'd', 'e' ]
let i = a.entries();  //{}
let a0 = i.next();  //undefined
a0;  //{ value: [ 0, 'a' ], done: false }
let a1 = i.next();  //undefined
a1;  //{ value: [ 1, 'b' ], done: false }

key 返回索引的迭代方法

返回值只包含索引

let a = 'abcde'.split('');
let k = a.keys();  //{}
let a0 = k.next();  //undefined
a0;  //{ value: 0, done: false }