js之Object的方法理解

我们都知道在js里面一切都是对象，window也是个对象，对象里拥有很多属性和方法，可以了解一下对象。

在控制台打印一下Object对象，console.dir(Object)，我们可以看到Object拥有的属性，方法还有原型，其中有一个方法叫getOwnPropertyNames，我们可以利用这个方法去得到Object本身的属性和方法。
现在在控制里输入Object.getOwnPropertyNames(Object)就能够得到Object对象所有自身属性和方法，由于浏览器的兼容性问题，所以在谷歌里面只有23个，ie里有18个，由于本人火狐不常用也就不做测试了，如图所示：

不同的浏览器，所展示的属性和方法个数都不一样，我们以谷歌为准去理解一下哪些不常用又好用的方法，

Object.assign()

Object.assign是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象。
用法：Object.assign(target,source) target是目标对象，sources是源对象（可以有一个或者多个），将sources源对象中所有可枚举的属性的值复制到目标的对象中，其会返回target对象，还有它接收的第一个参数应该是对象，如果不是对象的话，它会在内部转换成对象，所以如果碰到了null或者undefined这种不能转换成对象的值的话，assign就会报错。举个简单的例子：

let obj = {a: 1, b: 2, c: 3};
let newObj = {};
console.log(Object.assign(newObj, obj))   // {a: 1, b: 2, c: 3}
console.log(newObj === Object.assign(newObj , obj)) // true

从上可以看出obj对象里的属性和值都被复制到了newObj里去了，我们再来看一个例子：

const str = 'abc';
const boo = true;
const num = 10;
const obj = Object.assign({}, str, boo, num);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

为什么呢？理想中结果应该是{ “0”: “abc”, “1”: true, “2”: 10 }才对，这是因为当字符串转成对象的时候每一个字符都会被当做属性的值，那为什么true和10都没有进来呢？因为它们都是不可枚举的属性，还有它是浅拷贝的，我们再来看一个例子：

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
console.log(obj2.a.b) // 2

我们改变了obj1的a属性的b的值，而目标对象的b的值也跟着改变了，因为浅拷贝的是对象的属性的引用，而不是对象本身。
该方法的兼容性不是很好，IE全面沦陷，在移动端方面，仅有少数的浏览器才兼容该方法。幸好的是在MDN上提供了兼容的方法。
相关链接：Object.assign

Object.create() 创建对象

Object.create(proto, [propertiesObject ]) 是ES5中提出的一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个propertiesObject参数是属性描述符，只能传 null 或一个对象，否则抛出一个 TypeError 异常。举个栗子：

let obj=Object.create(null,{name:{value:"pingfan",enumerable:true}
});
console.log(obj.name); // pingfan
console.log(obj.__proto__); // undefinedlet name = {name: 'fanfan'};
let obj2=Object.create(name,{name:{value:"pingfan",enumerable:true},age:{get () {return this._Age+"岁了";},set (value) {this._Age = value;}}
});
console.log(obj2.name); // pingfan
console.log(obj2.__proto__); // {name: "fanfan"}
obj2.age = 4; // 这里执行set方法
console.log(obj2.age); // 这里执行get方法 4岁了

propertiesObject 参数的详细解释：（默认都为false）
1.数据属性writable:是否可任意写configurable：是否能够删除，是否能够被修改enumerable：是否能用 for in 枚举
2.value：值访问属性：get(): 访问set(): 设置
注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

Object.defineProperty()

Object.defineProperty(obj,prop,descriptor) 方法在obj对象上对prop属性进行定义或修改，其中descriptor为被定义或修改的属性符。属性符的操作如上面propertiesObject 参数所示，代码如下：

let obj = {};
let initValue = 'hello';
Object.defineProperty(obj,"newKey",{get:function (){return initValue;},set:function (value){initValue = value;},configurable: true | false,enumerable: true | false,
});
console.log(obj.newKey);  // hello
obj.newKey = 'pingfan';   // 调用set方法
console.log(obj.newKey);  // pingfan

vue的双向数据绑定就是通过Object.defineProperty实现的
相关文档链接：Object.defineProperty

object.defineProperties(object, descriptors)

参数解析：
object：必需，要添加或者修改属性的对象。
descriptors：必需，一个对象直接量，用来设置数据属性或访问器属性的特性，与Object.defineProperty方法不同的是，它既可以设置或者修改一个属性，也可以是多个属性。
代码如下：

