• 技术文章 >web前端 >前端问答

    es6对象增加新的属性是什么

    青灯夜游青灯夜游2022-11-21 15:55:07原创240

    es6对象增加新的属性是“name”。name属性可以获取对象上方法(函数)的名字,例“getName() {console.log(this.name);}”;函数直接调用name就会返回函数名,而字面量对象上的方法也是函数,因此也有name属性。如果对象的方法是一个Symbol值,那么name属性返回的是带中括号的Symbol的描述内容。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    JavaScript 中对象是非常重要的数据结构,ES6 对对象进行了极大的扩展,使用上也更加简洁。其中es6对象增加新的属性是“name”。

    对象方法的 name 属性

    你有没有想过怎么获取对象上方法的名字?ES6 增加了函数的 name 属性,函数直接调用 name 会返回函数名。字面量对象上的方法也是函数,因此也有 name 属性。如下实例:

    var person = {
      name: "Jack",
      getName() {
        console.log(this.name);
      },
    };
    
    person.getName.name // "getName"

    上面代码中,getName() 方法的 name 属性返回函数名(即方法名)

    有两种特殊情况:

    (new Function()).name // "anonymous"
    
    var doSomething = function() {
      // todo
    };
    doSomething.bind().name // "bound doSomething"

    如果对象的方法是一个 Symbol 值,那么 name 属性返回的是带中括号的 Symbol 的描述内容。

    const key1 = Symbol('description content');
    const key2 = Symbol();
    let obj = {
      [key1]() {},
      [key2]() {},
    };
    obj[key1].name // "[description content]"
    obj[key2].name // ""

    扩展知识:es6对象中属性的改进

    1、简洁的属性表达

    ES6 允许直接写入变量和函数,作为对象的属性和方法

    1.1 属性值简写

    在 ES5 中我们知道,在定义对象时属性的值是必须要写的,在 ES6 中规定,如果属性名和定义的变量名是一样的,就可以在对象中直接写这个变量名作为对象中的一项。如下:

    var name = 'imooc';
    
    // ES5
    var obj1 = {
      name: name,
    }
    // ES6
    var obj2 = {
      name,
    }

    上面代码中的 obj1 和 obj2 是一样的意思。变量 name 可以直接写在大括号中。这时,属性名就是变量名,属性值就是变量值。

    下面我们来看一个在函数中返回一个对象的实例:

    // ES5
    function getObj(x, y) {
      return {x: x, y: y};
    }
    // 等同于 ES6
    function getObj(x, y) {
      return {x, y};
    }
    
    getObj(1, 2) // {x: 1, y: 2}

    上面中的代码可以看出,在我们平常开发中,组装数据时是非常方便、有用的。

    1.2 对象中方法的简写

    除了属性可以简写,对象中的方法也是可以简写的,而且更加简洁明了。我们来看下面的例子:

    const name = '张三'
    // ES5
    var person = {
      name: name,
      getName: function() {
        console.log('imooc')
      }
    };
    
    // ES6
    var person = {
      name,
      getName() {
        console.log(this.name)
      }
    };
    console.log(person)	// {name: "imooc", getName: ƒ}

    上面的代码中,ES5 中定义一个对象上的方法时需要使用 function 关键字来定义,而 ES6 则直接省略了 冒号和 function 关键字。可以看出使用 ES6 这种简洁的方式更具表达力。

    在 Node 中进行模块导出时,这种方式更加方便。我们看下面的例子:

    var person = {};
    
    function getName () {
      return person.name
    }
    
    function setName () {
      person.name = '李四'
    }
    
    function clear () {
      person = {};
    }
    
    // ES5 写法
    module.exports = {
      getName: getName
      setName: setName,
      clear: clear
    };
    // ES6写法
    module.exports = { getName, setName, clear };

    上面的代码中,我们定义了一个 person 对象,并向外暴露了若干方法用来操作 person 对象,在导出的时候可以看出,ES6 不需要重复地去写变量名,从而更简洁地表达了模块所提供的方法。

    2、简洁的属性表达

    在 JavaScript 中定义对象的属性,一般有两种方法。如下:

    // 方法一
    obj.name = 'imooc';
    
    // 方法二
    obj['a' + 'ge'] = 7;

    上面的代码中,方法一直接使用标识符进行赋值操作,这是我们比较常用的赋值操作,但是如果属性是一个表达式时,则可以使用方法二,把表达式写在中括号中。

    但是在 ES5 定义字面量对象时不能使用表达式作为字面量对象的属性,只能通过第一种方式(标识符)来定义属性。

    var obj = {
      name: 'imooc',
      age: 7
    }

    ES6 对对象的属性进行了扩展,可以覆盖更多的场景,属性可以使用变量的形式来定义,如下:

    var key = 'name';
    var obj = {
      [key]: 'imooc',
      ['a' + 'ge']: 7
    }

    上面的代码中字面量对象中的属性是可以放在中括号中,中括号中的可以是变量,也可以是表达式。这无疑是扩展了属性的功能,使编程更加灵活。

    另外,属性也可以是一个带空格的字符串,在取值时在中括号中可以直接使用字符串,也可以使用变量。如下:

    var str = 'first name';
    var obj = {
      ['I love imooc']: 'ES6 Wiki',
      [str]: 'Jack'
    }
    console.log(obj['I love imooc'])	// ES6 Wiki
    console.log(obj[str])	// Jack
    console.log(obj['first name'])	// Jack

    表达式还可以用于定义对象上的方法名。

    var person = {
      name: 'Jack',
      ['get' + 'Name']() {
        console.log(this.name)
      }
    };
    console.log(person.getName())	// Jack

    注意 1: 属性名表达式与属性简洁表示,不能同时使用,会报错。

    // 报错
    var name = 'Jack';
    var age = 18;
    var person = { [name] };
    // Uncaught SyntaxError: Unexpected token '}'

    上面的代码会有语法错误

    注意 2: 属性名必须是字符串类型的,如果属性表达式是一个对象,则会先调 toString() 先将对象转为字符串,然后才进行使用。

    var key1 = {name: 'imooc'};
    var key2 = {age: 7};
    var obj = {
      [key1]: 'value content 1',
      [key2]: 'value content 2',
    }
    console.log(obj)	// {[object Object]: "value content 2"}

    上面代码中定义了两个变量都是对象类型的,在调用 toString() 时会变为 [object Object] 属性相同。所以,后面的属性把前面的覆盖了。

    注意 3: 如果属性的表达式是数组时,则和对象不一样。数组在 toString() 后会变成一个字符串,所以对象属性的表达式就是一个字符串。

    var keys = ['imooc', '7'];
    var obj = {
      [keys]: 'value content',
    }
    console.log(key.toString())	// "imooc,7"
    console.log(obj)		// {imooc,7: "value content"}
    console.log(obj[keys])	// "value content"

    上面的代码中可以看出来,数组 keys 在 toString() 得到了 imooc,7 作为 obj 的属性。另外,我们也可以直接使用 keys 获取 obj 对象上的值。

    【推荐学习:javascript视频教程

    以上就是es6对象增加新的属性是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:ES6 javascript
    上一篇:es6增强了哪些功能 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 一文详解es6中的模块化• es6 map有序吗• es6怎么替换数组中指定元素• class是es5还是es6• await是es6还是es7的
    1/1

    PHP中文网