ES6 对象
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())上面的示例定义了一个对象person。该对象具有三个属性。第三个属性是一个函数。
在成功执行上述代码时显示以下输出。
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()的特殊构造函数来构建对象。新运算符用于创建对象的实例。要创建一个对象，新的运算符后跟构造函数方法。
以下是定义对象的语法。
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
对象中未分配(值)的属性是undefined。
例子
var myCar = new Object(); myCar.make = "Ford"; console.log(myCar["model"])
在成功执行上述代码时显示以下输出。
undefined
注意:对象属性名可以是任何有效的字符串，或可以转换为字符串的任何内容，包括空字符串。但是，任何不是有效的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—用new关键字创建对象实例。
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)上面的示例使用函数构造函数来定义对象。
在成功执行上述代码时显示以下输出。
Ford 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，因为在操作符中找不到对象中的属性。
比较对象
在JavaScript中，对象是引用类型。两个不同的对象永远不相等，即使它们具有相同的属性。这是因为，他们指向一个完全不同的内存地址。只有那些共享相同引用的对象可以进行比较。
例子:不同的对象引用
var val1 = {name: "Tom"};
var val2 = {name: "Tom"};
console.log(val1 == val2) // return false
console.log(val1 === val2) // return false在上面的示例中，val1和val2是两个不同的对象，它们引用了两个不同的内存地址。因此，比较结果返回false。
例子:相同的对象引用
var val1 = {name: "Tom"};
var val2 = val1
console.log(val1 == val2) // return true
console.log(val1 === val2) // return true在上面的示例中，val1中的内容被分配给val2，即val1的引用与val2相同。因为，对象现在共享对属性的引用,val1和val2引用了相同的地址，所以比较结果返回true.
对象解构
术语解构是指打破实体的结构。JavaScript中的解构赋值语法使得可以从数组或对象提取数据到不同的变量。请看下面的示例。
例子
var emp = { name: 'John', Id: 3 }
var {name, Id} = emp
console.log(name)
console.log(Id)上述代码成功后得到如下输出
John 3
注意:要启用解构，请执行文件node as node – harmony_destructuring file_name.