let obj = {name:"pingfan",url:"shenzhen"
};Object.defineProperties(obj,{address:{value:"深圳市",writable:true,numerable:true,configurable:true},age:{value:2,writable:true,numerable:true,configurable:true}
});
console.log(obj.address);   // 深圳市
console.log(obj.age);  // 2

Object.getOwnPropertyDescriptor(object, propertyname)

Object.getOwnPropertyDescriptor(object, propertyname) 通常是用来描述对象的相关特性。
ES5新增此方法。
参数解析：
propertyname：必需，属性名称。
代码如下：

let obj={name:"pingfan"
}
let descriptor = Object.getOwnPropertyDescriptor(obj,"name");
console.log(descriptor);  // {value: "pingfan", writable: true, enumerable: true, configurable: true}

该方法是用于如果propertyname属性存在对象obj上，则返回其属性描述符，如果不存在就返回undefined。该属性描述符由下面的属性所组成。

Object.getOwnPropertyDescriptors

ES8新增方法
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
代码如下：

let obj={name:"pingfan",add: 'youyou'
}
let descriptor = Object.getOwnPropertyDescriptors(obj);
console.log(descriptor);

打印如图所示：

Object.getPrototypeOf(obj)

ES5新增此方法。
参数解析：
obj：必需，规定要获取原型的对象。
代码如下：

function Name(){this.name="pingfan";
}
Name.prototype={age:3
}
let a = new Name();
console.log(Object.getPrototypeOf(a).age);  // 3

该方法返回对象的原型对象，如果没有的话，则返回null。需要指出的是，对于函数对象，其返回的并不是显式原型（prototype），而是隐式原型（__proto__），该方法兼容IE9及以上的浏览器。

Object.is(val1,val2)

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==) 和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。 JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
ES6 提出 “Same-value equality” （同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（ === ）的行为基本一致。
和全等不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.is通过defineProperty定义的方法：代码如下：

Object.defineProperty(Object, 'is', {value: function(x, y) {if (x === y) {//  针对 +0  不等于 -0 的情况return x !== 0 || 1 / x === 1 / y;}//  针对 NaN 的情况return x !== x && y !== y;},configurable: true,enumerable: false,writable: true
});

Object.preventExtensions()

该方法可以让一个对象永远不能添加新的属性，在严格模式下，如果强行为对象添加属性，会报错，代码如下：

"use strict";
var obj = {name:"zhang"};
obj.name = "li"//可以进行修改
Object.preventExtensions(obj);
Object.isExtensible(obj) //=== false    判断是否可以修改
//obj.age = 14;严格模式下会报错
obj.__proto__.age = 13;
console.log(obj);//能够在原型对象上添加属性
obj.__proto__ = {}//不能直接重定义原型，会报错。

Object.keys(obj)

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
ES8，ES7新增Object.values()，Object.entries()方法返回一个给定对象中所有可枚举属性值的数组，值的顺序与使用。
代码如下：

// 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']

js之Object的方法理解相关推荐

JS中Object的方法汇总，包括assign、create、prototype等等
JavaScript Object JS的Object到底是啥东西呢?它有啥东西呢? 我们简单知道的,就是new一个Object实例对象,那这个实例对象又何Object又有什么关系呢? 先打印一下看看 ...
php object keys_原生js中Object.keys方法详解
实际开发中,有时需要知道对象的所有属性,原生js提供了一个方法Object.keys(). Object.keys(obj)返回的是一个数组,该数组的所有元素都是字符串.这些元素是来自于给定的obj可 ...
JS中Object.entries()方法
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for-in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性). co ...
js中 Object.freeze 方法
Object.freeze() Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举 ...
Vue.js 定义object的方法
如果是学习前端的同学加个微信cannywill做个朋友,能帮尽量帮,一起进步鸭当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue. ...
js字符串string转object对象 - 方法篇
js字符串string转object对象 - 方法篇背景: 有时候后台返回的是map类型.或者json类型: 但是前端发现接收到的数据类型是string类型: (3种)方法如下: 将字符串strin ...
JS对象创建 Object.create() 方法
概述 Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象. 语法 Object.create(proto, [ propertiesObject ]) 通过Object.c ...
遍历JS Object的方法
遍历JS Object的方法 1.Object.keys 2. for in 1.Object.keys const body = {hot: false,id: 5,news: true,topic ...
js【Object.prototype.hasOwnProperty()方法】
2019独角兽企业重金招聘Python工程师标准>>> 概述 hasOwnProperty() 方法用来判断某个对象是否含有指定的自身属性. 语法 obj.hasOwnPropert ...

js之Object的方法理解

js之Object的方法理解相关推荐

最新文章

热门文章