常用的Object总结（包含ES5/6/7/8/9/10）

第一部分介绍对象的定义和访问

 1.  对象定义

• 使用new操作符来定义 new Object()

let object = new Object();

•  使用 { } 定义对象字面量法

let object = {};

 2.  对象赋值

• 使用对象字面量法赋值 （常用）

let o = {a: 'foo', b: 42, c: {}};

• 使用解构赋值 [ES6新增]

let o = {};
let name = "a";
let age = 12;
let { name, age } = o; // { name: 'a', age: 12 }

 3.  属性的访问

• 通过下标小圆点访问

let o = {
    "a": 1,
    "b": 2
}
console.log(o.a); // 1

• 通过下标方括号访问

let o = {
    "a": 1,
    "b": 2
}
console.log(o["a"]); // 1

• 对象解构访问 [ES6新增]

let o = {
    "a": 1,
    "b": 2
}
let { a, b } = o;
console.log(a); // 1
console.log(b); // 2

 

第二部分介绍获取对象的属性或者值的方法

   1. Object.keys(obj) 用于返回给定对象的所有可枚举性的属性字符串数组

• obj 要返回其枚举自身属性的对象

// 参数为一个数组
let arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // [ '0', '1', '2' ]

// 参数为一个对象 属性为数字类型
let o = {
    10: 'a',
    1: 'b',
    4: 'r'
}
console.log(Object.keys(o)); // [ '1', '4', '10' ] 
// 注：我们可以发现当属性为数字类型时 返回的属性会进行排序

let obj = Object.create({}, {
    getFoo: {
        value: function () { return 1; }
    }
});
obj.boo = 'a';
console.log(Object.keys(obj)); // [ 'boo' ]
// 注：我们可以发现当属性为fuction时 并不能作为返回数组中的元素 这是因为function不可枚举

 2. Object.getOwnPropertyNames(obj)方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

• obj 一个对象，其自身的可枚举和不可枚举属性的名称被返回
• 注：可链式调用

// 传一个数组的参数
let arr = ['a', 'b', 'c'];
console.log(Object.getOwnPropertyNames(arr)); //[ '0', '1', '2', 'length' ]

// 传一个对象 属性为数字 属性均为可枚举属性
let o = {10:'a', 2:'b', 4:'c'};
console.log(Object.getOwnPropertyNames(o)); // [ '2', '4', '10' ] 
// 注：我们会发现这里和keys方法是一致的 返回的数组是会排序的

// 传一个对象 属性包含函数 包含不可枚举属性
var obj = Object.create({}, {
    getFoo: {
        value: function() { return 1; },
        enumerable: false
    }
});
obj.foo = 1;
console.log(Object.getOwnPropertyNames(obj)); // [ 'getFoo', 'foo' ]
// 注：在这里我们会发现 该方法是将所有的属性返回

  3. Object.getOwnPropertySymbols(obj) [ES6新增] 对象自身的所有 Symbol 属性的键名，返回类型为一个数组

• obj  包含符号属性的对象

let obj = {};
let a = Symbol("a");
let b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

let objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])      // Symbol(a)
规范

 4.  Object.getProptotypeOf(obj) 返回指向对象的原型对象

• obj 返回指向对象的原型的对象

let person = {
    name:'a'
}
let p1 = Object.create(person);
console.log(Object.getPrototypeOf(p1)); // { name: 'a' }
console.log(p1.name) // a

 5. Object.values(obj) [ES8新增] 用于返回给定对象的所有可枚举性的值的字符串数组

• obj 要返回其枚举自身属性的值的对象

// 参数为一个数组
let arr = ['a', 'b', 'c'];
console.log(Object.values(arr)); // [ 'a', 'b', 'c' ]

// 参数为一个对象 属性为数字类型
let o = {
    10: 'a',
    1: 'b',
    4: 'r'
}
console.log(Object.values(o)); // [ 'b', 'r', 'a' ]
// 注：我们可以发现当属性为数字类型时 返回的属性会进行排序 那么值也会按照属性的顺序返回

let obj = Object.create({}, {
    getFoo: {
        value: function () { return 1; }
    }
});
obj.boo = 'a';
console.log(Object.values(obj)); // [ 'a' ]
// 注：我们可以发现当属性为fuction时 并不能作为返回数组中的元素 这是因为function不可枚举

6. Object.entries(obj)  [ES8新增] 用于返回给定对象的所有可枚举属性的键值对数组

• obj 要返回其枚举键值对的对象

// 参数为一个数组
let arr = ['a', 'b', 'c'];
console.log(Object.entries(arr)); // [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

// 参数为一个对象 属性为数字类型
let o = {
    10: 'a',
    1: 'b',
    4: 'r'
}
console.log(Object.entries(o)); // [ [ '1', 'b' ], [ '4', 'r' ], [ '10', 'a' ] ]
// 注：我们可以发现当属性为数字类型时 返回的属性会进行排序 那么值和键值对数组也会按照属性的顺序返回 

let obj = Object.create({}, {
    getFoo: {
        value: function () { return 1; }
    }
});
obj.boo = 'a';
console.log(Object.entries(obj)); // [ [ 'boo', 'a' ] ]
// 注：我们可以发现当属性为fuction时 并不能作为返回数组中的元素 这是因为function不可枚举

 7 . Object.getOwnPropertyDescriptor(obj, prop) 方法返回指定对象上一个自有属性对应的属性描述符（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

• obj 需要查找的目标对象

• prop 目标对象内属性名称

• 返回值说明

• value 值

• writable 当属性的值可以被改变的时候为true

• get 该属性的访问器函数

• set 该属性的设置器函数

• configurable 该属性描述可以被改变或者属性可以被删除的时候为true

• emumerable 该属性可以被枚举出时为true

let o = {
    "a": 10
}
console.log(Object.getOwnPropertyDescriptor(o, "a"));
//{ value: 10,
// writable: true,
// enumerable: true,
// configurable: true }

 

 第三部分介绍在原Object对象操作的方法，对象调用了这些方法之后会改变操作的对象

  1. Object.assign(target, ...sources) 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

• target 目标对象
• sources 源对象
• 注：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
• 注：如果源对象是一个引用类型的时候，那么这时是浅拷贝，源对象的值会被改变

// 目标对象是{}
let obj = { a: 1 };
let copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

// 目标对象非{}
let obj1 = {
    b: 2
}
let obj2 = {
    c: 3
}
let copy2 = Object.assign(obj1, obj2);
console.log(obj1); // { b: 2, c: 3 }
console.log(obj2); // { c: 3 }

// 目标对象包含源对象中的属性
let obj3 = {
    b: 2,
    c: 5
}
let obj4= {
    c: 3
}
let copy2 = Object.assign(obj1, obj2);
console.log(obj3); // { b: 2, c: 3 }
console.log(obj4); // { c: 3 }

 2. Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象

• obj 要在其上定义属性的对象
• prop 要定义或修改的属性的名称
• descriptor 将被定义或修改的属性描述符

let arr = ['a', 'b', 'c'];

 

 第四部分介绍数组的迭代方法（含部分ES5以上版本新增的方法）

 1.  for...in 遍历对象的属性 

let o = {
    name: 's',
    age: 12,
    sex: 'man'
};
for(let i in o) {
    console.log(i); 
    // name
    // age
    // sex
}

 2. for..of 遍历对象的值

let o = {
    name: 's',
    age: 12,
    sex: 'man'
};
for(let i of o) {
    console.log(i); 
    // s
    // 12
    // man
}