JavaScript
사물

통사론

• object = {}
• object = new Object ()
• object = Object.create (prototype [, propertiesObject])
• object.key = value
• object [ "key"] = 값
• 개체 [기호 ()] = 값
• object = {key1 : value1, "key2": value2, 'key3': value3}
• object = {conciseMethod () {...}}
• object = {[계산 된 () + "키"] : 값}
• Object.defineProperty (obj, propertyName, propertyDescriptor)
• property_desc = Object.getOwnPropertyDescriptor (obj, propertyName)
• Object.freeze (obj)
• Object.seal (obj)

매개 변수

비고

Object.keys

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!"
};

var keys = Object.keys(obj);

console.log(keys); // ["a", "b", "c"]

얕은 복제

const existing = { a: 1, b: 2, c: 3 };

const clone = Object.assign({}, existing);

현재 스테이지 3 제안 인 오브젝트 rest / spread destructuring 은 Object 인스턴스의 얕은 클론을 생성하는 더욱 단순한 방법을 제공합니다.

const existing = { a: 1, b: 2, c: 3 };

const { ...clone } = existing;

이전 버전의 JavaScript를 지원해야하는 경우 Object를 복제하는 가장 호환 가능한 방법은 속성을 수동으로 반복하고 .hasOwnProperty() 사용하여 상속 된 객체를 필터링하여 .hasOwnProperty() 것입니다.

var existing = { a: 1, b: 2, c: 3 };

var clone = {};
for (var prop in existing) {
  if (existing.hasOwnProperty(prop)) {
    clone[prop] = existing[prop];
  }
}

Object.defineProperty

var obj = { };

Object.defineProperty(obj, 'foo', { value: 'foo' });

console.log(obj.foo);

콘솔 출력

푸

Object.defineProperty 는 다음 옵션을 사용하여 호출 할 수 있습니다.

Object.defineProperty(obj, 'nameOfTheProperty', {
  value: valueOfTheProperty, 
  writable: true, // if false, the property is read-only
  configurable : true, // true means the property can be changed later
  enumerable : true // true means property can be enumerated such as in a for..in loop
});

Object.defineProperties 사용하면 한 번에 여러 속성을 정의 할 수 있습니다.

var obj = {};
Object.defineProperties(obj, {
  property1: {
    value: true,
    writable: true
  },
  property2: {
    value: 'Hello',
    writable: false
  }      
});

읽기 전용 속성

속성 설명자의 writable 속성은 해당 속성을 변경할 수 있는지 여부를 나타냅니다.

var a  = { };

Object.defineProperty(a, 'foo', { value: 'original', writable: false });

a.foo = 'new';

console.log(a.foo);

콘솔 출력

기발한

열거 불가능한 속성

속성 설명 자의 enumerable 속성은 해당 속성이 개체의 속성을 반복하면서 열거되는지 여부를 알려줍니다.

var obj = { };

Object.defineProperty(obj, "foo", { value: 'show', enumerable: true });
Object.defineProperty(obj, "bar", { value: 'hide', enumerable: false });

for (var prop in obj) {
    console.log(obj[prop]);
}

콘솔 출력

보여 주다

속성 설명 잠금

속성 설명 자의 configurable 속성은 설명 자의 이후 변경을 허용하지 않으므로 사용됩니다.

var obj = {};

// Define 'foo' as read only and lock it
Object.defineProperty(obj, "foo", { 
    value: "original value", 
    writable: false, 
    configurable: false
});
 
Object.defineProperty(obj, "foo", {writable: true});

이 오류는 발생합니다.

TypeError : 속성을 재정의 할 수 없습니다 : foo

그리고 재산은 여전히 ​​읽기 전용입니다.

obj.foo = "new value";
console.log(foo);

콘솔 출력

원래의 가치

Accesor 속성 (get 및 set)

속성 설명 자의 get 속성은 속성에서 값을 검색하기 위해 호출되는 함수입니다.

set 속성은 또한 함수이며 속성에 값이 할당되고 새 값이 인수로 전달 될 때 호출됩니다.

get 오거나 set 한 디스크립터에 value 이나 writable 을 할당 할 수 없습니다.

