[混攻]Javascript-10
19840 ワード
Object
one of the Javascript's data types
(JavaScriptのデータ型の1つ)
a collection of related data and|or functionality
(関数に関連するデータセット)
Nearly all object in Javascript are instances of Object
(ほとんどのJavaScriptオブジェクトのインスタンス)
Literals and properties
const obj1 = {}; // object literal syntax
const obj2 = new Object(); // object constructor syntax
function print(person){
console.log(person.name);
console.log(person.age);
}
//object 생성
const ellie = {
//key : value 의 집합체
name : 'ellie',
age : 24
}
print(ellie);
//자바스크립은 다이나믹 런타임 language 이라서 객체에 값을 추가할 수 있다.
ellie.hasJob = true;
//객체를 살펴보면 hasJob이 추가되었다.
console.log(ellie);
//객체의 삭제 가능
delete ellie.hasJob;
console.log(ellie)
Computed properties
// 아래와 같이 객체(object)를 생성 할 수 있다.
function print(person){
console.log(person.name);
console.log(person.age);
}
const kangmin = {name : 'kangmin', age : 24};
print(kangmin);
//배열 타입으로 가져올 수도 있다. 이것을 Computed properties라고 한다.
console.log(kangmin['name'])
// 또한 객체에 값을 넣을 수 있다.
kangmin['gender'] = 'male';
console.log(kangmin.gender);
// computed properties는 어떤 key를 가져올지 모를 때 사용한다.
function printValue(obj,key){
console.log(obj.key);
//obj의 key라는 value로 찾게 되서 undefined.
console.log(obj[key]);
//따라서 computed properties 로 사용해야 값을 할당할 수 있다.
}
printValue(kangmin, 'name');
properties value shorthand
keyのnameは、同じ入力と重複する入力がある場合に関数を使用してコードを減らすことができます.
const person1 = {name : 'bob', age: 22};
const person2 = {name : 'steve', age: 32};
const person3 = {name : 'dave', age: 42};
// 아래의 함수를 이용해 name이라는 매개변수를 받아 name이라는 key에 다가 넣음
function makePerson(name, age){
return {name: name, age: age};
//객체{ }로 return 한다.
}
const person4 = makePerson('kangmin', 23)
//함수에 매개변수로 value를 넣음
console.log(person4)
constructor function
//클래스처럼 사용할 수도 있다.
function Person(name, age){
//클래스처럼 클래스명은 대문자로 시작하고 함수처럼 매개변수를 만든다.
// 클래스처럼 this.객체로 만든다.
this.name = name;
this.age = age;
}
//사용할때도 클래스처럼 사용한다.
const person5 = new Person('hyehwa', 23)
//class를 초기화하여 값을 할당시킴.
//클래스는 자동으로 객체로 만들어줌
console.log(person5);
in operator : property existence check (key in obj)
これは、キーがobjにあるか否かを不確定にする方法である.
console.log('name' in kangmin) //true
console.log('character' in kangmin) //false
console.log(kangmin.character) // undefined
console.clear();
for ... in vs for ... of
//for(key in obj)
// kangmin이라는 object가 가지고 있는 key를 출력할 수 있다.
//for in은 숫자형이 출력된다.
for(key in kangmin){
console.log(key)
}
//array가 가진 배열들을 순차적으로 출력할 수 있다.
//배열, 객체의 value를 출력한다.
const array = [1,2,3,4]
for(key of array){
console.log(key)
}
cloning
//다른이름의 object의 reference를 동일한 값으로 지정시킬 수 있다.
const user = {name: 'kangmin', age : 24};
const user2 = user;
// 2개의 object의 referencrt는 동일한 value를 가르킴.
user2.name = 'ellie';
console.log(user);
//동일한 값을 가르키고 동일한 값을 수정하였으니 user가 가르키는 값은 변화 하였다.
//예전에는 완전히 값을 복사해서 사용했다,
const user3 = {}; //user3의 빈 객체를 만들고
for(key in user){
//user의 값을 for..in을 이용하여 key에다가 할당하는 방식으로 복사하였음.
//첫번째 동작만 보면 key에 name이 할당되고 user3[name] = 'ellie'; 되는 것과 같다. user[name]의 값은 ellie다.
user3[key] = user[key];
}
console.log(user3)
user3.name = 'kangming';
//user3의 값은 따로 있기때문에 user3의 값만 변경되고 user,user2가 가르키는 값은 별도의 값이 되었다.
console.log(user);
//assign 메소드는 target과 합치고자 하는 resource를 매개변수로 받는다.
const user4 = {};
Object.assign(user4, user);
console.log(user4)
//another example
const fruit1 = {color: 'red'}
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed)
//뒤에 나오는 매개변수는 앞의 매개변수의 동일한 값을 덮어씌운다.
Reference
この問題について([混攻]Javascript-10), 我々は、より多くの情報をここで見つけました https://velog.io/@km2535/혼공Javascript-10テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol