ECMAScript6基础学习教程(五)对象
时间:2022-07-25
本文章向大家介绍ECMAScript6基础学习教程(五)对象,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
ES6在处理对象上,又添加了新方法。
1. 属性简洁写法
当属性名和属性值变量同名时,ES6允许在对象中只写属性名,不写属性。 关键点有两个:
- 属性值为变量
- 属性值变量名==属性名
例如:
var foo = "abc";
var obj = {
name: 'nicole',
foo
}; //相当于是 var obj = {foo: foo}
如果属性值是函数,可以省略关键字function
,如下:
var obj = {
say(name) {
return "hello, " + name;
}
}
//等价于
var obj = {
say: function (name) {
return "hello, " + name;
}
}
2. 属性名表达式
ES5中,使用字面量方式定义对象时,属性名不能是变量。ES6中可以支持变量/表达式格式的属性名,格式为[propertyName]
。
var key = "property name";
var a = "hello";
var b = "world";
var obj = {
[key]: 1,
name: "nicole",
[a+" "+b]: "good"
};
obj["property name"]; //1
obj["hello world"]; //"good"
注意:“属性简洁写法”和“属性名表达式”不能同时使用。
3. Object.is()
Object.is(val1, val2)
用于判断两个值是否严格相等,用===
判断。
注意:我们知道NaN===NaN
会返回false
,但是Object.is(NaN, NaN)
,返回true
。
4. Object.assign()
Object.assign(target, object1 [,objectN])
用于对象拷贝,将对象object1...
复制到对象target
中。
Object.assign()
是浅拷贝,类似jQuery.extend( false, target, object1 [, objectN ] )
。
var obj1 = {a: {b:1}, x: 1};
var obj2 = {x: 3, y: 4};
var target = {};
Object.assign(target, obj1, obj2);
// 改变复制源对象的值
obj1.a.b = 11;
// 复制对象同步改变,说明复制的仅仅是源对象引用地址
console.log(target); // { a: { b: 11 }, x: 3, y: 4 }
小结
最常用的是“属性简洁写法”和“属性名表达式”。
做对象拷贝时,除了Object.assign()
,更简便的方法是使用“扩展运算符”(参考上一节文章ECMAScript6基础学习教程(四)函数 - 扩展运算符)。
例子如下:
var obj1 = {a: {b:1}, x: 1};
var obj2 = {x: 3, y: 4};
var target = {...obj1, ...obj2};
// 改变复制源对象的值
obj1.a.b = 11;
// 复制对象同步改变
console.log(target); // { a: { b: 11 }, x: 3, y: 4 }
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法