简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

青灯夜游
풀어 주다： 2022-08-04 18:53:00
앞으로
1279명이 탐색했습니다.

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

[개요] 개발 효율성을 높이는 데 도움이 되는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript js数组
원천：juejin.cn
이전 기사：JavaScript 인스턴스 구문 분석 지우기 타이머 다음 기사：요소에 이벤트를 추가하는 방법은 무엇입니까? JS 바인딩 이벤트를 구문 분석하는 세 가지 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
MySQL에서 그룹화하고 계산하는 방법은 무엇입니까? 친구에게 보낸 삭제되지 않은 메시지의 총 개수를 추출하는 쿼리를 작성하려고 합니다. 다음은 테이블 구조의 스크린샷입니다. 제가 달성하려는 출력은 다음과 같습니다....
에서 2024-04-06 18:30:17
0
1
353
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！