array 數組去重過濾空值等方法

時間 2019-11-19

標籤 array 數組過濾方法简体版

原文原文鏈接

去重操做

第一種方式, ES 6 引入的新書據結構 Set 自己就是沒有重複數據的, 可使用這個數據結構來轉化數組.
時間複雜度 O(n)javascript

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 的構建java

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

對值操做的方法

這一部分的方法基本不會對原數組產生影響ruby

concat

這個方法用來合併數組, 並且是生成一個新數組返回, 不會影響到原來的數組, 因此能夠用來作數組平坦話操做和克隆操做bash

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

有一個地方須要注意, 數組是一個引用類型的值, 若是存在嵌套數組的狀況, 被嵌套數組的引用會被合併到返回數組當中, 這就會對原數組產生影響了markdown

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 ]

這個方法常常用來把類數組元素轉化爲數組app

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

copyWithin

使用數組內部值, 返回一個對原數組的修改結果, 一樣不會修改原數組dom

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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

array 數組去重 過濾空值等方法