ES6 - 对象

JavaScript支持扩展数据类型. JavaScript对象是定义自定义数据类型的好方法.

对象是一个包含一组键值对的实例.与原始数据类型不同，对象可以表示多个或复杂的值，并且可以在其生命周期内进行更改.值可以是标量值或函数，甚至是其他对象的数组.

进一步讨论定义对象的语法变体.

对象初始化器

与基本类型一样，对象具有文字语法:花括号({和}).以下是定义对象的语法.

var identifier = {   Key1:value, Key2: function () {       //functions    },    Key3: ["content1"," content2"] }

对象的内容称为属性(或成员)，属性由名称(或键)和值组成.属性名称必须是字符串或符号，值可以是任何类型(包括其他对象).

与所有JavaScript变量一样，对象名称(可以是普通变量)和属性名称区分大小写.您可以使用简单的点表示法访问对象的属性.

以下是访问对象属性的语法.

objectName.propertyName

示例:对象初始值设定项

var person = {    firstname:"Tom",    lastname:"Hanks",    func:function(){return "Hello!!"},    }; //access the object values console.log(person.firstname)   console.log(person.lastname) console.log(person.func())

上面的示例定义了一个对象人物.该对象有三个属性.第三个属性是指函数.

成功执行上述代码后会显示以下输出.

Tom Hanks Hello!!

在ES6中，指定与属性名称匹配的属性值，可以省略属性值.

示例

var foo = 'bar' var baz = { foo } console.log(baz.foo)

上面的代码片段定义了一个对象 baz .该对象具有属性 foo .这里省略了属性值，因为ES6隐式地将变量foo的值赋给对象的键foo.

以下是上述代码的ES5等价物.

var foo = 'bar' var baz = { foo:foo } console.log(baz.foo)

成功执行上述代码后会显示以下输出.

bar

使用这种简写语法，JS引擎在包含范围内查找具有相同名称的变量.如果找到，则将该变量的值分配给该属性.如果未找到，则抛出引用错误.

Object()构造函数

JavaScript提供了一个名为 Object的特殊构造函数()构建对象. new运算符用于创建对象的实例.要创建一个对象，new运算符后面跟着构造函数方法.

以下是定义对象的语法.

var obj_name = new Object(); obj_name.property = value;    OR             obj_name["key"] = value

以下是访问属性的语法.

Object_name.property_key                    OR              Object_name["property_key"]

示例

var myCar = new Object(); myCar.make = "Ford"; //define an object myCar.model = "Mustang"; myCar.year = 1987;  console.log(myCar["make"]) //access the object property console.log(myCar["model"]) console.log(myCar["year"])

成功执行上述代码后会显示以下输出.

Ford Mustang 1987

未定义对象的未分配属性.

示例

var myCar = new Object(); myCar.make = "Ford"; console.log(myCar["model"])

成功执行上述代码后会显示以下输出.

undefined

注意 : 对象属性名称可以是任何有效的JavaScript字符串，也可以是可以转换为字符串的任何内容，包括空字符串.但是，任何不是有效JavaScript标识符的属性名称(例如，具有空格或连字符的属性名称，或以数字开头的属性名称)只能使用方括号表示法访问.

也可以使用存储在变量中的字符串值来访问属性.换句话说，对象的属性键可以是动态值.例如:一个变量.以下示例说明了上述概念.

示例

var myCar = new Object()  var propertyName = "make"; myCar[propertyName] = "Ford"; console.log(myCar.make)

成功执行上述代码后会显示以下输出.

  Ford

构造函数

一个对象可以是使用以下两个步骤创建 :

步骤1 : 通过编写构造函数来定义对象类型.

以下是相同的语法.

function function_name() {    this.property_name = value }

'this'关键字指的是当前使用的对象和定义对象的属性.

步骤2 : 使用新语法创建对象的实例.

var Object_name= new function_name() //Access the property value  Object_name.property_name

new关键字调用函数构造函数并初始化函数的属性键.

示例 : 使用函数构造函数

function Car() {    this.make = "Ford"    this.model = "F123" }  var obj = new Car() console.log(obj.make) console.log(obj.model)

上面的示例使用函数构造函数来定义对象.

成功执行上述代码后会显示以下输出.

 福特 F123

新物业总是可以被添加到先前定义的对象.例如，请考虑以下代码段和减号;

  function Car(){ this.make ="Ford"}  var obj = new Car() obj.model ="F123" console.log(obj.make) console.log(obj.model)

成功执行上述代码后会显示以下输出.

Ford F123

Object.create方法

也可以使用创建对象Object.create()方法.它允许您为所需的对象创建原型，而无需定义构造函数.

示例

var roles = {    type: "Admin", // Default value of properties    displayType : function() {        // Method which will display type of role       console.log(this.type);    } }  // Create new role type called super_role var super_role = Object.create(roles); super_role.displayType(); // Output:Admin  // Create new role type called Guest var guest_role = Object.create(roles); guest_role.type = "Guest"; guest_role.displayType(); // Output:Guest

上面的示例定义了一个对象-roles并设置了属性的默认值.创建两个新实例，覆盖对象的默认属性值.

成功执行上述代码后会显示以下输出.

Admin Guest

Object.assign()函数

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

以下是相同的语法.

Object.assign(target, ...sources)

示例 : 克隆对象

"use strict" var det = { name:"Tom", ID:"E1001" }; var copy = Object.assign({}, det); console.log(copy);  for (let val in copy) {    console.log(copy[val]) }

以下成功执行上述代码后显示输出.

 Tom  E1001

示例 : 合并对象

var o1 = { a: 10 }; var o2 = { b: 20 }; var o3 = { c: 30 }; var obj = Object.assign(o1, o2, o3); console.log(obj);  console.log(o1);

成功执行上述代码后会显示以下输出.

{ a: 10, b: 20, c: 30 } { a: 10, b: 20, c: 30 }

注意 : 与复制对象不同，当合并对象时，较大的对象不会维护属性的新副本.而是它保存对原始对象中包含的属性的引用.以下示例解释了这一概念.

var o1 = { a: 10 }; var obj = Object.assign(o1); obj.a++ console.log("Value of 'a' in the Merged object after increment  ") console.log(obj.a);  console.log("value of 'a' in the Original Object after increment ") console.log(o1.a);

成功执行上述代码后会显示以下输出.

Value of 'a' in the Merged object after increment 11  value of 'a' in the Original Object after increment 11

删除属性

您可以使用delete运算符删除属性.以下代码显示了如何删除属性.

示例

// Creates a new object, myobj, with two properties, a and b. var myobj = new Object; myobj.a = 5; myobj.b = 12; // Removes the ‘a’ property delete myobj.a; console.log ("a" in myobj) // yields "false"

成功执行上述代码后会显示以下输出.

false

代码片段从对象中删除属性.该示例打印为false，因为in运算符未在对象中找到该属性.

比较对象

在JavaScript中，对象是引用类型.两个不同的对象永远不会相等，即使它们具有相同的属性.这是因为，它们指向完全不同的内存地址.只有那些共享公共引用的对象在比较时才会生成true.

示例1 : 不同的对象引用

var val1 = {name: "Tom"}; var val2 = {name: "Tom"}; console.log(val1 == val2)  // return false console.log(val1 === val2)  // return false

在上面的示例中， val1 和 val2 是两个不同的对象，它们指向两个不同的内存地址.因此，在进行相等性比较时，运算符将返回false.

示例2 : 单个对象引用

var val1 = {name: "Tom"}; var val2 = val1  console.log(val1 == val2) // return true console.log(val1 === val2) // return true

在上面的例子中，val1中的内容被赋值给val2，即val1中属性的引用与val2共享.由于对象现在共享对属性的引用，因此对于引用两个不同内存地址的两个不同对象，相等运算符将返回true.因此，在比较相等时，运算符将返回false.

对象解构

术语解构指的是打破实体的结构. JavaScript中的解构赋值语法可以将数组或对象中的数据提取到不同的变量中.以下示例说明了相同的内容.

示例

var emp = { name: 'John', Id: 3 } var {name, Id} = emp console.log(name) console.log(Id)

成功执行上述代码后会显示以下输出.

John 3

注意 : 要启用解构，请在 节点中执行文件作为节点 -  harmony_destructuring file_name .