자바스크립트에서 추가, 삭제, 수정, 쿼리 구현 방법(코드 예시)

강력한 프로그래밍 언어인 JavaScript는 웹 페이지 대화형 개발뿐만 아니라 데이터 처리, DOM 요소 운영 등에 사용할 수 있습니다. 그 중 추가, 삭제, 수정, 조회 등은 우리가 자주 사용하는 기능으로, 추가, 삭제, 수정, 조회를 구현하는 자바스크립트 코드를 살펴보겠습니다.

1. 추가

데이터를 추가하는 가장 일반적인 시나리오는 양식 제출입니다. 예를 들어 사용자가 입력한 양식 데이터를 배열에 추가해야 합니다. 다음은 간단한 양식 제출 코드입니다.

var form = document.querySelector('form');
var inputs = form.querySelectorAll('input');
var data = [];

form.addEventListener('submit', function(event) {
  event.preventDefault();
  var item = {};
  inputs.forEach(function(input) {
    item[input.name] = input.value;
  });
  data.push(item);
});

먼저 양식과 그 안의 모든 입력 상자 요소를 가져온 다음 양식의 제출 이벤트를 수신합니다. 이벤트 처리 함수에서는 빈 객체를 생성하고 forEach를 사용하여 모든 입력 상자 요소를 순회하고 name 속성을 객체의 속성 이름으로 사용하고 value 속성을 속성 값으로 사용하고 마지막으로 객체를 데이터에 추가합니다. 배열. 양식이 자동으로 제출되는 것을 방지하려면 PreventDefault() 메서드를 호출해야 합니다.

2. 삭제

데이터 삭제도 매우 일반적인 시나리오입니다. 일반적으로 특정 조건에 따라 하나 이상의 데이터 항목을 삭제합니다. 간단한 삭제 코드는 다음과 같습니다.

var id = 1; // 删除的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data.splice(index, 1);
}

먼저 삭제할 데이터 ID를 정의한 다음 findIndex 메서드를 사용하여 ID가 ​​이 ID와 동일한 첫 번째 데이터 항목의 첨자를 찾습니다(찾지 못하면 -1 반환). . 발견되면 splice 메소드가 호출되어 데이터 항목을 삭제합니다.

3. 수정

데이터를 수정하려면 먼저 수정할 데이터 항목을 찾은 다음 해당 속성 값을 업데이트해야 합니다. 다음은 간단한 수정 코드입니다.

var id = 1; // 修改的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data[index].name = '新的名称';
}

또한 수정하려는 데이터 ID에 해당하는 데이터 항목 첨자를 먼저 찾은 후 해당 데이터 항목이 존재하는지 확인합니다. 존재하는 경우 이름 속성 값을 새 이름으로 업데이트하십시오.

4. 쿼리

데이터를 쿼리하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 특정 조건에 따라 데이터를 필터링하는 것입니다. 다음은 간단한 쿼리 코드입니다.

var query = '张三'; // 查询的条件
var results = data.filter(function(item) {
  return item.name.includes(query);
});

console.log(results);

쿼리할 조건을 정의합니다. 그런 다음 필터 메소드를 사용하여 조건의 데이터 항목을 만족하는 모든 항목을 필터링하고 새 배열을 만듭니다. 예제에서는 쿼리 조건이 포함된 name 속성을 기반으로 쿼리하도록 선택하고 최종적으로 결과를 콘솔에 출력합니다.

위 내용은 자바스크립트에서 추가, 삭제, 수정, 확인을 위한 코드입니다. 우리가 일상적인 개발에 자주 사용하는 기능이며, 애플리케이션의 백그라운드 개발과 데이터 관리에 중요한 역할을 합니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 자바스크립트에서 추가, 삭제, 수정, 쿼리 구현 방법(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!