JavaScript의 다양한 Object 메소드 요약(예제 포함)

이 글은 JavaScript의 다양한 Object 메서드에 대한 요약을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1.hasOwnProperty

obj.hasOwnProperty(prop)

Parameters

prop: 감지할 속성 문자열 이름 또는 기호

반환 값

Boolean

이 개체에 지정된 속성이 포함되어 있는지 확인하는 데 사용됩니다. Object를 상속하는 모든 객체는 hasOwnProperty() 메서드를 상속합니다. 이 방법은 개체에 고유한 특정 속성이 포함되어 있는지 여부를 검색하는 데 사용됩니다. in 연산자와 달리 이 메소드는 프로토타입 체인에서 상속된 속성을 무시합니다

Object.prototype.a = 'aaa';
var obj = {
  b: 'bbb'
}
console.log(obj.hasOwnProperty(a)); // false
for(var item in obj) {
  console.log(item); // b  a。此结果也找到了从原型链上继承过来的属性
}

hasOwnProperty가 속성 이름으로 사용되는 경우

var foo = {
  hasOwnProperty: function() {
    return false
  },
  bar: 'bar'
}

foo.hasOwnProperty('bar'); // false
// 如果这种情况下,想调用原型链上的方法
({}).hasOwnProperty.call(foo, 'bar'); // 即foo对象调用了{}对象的方法。
// 等同于
Object.prototype.hasOwnProperty.call(foo, 'bar')

확장: 객체의 모든 속성을 탐색합니다

for... in은 루프 및 열거 가능 열거 가능만 합니다. 따라서 이 루프는 열거할 수 없는 속성을 기반으로 해서는 안 됩니다.

2.getOwnPropertyNames

Object.getOwnPropertyNames(obj)

Parameters

obj 열거 가능 및 열거 불가능 속성 이름이 반환되는 개체입니다.

반환 값

주어진 개체에서 발견된 자체 속성에 해당하는 문자열 배열입니다.

Object.getOwnPropertyNames()는 obj에 열거 가능한 속성과 열거 불가능한 속성이 포함된 배열을 반환합니다.

3.Object.keys()

Object.keys(obj)

Parameters

자체 속성을 열거하는 반환될 객체

반환 값

주어진 객체의 열거 가능한 모든 속성을 나타내는 문자 문자열 배열

Description

Object.keys()는 요소가 문자열이고 요소가 주어진 개체에서 직접 열거될 수 있는 속성에서 나오는 배열을 반환합니다. 이러한 속성의 순서는 속성을 수동으로 탐색하는 것과 일치합니다(for...in...).

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

4.Object.values()

Object.keys()는 키 값을 반환하고 Object.values()는 값 값을 반환하며 규칙은 Object.keys()와 동일합니다.

5.Object.ass()

Object.sign()은 한 객체에서 열거 가능한 모든 값을 대상 객체로 복사하는 데 사용됩니다. 대상 객체를 반환합니다.

Object.sign(target, ...sources);

Description

대상 개체의 속성이 소스 개체의 속성과 동일한 경우. 대상 개체의 속성을 덮어씁니다. String 유형과 Symbol 유형의 속성이 복사됩니다.

예를 들어 속성에 쓸 수 없는 오류가 발생하는 경우 TypeError가 발생하며, 오류가 발생하기 전에 속성이 추가된 경우 대상 객체가 변경될 수 있습니다.

const a = {a: 'a', b: 'b'};
var b = Object.assign({}, a);
console.log(b); //{a: 'a', b: 'b'}

Deep copy, Object.sign()은 객체의 첫 번째 레이어 속성만 복사할 수 있습니다. 원본 개체의 속성 값이 개체에 대한 참조인 경우 해당 참조 값만 복사합니다.

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

객체 병합

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

동일한 속성을 가진 객체를 병합하면 후속 매개변수에서 동일한 속성을 가진 다른 객체가 해당 속성을 덮어씁니다.

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

기호 유형의 복사 속성

var o1 = { a: 1 };
var o2 = { [Symbol('foo')]: 2 };

var obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

상속된 속성과 열거 불가능한 속성은 복사할 수 없습니다.

var obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});

var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

원래 유형은 객체로 패키지됩니다.

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

예외로 인해 후속 복사 작업이 중단됩니다

var target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 属性是个只读属性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar);  // 2，说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo);  // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
console.log(target.baz);  // undefined，第三个源对象更是不会被拷贝到的。

접근자 복사

var obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

var copy = Object.assign({}, obj); 
// { foo: 1, bar: 2 }
// copy.bar的值来自obj.bar的getter函数的返回值 
console.log(copy); 

// 下面这个函数会拷贝所有自有属性的属性描述符
function completeAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});

    // Object.assign 默认也会拷贝可枚举的Symbols
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

var copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }

위 내용은 JavaScript의 다양한 Object 메소드 요약(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!