es6 快速入门系列 —— 对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了es6 快速入门系列 —— 对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4173字，纯文字阅读大概需要6分钟。

内容图文

其他章节请看：

es6 快速入门系列

对象

试图解决的问题

写法繁杂

属性初始值需要重复写

function createPeople(name, age){
    // name 和 age 都写了 2 次
    return {
        name: name,
        age: age
    }
}

对象中的方法有更简单的写法吗？

let person = {
    name: 'aaron',
    sayName: function(){
        
    }
}

原型访问困难

要记得如何使用 Object.getPrototypeOf() 方法和 .call(this) 方法来调用原型上的方法实在有些复杂

let people = {
    role: 'father',
    say: function(){
        console.log(`你好: ${this.role}`)
    }
}

let friend = {
    role: 'son',
    say(){
        // 调用原型上的方法
        Object.getPrototypeOf(this).say.call(this)
    }
}
// 将friend的原型指定为people
Object.setPrototypeOf(friend, people)
friend.say() // 你好: son

解决方法

写法繁杂

es6给对象提供了属性初始值和对象方法的简写语法

重写上面（试图解决的问题->写法繁杂）的例子：

function createPeople(name, age){
    // name 和 age 没有重复了
    return {
        name,
        age
    }
}

let person = {
    name: 'aaron',
    // 去掉了冒号和function
    sayName(){
        
    }
}

原型访问困难

es6引入 super 来访问原型用于简化原型的访问

super 是指向对象原型的指针，调用 super 相当于调用 Object.getPrototypeof(this)

用 super 重写上面（试图解决的问题->原型访问困难）的例子：

let people = {
    role: 'father',
    say: function(){
        console.log(`你好: ${this.role}`)
    }
}

let friend = {
    role: 'son',
    say(){
        // 这段代码与 Object.getPrototypeOf(this).say.call(this) 相同
        super.say()
    }
}
// 将friend的原型指定为people
Object.setPrototypeOf(friend, people)
friend.say() // 你好: son

注：必须在简写方法的对象中使用 super

let people = {
    say: function(){
        console.log('你好')
    }
}

let friend = {
    // 简写方法
    say(){
        super.say()
    }
}

Object.setPrototypeOf(friend, people)
friend.say() // 你好

如果在非简写方法的对象中使用则会导致语法错误，就像这样:

let friend = {
    // 非简写。语法错误
    say: function(){
        super.say()
    }
}

补充

可计算属性名

可以在对象字面量中使用可计算属性名，语法是使用方括号（[]）。请看示例：

let fullName = 'full name';

let obj = {
    // 使用 [] 定义可计算属性名
    [fullName]: 'aaron',
    ['test ' + fullName]: 'testAaron'
}
console.log(obj[fullName]) // aaron
console.log(obj['test full name']) // testAaron

重复属性

es6 中无论是严格模式还是非严格模式，都不再检查重复属性，对于每组重复属性，都会选取最后一个取值。请看示例：

let obj = {
    name: 'name1',
    name: 'name2'
}
console.log(obj.name) // name2

新增方法

Object.is()

Object.is() 用于比较两个值

注：大部分情况与 === 运算符相同，除了下面两种情况：

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

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

Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，返回目标对象。请看示例：

let target = {}
Object.assign(target, {name: 'aaron', age: 18}, {age:19})
// { name: 'aaron', age: 19 }
console.log(target)

注：后者会覆盖前者，而且也不是深拷贝

Object.assign() 不能赋值访问器属性。请看示例：

// 由于Object.assign()执行的是赋值操作，因此提供者的访问器属性最终会转为接受对象的一个数据属性
let obj1 = {}
let obj2 = {
    get name(){
        return 'aaron'
    }
}
// 类似 obj1.name = obj2.name
Object.assign(obj1, obj2)
let desc1 = Object.getOwnPropertyDescriptor(obj1, 'name')
let desc2 = Object.getOwnPropertyDescriptor(obj2, 'name')
console.log(desc1.value) // aaron
console.log(desc2.value) // undefined - value 只在数据属性描述符中

自有属性枚举顺序

es6 中严格规定了对象自有属性被枚举时的返回顺序：

