[ES6] 细化ES6之 -- 对象的扩展

对象的属性

属性表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

ES5

let name = "张无忌";
function sayMe() {console.log("this is 张无忌");
}
// ES5定义对象的属性和方法的方式
var obj = {name:name,// 第二个name表示变量名sayMe:sayMe,// //第二个sayMe表示函数名
};
console.log(obj.name); //张无忌

ES6

let name = "张无忌";
function sayMe() {console.log("this is 张无忌");
}
// ES6允许将变量名和函数名直接作为对象的属性和方法的方式
var obj = {name,sayMe,
};
console.log(obj.name); //张无忌

Object的方法

Object.is()的方法

ESt 5比较两个值是否相等，使用的是相等运算符( = = )和全等运算符( = = = )。但这两个运算符在使用时都具有缺点:

相等运算符在比较之前，会自动转换数据类型。
全等运算符导致NaN与自身不等，+0等于-0等问题。

ES6提出了同值相等( Same - value equality )算法来解决以上问题。Objectis() 方法就是对同值相等算法的具体实现。.

// ES5 .
console.log(+0 === -0);// true
console. log(NaN === NaN);// false
// ES6
console. log(Object.is(+0,-0));// false
console. log(Object. is(NaN,NaN)) ;// true

Object.assign()的方法

用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

Object.assign(target,...sources)

target:目标对象。
sources:源对象。
返回值:目标对象。

var obj = {name: "张无忌",age: 18,
};var target = {};
let result = Object.assign(target, obj);
console.log(result, target); // { name: '张无忌', age: 18 } { name: '张无忌', age: 18 }target.name = '周芷若'
console.log(obj.name);// 张无忌

Object.assign()方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

super关键字

用于指向当前对象的原型对象。

function Hero() {this.name = "张无忌";this.sayMe = function () {console.log(this.name);// Hero {}};
}
Hero.prototype.age = 18;
var hero = new Hero();
hero.sayMe();
hero.sayYou = function () {console.log(this.age);
};
hero.sayYou();var prop = {age: 18,
};
var obj = {name: "张无忌",sayMe() {console.log(super.age); // prop.age},
};Object.setPrototypeOf(obj, prop);
obj.sayMe();

super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

对象的扩展运算符

对象的扩展运算符(…)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

var obj = {name: "张无忌",age: 18,
};
// 将元对象的可枚举的属性复制到目标对象。
var target = { ...obj };
console.log(target); // { name: '张无忌', age: 18 }

[ES6] 细化ES6之 -- 对象的扩展相关推荐

[ES6] 细化ES6之 -- Promise对象
Promise对象是什么 Promise对象是什么 ES6新增了Prormnise对象,该对象允许对延迟和异步操作流程进行控制.一个Promise对象就是一个代表了异步操作最终完成或者失败的对象. 开 ...
[ES6] 细化ES6之 -- 函数的扩展
函数参数的默认值函数参数指定状认值 ES6 之前,不能直接为函数的参数指定默认值,如果定义了形参,不传递实参时导致形参为undefined,只能采用变通的方法. //ES5 function fn( ...
[ES6] 细化ES6之 -- 数组的扩展
扩展运算符扩展运算符扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列.允许一个表达式在原地展开 // 定义一个数组 var arr ...
[ES6] 细化ES6之 -- 字符串的扩展
判断是否包含都区分大小写 includes()方法返回布尔值,表示是否找到了参数字符串 let str = 'hebei baodingshi lianchiqu' console.log(str ...
[ES6] 细化ES6之 -- Class关键字
类的声明类是什么类作为对象的模板,只是一个语法糖 class 关键字是让对象原型的写法更加清晰.更像面向对象编程的语法而已. // ES5创建构造函数 function Hero() {this. ...
[ES6] 细化ES6之 -- 迭代器与生成器
Symbol Symbol是什么 ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值 Symbol 值通过Symbol函数生成 let symbol = Symbol(); consol ...
[ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象本质上,这种写法属于"模式 ...
[ES6] 细化ES6之 -- ECMA6是什么
ECMA6是什么 JavaScript 语言的下一代标准 ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. ECMAScript 和 JavaS ...
[ES6] 细化ES6之 -- 前端模块化
前端模块化前言前端开发领域发展到目前阶段: 零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的) 降低生产成本 – 多人协作(每个人各司其职) 降低使用成本 - 各个零件之间是低耦合的 ...