ES6入门之对象的新增方法

2019-05-22 admin

1. Object.is()

用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等,行为和(===)基本一致。

在ES5中判断两个值是否相等,只能用(==)相等运算符和(===)严格相等运算符,但是这两货都有缺点,前者 两边的值都会转换数据类型,后者 NaN不等于自身还有 +0 == -0。

Object.is('foo', 'foo')  // true
Object.is({}, {})  // false

// 在 Object.is()

+0 === -0  // true
NaN === NaN // false

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

2. Object.assign()

用于对象的合并,将源对象的所有可枚举属性,复制到目标对象,现在常用来进行浅拷贝。

const t = {a: 1}
const s1 = {b: 2}
const s2= {c: 3}

Object.assign(t, s2, s2)
// t  {a:1, b:2, c:3}

// 在上面中第一个参数t是目标对象,s1 s2是源对象

注意:如果目标对象和源对象有同名属性,或者多个同名,那么在后面的属性会将前面的覆盖。


const t = {a: 1, b: 2}
const s1 = {b: 3, c: 4}
const s2 = {c: 5}

Object.assign(t, s1, s2)
t // {a:1, b:3, c:5}

如果Object.assign的参数只有一个,那么就返回该参数,另外如果该参数不是对象,那么Object.assign会将其转为对象在返回


const t = {a: 2}
Object.assign(t)
t // {a: 2}

Object.assigin(2)
// "object"

另外由于null 和 undefined 无法转换位对象,那么如果他们作为第一个参数就会报错,如果不是在第一个参数则不会有这个问题


Object.assign(undefined)    // 报错
Object.assign(null)     //报错

这样就不会报错:如下

const t = {a: 2}

Object.assign(t, undefined)     // true
Object.assign(t, null)      // true

其他(数值,字符串,布尔值)数值不再第一个也不会报错,但是字符串会以数组的形式被拷入目标对象,两外两个则不会做任何操作。

const a = 'abc'
const b = true
const c = 12

const o = Object.assign({}, a, b, c)
o // {"0": "a", "1": "b", "2": "c"}

// 因为布尔值number 的原始值都在对象的内部属性[[PrimitiveValue]]
上面,这个属性不能别Object.assign拷贝

Obeject.assign 拷贝的属性是有限制的,只能拷贝源对象的自身属性,也不能拷贝不可枚举的属性,另外 Symbol值的属性也能被拷贝

注意点:

1. 浅拷贝

Object.assign 实现的是浅拷贝,也就是说如果源对象的某个属性值是对象,那么目标对象拷贝得到的是这个对象的引用

2. 同名属性的替换

如果遇到同名属性,那Object.assign的处理方法是替换还不是追加

3. 数组的处理

在处理数组的时候,Object.assign是将其是为对象来处理,如果下标相同则是覆盖而不是追加


Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

4. 取值函数的处理

Object.assign 只能进行值的复制,如果复制的值是一个函数,那么就等函数求值执行完在进行值的复制

常见用途:

1\. 为对象添加属性
2\. 为对象添加方法
3\. 克隆对象
4\. 合并多个对象
5\. 为属性指定默认值

3. Object.getOwnPropertyDescriptors()

用来返回指定对象所有自身属性(非继承属性)的描述对象

const o = {
    left: 123,
    top() {
        return 'new'
    }
}

Object.getOwnPropertyDescriptors(o)

// {
    left:{
        configurable: true
        enumerable: true
        value: 123
        writable: true
    },
    top: {
        configurable: true
        enumerable: true
        value: ƒ top()
        writable: true
    }
}

Object.getOwnPropertyDescriptors() 返回一个对象,所有原对象的属性名都是该
对象的属性名,对应的属性值就是该属性的描述对象。

4. __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

4.1. __proto__属性

用来读取或设置当前对象的prototype对象,另外这是一个内部属性。__proto__是调用的 Object.prototype.proto 方法

//es5 写法
const o = {
    method: function() {}
}
o.__proto__ = someOtherObj

//es6 写法
var o = Object.create(someOtherObj)
o.method = function(){}

4.2 Object.setPrototypeOf()

作用和 __proto__相同,用来设置一个对象的prototype对象,返回参数本身


// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null)

=== 以下写法

function setPrototyoeOf(obj, proto) {
    obj.__proto__ = proto
    return obj
}

// 例子
let proto = {}
let o = {
    x: 10
}
Object.setPrototypeOf(o, proto)

proto.y = 20
proto.z = 40

o.x // 10
o.y // 20
o.z // 40

// 上面 将proto设为 o 对象的原型,所以可以从o 中读取proto 的属性

注意:如果第一参数不是对象,将自动转换为对象,由于返回的还是第一个参数,所以这个操作不会产生任何效果,另外由于 undefined 和 null 无法转换为对象,所以第一个参数如果是这两个则会报错

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

4.3 Object.getPrototypeOf()

用于读取一个对象的原型对象和Object.setPrototypeOf 配套使用。所有的特性也和 上面一样,第一个参数如果不是对象将转换为对象,undefined和null 会报错

5. Object.keys(),Object.values(),Object.entries()

5.1 Object.keys()

用于返回一个数组,成员的参数是对象自身的所有可遍历属性的键名

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// ["x", "y"]

5.2 Object.values()

返回值是一个数组,成员是对象自身的(不含继承的)所有可遍历属性的值。Objet.values只返回对象自身的可遍历属性。

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// [1, "b"]

另外Object.values遍历的时候如果遇到属性名为数值的属性,那么将按照数值大小,从小到大遍历,如下:


const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]

注意:Object.values 会过滤属性名为 Symbol的属性


Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

如果Object.values的参数是一个字符串 那么将返回字符串拆解的数组

Object.values('symbol')
["s", "y", "m", "b", "o", "l"]

注意: 如果Object.values 的参数为boolean值或者number,那么返回值是一个空数组,

Object.values(true)
[]
Object.values(2,null)
[]

5.3 Object.entries()

返回一个数组,成员是对象自身(不含继承的)所有可遍历属性的键值对数组,同样 Symbol 属性的值会被过滤。

const p = { f: 'b', az: 22 };
Object.entries(p)
// [ ["f", "b"], ["az", 22] ]

Object.entries({ [Symbol()]: 456, o: 'c' });
// [ [ 'o', 'c'] ]

Object.entries 可以用来遍历对象的属性

Object.entries 将对象转为真正的Map结构

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

6. Object.fromEntries()

是Object.entries 的逆操作,将一个键值对数组转为对象。主要是将键值对的数据结构还原为对象,适用于将Map结构转为对象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

// 例二 将Map结构转为对象
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

欢迎关注 公众号【小夭同学】

ES6入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

ES6入门之函数的扩展

ES6入门之对象的扩展

Git教程

前端Git基础教程

[转载]原文链接:https://segmentfault.com/a/1190000019258910

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65468.html

文章标题:ES6入门之对象的新增方法

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部