JavaScript 객체

30110 단어 beginnerswebdevtutorialjavascript
This was originally published on my blog, Code The Web

객체는 JavaScript를 사용하여 데이터를 저장하는 방법으로, 객체에 대한 프로그래밍의 핵심 부분입니다.본문에서 문법과 그것들에 관한 더 많은 정보를 배웁니다...

While it's not completely necessary, a basic understanding of JavaScript arrays may help you understand objects.


무엇이 물체입니까?


자바스크립트의 대상은 array과 매우 유사하며 대량의 값을 저장하는 데이터 형식이다.이 값들은 모든 데이터 형식 - 숫자, 문자열, 블, 함수, 심지어 수조와 대상!
그룹과 대상 간의 차이는 값의 인용 방식에 있다.배열에서 숫자 (배열에 있는 위치) 를 사용하여 값을 참조합니다 (예:
myArray[3]
객체의 값을 참조할 때 숫자 대신 이름을 사용합니다.예:
myObject['superFlashyName']
그렇습니다!이름이 숫자가 아니라

객체 선언 방법


성명 대상의 문법은 수조의 문법과 다르다.다음은 모양입니다.
var myFriend = {firstName: 'John', lastName: 'Smith', age: 27, nationality: 'British'};
보시다시피, 이것은 수조 문법과 약간 유사하지만, 방괄호가 아니라 꽃괄호가 있습니다.이 항목들은 여전히 쉼표로 구분된다.그러나 이 항목들은 현재'이름'과 값이 있습니다.예:
age: 27
여기서 age은 프로젝트의 이름(키라고도 함)이고 27은 프로젝트의 값입니다.그들은 사칭으로 구분한다.
우리는 키 값이 맞다고 부른다.그것은 키와 값이 하나 있다...정말요?😜)
key: value
따라서 하나의 대상은 쉼표로 구분된 키 값 쌍으로 구성되고 전체 대상은 한 그룹의 괄호 안에 포장된다.
이것은 우리의 목표이다.
var myFriend = {firstName: 'John', lastName: 'Smith', age: 27, nationality: 'British'};
이렇게 쓰면 충분히 받아들일 수 있다.
var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British'
};
어떤 사람은 첫 번째 선택을 더 좋아하고, 어떤 사람은 두 번째 선택을 더 좋아한다.이것은 당신의 머릿속에서 가장 의미 있는 것을 선택하는 데 달려 있다.

객체의 값을 가져오거나 설정하는 방법


처음에 언급했듯이 객체에서 항목을 참조하는 방식은 다음과 같습니다.
myObject['key']
다음과 같이 표현할 수 있습니다.
myObject.key
두 번째 옵션을 사용하면 변수나 특수 문자 (공칸 포함) 를 키로 사용할 수 없습니다.예:
myObject[someVarContainingTheKey]
myObject['I have spaces and special characters ;)']
보시다시피 그들의 결과는 결코 그렇게 좋지 않습니다!
myObject.someVarContainingTheKey // No longer a variable - equivalent to myObject['someVarContainingTheKey']
myObject.I have spaces and special characters ;) // \0_0/ The syntax errors are killing me
특히 변수 이름이나 대상 키에 특수 문자를 사용하는 것은 좋지 않은 프로그래밍 실천이다.예외적으로 어떤 형식의 사용자 입력 (공칸 포함) 을 키로 사용할 수 있습니다.
특수 문자나 변수를 키로 하지 않으면 두 번째 옵션(myObject.key)을 사용하는 것이 좋습니다.왜?그것은 단지 더 좋아 보일 뿐이다. (함수에도 더 의미가 있다. 곧 보게 될 것이다.)하지만 이것은 너에게 달려 있다.

객체의 함수


