js中處理數(shù)組小技巧

1、數(shù)組去重

1、from()疊加new Set()方法

字符串或數(shù)值型數(shù)組的去重可以直接使用from方法。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = Array.from(new Set(plants)); 
console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

2、spread操作符(…)

擴(kuò)展運(yùn)算符是ES6的一大創(chuàng)新,還有很多強(qiáng)大的功能。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = [...new Set(plants)]; 
console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

2、替換數(shù)組中的特定值

splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目。該方法會(huì)改變?cè)紨?shù)組特別需要注意插入值的位置!

// arrayObject.splice(index,howmany,item1,.....,itemX)

var plants = ['Saturn', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var result = plants.splice(2, 1, 'www.shanzhonglei.com')
console.log(plants); // ['Saturn','Uranus','www.shanzhonglei.com','Mercury','Venus','Earth','Mars','Jupiter']
console.log(result); // ['Mercury']

3、沒有map()的映射數(shù)組

我們先介紹一下map方法。map()方法返回一個(gè)新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值,它會(huì)按照原始數(shù)組元素順序依次處理元素。注意: map()不會(huì)改變?cè)紨?shù)組,也不會(huì)對(duì)空數(shù)組進(jìn)行檢測
下面我們來實(shí)現(xiàn)一個(gè)沒有map的數(shù)組映射:

// array.map(function(currentValue,index,arr), thisValue)

var plants = [
    { name: "Saturn" },
    { name: "Uranus" },
    { name: "Mercury" },
    { name: "Venus" },
]
var plantsName = Array.from(plants, ({ name }) => name);
console.log(plantsName); // [ 'Saturn', 'Uranus', 'Mercury', 'Venus' ]

4、空數(shù)組

如果要清空一個(gè)數(shù)組,將數(shù)組的長度設(shè)置為0即可,額,這個(gè)有點(diǎn)簡單。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
plants.length = 0;
console.log(plants); // []

5、將數(shù)組轉(zhuǎn)換為對(duì)象

如果要將數(shù)組轉(zhuǎn)換為對(duì)象,最快的方法莫過于spread運(yùn)算符(...)。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plantsObj = {...plants }
console.log(plantsObj); // {'0': 'Saturn','1': 'Earth', '2': 'Uranus','3': 'Mercury','4': 'Venus','5': 'Earth','6': 'Mars','7': 'Jupiter'}

6、用數(shù)據(jù)填充數(shù)組

如果我們需要用一些數(shù)據(jù)來填充數(shù)組,或者需要一個(gè)具有相同值的數(shù)據(jù),我們可以用fill()方法。

var plants = new Array(8).fill('8');
console.log(plants); // ['8', '8', '8','8', '8', '8','8', '8']

7、合并數(shù)組

當(dāng)然你會(huì)想到concat()方法,但是哦,spread操作符(...)也很香的,這也是擴(kuò)展運(yùn)算符的另一個(gè)應(yīng)用。

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury'];
var plants2 = ['Venus', 'Earth', 'Mars', 'Jupiter'];
console.log([...plants1, ...plants2]); // ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

8、兩個(gè)數(shù)組的交集

要求兩個(gè)數(shù)組的交集,首先確保數(shù)組不重復(fù),然后使用filter()方法和includes()方法。

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plants2 = ['Saturn', 'Earth', 'Uranus'];
var alonePlants = [...new Set(plants1)].filter(item => plants2.includes(item));
console.log(alonePlants); // [ 'Saturn', 'Earth', 'Uranus' ]

9、刪除數(shù)組中的假值

我們時(shí)常需要在處理數(shù)據(jù)的時(shí)候要去掉假值。在Javascript中,假值是false, 0, " ", null, NaN, undefined

var plants = ['Saturn', 'Earth', null, undefined, false, "", NaN, 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var trueArr = plants.filter(Boolean);
console.log(trueArr); // ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

10、獲取數(shù)組中的隨機(jī)值

我們可以根據(jù)數(shù)組長度獲得一個(gè)隨機(jī)索引號(hào)。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
console.log(plants[Math.floor(Math.random() * (plants.length + 1))])

11、lastIndexOf()方法

lastIndexOf()可以幫助我們查找元素最后一次出現(xiàn)的索引。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
console.log(plants.lastIndexOf('Earth')) // 5

12、將數(shù)組中的所有值相加

reduce()方法接收一個(gè)函數(shù)作為累加器,數(shù)組中的每個(gè)值(從左到右)開始縮減,最終計(jì)算為一個(gè)值。

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

var nums = [1, 2, 3, 4, 5];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // 15

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容