关于javascript:JavaScript-数组常见操作一

前言

数组是 JavaScript 中常见数据类型之一，对于它的一些操作方法，我在这里做一下简略记录和总结。

本文次要包含：

• 创立数组
• 判断是不是数组
• 类数组和数组的转换
• 数组去重

各位看官可依据本身需要抉择食用。

创立数组

创立数组是基本功，其办法次要包含以下几种：

const arr = [1,2,3]                   // 数组字面量
const arr = [,,,]                     // 三元素空位数组（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]

其中，咱们个别最罕用的是数组字面量法。

判断是不是数组

判断是不是数组的办法次要有：

// 办法一
[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]'
}

个别最罕用的应该是 isArray 办法。

类数组和数组的转换

咱们有时碰到的数据结构不是纯数组，个别将其归类为“类数组”，类数组能够借助以下办法转为纯数组：

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)

办法五和六实质上都是利用了 apply 的特点，即传给 apply 的第二个参数（数组或者类数组）会被转换为一个参数列表，这些参数再送到调用的办法（new Array 或者 concat）中。

数组去重

数组去重，实质上都须要比拟两个元素是否相等，如果相等，则摈弃一个元素。为了精确地判断，这里对立应用 Object.is 进行比拟。

1）利用 set 去重

set 要求元素不反复，因而将数组转换为 set 之后就能够去重了，接着再转换回数组即可。

function unique(arr){return Array.from(new Set(arr))
    // return [...new Set(arr)]
}

2）双重循环 + splice

外层循环遍历所有元素，里层循环遍历以后元素往后的所有元素，若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格，否则会遗漏掉某些元素

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）新建数组 + includes

新建数组，每次往数组中增加元素之前都查看数组中是否已有该元素：

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）新建数组 + sort

依据 sort 的机制（在每个元素上调用 toStrng，之后在字符串层面进行排序），让相等的元素汇集在一起。新建数组，每次往数组中增加元素之前都查看该元素是否等于后面的元素，是则属于反复元素：

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）新建数组 + 利用对象属性

这种办法其实和“新建数组 + includes”一样。新建数组，每次往数组中增加元素之前都查看该元素是否曾经作为对象的属性：

// 对象属性值能够认为是元素反复的次数
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
}

这里检测的是对象的属性名，而属性名实质上是一个字符串，因而会认为 obj[true] 和 obj["true"]是相等的，从而导致元素 true 或者元素 "true" 未能放入新数组中

7）利用 map

实质上和下面的办法是一样的，然而不须要新建数组：

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

去掉反复的元素，换个角度来了解就是保留那些 索引 等于 第一次呈现时的索引 的元素，这样的元素能够用 filter 筛选进去，放到一个数组中：

function unique(arr){return arr.filter((item,index) => index === arr.indexOf(item))
}

应用 indexOf 的毛病是无奈正确判断 NaN。

总结

以上就是与数组无关的一些基本操作办法总结。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！