나는 처음부터 너에게 대상 내부에 어떤 유형의 데이터가 있을 수 있다고 말했었다.여기에는 기능이 포함됩니다!그런데 너는 어떻게 그것을 한 물체 안에 넣었니?
앞의 친구 예제를 사용합니다.
var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British'
};
지금 우리가 이 함수를 가지고 있다고 가정해 보자.
function sayHi() {
    alert('Hi!');
}
우리는 그것을 우리의 대상에 추가하고 싶다.이것은 우리가 그것을 이렇게 불러도 된다는 것을 의미한다.
myFriend.sayHi()
낯이 익어 보여요?이게 왜 console.log()이 console.log()!console은 log 함수를 포함하는 대상입니다!
어쨌든 함수에 sayHi()을 넣는 방법은 다음과 같습니다.
var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    }
};
뭐 공부 해요?여기서 무슨 일이 일어났는지 봅시다.하면, 만약, 만약...
function sayHi() {
    alert('Hi!');
}
, 이것은 사실상 다음과 같은 약어일 뿐입니다.
var sayHi = function() {
    alert('Hi!');
}
var age = 27에서 age: 27으로 변한 것처럼
var sayHi = function() {
    alert('Hi!');
}
이렇게 됩니다.
sayHi: function() {
    alert('Hi!');
}
보시다시피 함수에서 object.key 문법과 object['key'] 문법을 사용하는 것은 일리가 있습니다.이걸 쓸 수밖에 없다고 상상해봐!
myFriend['sayHi']()
응, 못생겼어.🙈

개체


만약 우리가 우리 친구에게 또 다른 함수를 주고 싶다면, introduce() 함수.알림:

My name is John Smith. I'm British and I'm 27 years old.


그러나 우리는 그것을 간단한 문자열로만 경보를 내릴 수 없다.우리는 대상 값을 사용해야 한다.따라서 우리가 age을 30으로 바꾸면 이렇게 말할 것이다.myFriend.age은 엉망진창인 프로그래밍 실천이라고 한다.함수를 다른 대상에 두면 (예를 들어 myEnemy) myFriend이 아니라 myEnemy을 알릴 수 있기 때문이다.
반대로 우리는 this.age을 사용한다.this은 함수가 있는 대상을 가리킨다.이 함수를 사용해서 대상에 넣을 수 있는지 확인해 보세요.다음 구문을 사용하여 문자열과 변수를 결합할 수 있습니다.
'Here is a variable: ' + myVar + ' ...yay!'
행운을 빕니다.

NOTE: Use double quotes so you don't interfere with the apostrophe in the word I'm


var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};
{:. 표시}
경탄했어이것이 바로 this의 작업 원리입니다!

객체와 문자열 간 변환


In this section, you're going to need to open up the JavaScript console. Do that by right-clicking, clicking on 'Inspect Element', and going to the 'Console' tab.


그룹을 문자열로 변환하려면 .join() 또는 .toString()을 사용합니다.
var myArray = [1,2,3,4];
console.log(myArray.join());
// logs '1,2,3,4'
console.log(myArray.toString());
// logs '1,2,3,4'
우리는 어떻게 대상을 처리합니까?.toString()(.join()은 어레이에만 해당):
var myObject = {favoriteFood: 'Pizza', hobby: 'Coding'};
console.log(myObject.toString());
// logs '[object Object]'
EWW!이것은 우리가 원하는 것이 아니다!💩
반대로 우리는 대상에게만 특수한 함수를 사용한다.
var myObject = {favoriteFood: "Pizza", hobby: "Coding"};
console.log(JSON.stringify(myObject));
// logs '{"favoriteFood":"Pizza","hobby":"Coding"}'
이게 더 좋아!JSON.stringify(myObject)이 아니라 myObject.stringify()과 .toString()과 같은 .join()입니다.JSON은 JavaScript 객체 표현을 나타냅니다.더 깊이 들어가겠습니다.
다음과 같이 JavaScript에서 split 함수를 사용하여 문자열에서 배열을 생성할 수도 있습니다.
var myString = 'how,are,you';
console.log(myString.split(','));
// logs ["how", "are", "you"]
객체의 등가 값은 JSON.parse입니다.
var myString = '{"favoriteFood":"Pizza","hobby":"Coding"}';
console.log(JSON.parse(myString));
// logs {favoriteFood: "Pizza", hobby: "Coding"}
그룹을 기록할 때 인용부호를 사용하지 않습니다. 이것은 문자열이 아니라 대상이 아니라는 것을 의미합니다.직접 보려면 상술한 코드 세션을 컨트롤러에 붙여넣으십시오.문자열이 아닌 대상처럼 보일 것입니다!
이 두 가지 새로운 기능을 한층 더 시도해 보세요!일부 대상과 대상을 문자열로 구성한 다음 그것들 사이에서 변환합니다.

그럼, 그게 뭐예요?


