JavaScript?12個(gè)有用的數(shù)組技巧
數(shù)組是Javascript最常見(jiàn)的概念之一，它為我們提供了處理數(shù)據(jù)的許多可能性，熟悉數(shù)組的一些常用操作是很有必要的。
數(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' ]
替換數(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']
沒(méi)有map()的映射數(shù)組
我們先介紹一下map方法。map()方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值，它會(huì)按照原始數(shù)組元素順序依次處理元素。注意： map()不會(huì)改變?cè)紨?shù)組，也不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
下面我們來(lái)實(shí)現(xiàn)一個(gè)沒(méi)有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' ]
空數(shù)組
如果要清空一個(gè)數(shù)組，將數(shù)組的長(zhǎng)度設(shè)置為0即可，額，這個(gè)有點(diǎn)簡(jiǎn)單。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; plants.length = 0; console.log(plants); // []
將數(shù)組轉(zhuǎn)換為對(duì)象
如果要將數(shù)組轉(zhuǎn)換為對(duì)象，最快的方法莫過(guò)于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'}
用數(shù)據(jù)填充數(shù)組
如果我們需要用一些數(shù)據(jù)來(lái)填充數(shù)組，或者需要一個(gè)具有相同值的數(shù)據(jù)，我們可以用fill()方法。
var plants = new Array(8).fill('8');
console.log(plants); // ['8', '8', '8','8', '8', '8','8', '8']
合并數(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']
兩個(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' ]
刪除數(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']
獲取數(shù)組中的隨機(jī)值
我們可以根據(jù)數(shù)組長(zhǎng)度獲得一個(gè)隨機(jī)索引號(hào)。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; console.log(plants[Math.floor(Math.random() * (plants.length + 1))])
lastIndexOf()方法
lastIndexOf()可以幫助我們查找元素最后一次出現(xiàn)的索引。
// 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
將數(shù)組中的所有值相加
reduce()方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終計(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
到此這篇關(guān)于JavaScript 12個(gè)有用的數(shù)組技巧的文章就介紹到這了,更多相關(guān)JavaScript 數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕直接打印
很多網(wǎng)站都有此功能，當(dāng)瀏覽到底部時(shí)都會(huì)有一個(gè)打印按鈕，點(diǎn)擊打印按鈕就可以完成打印功能，功能非常不錯(cuò)，人性化，下面通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就打印的代碼，需要的朋友參考下2016-01-01
可以使用 e.stopPropagation(); e.preventDefault();來(lái)阻止事件冒泡，和默認(rèn)事件的執(zhí)行。但不能阻止事件的追加，如要追加，請(qǐng)看下面的實(shí)現(xiàn)方法2014-10-10
Javascript 浮點(diǎn)運(yùn)算的問(wèn)題分析與解決方法
JavaScript 只有一種數(shù)字類(lèi)型 Number ，而且在Javascript中所有的數(shù)字都是以IEEE-754標(biāo)準(zhǔn)格式表示的。 浮點(diǎn)數(shù)的精度問(wèn)題不是JavaScript特有的，因?yàn)橛行┬?shù)以二進(jìn)制表示位數(shù)是無(wú)窮的2013-08-08
webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
JavaScript判斷變量是否為數(shù)組的方法(Array)
這篇文章主要介紹了JavaScript判斷變量是否為數(shù)組的方法(Array),涉及到j(luò)avascript 數(shù)組 變量相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
JS生成登錄驗(yàn)證碼的實(shí)現(xiàn)示例
本文主要介紹了JS生成登錄驗(yàn)證碼的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
javascript的函數(shù)...2006-09-09
手把手教你uniapp和uview2.0實(shí)現(xiàn)表單校驗(yàn)實(shí)戰(zhàn)
表單提交對(duì)大家來(lái)說(shuō)應(yīng)該都不陌生,這是個(gè)很常見(jiàn)的功能,這篇文章主要給大家介紹了關(guān)于手把手教你uniapp和uview2.0實(shí)現(xiàn)表單校驗(yàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。這篇文章主要介紹了JavaScript中的this引用的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下2016-08-08
二叉樹(shù)先序遍歷的非遞歸算法具體實(shí)現(xiàn)
這篇文章主要介紹了二叉樹(shù)先序遍歷的非遞歸算法，有需要的朋友可以參考一下2014-01-01