JavaScript 數(shù)組常見操作技巧
本文主要包括：
- 創(chuàng)建數(shù)組
- 判斷是不是數(shù)組
- 類數(shù)組和數(shù)組的轉(zhuǎn)換
- 數(shù)組去重
- 各位看官可根據(jù)自身需求選擇食用。
一、創(chuàng)建數(shù)組
創(chuàng)建數(shù)組是基本功，其方法主要包括以下幾種：
const arr = [1,2,3] ? ? ? ? ? ? ? ? ? // 數(shù)組字面量 const arr = [,,,] ? ? ? ? ? ? ? ? ? ? // 三元素空位數(shù)組（hole array） const arr = new Array(4) ? ? ? ? ? ? ?// [,,,,] const arr = new Array(4,2) ? ? ? ? ? ?// [4,2] const arr = Array.of(1,2,3) ? ? ? ? ? // [1,2,3]
其中，我們一般最常用的是數(shù)組字面量法。
二、判斷是不是數(shù)組
判斷是不是數(shù)組的方法主要有：
// 方法一
[1,2,3] instanceof Array ??
// 方法二
[1,2,3].constructor === Array
// 方法三
Object.prototype.toString.call([1,2,3]) === '[object Array]'
// 方法四
Array.isArray([1,2,3])
// 方法五（兼容寫法）
function isArray(arr){
? ? return Array.isArray ??
? ? ? ? Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'
}一般最常用的應(yīng)該是 isArray 方法。
三、類數(shù)組和數(shù)組的轉(zhuǎn)換
我們有時(shí)碰到的數(shù)據(jù)結(jié)構(gòu)不是純數(shù)組，一般將其歸類為“類數(shù)組”，類數(shù)組可以借助以下方法轉(zhuǎn)為純數(shù)組：
const x = document.querySelectorAll('a');
// 方法一
Array.prototype.slice.call(x);
// 方法二
Array.from(x);
Array.from(x,mapFn,thisArg);
// 方法三
[...x]
// 方法四
function toArray(x){
? ? let res = []
? ? for(item of x){
? ? ? ? res.push(item)
? ? }
? ? return res
}
// 方法五
Array.apply(null,x)
// 方法六
[].concat.apply([],x)方法五和六本質(zhì)上都是利用了 apply 的特點(diǎn)，即傳給 apply 的第二個(gè)參數(shù)（數(shù)組或者類數(shù)組）會(huì)被轉(zhuǎn)換為一個(gè)參數(shù)列表，這些參數(shù)再送到調(diào)用的方法（new Array 或者 concat）中。
四、數(shù)組去重
數(shù)組去重，本質(zhì)上都需要比較兩個(gè)元素是否相等，如果相等，則拋棄一個(gè)元素。為了準(zhǔn)確地判斷，這里統(tǒng)一使用 Object.is 進(jìn)行比較。
1.利用 set 去重
set 要求元素不重復(fù)，因此將數(shù)組轉(zhuǎn)換為 set 之后就可以去重了，接著再轉(zhuǎn)換回?cái)?shù)組即可。
function unique(arr){
? ? return Array.from(new Set(arr))
? ? // return [...new Set(arr)]
}
2.雙重循環(huán) + splice
外層循環(huán)遍歷所有元素，里層循環(huán)遍歷當(dāng)前元素往后的所有元素，若發(fā)現(xiàn)相等則利用 splice 移除掉一個(gè)。記得里層循環(huán)每次要回退一格，否則會(huì)遺漏掉某些元素
function unique(arr){
? ? for(let i = 0;i < arr.length;i++){
? ? ? ? for(let j = i + 1;i < arr.length;j++){
? ? ? ? ? ? if(Object.is(arr[i],arr[j])){
? ? ? ? ? ? ? ? arr.splice(j,1)
? ? ? ? ? ? ? ? j--
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? return arr
}3.新建數(shù)組 + includes
新建數(shù)組，每次往數(shù)組中添加元素之前都檢查數(shù)組中是否已有該元素：
function unique(arr){
? ? const res = []
? ? arr.forEach((item,index) => {
? ? ? ? // 也可以 if(res.indexOf(item) == -1)，但是無法正確判斷 NaN
? ? ? ? if(!res,includes(item)){
? ? ? ? ? ? res.push(item)
? ? ? ? }
? ? })
}4.reduce + includes
function unique(arr){
? ? return arr.reduce((acc,cur) => {
? ? ? ? // return acc.includes(cur) ? acc : acc.concat(cur)
? ? ? ? return acc.includes(cur) ? acc : [...acc,cur]
? ? },[])
}5.新建數(shù)組 + sort
根據(jù) sort 的機(jī)制（在每個(gè)元素上調(diào)用 toStrng，之后在字符串層面進(jìn)行排序），讓相等的元素聚集在一起。新建數(shù)組，每次往數(shù)組中添加元素之前都檢查該元素是否等于前面的元素，是則屬于重復(fù)元素：
function unique(arr){
? ? arr.sort()
? ? const res = [arr[0]]
? ? for(let i = 1;i < arr.length;i++){
? ? ? ? if(!Object.is(arr[i],arr[i-1])){
? ? ? ? ? ? res.push(arr[i])
? ? ? ? }
? ? }
? ? return res
}6.新建數(shù)組 + 利用對(duì)象屬性
這種方法其實(shí)和“新建數(shù)組 + includes”一樣。新建數(shù)組，每次往數(shù)組中添加元素之前都檢查該元素是否已經(jīng)作為對(duì)象的屬性：
// 對(duì)象屬性值可以認(rèn)為是元素重復(fù)的次數(shù)
function unique(arr){
? ? const res = []
? ? const obj = {}
? ? arr.forEach((item,index) => {
? ? ? ? if(!obj[item]){
? ? ? ? ? ? res.push(item)
? ? ? ? ? ? obj[item] = 1
? ? ? ? } else {
? ? ? ? ? ? obj[item]++
? ? ? ? }
? ? })
? ? return res
}這里檢測的是對(duì)象的屬性名，而屬性名本質(zhì)上是一個(gè)字符串，因此會(huì)認(rèn)為 obj[true] 和 obj["true"] 是相等的，從而導(dǎo)致元素 true 或者元素 "true" 未能放入新數(shù)組中
7.利用 map
本質(zhì)上和上面的方法是一樣的，但是不需要新建數(shù)組：
function unique(arr){
? ? let map = new Map()
? ? for(item of arr){
? ? ? ? if(!map.has(item)){
? ? ? ? ? ? map.set(item,true)
? ? ? ? }
? ? }
? ? return [...map.keys()]
}8.filter + indexOf
去掉重復(fù)的元素，換個(gè)角度來理解就是保留那些 索引 等于 第一次出現(xiàn)時(shí)的索引 的元素，這樣的元素可以用 filter 篩選出來，放到一個(gè)數(shù)組中：
function unique(arr){
? ? return arr.filter((item,index) => index === arr.indexOf(item))
}使用 indexOf 的缺點(diǎn)是無法正確判斷 NaN。
到此這篇關(guān)于JavaScript 數(shù)組常見操作技巧的文章就介紹到這了,更多相關(guān)JavaScript 數(shù)組操作技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼
這篇文章主要給大家介紹了關(guān)于uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
在我們開發(fā)的許多應(yīng)用程序都會(huì)用到某種日期功能,無論是內(nèi)容的創(chuàng)建日期還是活動(dòng)的時(shí)間戳等等,這篇文章主要給大家介紹了關(guān)于JavaScript中常見的獲取當(dāng)前日期方法,需要的朋友可以參考下2024-06-06
JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
我們經(jīng)常需要在新窗口彈出頁面并需要居中顯示2008-01-01
本篇文章主要介紹了Bootstrap提示框效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS中數(shù)組的splice()方法,包括其用途、參數(shù)（起始位置、刪除元素個(gè)數(shù)、添加元素等）、不同參數(shù)情況的處理方式,還詳細(xì)講解了用原生JS手寫splice()方法的思路和代碼實(shí)現(xiàn)2024-11-11
js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果,設(shè)計(jì)javascript鼠標(biāo)事件及頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題
這篇文章主要介紹了微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度,文中給大家通過一個(gè)例子介紹了微信小程序音頻長度獲取的問題，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
本文將介紹js彈出的對(duì)話窗口永遠(yuǎn)保持居中顯示實(shí)現(xiàn)方法，需要了解的朋友可以參考下2012-12-12