>웹 프론트엔드 >JS 튜토리얼 >[개요] 개발 효율성을 높이는 데 도움이 되는 JS 배열의 일반적인 작업 방법!

[개요] 개발 효율성을 높이는 데 도움이 되는 JS 배열의 일반적인 작업 방법!

青灯夜游
青灯夜游앞으로
2022-08-04 18:53:001317검색

개발 과정에서 어레이에 대한 많은 사용 시나리오가 있으며 어레이와 관련된 많은 작업도 일상 생활에 관여합니다. 이 기사에서는 몇 가지 일반적인 작업 방법을 요약하고 이를 공유합니다. 개발 중에 이를 손쉽게 사용할 수 있다면 개발 효율성을 크게 향상시킬 수 있습니다.

[개요] 개발 효율성을 높이는 데 도움이 되는 JS 배열의 일반적인 작업 방법!

무작위 정렬


1. 난수 생성

배열을 순회하고, 각 주기마다 배열 길이 범위 내에서 숫자를 무작위화하고, 이 주기의 위치와 난수 위치 요소를 교환합니다.

function randomSort1(arr) {
  for (let i = 0, l = arr.length; i < l; i++) {
    let rc = parseInt(Math.random() * l)
    // 让当前循环的数组元素和随机出来的数组元素交换位置
    const empty = arr[i]
    arr[i] = arr[rc]
    arr[rc] = empty
  }
  return arr
}

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 下面两次的结果肯定是不一样的;
console.log(randomSort1(arr1))
console.log(randomSort1(arr1))

2. 새 배열을 생성합니다

  • 새 빈 배열을 선언하고 while 루프를 사용합니다. 배열 길이가 0보다 크면 계속해서 반복합니다.

  • 모든 주기에는 임의의 배열이 있습니다. 배열 길이 범위 내부의 숫자, 난수 위치의 요소를 새 배열에 밀어 넣고

  • 스플라이스를 사용합니다(스플라이스를 이해하지 못하는 학생은 여기에서 읽을 수 있음). 난수 위치의 요소를 가로챕니다. 또한 원본 배열의 길이를 수정합니다.

function randomSort2(arr) {
  var mixedArr = []
  while (arr.length > 0) {
    let rc = parseInt(Math.random() * arr.length)
    mixedArr.push(arr[rc])
    arr.splice(rc, 1)
  }
  return mixedArr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort2(arr1))

3, arr.sort

  • CompareFunction(a, b)의 반환 값이 0보다 작으면 a가 b보다 먼저 정렬됩니다.

  • CompareFunction(a, b의 반환 값)이 0이면 a와 b의 상대 위치는 변경되지 않습니다.

  • CompareFunction(a, b)의 반환 값이 다음보다 큰 경우; 0이면 b가 a 앞에 정렬됩니다.

    배열 객체 정렬

1. 단일 속성 정렬


function randomSort3(arr) {
  arr.sort(function (a, b) {
    return Math.random() - 0.5
  })
  return arr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort3(arr1))
2. 배열 병합

1. ES6

에서 플랫 메소드를 호출합니다.

function compare(property) {
  return function (a, b) {
    let value1 = a[property]
    let value2 = b[property]
    return value1 - value2
  }
}

let arr = [
  { name: 'zopp', age: 10 },
  { name: 'gpp', age: 18 },
  { name: 'yjj', age: 8 },
]

console.log(arr.sort(compare('age')))
E

2, 일반 재귀

function by(name, minor) {
  return function(o, p) {
    let a, b
    if (o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name]
      b = p[name]
      if (a === b) {
        return typeof minor === 'function' ? minor(o, p) : 0
      }
      if (typeof a === typeof b) {
        return a < b ? -1 : 1
      }
      return typeof a < typeof b ? -1 : 1
    } else {
      thro(&#39;error&#39;)
    }
  }
},
3, Reduce 함수를 사용하여 반복

ary = arr.flat(Infinity)

console.log([1, [2, 3, [4, 5, [6, 7]]]].flat(Infinity))
E

4, 확장 연산자

let result = []
let flatten = function (arr) {
  for (let i = 0; i < arr.length; i++) {
    let item = arr[i]
    if (Array.isArray(arr[i])) {
      flatten(item)
    } else {
      result.push(item)
    }
  }
  return result
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
E

재결합을 위한 배열

1. 쿼리하려면

function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
2. 원래 배열을 먼저 정렬하고 인접한 배열과 비교한 후 다르면 새 배열에 저장합니다.

function flatten(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
3. 객체 속성의 존재를 활용하세요. 해당 속성이 없으면 새 배열에 저장하세요.
function unique(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

4. 배열 프로토타입 객체에 include 메소드를 사용하세요.

function unique(arr) {
  var formArr = arr.sort()
  var newArr = [formArr[0]]
  for (let i = 1; i < formArr.length; i++) {
    if (formArr[i] !== formArr[i - 1]) {
      newArr.push(formArr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

5. 배열 프로토타입 객체에 필터와 포함 메서드를 사용하세요.

function unique(arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

6. ES6의 set 메소드를 사용하세요.

function unique(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

속성을 기준으로 중복 제거

방법 1

function unique(arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? &#39;&#39; : newArr.push(item)
  })
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

방법 2

function unique(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
교차점/결합/차이

1. 필터 방식과 결합된 방식이 포함됩니다

function unique(arr) {
  const res = new Map()
  return arr.filter((item) => !res.has(item.productName) && res.set(item.productName, 1))
}
2. ES6 데이터 구조 설정

function unique(arr) {
  let result = {}
  let obj = {}
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i].key]) {
      result.push(arr[i])
      obj[arr[i].key] = true
    }
  }
}
Array summation

1. Universal for loop

let a = [1, 2, 3]
let b = [2, 4, 5]

// 并集
let union = a.concat(b.filter((v) => !a.includes(v)))
// [1,2,3,4,5]

// 交集
let intersection = a.filter((v) => b.includes(v))
// [2]

// 差集
let difference = a.concat(b).filter((v) => !a.includes(v) || !b.includes(v))
// [1,3,4,5]
2. 3. ES6 축소 방법

let a = new Set([1, 2, 3])
let b = new Set([2, 4, 5])

// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4,5}

// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2}

// a 相对于 b 的)差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1, 3}
Array와 같은 변환

1. 배열의 슬라이스 방법

function sum(arr) {
  var s = 0
  for (var i = arr.length - 1; i >= 0; i--) {
    s += arr[i]
  }
  return s
}

sum([1, 2, 3, 4, 5]) // 15

2. ES6의 Array.from()

function sum(arr) {
  var len = arr.length
  if (len == 0) {
    return 0
  } else if (len == 1) {
    return arr[0]
  } else {
    return arr[0] + sum(arr.slice(1))
  }
}

sum([1, 2, 3, 4, 5]) // 15

3.
어레이를 위로 이동하고 down

function sum(arr) {
  return arr.reduce(function (prev, curr) {
    return prev + curr
  }, 0)
}

sum([1, 2, 3, 4, 5]) // 15

배열을 트리 구조로 변환

다음 데이터를 트리 구조로 변환

let arr = Array.prototype.slice.call(arguments)
...구현 방법

let arr = Array.from(arguments)
[관련 권장 사항:

javascript 학습 튜토리얼]


위 내용은 [개요] 개발 효율성을 높이는 데 도움이 되는 JS 배열의 일반적인 작업 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제