所有数字键按照升序排列
字符串按照它们被加入对象的顺序排列
Symbol键（后续会讲解）也按照它们被加入对象的顺序排列

let obj = {
    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1.1:1, // 非数字键
    1.0: 1 // 数字键
}
obj.d = 1
const result = []
for(let key in obj){
    result.push(key)
}
console.log(result.join('')) // 012acb1.1d

上面例子，虽然数字在字面量中的顺序时随意的，但在枚举时会被重新排列。

注：对于 for-in 循环，并非所有厂商都遵循相同的实现方式，因此仍未指定一个明确的枚举顺序。而 Object.keys() 和 JSON.stringify()都指明与 for-in 使用相同的枚举顺序，因此它们的枚举顺序目前也不明晰

改变对象的原型

es6 新增了 Object.setPrototypeOf() 方法来改变对象的原型。请看示例：

let people = {
    say: function(){
        console.log('你好')
    }
}
let dog = {
    say: function(){
        console.log('汪汪')
    }
}

let friend = Object.create(people)
friend.say() // 你好
Object.setPrototypeOf(friend, dog)
friend.say() // 汪汪

注：mdn 中提到，如果你关心性能，避免使用此方法。vue 2.x 对数组的变化侦测，就使用了此方法。

其他章节请看：

es6 快速入门系列

内容总结

以上是互联网集市为您收集整理的es6 快速入门系列 —— 对象全部内容，希望文章能够帮你解决es6 快速入门系列 —— 对象所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1012497.html

来源：【匿名】

【上一篇】深入浅出ES6的Symbol类型【下一篇】ES6系列之声明变量let与const

更多 ►

【es6 快速入门系列 —— 对象】教程文章相关的互联网学习教程文章

0x1 let和const letES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。{let x = 10;var y = 20; }x // ReferenceError: x is not defined y // 20 var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。console.log(x) // undefined，var声明变量之前可以使用该变量var x = 10; 而let不会这样，let声明的变量不能在声明之前使用。console.log(x) // ReferenceError: ...

30分钟快速入门掌握ES6/ES2015的核心内容（上）【图】

前言 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前，我们得先了解下Babel。Babel Babel是一个广泛使用的ES6转码器，...

30分钟快速入门掌握ES6/ES2015的核心内容（下）

前言在 30分钟掌握ES6/ES2015核心内容（上）我们讲解了es6最常用的一些语法：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 俗话说打铁要趁热，今天我们继续讲es6其他几个非常有用的新特性。 import export这两个家伙对应的就是es6自己的module功能。我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖...

VueES6JadeScssWebpackGulp快速入门资源【图】

一直以来非常庆幸曾经有翻过《代码大全2》；这使我崎岖编程之路少了很多不必要的坎坷。它在软件工艺的话题中有写到一篇：“首先是为人写程序，其次才是机器(Write Programs for People First, Computers Second)”。虽然这是针对代码可读性来谈及的，但这间接昭示了开发效率之重要不是？此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套强大组合来改善团队前端工作流，首因即出于这个理念。 Vue ES6 Jade Scss Webpa...

javascript es6 语法快速入门【代码】

1. let、const作用：let 声明变量，const 声明常量与 var 的区别：不能重复声明，且存在块级作用域，即只在代码块内生效 2. 箭头函数使用：let show = function (a, b) {return a + b; } alert(show(5, 3))　　//结果为8let show = (a, b) => {return a + b; } alert(show(5, 3))　　//结果为8　　当函数只有一个参数时，可以省略圆括号；当函数体内只有一条return语句时，可以省略函数体let score = [19, 78, 90, 32, 12, 88] l...

es6 快速入门系列 —— Symbol【代码】

其他章节请看： es6 快速入门系列Symbol es6新增的一种原始类型试图解决的问题唯一的属性名给对象新增一个属性，如何保证这个属性名是独一无二的？更改 instanceof 的运行方式 function People(){} let p1 = new People(); console.log(p1 instanceof People) // true如何让上面例子中的 instanceof 返回false？解决的方法唯一的属性名 es6引入 Symbol 来解决对象新增属性名唯一性的问题，可以通过全局的 Sysbol 函数创建一...