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 }