《深入理解ES6》之扩展对象的功能性

属性初始值的简写

  当一个对象的属性与本地变量同名时,不必再写冒号和值,简单地只写属性名即可。

function createPerson(name,age){
    return {
        name,
        age
    };
}
//相当于
function createPerson(name,age){
    return {
        name:name,
        age:age
    };
}

对象方法的简写

  ES6中对对象字面量定义方法的语法进行了改进,消除了冒号和function关键字。

var person={
    name:"jiaxiaonuo",
    age:24,
    sayName(){
        console.log(this.name);
    }
};
//相当于
var person={
    name:"jiaxiaonuo",
    age:24,
    sayName:function(){
        console.log(this.name);
    }
};

可计算属性名

  在ES5及早期版本的对象实例中,如果想要通过计算得到属性名,就需要用方括号代替点记法。有些包括某些字符的字符串字面量作为标识符会出错,其和变量放在方括号中都是被允许的。在ES6中,可在对象字面量中使用可计算属性名称,其语法与引用对象实例的可计算属性名称相同,也是使用方括号。

let lastName="last name";
let person={
    "first name":"jia",
    [lastName]:"xiaonuo"
};
console.log(person["first name"]);//"jia"
console.log(person[lastName]);//"xiaonuo"

Object.is()方法

  由于全等运算符(===)在判断NaN===NaN的返回值为false,同时判断+0===-0时返回值为true。而正常情况下,这两个判断结果是恰恰相反。这时使用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()方法

  混合(Mixin)方法中,一个对象接收来自另一个对象的属性和方法。任何使用mixin()方法的地方都可以直接使用Object.assign()方法来替换,同时Object.assign()方法可以接受任意数量的源对象,并按指定的顺序将属性复制到接收对象中。

var receiver={};
Object.assign(receiver,
     {
        type:"js",
        name:"file.js"
     },
    {
        type:"css"
    }
);
console.log(receiver.type);//"css"
console.log(receiver.css);//"file.js
 

重复的对象字面量属性

  ES5严格模式中加入对象字面量重复属性的校验,当同时存在多个同名属性时会抛出错误。在ES6中重复属性检查被移除,一旦出现重复属性,都会选择最后一个取值。

“use strict”

var person={
    name:"jia",
    name:"nuo"
};

console.log(person.name);//"nuo"

自有属性枚举顺序

  1.所有数字键按升序排序。

  2.所有字符串键按照他们被加入对象的顺序排序。

  3.所有symbol键按照他们被加入对象的顺序排序。

var obj ={
    a:1,
    0:1,
    c:1,
    2:1,
    b:1,
    1:1
};
obj.d=1;
console.log(Object.getOwnPropertyNames(obj).join(""));//"012acbd"

Object.setPrototypeOf()方法

  该方法可以任意指定对象的原型,他接受两个参数:被改变圆形的对象和替代第一个参数原型的对象。

let person={
    getGreeting(){
        return "hello";
    }
};
let dog={
    getGreeting(){
        return "woo";
    }
};

let friend=Object.create(person);
console.log(friend.getGreeting());//"hello"
console.log(Object.getPrototypeOf(friend)===person);//true

Object.setPrototypeOf(friend,dog);
console.log(friend.getGreeting());//"woo"
console.log(Object.getPrototypeOf(friend)===dog);//true

super可以简化原型访问

  必须在使用简写方法的对象中使用super引用,但如果在其他方法声明中使用会导致语法错误。

let person={
    getGreeting(){
        return super.getGreeting()+"hi!";
    }
};
//相当于

let person={
    getGreeting(){
        return Object.getPrototypeOf(this).getGreeting.call(this)+",hi!";

  

时间: 2024-12-07 07:56:08

《深入理解ES6》之扩展对象的功能性的相关文章

深入理解ES6 pdf

下载地址:网盘下载 目录  · · · · · · 第1章 块级作用域绑定 1var声明及变量提升(Hoisting)机制 1块级声明 3-- let声明 3-- 禁止重声明 4-- const声明 4-- 临时死区(Temporal Dead Zone) 6循环中的块作用域绑定 7-- 循环中的函数 8-- 循环中的let声明 9-- 循环中的const声明 10全局块作用域绑定 12块级绑定最佳实践的进化 13小结 13第2章 字符串和正则表达式 14更好的Unicode支持 14-- UT

ES6中对对象的扩展

ES6允许直接写入变量和函数作为对象的属性和方法.这样的书写更加简洁. ES6允许在对象中只写属性名,不写属性值.这时,属性值等于属性名所代表的变量. function f(x , y){ return {x ,y}; } f(1,2)// Object {x:1,y:2} function getPoint(){ var x=1; var y=10; return {x,y}; } getPoint()//{x:1,y:10} js语言定义对象的属性有两种方法.obj.foo=true;obj

ES6函数扩展

前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES5的基础上进行了许多改进,使用JS编程可以更少出错,同时也更加灵活.本文将详细介绍ES6函数扩展 形参默认值 Javascript函数有一个特别的地方,无论在函数定义中声明了多少形参,都可以传入任意数量的参数,也可以在定义函数时添加针对参数数量的处理逻辑,当已定义的形参无对应的传入参数时为其指定一个

ES6数组扩展

前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩展 创建数组 在ES6以前,创建数组的方式主要有两种,一种是调用Array构造函数,另一种是用数组字面量语法,这两种方法均需列举数组中的元素,功能非常受限.如果想将一个类数组对象(具有数值型索引和length属性的对象)转换为数组,可选的方法也十分有限,经常需要编写额外的代码.为了进一步简化JS数组

ES6正则表达式扩展

前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES6正则表达式扩展 构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) var regex = new RegExp('xyz', 'i'); // 等价于 var regex = /xyz/i; 第二种情况是

理解ES6的模块(Understanding ES6 Modules)

理解ES6的Modules 原文出处: Understanding ES6 Modules. 基础(Basic) 在ES6中,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的, 除非你显示的使用export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个. ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export. 相似的, 如果想要使用来自另外一个模块中的变量,

理解 ES6 Generator-next()方法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>generator-next</title> 6 </head> 7 <body> 8 9 <h3>理解 ES6 Generator-next() 方法</h3> 10 11 <scr

ES6的Reflect对象

Reflect对象的方法与Proxy对象的方法一一对应,只要proxy对象上有的方法reflect也能找到. ES6将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法.如:Object.defineProperty. Reflect一共有13个静态方法: Reflect.apply(target, thisArg, args) Reflect.construct(target, args) Reflect.get(target, name,

正确理解DTO、值对象和POCO

今天推荐的文章比较技术化也比较简单,但是对于一些初学者而言,可能也是容易搞混的概念:就是如何理解DTO.值对象和POCO之间的区别. 所谓DTO就是数据传输对象(Data Transfer Object),POCO就是简单CLR对象(Plain Old CLR Object),概念来源于Java中的POJO:不过值对象(Value Object)并非.NET中的值类型(Value Type)的实例对象,而是领域驱动设计(Domain-Driven Design,DDD)中的概念.那么这三者是什么