> 웹 프론트엔드 > JS 튜토리얼 > 어레이 및 객체 액세스

어레이 및 객체 액세스

Linda Hamilton
풀어 주다: 2024-11-17 14:36:02
원래의
526명이 탐색했습니다.

Array and Object Access

객체란 무엇인가요?
객체는 다양한 데이터와 보다 복잡한 엔터티의 키 입력 컬렉션을 저장하는 데 사용됩니다. 객체는 변수이지만 많은 값을 포함할 수 있습니다. 비어 있거나 키/값 쌍으로 채워질 수 있는 대괄호를 사용하여 객체를 생성할 수 있습니다. 키는 속성 이름이라고도 하는 문자열이며 값은 키와 관련된 모든 것이 될 수 있습니다. 키/값 쌍은 순서가 없습니다. 객체는 다른 객체, 함수, 기본 데이터 유형 및 배열을 저장할 수 있습니다.

객체 리터럴은 빈 객체입니다.

var user = {};
로그인 후 복사
로그인 후 복사
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
로그인 후 복사
로그인 후 복사

점 표기법과 괄호 표기법
해당 키를 통해 value 속성에 액세스할 수 있습니다. 키의 기존 속성 값을 수정할 수 있습니다. 개체에 새 속성을 추가할 수 있습니다.

객체에 점 표기법
객체에 대한 점 표기법을 사용하면 객체의 키와 메서드에 액세스할 수 있습니다. 점 표기법은 객체 이름 dot(.) 키/속성을 사용하여 작성됩니다.
객체.키

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
console.log(user.name); //output "Carol"
로그인 후 복사

object.key를 사용하여 객체를 수정하려면

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user.name = 'Bonnie'
console.log(user); //
//output 

name: '"Bonnie",
age: 30,
occupation: "Teacher"

로그인 후 복사

object.key를 사용하여 개체에 추가하려면

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user.favColor = 'Red'
console.log(user);
//output
age: 30,
  name: "Carol",
  occupation: "Teacher",
  favColor: "Red"

로그인 후 복사

객체에 대괄호 표기
이 표현식을 사용하면 문자열(따옴표로 묶음) 또는 속성 이름이 포함된 변수를 사용하여 개체 속성에 액세스할 수 있습니다. 점 표기법을 사용할 수 없는 경우에 유용합니다. 대괄호 표기법을 사용하면 점 표기법과 달리 변수를 속성 이름으로 사용할 수 있습니다
객체['표현식'];

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

console.log(user['name']);//output "Carol"
로그인 후 복사

객체 수정

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user['name'] = 'Bonnie'
console.log(user);
//output
name: 'Bonnie',
age: 30,
occupation: 'Teacher'
};
로그인 후 복사

개체에 추가하려면

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user['favColor'] = 'Red'
console.log(user);
//output
name: 'Carol'
age: 30
occupation: 'Teacher'
user['favColor'] = 'Red'

};


로그인 후 복사

배열이란 무엇입니까?
배열은 숫자, 문자열, 부울 및 null을 포함한 다양한 값을 보유할 수 있습니다. 배열의 각 값을 요소라고 하며 각 요소는 0에서 시작하는 인덱스로 액세스됩니다. 인덱스는 요소의 위치를 ​​제공합니다. 요소는 대괄호([])로 묶이고 쉼표로 구분됩니다.

빈 배열 리터럴

var user =[]
로그인 후 복사
index:      0     1      2
var user = [1, 'Carol', true, ];
로그인 후 복사

1은 숫자이고 인덱스 0에 위치합니다.
'Carol'은 문자열이며 첫 번째 인덱스에 위치합니다.
True는 부울 값이며 세 번째 인덱스에 위치합니다.

배열 메소드는 요소를 추가, 제거, 수정하는 JavaScript 메소드에 내장되어 있습니다.

.push()를 사용하면 배열 끝에 요소를 추가할 수 있습니다.

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.push('cauliflower')
console.log(vegetables)
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];

로그인 후 복사

.pop()을 사용하면 배열 끝의 값을 제거할 수 있습니다.

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];
vegetables.pop()
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];

로그인 후 복사

.unshift()를 사용하면 배열 앞에 값을 추가할 수 있습니다.

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.unshift('Brussel sprouts');
console.log(vegetables);
//output
var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
로그인 후 복사

.shift()를 사용하면 배열 앞의 값을 제거할 수 있습니다.

var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
vegetables.shift();
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
로그인 후 복사

.length() 속성을 사용하면 배열의 항목 수를 가져올 수 있습니다.

var user = {};
로그인 후 복사
로그인 후 복사

배열의 대괄호 표기
대괄호 표기법과 인덱스를 사용하여 배열의 요소 값을 가져올 수 있습니다.
인덱스는 0에서 시작하여 첫 번째 요소를 제공하고 인덱스 1은 두 번째 요소를 제공한 후 다음 요소를 제공합니다.

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
로그인 후 복사
로그인 후 복사

결론
배열과 객체는 모두 값을 조작할 수 있는 JavaScript의 컬렉션입니다. 배열은 0부터 시작하는 인덱스를 사용하여 각 요소에 액세스할 수 있는 기본 데이터 유형의 정렬된 컬렉션입니다. 배열 메서드는 점 표기법을 사용하여 배열을 추가, 제거 또는 수정하는 데 사용됩니다. 각 요소에 액세스하기 위해 0부터 시작하는 인덱스와 함께 대괄호 표기법을 사용합니다. 객체는 키를 사용하여 값에 액세스하는 순서가 지정되지 않은 복잡한 데이터 유형의 모음입니다. 간단한 키에는 점 표기법을 사용하고, 복잡한 키에는 괄호 표기법을 사용합니다.
참고자료:
1.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
2.https://www.w3schools.com/js/js_arrays.asp
3.https://javascript.info/array

위 내용은 어레이 및 객체 액세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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