> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 배열 방법.

JavaScript 배열 방법.

Mary-Kate Olsen
풀어 주다: 2024-12-08 14:26:11
원래의
430명이 탐색했습니다.

별 말 없이 출근하자. 이번 포스팅에서는 자바스크립트 프로그래밍 언어의 배열 메서드에 대해 알아보고 관련 문제를 해결해 보겠습니다.


요소를 추가하고 변경합니다.

  • 길이()
  • 푸시()
  • 연결()

끄십시오.

  • 팝()
  • 시프트()
  • 스플라이스()
  • 배열 삭제[i]

찾다

  • 찾기(함수())
  • indexOf()

마련하다

  • sort() 숫자의 경우 , 문자열의 경우

뒤집다

  • 역방향()

항목을 추가하고 수정합니다.

length 메서드는 배열의 요소 수 또는 길이를 찾습니다.
Javascript의 배열 유형은 객체라는 점에 유의해야 합니다. 이전에 c/c나 java와 같은 언어를 배운 적이 있다면 다소 혼란스러워 보일 수 있습니다. JavaScript에서 배열 자체는 실제로 data-type 이며 이는 c/c의 배열과 다릅니다. JS에서는 다양한 유형의 데이터를 하나의 배열에 저장할 수 있습니다.

// Arrayning uzunligi, o'lchami
const array = ["nimadir", "kimdir", true, 55, 4.6];
console.log(`arrayning uzunligi ${array.length}`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


배열의 끝에서 새 요소를 추가합니다.

궁금한 점이 있을 수 있습니다. 상수변수의 값을 변경할 수 있나요? 예, push() 메소드를 통해 새 요소를 삽입하지만 배열에 새 값을 설정하지는 않습니다.

// push(), array oxiriga yangi element qo'shish
const array = ["nimadir", "kimdir", true, 55, 4.6];
array.push("yangi element");
console.log(`arrayning uzunligi: ${array} \n`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


두 배열을 결합합니다(연결).

concat() 메소드는 두 배열을 결합합니다.

// concat(), ikki arrayni birlashtirish
let array1 = ["nimadir", "kimdir", true, 55, 4.6];
let array2 = [8, 3, 9];
console.log("array1: " + array1, "\n", "array2: " + array2 + "\n");

let result = array1.concat(array2);
console.log(
  `Ikki array bitta yangi arrayga birlashtirildi: result [${result}] \n`
);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


배열에서 요소를 삭제합니다.

JavaScript에서 배열 요소를 삭제하는 방법에는 여러 가지가 있습니다.
pop() 메소드는 배열의 끝에서 하나의 요소를 제거하는 데 사용됩니다.

// pop(), arrayning oxiridan bitta element o'chiradi
let array1 = [6, "satr", true, 55, 4.6];
console.log(`\navval:  [${array1}]\n`);

array1.pop();
console.log(`keyin:  [${array1}]\n`);
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


shift() 메소드는 배열의 시작 부분에서 하나의 요소를 제거합니다

// shift() Metodi

const array = [44, 5.3, 2, 14, 98, "text", "olma"];
console.log(`\navval: [${array}] \n`);

array.shift();
console.log(`keyin: 44 arrayda emas [${array}]\n`);
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


splice() 메서드는 요소 삭제뿐만 아니라 데이터 수정에도 사용된다는 점에서 독특합니다. 삭제를 위해 이 메소드는 두 개의 값을 사용합니다.

  • 첫 번째:는 요소 삭제를 위한 시작 인덱스입니다.
  • 두 번째: 삭제할 요소 수

예: const array = [44, 5.3, 2, 14, 98, "text", "apple"]; 있습니다. 인덱스 3부터 시작하여 2개의 요소, 즉 14(14 자체가 삭제됨), 2개의 요소를 삭제하려고 합니다.

// Arrayning uzunligi, o'lchami
const array = ["nimadir", "kimdir", true, 55, 4.6];
console.log(`arrayning uzunligi ${array.length}`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.
교체 목적으로는 다음과 같이 splice()를 사용합니다.

  1. 인덱스 시작 array.splice(3, ...)
  2. 교환할 요소 수 array.splice(3, 2, ...)
  3. 각각 삽입될 새 요소 array.splice(3, 2, "new1", "new2")
// push(), array oxiriga yangi element qo'shish
const array = ["nimadir", "kimdir", true, 55, 4.6];
array.push("yangi element");
console.log(`arrayning uzunligi: ${array} \n`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


delete array[i] 메소드는 배열 요소를 삭제하는 가장 쉬운 방법입니다. 이 경우 [i] 대신 삭제할 요소의 인덱스가 쓰여집니다.

// concat(), ikki arrayni birlashtirish
let array1 = ["nimadir", "kimdir", true, 55, 4.6];
let array2 = [8, 3, 9];
console.log("array1: " + array1, "\n", "array2: " + array2 + "\n");

let result = array1.concat(array2);
console.log(
  `Ikki array bitta yangi arrayga birlashtirildi: result [${result}] \n`
);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


배열에서 검색

find(function()) 메서드는 배열에서 특정 요소를 검색하는 데 사용됩니다. 함수는 이 메서드에 값으로 작성되고 함수에는 검색할 요소가 제공됩니다. 이 함수는 인덱스를 반환하지 않으며, 검색된 요소가 배열에 있으면 이 요소를 반환하고, 그렇지 않으면 정의되지 않은 요소를 반환합니다.

// pop(), arrayning oxiridan bitta element o'chiradi
let array1 = [6, "satr", true, 55, 4.6];
console.log(`\navval:  [${array1}]\n`);

array1.pop();
console.log(`keyin:  [${array1}]\n`);
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


indexOf() 메소드는 검색된 요소의 인덱스를 반환합니다.

// shift() Metodi

const array = [44, 5.3, 2, 14, 98, "text", "olma"];
console.log(`\navval: [${array}] \n`);

array.shift();
console.log(`keyin: 44 arrayda emas [${array}]\n`);
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.


마련하다

sort() 메서드, 이것이 JavaScript의 "두려움"이 시작되는 곳입니다. 언뜻 보면 sort() 메서드는 단순해 보이지만 실제로는 그 뒤에서 또 다른 프로세스가 진행되고 있습니다. 기본적으로 sort()는 문자열을 정렬하지만 정수 또는 숫자 값이 제공되면 올바르게 정렬할 수 있습니다. 하지만 JavaScript는 원할 경우 숫자를 정렬하지만 그렇지 않을 경우에는 정렬하지 않습니다(농담입니다):)

// splice() Metodi

const array = [44, 5.3, 2, 14, 98, "text", "olma"];
console.log(`\navval: [${array}] \n`);

array.splice(3, 2);

console.log(`keyin: 14 va 98 elementlari o'chdi [${array}]\n`);
로그인 후 복사

JavaScript array metodlari.


수치로 다음과 같습니다.

// splice() Metodi

const array = [44, 5.3, 2, 14, 98, "text", "olma"];
console.log(`\navval: [${array}] \n`);

array.splice(3, 2, "yangi1", "yangi2");

console.log(`keyin: 14 va 98 elementlari almashtirildi [${array}]\n`);
로그인 후 복사

JavaScript array metodlari.


그럼 뭐가 문제인가요?

계속하자고 해도 됩니다.

// Arrayning uzunligi, o'lchami
const array = ["nimadir", "kimdir", true, 55, 4.6];
console.log(`arrayning uzunligi ${array.length}`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript array metodlari.

그만, 결과를 보세요. 정렬된 배열: [100,1021,30,45,61,8] 그게 뭐죠!?
JavaScript는 배열을 문자열로 정렬합니다. 숫자가 주어지더라도 ASCII 코드로 전송되어 사전순으로, 즉 문자열처럼 정렬됩니다. 이로 인해 오류가 발생합니다. 문제에서는 100이 마지막 숫자여야 하고, 30이 100 이전이어야 합니다. 문자로는 1이 3보다 앞에 있으므로 오류가 발생합니다(ascii 테이블! 참조). 이 문제를 해결하기 위해 sort() 메서드에 function()을 제공합니다.

// push(), array oxiriga yangi element qo'shish
const array = ["nimadir", "kimdir", true, 55, 4.6];
array.push("yangi element");
console.log(`arrayning uzunligi: ${array} \n`);
로그인 후 복사
로그인 후 복사
로그인 후 복사

array.sort((a, b) => a - b); 함수는 배열의 두 요소를 비교하여 순서를 결정합니다.

  • a 및 b: 비교되는 배열의 두 요소입니다. sort() 메소드는 모든 요소를 ​​쌍으로(예: a와 b) 비교하고 비교 함수의 결과에 따라 정렬합니다.
  • a - b: 이러한 차이를 계산하여 요소의 순서가 결정됩니다.
  1. a - b가 음수인 경우(즉, a < b), a가 b 앞에 옵니다.
  2. a - b가 양수이면(즉, a > b) b가 a보다 앞에 옵니다.
  3. a - b가 0인 경우(즉, a === b), 이는 상호 배타적이지 않습니다.

결과:

JavaScript array metodlari.


뒤집기

reverse() 메소드는 이름으로 지정된 배열의 반대인 배열을 생성합니다.

// concat(), ikki arrayni birlashtirish
let array1 = ["nimadir", "kimdir", true, 55, 4.6];
let array2 = [8, 3, 9];
console.log("array1: " + array1, "\n", "array2: " + array2 + "\n");

let result = array1.concat(array2);
console.log(
  `Ikki array bitta yangi arrayga birlashtirildi: result [${result}] \n`
);
로그인 후 복사
로그인 후 복사
로그인 후 복사

결과:

JavaScript array metodlari.


이번 포스팅을 통해 자바스크립트 배열 메소드에 대한 지식을 얻으셨기를 바라며, JS를 배우고 있는 소중한 분들께 이 포스팅을 공유해보세요!

검토할 질문:

1. 요소 추가, 변경:

아. 길이()

문제: 1000개의 값을 포함하는 큰 배열을 상상해 보세요. 배열의 요소 수만 출력해야 한다면 어떤 방법을 사용하시겠습니까? 배열이 변경되면 요소 수는 어떻게 변경되나요?
문제: 주어진 배열의 끝에 1000개의 새 요소를 추가해야 하는 경우 배열의 길이를 결정하십시오. 이때 어떤 방법을 사용하는 것이 가장 효과적인가요?

ㄴ. 푸시()

문제: 모든 요소가 동일한 배열이 있습니다. 새 요소를 추가할 때마다 배열 끝에 있는 요소를 바꿔야 합니다. 이러한 운영을 어떻게 최적화합니까?
문제: 수행해야 하는 다양한 작업이 포함된 작업이라는 배열이 있습니다. 새 작업을 추가해야 할 때마다 목록 끝에 있는 작업을 업데이트하세요. 어떻게 하나요?

ㄷ. 연결()

문제: 두 개의 배열을 병합하여 동일한 형식으로 표시해야 합니다. 첫 번째 배열에는 단순 숫자만 포함되고 두 번째 배열에는 숫자 문자열만 포함됩니다. 이들로부터 새 배열을 만들고 모든 숫자를 숫자 형식으로 출력하는 방법은 무엇입니까?
문제: 두 개의 배열이 있습니다. 하나는 사용자에 대한 정보를 포함하고 다른 하나는 사용자의 로그인 기록을 포함합니다. 이러한 배열을 병합해야 하지만 사용자의 활성 상태 기록만 표시하려고 합니다. 어떻게 하나요?

2. 삭제:

아. 팝()

문제: 여러 사용자 목록이 있고 매번 목록에서 마지막 사용자를 제거해야 합니다. 하지만 지난 3일 동안의 활성 사용자만 유지하려고 합니다. 어떻게 관리할 수 있나요?
문제: 다양한 책에 대한 정보를 포함하는 books라는 배열이 있습니다. 마지막 책을 삭제하고 새 책을 추가해야 할 때마다. 어떻게 하나요?

ㄴ. 시프트()

문제: 사용자가 자신의 차례를 기다리는 대기열 프로세스를 상상해 보세요. 다음 사용자에서 로그아웃하고 새 사용자를 입력할 때마다. 이 과정은 어떻게 진행되나요?
문제: 사용자 로그인 시간별로 구성된 배열이 있습니다. 매번 첫 번째 사용자의 구독을 취소해야 합니다. 어떻게 하나요?

ㄷ. 스플라이스()

문제: 학생 목록이 있고 매번 목록에서 3명의 학생을 변경하거나 제거해야 합니다. 이 과정은 어떻게 진행되나요?
문제: 문제 목록이 있습니다. 매번 여러 가지 문제를 제거하고 변경해야 합니다. 이슈를 변경할 때 다른 이슈는 올바른 순서로 유지되어야 합니다. 어떻게 하나요?

라. 배열 삭제[i]

문제: 큰 배열이 있고 해당 인덱스를 기반으로 요소를 삭제해야 합니다. 배열의 다른 요소가 어떻게 변경되는지 고려하여 요소를 삭제할 때 어떻게 해야 합니까?
문제: 고객 목록이 있고 각 고객은 고유한 ID 번호를 가지고 있습니다. 특정 ID에 대한 고객 등록을 취소하려면 어떤 방법을 사용할 수 있나요?

3. 검색:

아. 찾기(함수())

문제: 사용자 목록이 있습니다. 각 사용자는 ID 번호와 이름을 가지고 있습니다. 이름이 "John"인 사용자의 정보만 얻으면 됩니다. 어떻게 하나요?
문제: 제품 목록이 있고 각 제품에는 이름과 가격이 있습니다. 가격이 100보다 높은 제품만 찾으면 됩니다. 어떻게 하나요?

ㄴ. indexOf()

문제: 책 목록이 있고 각 책에는 제목과 저자가 있습니다. 사용자가 책을 검색하면 이름으로 해당 책이 어느 색인에 있는지 확인합니다.
문제: 제품 목록이 있고 각 제품에는 고유 식별 번호가 할당되어 있습니다. 사용자가 제품을 찾고 있다면 ID 번호를 기준으로 제품을 찾을 수 있어야 합니다. 어떻게 진행되나요?

4. 주문:

아. sort()(숫자)

문제: 학생 평가가 여러 개 있습니다. 성적은 낮은 것부터 높은 것 순으로 정렬하되, 성적이 같은 학생은 이름순으로 정렬하세요.
문제: 제품 가격이 포함된 배열이 있습니다. 가격을 내림차순으로 정렬해도 되지만 가격이 같을 경우 판매일 기준으로 정렬하세요.

ㄴ. sort()(문자열의 경우)

문제: 고객 이름이 배열되어 있습니다. 알파벳순으로 정렬해야 하지만 대문자로만 정렬해야 합니다
문제: 책 제목이 있습니다. 모든 책을 단어 길이에 따라 정렬하려고 합니다. 어떻게 하나요?

5. 클릭:

아. 역방향()

문제: 여러 숫자의 배열이 있습니다. 이 배열을 역순으로 출력해야 합니다. 이것의 변화를 어떻게 계산하나요?
문제: 텍스트 목록이 있고 텍스트를 역순으로 출력하려고 합니다. 텍스트의 길이가 모두 같다면 무엇을 얻게 될까요?

버그 및 질문

위 내용은 JavaScript 배열 방법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