Javascript基础知识之三（常用对象方法）

一、MDN链接

Object.assign() - JavaScript | MDNObject.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

二、简介

方法	描述
Object.keys()	返回枚举自身属性的数组
Object.values()	返回可枚举属性值的数组
Object.create()	创建一个新对象
Object.defineProperty()	直接在一个对象上定义/修改一个新属性
Object.defineProperties()	直接在一个对象上定义新的属性或修改现有属性
Object.is()	判断两个值是否为同一个值
Object.assign()	将所有可枚举属性的值从一个或多个源对象分配到目标对象

三、常用方法解读

【1】Object.keys()

解读：返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

语法：

Object.keys(obj)

例子：

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {getFoo: {value: function () { return this.foo; }}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

for...in...也可以获取自身属性

// 用于获取对象自身所有的属性
var obj = {id: 1,pname: '小米',price: 1999,num: 2000
};
var arr = Object.keys(obj);     //Array[4]
console.log(arr);    //['id', 'pname', 'price', 'num']
arr.forEach(function(value) {console.log(value); //循环打印arr里面的数据项})for(let key in obj){//key是属性 obj[key]是对应的属性值console.log(key) //循环打印属性
}

【2】Object.values()

解读：返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

语法：

Object.values(obj)

例子：

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']

【3】Object.create()

解读：创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

语法：

Object.create(proto，[propertiesObject]) //proto新创建对象的原型对象。

例子一：

const person = {isHuman: false,printIntroduction: function() {console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);}
};const me = Object.create(person);//对象的create与类的new一个实例对象的区别
//const he = new person() //person is not a constructorconsole.log(me.__proto__) //{isHuman: false, printIntroduction: ƒ}console.log(me.isHuman)//false 顺着原型链去寻找该属性me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwrittenme.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

例子二：实现类似继承

// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {// this 指向父构造函数的对象实例this.uname = uname;this.age = age;
}
Father.prototype.money = function() {console.log(100000);
};// 2 .子构造函数
function Son(uname, age, score) {// this 指向子构造函数的对象实例Father.call(this, uname, age);this.score = score;
}
// var son_wf = new Son('wf',23,100);
// //打印的是son的对象实例son_wf
// console.log(son_wf);// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
//Son.prototype = new Father();//***上面的这一句话也可以使用下面这种方法拿到父原型对象
// Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
Son.prototype = Object.create(Father.prototype);// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;// 这个是子构造函数专门的方法[先继承，再创造自己]
Son.prototype.exam = function() {console.log('孩子要考试');}
var son = new Son('刘德华', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);

最后三行的打印结果：

【4】Object.defineProperty()

解读：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：

Object.defineProperty(obj, prop, descriptor)

obj 要定义属性的对象。
prop 要定义或修改的属性的名称或 Symbol 。
descriptor 要定义或修改的属性描述符。

descriptor 属性描述符两种主要形式：数据描述符和存取描述符

数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

描述符	功能
`configurable`	为 `true` 时，该属性的描述符才能够被改变，默认false
`enumerable`	为 `true` 时，该属性才会出现在对象的枚举属性中，默认false
`value`	该属性对应的值
`writable`	为 `true` 时，属性的值，也就是上面的 `value`，才能被赋值运算符改变。默认false
`get`	访问该属性时，会调用此函数
`set`	属性值被修改时，会调用此函数

例子一（数据描述符）：

// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {id: 1,pname: '小米',price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'num', {value: 1000,enumerable: true
});
console.log(obj); //{id: 1, pname: '小米', price: 1999, num: 1000}Object.defineProperty(obj, 'id', {// 如果值为false 不允许修改这个属性值 默认值也是falsewritable: false,
});
obj.id = 2;
console.log(obj); //{id: 1, pname: '小米', price: 1999, num: 1000}Object.defineProperty(obj, 'address', { //没有address，则增加该属性value: '中国山东蓝翔技校xx单元',// 如果只为false 不允许修改这个属性值 默认值也是falsewritable: false,// enumerable 如果值为false 则不允许遍历, 默认的值是 falseenumerable: false,// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为falseconfigurable: false
});
console.log(obj); //{id: 1, pname: '小米', price: 1999, num: 1000, address: '中国山东蓝翔技校xx单元'}
console.log(Object.keys(obj)); //不可枚举 ['id', 'pname', 'price', 'num']
delete obj.address;
console.log(obj); //不可删除 {id: 1, pname: '小米', price: 1999, num: 1000, address: '中国山东蓝翔技校xx单元'}
delete obj.pname;
console.log(obj); //{id: 1, price: 1999, num: 1000, address: '中国山东蓝翔技校xx单元'}Object.defineProperty(obj, 'address', { // 前面已经声明，address不可配置 报错：Cannot redefine property: address value: '中国山东蓝翔技校xx单元',// 如果值为false 不允许修改这个属性值 默认值也是falsewritable: true,// enumerable 如果值为false 则不允许遍历, 默认的值是 falseenumerable: true,// configurable 如果为false 则不允许删除这个属性 默认为falseconfigurable: true
});
console.log(obj.address);

例子二（存取描述符）：

const object1 = {};let newValue = 0
Object.defineProperty(object1, 'property1', {get(){//当获取object1的property1属性时，返回newValuereturn newValue},// set方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。set(value){console.log(value)     //77//下列写法会造成死循环，因为反复的在设置object1的属性，调用set方法//object1.property1 = value     //Maximum call stack size exceeded//正确的写法如下newValue = value }
});object1.property1 = 77;    //此句调用set方法
console.log(object1.property1);     //77 //此句调用get方法

例子三（双向绑定）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"></head><body><style>ul {list-style: none;}</style><input type="text"><ul></ul><script>//以下改变input里的值，li的体重也会随之改变var ul = document.querySelector('ul');var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };var inp = document.querySelector('input');inp.value = person.weight;const _render = () => {var str = `<li>姓名：<span>${person.name}</span></li><li>性别：<span>${person.sex}</span></li><li>年龄：<span>${person.age}</span></li><li>身高：<span>${person.height}</span></li><li>体重：<span>${person.weight}</span></li>`ul.innerHTML = str;inp.value = person.weight;}_render(ul);let source = person;person ={}for(let key in source){ //循环遍历获取source的属性名Object.defineProperty(person,key,{get(){return source[key]},set(value){//当weight更改时，立即更新视图，重新调用render()source[key] = value_render()}})}inp.oninput = function(){//this.value为输入框里面的值person.weight = this.value}</script></body>
</html>

【5】Object.defineProperties()

解读：在一个对象上定义新的属性或修改现有属性，并返回该对象。

语法：

Object.defineProperties(obj, props)

props: 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：数据描述符和访问器描述符

例子：

var obj = {};
Object.defineProperties(obj, {'property1': {value: true,writable: true},'property2': {value: 'Hello',writable: false}// etc. etc.
});console.log(obj) //{property1: true，property2: "Hello"}

【6】Object.is()

解读：判断两个值是否为同一个值

语法：

Object.is(value1, value2);

例子：

console.log(Object.is(120, 120));// true
console.log(Object.is(NaN, NaN));// true
console.log(NaN === NaN);// false

【7】Object.assign()

解读：用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

语法：

Object.assign(target, ...sources)

target 目标对象
sources 源对象

例子：

const config1 = {host: 'localhost',port: 3306,name: 'root',pass: 'root',test: 'test'
};
const config2 = {host: 'http://atguigu.com',port: 33060,name: 'atguigu.com',pass: 'iloveyou',test2: 'test2'
}
console.log(Object.assign(config1, config2)); //如果出现重名，后面的属性会覆盖前面的属性，不重名的合并在一起

四、实例