JSON은 JavaScript 객체 표현만을 나타냅니다.다시 말하면 당신이 본문에서 배운 대상 문법입니다!
사람들은 이런 문법을 매우 좋아해서 그것을 사용하여 데이터를 저장하는 것이 좋은 생각이라고 생각하기 때문에 현재 JSON은 자바스크립트 이외의 여러 방면에서 사용되고 있다.이것이 바로 우리가 JSON.parse과 같은 것을 가지고 있는 이유이다. 우리는 단지 자바스크립트 대상을 해석하고 있을 뿐이다.
너는 json.org에서 JSON에 대한 더 많은 정보를 찾을 수 있다. (그러나 너의 뇌를 너무 무겁게 하지 마라. 이것은 본 강좌와 무관하다.)

대상키()


하나의 그룹에 대해 크기를 알고 있다면, 모든 값을 어떻게 찾는지 알 수 있다.예를 들어 길이가 4인 그룹에서 모든 값을 찾으려면 array[0], array[1], array[2]과 array[3]을 인용할 수 있다.그러나 우리는 하나의 대상에 대해 이렇게 할 수 없다. 왜냐하면 우리는 모든 키가 무엇인지 모르기 때문이다. - 그들은 0, 1, 2, 3 같은 모델을 따르지 않는다. 왜냐하면 우리는 그것들을 우리가 좋아하는 어떤 모델로 설정할 수 있기 때문이다.
다행히도 우리는 함수를 사용하여 모든 키를 얻을 수 있다.
var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};

console.log( Object.keys(myFriend) );
// logs ["firstName", "lastName", "age", "nationality", "sayHi", "introduce"]
보시다시피 모든 키를 포함하는 그룹을 되돌려줍니다!문법은 다음과 같습니다.
Object.keys(myFriend) // RIGHT :)
이거 아니에요.
myFriend.keys() // WRONG!!!
Object.values()은 하나의 대상에 있는 모든 키의 그룹을 간단하게 생성합니다.

대상값 ()


대상의 모든 키를 찾을 수 있는 것 외에 우리는 모든 값을 찾을 수 있습니다!이런 방법은 하나의 대상을 하나의 수조로 바꿀 수 있지만, 모든 관건은 분명히 잃어버릴 것이다.다음은 작업 원리입니다.
var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};

console.log( Object.values(myFriend) );
// logs ["John", "Smith", 27, "British", function() { alert('Hi!'); }, function() { alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.'); }]
콘솔은 다음과 같이 ƒ 기호 약어 기능을 사용할 수 있습니다.
["John", "Smith", 27, "British", ƒ, ƒ]
이것이 바로 Object.values()의 작업 원리이다. 그것은 단지 하나의 대상의 모든 값을 하나의 수조로 구성할 뿐이다.

결론


오늘은 여기까지!본문이 당신으로 하여금 대상을 더욱 잘 이해하게 할 수 있기를 바랍니다.그렇다면 소셜미디어(click here to do so)에서 이 글을 공유하고 정보를 전파하고 당신 같은 사람을 도울 수 있다면 고맙겠습니다.
일단 당신이 물체에서 한동안 놀다가 최초의 곤혹을 없애면, 물체의 이상한 행동(가변성이라고 부른다)과 왜 그것이 무서운지 연구할 필요가 있다. I highly recommend reading this article on it by Zell Liew.그것은 더욱 고급스럽다. 이것이 바로 내가 먼저 상대를 놀자고 건의한 이유이다.
이러한 개념을 이해하는 데 도움이 필요하거나 일반적인 웹 개발에서 피드백을 제공하려면 comments below...을 방문하거나 실시간 채팅 내용을 입력하십시오
만약 당신이 이런 고품질의 글을 더 원한다면, sign up to get my weekly email of curated content from Code The Web and around the internet (스팸메일이 없습니다.)
만약 네가 공교롭게도 내 작품을 감상하는 현실 생활의 슈퍼히어로라면, 계속해서 buy me a coffee or two or three 또는 become my patron을 해라.
다음에 봐, 나는 여기서 how to modify HTML and CSS in JavaScript에 대해 이야기할 거야.이것은 자바스크립트의 가장 중요한 부분 중 하나이며 모든 세 가지 웹 언어 간의 교차점이다.

이런 튜토리얼을 더 원하십니까?매주 등록하여 웹 코드를 작성합니다!

It's weekly email packed with the best resources to learn web development from Code The Web and around the internet

(Learn more...)


본고는 최초로 Code The Web에 발표되었는데 이것은 재미있고 이해하기 쉬운 블로그로 웹 개발을 배울 수 있습니다🚀
학습: HTML | CSS | JavaScript
ExtJS의 첫 번째 프로그램 시작
Extjs의store 데이터 json 서열화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage