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 방법입니다. 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 <h3 id="新建数组-includes">3）新建数组 + includes</h3><p>新建数组，每次往数组中添加元素之前都检查数组中是否已有该元素：</p><pre class="brush:php;toolbar:false">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 <h3 id="新建数组-利用对象属性">6）新建数组 + 利用对象属性</h3><p>这种方法其实和“新建数组 + includes”一样。新建数组，每次往数组中添加元素之前都检查该元素是否已经作为对象的属性：</p><pre class="brush:php;toolbar:false">// 对象属性值可以认为是元素重复的次数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"

유사 배열과 배열 간의 변환

우리가 가끔 접하는 데이터 구조는 순수 배열이 아닙니다. 일반적으로 유사 배열 객체는 다음 방법을 사용하여 순수 배열로 변환할 수 있습니다. :

function unique(arr){
    let map = new Map()
    for(item of arr){
        if(!map.has(item)){
            map.set(item,true)
        }
    }
    return [...map.keys()]}

메서드 5, 6 기본적으로 모두 Apply의 특성을 활용합니다. 즉, Apply로 전달된 두 번째 매개변수(배열 또는 배열 유사)가 매개변수 목록으로 변환되고, 이 매개변수는 다음과 같습니다. 호출 메서드(새 Array 또는 concat)로 전송됩니다.

어레이 중복 제거

어레이 중복 제거에는 기본적으로 두 요소가 동일한지 비교해야 하며, 그렇다면 요소 하나를 폐기해야 합니다. 여기서는 정확한 판단을 위해 Object.is를 비교용으로 사용했습니다. 1) 집합을 사용하여 중복 제거

set에서는 요소가 반복되지 않아야 하므로 배열을 집합으로 변환한 후 중복을 제거한 다음 다시 배열로 변환할 수 있습니다.

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

2) 이중 루프 + 스플라이스

외부 루프는 모든 요소를 ​​순회하고, 내부 루프는 현재 요소 뒤의 모든 요소를 ​​순회합니다. 두 요소가 동일하다고 판단되면 스플라이스를 사용하여 하나를 제거합니다. 내부 루프는 매번 한 칸 뒤로 이동해야 한다는 점을 기억하세요. 그렇지 않으면 일부 요소가 누락될 수 있습니다rrreee
3) 새 배열 만들기 + 포함

🎜새 배열을 만들고 요소를 추가하기 전에 배열에 요소가 이미 있는지 확인하세요. :🎜rrreee🎜4) 감소 + 포함🎜rrreee🎜5) 새 배열 만들기 + sort🎜🎜 정렬 메커니즘에 따라(각 요소에 대해 toStrng를 호출한 다음 문자열 수준에서 정렬) 요소들이 모여있습니다. 새 배열을 만듭니다. 배열에 요소를 추가하기 전에 요소가 이전 요소와 동일한지 확인하세요. 그렇다면 반복되는 요소입니다. 🎜rrreee🎜6) 새 배열 만들기 + 개체 속성 사용 🎜🎜 이 방법은 실제로 "새 배열 + 포함"과 동일합니다. 새로운 배열을 생성하고, 배열에 요소를 추가하기 전에 매번 해당 요소가 객체의 속성으로 사용되었는지 확인하세요. 🎜rrreee🎜 여기서 감지되는 것은 객체의 속성 이름이고, 속성 이름은 다음과 같습니다. 본질적으로 문자열이므로 obj[true]와 obj["true"]가 동일한 것으로 간주되어 true 요소가 됩니다. 또는 "true" 요소가 존재하지 않는 경우 새 배열에 넣을 수 있습니다. 🎜🎜7) map🎜🎜을 사용하는 것은 기본적으로 위의 방법과 동일하지만 새 배열을 만들 필요는 없습니다. 🎜rrreee🎜8) 필터 + indexOf🎜🎜 중복 요소를 제거하고 다른 각도에서 이해하세요. 🎜처음 나타날 때 🎜index🎜가 index🎜와 동일한 요소를 유지하세요. 이러한 요소는 필터로 필터링하여 array: 🎜rrreee🎜indexOf 사용의 단점은 NaN을 올바르게 판단할 수 없다는 것입니다. 🎜🎜관련 권장 사항: 🎜javascript 학습 튜토리얼🎜🎜🎜

위 내용은 JavaScript 배열에 대한 일반적인 작업 요약 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!