var person = { name: "John", surname: "Doe"};
Object.defineProperty(person, 'fullName', { 
    get: function () { 
        return this.name + " " + this.surname;
    },
    set: function (value) {
        [this.name, this.surname] = value.split(" ");
    }
});

console.log(person.fullName); // -> "John Doe"

person.surname = "Hill";
console.log(person.fullName); // -> "John Hill"

person.fullName = "Mary Jones";
console.log(person.name) // -> "Mary"

특수 문자 또는 예약어가있는 속성

객체 속성 표기법은 일반적으로 myObject.property 작성되지만 주로 JavaScript 변수 이름 에있는 문자 (주로 문자, 숫자 및 밑줄 ( _ )) 만 허용합니다.

공백, ☺ 또는 사용자 제공 컨텐츠와 같은 특수 문자가 필요한 경우 [] 괄호 표기법을 사용하여 가능합니다.

myObject['special property ☺'] = 'it works!'
console.log(myObject['special property ☺'])

모든 자리 특성 :

특수 문자 이외에 모든 자릿수의 속성 이름에는 대괄호 표기법이 필요합니다. 그러나이 경우 속성을 문자열로 작성할 필요는 없습니다.

myObject[123] = 'hi!' // number 123 is automatically converted to a string
console.log(myObject['123']) // notice how using string 123 produced the same result
console.log(myObject['12' + '3']) // string concatenation
console.log(myObject[120 + 3]) // arithmetic, still resulting in 123 and producing the same result
console.log(myObject[123.0]) // this works too because 123.0 evaluates to 123
console.log(myObject['123.0']) // this does NOT work, because '123' != '123.0'

그러나 앞에 오는 0은 8 진 표기법으로 해석되므로 권장하지 않습니다. (TODO, 우리는 8 진수, 16 진수 및 지수 표기법을 기술하는 예제를 생성하고 링크해야한다)

참고 : [Arrays are Objects] 예제.

동적 / 변수 속성 이름

때로는 속성 이름을 변수에 저장해야합니다. 이 예에서는 어떤 단어를 찾아야하는지 사용자에게 묻고 dictionary 지정한 객체의 결과를 제공합니다.

var dictionary = {
    lettuce: 'a veggie',
    banana: 'a fruit',
    tomato: 'it depends on who you ask',
    apple: 'a fruit',
    Apple: 'Steve Jobs rocks!' // properties are case-sensitive
}

var word = prompt('What word would you like to look up today?')
var definition = dictionary[word]
alert(word + '\n\n' + definition)

word 라는 변수를보기 위해 [] 표기법을 사용하는 방법에 유의하십시오. 우리가 전통을 사용한다면 . 표기법을 사용하면 문자 그대로 값을 취할 수 있습니다.

console.log(dictionary.word)  // doesn't work because word is taken literally and dictionary has no field named `word`
console.log(dictionary.apple) // it works! because apple is taken literally

console.log(dictionary[word]) // it works! because word is a variable, and the user perfectly typed in one of the words from our dictionary when prompted
console.log(dictionary[apple]) // error! apple is not defined (as a variable)

변수 word 를 'apple' 문자열로 바꾸면 [] 표기법을 사용하여 리터럴 값을 쓸 수도 있습니다. [특수 문자 또는 예약어가있는 속성] 예제를 참조하십시오.

브래킷 구문을 사용하여 동적 속성을 설정할 수도 있습니다.

var property="test";
var obj={
 [property]=1;
};

console.log(obj.test);//1

그것은 다음과 같습니다 :

var property="test";
var obj={};
obj[property]=1;

배열은 객체입니다.

면책 조항 : 배열과 같은 객체를 만드는 것은 좋지 않습니다. 그러나 DOM을 사용하여 작업 할 때 작동 방식을 이해하는 것이 도움이됩니다. 이것은 많은 DOM document 함수에서 반환 된 DOM 객체에서 정규 배열 연산이 작동하지 않는 이유를 설명합니다. (즉, querySelectorAll , form.elements )

배열에서 볼 수있는 몇 가지 속성을 가진 다음 객체를 만들었다 고 가정합니다.

var anObject = {
    foo: 'bar',
    length: 'interesting',
    '0': 'zero!',
    '1': 'one!'
};

그런 다음 배열을 만듭니다.

var anArray = ['zero.', 'one.'];

이제 같은 방법으로 객체와 배열을 모두 검사 할 수 있습니다.

console.log(anArray[0], anObject[0]); // outputs: zero.  zero!
console.log(anArray[1], anObject[1]); // outputs: one.  one!
console.log(anArray.length, anObject.length); // outputs: 2 interesting
console.log(anArray.foo, anObject.foo); // outputs: undefined bar

이후 anArray 실제로 단지 같은 객체이며 anObject , 우리는 심지어 사용자 정의 말의 속성을 추가 할 수 있습니다 anArray

면책 조항 : 사용자 정의 속성이있는 배열은 혼동을 일으킬 수 있으므로 대개 권장하지 않지만 배열의 최적화 된 기능이 필요한 고급 사례에 유용 할 수 있습니다. (즉, jQuery 객체)

anArray.foo = 'it works!';
console.log(anArray.foo);

우리는 anObject 를 length 를 추가하여 배열과 같은 객체로 만들 수도 있습니다.

anObject.length = 2;

그런 다음 C 스타일 for 루프를 사용하여 마치 anObject 것처럼 반복 할 수 있습니다. 배열 반복 참조

anObject 는 배열과 같은 객체 일뿐입니다. (List라고도 함) 실제 배열이 아닙니다. push 와 forEach (또는 Array.prototype 있는 임의의 편의 함수)와 같은 함수는 기본적으로 배열과 유사한 객체에서 작동하지 않기 때문에 중요합니다.

많은 DOM document 함수는 위에 작성한 배열과 비슷한 anObject 와 비슷한 List (즉, querySelectorAll , form.elements )를 반환합니다. 배열과 유사한 객체를 배열로 변환을 참조하십시오.

console.log(typeof anArray == 'object', typeof anObject == 'object'); // outputs: true  true
console.log(anArray instanceof Object, anObject instanceof Object); // outputs: true  true
console.log(anArray instanceof Array, anObject instanceof Array); // outputs: true  false
console.log(Array.isArray(anArray), Array.isArray(anObject)); // outputs: true  false

Object.freeze

코드가 엄격 모드로 실행되고 있지 않으면 고정 후 작업은 자동으로 실패합니다. 코드가 strict 모드이면 TypeError 가 발생합니다.

var obj = {
  foo: 'foo',
  bar: [1, 2, 3],
  baz: {
    foo: 'nested-foo'
  }
};

Object.freeze(obj);

// Cannot add new properties
obj.newProperty = true;

// Cannot modify existing values or their descriptors
obj.foo = 'not foo';
Object.defineProperty(obj, 'foo', {
    writable: true
});

// Cannot delete existing properties
delete obj.foo;

// Nested objects are not frozen
obj.bar.push(4);
obj.baz.foo = 'new foo';

Object.seal

var obj = { foo: 'foo', bar: function () { return 'bar'; } };

Object.seal(obj)

obj.newFoo = 'newFoo';
obj.bar = function () { return 'foo' };

obj.newFoo; // undefined
obj.bar(); // 'foo'

// Can't make foo an accessor property
Object.defineProperty(obj, 'foo', { 
    get: function () { return 'newFoo'; }
}); // TypeError

// But you can make it read only
Object.defineProperty(obj, 'foo', { 
    writable: false
}); // TypeError

obj.foo = 'newFoo';
obj.foo; // 'foo';

(function () {
    'use strict';

    var obj = { foo: 'foo' };

    Object.seal(obj);

    obj.newFoo = 'newFoo'; // TypeError
}());

반복 가능한 객체 만들기

var myIterableObject = {};
// An Iterable object must define a method located at the Symbol.iterator key:
myIterableObject[Symbol.iterator] = function () {
  // The iterator should return an Iterator object
  return {
    // The Iterator object must implement a method, next()
    next: function () {
      // next must itself return an IteratorResult object 
      if (!this.iterated) {
        this.iterated = true;
        // The IteratorResult object has two properties
        return {
          // whether the iteration is complete, and
          done: false,
          // the value of the current iteration
          value: 'One'
        };
      }
      return {
        // When iteration is complete, just the done property is needed
        done: true
      };
    },
    iterated: false
  };
};

for (var c of myIterableObject) {
  console.log(c); 
}

오브젝트 휴식 / 보급 (...)

let obj = { a: 1 };

let obj2 = { ...obj, b: 2, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 };

let obj3 = { ...obj, b: { c: 2 } };

console.log(obj3); // { a: 1, b: { c: 2 } };

설명자 및 명명 된 속성

속성은 객체의 멤버입니다. 명명 된 각 속성은 (이름, 설명자) 쌍입니다. 이름은 액세스를 허용하는 문자열입니다 (점 표기법 object.propertyName 또는 대괄호 표기법 object['propertyName'] ). 설명자는 속성에 액세스 할 때 속성을 정의하는 필드의 레코드입니다 (속성에 어떤 일이 일어나고 속성에 액세스 할 때 반환되는 값은 무엇입니까). 전반적으로 속성은 이름을 동작과 연관시킵니다 (우리는 동작을 블랙 박스로 생각할 수 있습니다).

명명 된 속성에는 두 가지 유형이 있습니다.

1. 데이터 속성 : 속성의 이름은 값과 연결됩니다.
2. 접근 자 속성 : 속성 이름은 하나 또는 두 개의 접근 자 함수와 연관됩니다.

데모:

obj.propertyName1 = 5; //translates behind the scenes into
                       //either assigning 5 to the value field* if it is a data property
                //or calling the set function with the parameter 5 if accessor property


//*actually whether an assignment would take place in the case of a data property
//also depends on the presence and value of the writable field - on that later on

프로퍼티의 형태는, 기술자의 필드에 의해 결정됩니다. 프로퍼티는, 양쪽 모두의 형태 일 수 없습니다.

데이터 기술자 -

• 필수 입력란 : value 또는 writable 또는 둘 모두
• 선택적 필드 : configurable , enumerable

견본:

{
   value: 10,
   writable: true;
}

접근 자 설명자 -

• 필수 입력란 : get 또는 set 또는 둘 다
• 선택적 필드 : configurable , enumerable

견본:

{
    get: function () {
        return 10;
    },
    enumerable: true
}

들판과 그 기본값의 의미

• 이 키는 모두 기본값이 false 입니다.
• configurable 하다 true 이 등록 기술자의 종류가 변경 될 수 경우만 상기 속성이 해당 객체에서 삭제 될 수있는 경우.
• enumerable 은 해당 객체의 속성을 열거하는 동안이 속성이 표시되는 경우에만 true 입니다.
• writable 은 속성과 연결된 값이 대입 연산자로 변경 될 수있는 경우에만 true 입니다.

get set :

• 이 키의 기본값은 undefined .
• get 은 속성에 대한 getter 역할을하는 함수이거나 getter가 없으면 undefined 함수입니다. 함수 반환 값은 속성 값으로 사용됩니다.
• set 은 속성에 대한 setter 역할을하는 함수이거나 setter가 없을 경우 undefined 입니다. 이 함수는 속성에 할당 된 새 값만 인수로받습니다.

value :

• 이 키의 기본값은 undefined 입니다.
• 속성과 연결된 값입니다. 유효한 자바 스크립트 값 (숫자, 객체, 함수 등)이 될 수 있습니다.

예:

    var obj = {propertyName1: 1}; //the pair is actually ('propertyName1', {value:1,
                                                                    // writable:true,
                                                                    // enumerable:true,
                                                                    // configurable:true})
    Object.defineProperty(obj, 'propertyName2', {get: function() {
                                                    console.log('this will be logged ' + 
                                 'every time propertyName2 is accessed to get its value');
                                                },
                                            set: function() {
                                                    console.log('and this will be logged ' + 
                                'every time propertyName2\'s value is tried to be set')
                      //will be treated like it has enumerable:false, configurable:false
                                                }});
//propertyName1 is the name of obj's data property 
//and propertyName2 is the name of its accessor property





obj.propertyName1 = 3;
console.log(obj.propertyName1); //3

obj.propertyName2 = 3; //and this will be logged every time propertyName2's value is tried to be set
console.log(obj.propertyName2); //this will be logged every time propertyName2 is accessed to get its value 

Object.getOwnPropertyDescriptor

객체의 특정 속성에 대한 설명을 가져옵니다.

var sampleObject = {
    hello: 'world'
};

Object.getOwnPropertyDescriptor(sampleObject, 'hello');
// Object {value: "world", writable: true, enumerable: true, configurable: true}

개체 복제

객체의 전체 사본 (예 : 객체 속성 및 해당 속성 안의 값 등)을 원할 때이를 딥 복제 라고합니다.

var existing = { a: 1, b: { c: 2 } };
var copy = JSON.parse(JSON.stringify(existing));
existing.b.c = 3; // copy.b.c will not change

딥 클론을 생성하기위한 JavaScript에는 내장 함수가 없으며, 일반적으로 모든 객체에 대해 딥 클론을 만드는 것은 여러 가지 이유로 불가능합니다. 예를 들어,

• 객체는 열거 가능하지 않고 숨겨진 속성을 가질 수 있습니다.
• 객체 getter 및 setter는 복사 할 수 없습니다.
• 객체는 순환 구조를 가질 수 있습니다.
• 함수 속성은 숨겨진 범위의 상태에 따라 달라질 수 있습니다.

프리미티브 값, 날짜, 배열 또는 다른 "nice"객체 만 포함하는 "nice"객체가 있다고 가정하면 다음 함수를 사용하여 딥 클론을 만들 수 있습니다. 이 함수는 순환 구조를 가진 객체를 감지 할 수있는 재귀 함수이므로 이러한 경우 오류가 발생합니다.

function deepClone(obj) {
    function clone(obj, traversedObjects) {
        var copy;
        // primitive types
        if(obj === null || typeof obj !== "object") {
            return obj;
        }

        // detect cycles
        for(var i = 0; i < traversedObjects.length; i++) {
            if(traversedObjects[i] === obj) {
                throw new Error("Cannot clone circular object.");
            }
        }

        // dates
        if(obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }
        // arrays
        if(obj instanceof Array) {
            copy = [];
            for(var i = 0; i < obj.length; i++) {
                copy.push(clone(obj[i], traversedObjects.concat(obj)));
            }
            return copy;
        }
        // simple objects
        if(obj instanceof Object) {
            copy = {};
            for(var key in obj) {
                if(obj.hasOwnProperty(key)) {
                    copy[key] = clone(obj[key], traversedObjects.concat(obj));
                }
            }
            return copy;
        }
        throw new Error("Not a cloneable object.");
    }

    return clone(obj, []);
}

Object.assign

Object.assign () 메서드는 열거 가능한 모든 속성의 값을 하나 이상의 소스 객체에서 대상 객체로 복사하는 데 사용됩니다. 대상 객체를 반환합니다.

이 값을 사용하여 기존 객체에 값을 할당합니다.

var user = {
    firstName: "John"
};

Object.assign(user, {lastName: "Doe", age:39});
console.log(user); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

또는 객체의 얕은 복사본을 만들려면 :

var obj = Object.assign({}, user);

console.log(obj); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

또는 여러 객체의 여러 속성을 하나로 병합 할 수 있습니다.

var obj1 = {
    a: 1
};
var obj2 = {
    b: 2
};
var obj3 = {
    c: 3
};
var obj = Object.assign(obj1, obj2, obj3);

console.log(obj); // Logs: { a: 1, b: 2, c: 3 }
console.log(obj1); // Logs: { a: 1, b: 2, c: 3 }, target object itself is changed

프리미티브는 랩되고 null 및 undefined는 무시됩니다.

var var_1 = 'abc';
var var_2 = true;
var var_3 = 10;
var var_4 = Symbol('foo');

var obj = Object.assign({}, var_1, null, var_2, undefined, var_3, var_4);
console.log(obj); // Logs: { "0": "a", "1": "b", "2": "c" }

문자열 래퍼 만 고유 한 열거 가능 속성을 가질 수 있습니다.

감속기로 사용 : (배열을 객체에 병합)

