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

去重操作

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

1 2 3 4 5 6

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 的构建

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

1 2 3 4

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

取得每个元素的指定属性

1 2 3 4 5 6 7 8 9

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+ 的支持

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 下面的函数调用都返回 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 4

[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]

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

1 2 3 4 5 6

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, 在数组的最右面删除值, 被删除的值会作为返回值返回.

1 2 3 4 5

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, 在数组的第一个位置增加一个元素

1 2 3 4 5 6

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

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

1 2 3 4 5

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 迭代方法

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

1 2 3 4 5 6

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 返回索引的迭代方法

返回值只包含索引

1 2 3 4

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