欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 數(shù)組常見操作技巧

 更新時間：2022年02月07日 11:53:07   作者：編程三昧  
這篇文章主要給大家分享的是JavaScript 數(shù)組常見操作技巧，數(shù)組是 JavaScript 中常見數(shù)據(jù)類型之一，關(guān)于它的一些操作方法，我在這里做一下簡單記錄和總結(jié)，需要的小伙伴可以參考一下

本文主要包括：

  • 創(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ù)據(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 的第二個參數(shù)（數(shù)組或者類數(shù)組）會被轉(zhuǎn)換為一個參數(shù)列表，這些參數(shù)再送到調(diào)用的方法（new Array 或者 concat）中。

四、數(shù)組去重

數(shù)組去重，本質(zhì)上都需要比較兩個元素是否相等，如果相等，則拋棄一個元素。為了準(zhǔn)確地判斷，這里統(tǒng)一使用 Object.is 進(jìn)行比較。

1.利用 set 去重

set 要求元素不重復(fù)，因此將數(shù)組轉(zhuǎn)換為 set 之后就可以去重了，接著再轉(zhuǎn)換回數(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 移除掉一個。記得里層循環(huán)每次要回退一格，否則會遺漏掉某些元素

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ī)制（在每個元素上調(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ù)組 + 利用對象屬性

這種方法其實(shí)和“新建數(shù)組 + includes”一樣。新建數(shù)組，每次往數(shù)組中添加元素之前都檢查該元素是否已經(jīng)作為對象的屬性：

// 對象屬性值可以認(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
}

這里檢測的是對象的屬性名，而屬性名本質(zhì)上是一個字符串，因此會認(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ù)的元素，換個角度來理解就是保留那些 索引 等于 第一次出現(xiàn)時的索引 的元素，這樣的元素可以用 filter 篩選出來，放到一個數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論