return users.reduce((result, user) => Object.assign({}, {[user.id]: user})

객체 속성 반복

이 루프를 사용하여 객체에 속한 각 속성에 액세스 할 수 있습니다.

for (var property in object) {
    // always check if an object has a property
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

객체는 객체의 기본 클래스에서 상속 된 속성을 가질 수 있으므로 hasOwnProperty 대한 추가 검사를 포함해야합니다. 이 검사를 수행하지 않으면 오류가 발생할 수 있습니다.

var obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.keys(obj).map(function(key) {
    console.log(key);
}); 
// outputs: 0, 1, 2

객체에서 속성 가져 오기

특성의 특성 :

객체 에서 검색 할 수있는 속성은 다음과 같은 특성을 가질 수 있습니다.

• 열거 형
• 비 - 열거 형
• 개인적인

Object.defineProperty (ies)를 사용하여 속성을 만드는 동안 "own"을 제외한 특성을 설정할 수 있습니다. 객체의 프로토 타입 수준 ( __proto__ )이 아닌 직접 수준에서 사용할 수있는 속성을 자체 속성이라고합니다.

그리고 Object.defindProperty(ies) 를 사용하지 않고 객체에 추가되는 속성에는 열거 가능한 특성이 없습니다. 그것은 그것이 사실로 간주된다는 것을 의미합니다.

열거 가능성의 목적 :

열거 가능 특성을 특성에 설정하는 주된 목적은 다른 프로 그래 틱 방법을 사용하여 오브젝트에서 오브젝트를 검색 할 때 특정 특성의 가용성을 확인하는 것입니다. 이러한 여러 가지 방법에 대해서는 아래에서 자세히 설명합니다.

속성 검색 방법 :

개체의 속성은 다음 방법으로 검색 할 수 있습니다.

1. for..in 루프

   이 루프는 개체에서 열거 가능한 속성을 검색하는 데 매우 유용합니다. 또한이 루프는 열거 가능한 자체 속성을 검색 할뿐만 아니라 프로토 타입을 null로 간주 할 때까지 프로토 타입 체인을 통과하여 동일한 검색을 수행합니다.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props = [];
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props = [];
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a","b"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props = [];
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a"]
   

2. Object.keys() 함수

   이 함수는 EcmaScript 5의 일부로 공개되었습니다. 개체에서 열거 가능한 자체 속성을 검색하는 데 사용됩니다. 릴리스하기 전에 사람들은 for..in 루프와 Object.prototype.hasOwnProperty() 함수를 결합하여 객체에서 자신의 속성을 검색하는 데 사용되었습니다.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props;
   
   props = Object.keys(x);
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props;
   
   props = Object.keys(x);
   
   console.log(props); //["a"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props;
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   props = Object.keys(x);
   
   console.log(props); //["a"]
   

3. Object.getOwnProperties() 함수

   이 함수는 개체에서 열거 형 및 비 열거 형 속성을 검색합니다. 또한 EcmaScript 5의 일부로도 출시되었습니다.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props;
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props;
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props;
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a", "b"]
   

기타 :

객체에서 모든 (자신, 열거 가능, 열거 가능하지 않은, 모든 프로토 타입 레벨) 속성을 검색하는 기술이 아래에 주어지며,

function getAllProperties(obj, props = []){
  return obj == null ? props :
           getAllProperties(Object.getPrototypeOf(obj),
               props.concat(Object.getOwnPropertyNames(obj)));
}

var x = {a:10, __proto__ : { b : 5, c : 15 }};

//adding a non enumerable property to first level prototype
Object.defineProperty(x.__proto__, "d", {value : 20, enumerable : false});

console.log(getAllProperties(x)); ["a", "b", "c", "d", "...other default core props..."]

그리고 이것은 EcmaScript 5를 지원하는 브라우저에서 지원됩니다.

객체의 값을 배열로 변환

이 객체가 주어질 때 :

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!",
};

다음을 수행하여 값을 배열로 변환 할 수 있습니다.

var array = Object.keys(obj)
    .map(function(key) {
        return obj[key];
    });

console.log(array); // ["hello", "this is", "javascript!"]

Object 엔트리 반복 - Object.entries ()

const obj = {
    one: 1,
    two: 2,
    three: 3
};

Object.entries(obj);

[
    ["one", 1],
    ["two", 2],
    ["three", 3]
]

for(const [key, value] of Object.entries(obj)) {
    console.log(key); // "one", "two" and "three"
    console.log(value); // 1, 2 and 3
}

Object.values ​​()

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']