广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6对象增加新的属性是什么
  • 275
分享到

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

ES6javascript 2022-11-22 23:11:07 275人浏览 安东尼
摘要

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。javascript 中对象是非常重要的数据结构,es6 对对象进行了极大的扩展,使用上也更加简洁。其中es6对象增加新的属性是“name”。对象方法的

教程操作环境: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 属性返回函数名(即方法名)

有两种特殊情况:

  • Function 构造函数创造的函数,name 属性返回 “anonymous”;

  • bind 方法创造的函数,name 属性返回 “bound” 加上原函数的名字。

(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对象增加新的属性是什么的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: es6对象增加新的属性是什么

本文链接: https://www.lsjlt.com/news/173512.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • es6对象增加新的属性是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。JavaScript 中对象是非常重要的数据结构,ES6 对对象进行了极大的扩展,使用上也更加简洁。其中es6对象增加新的属性是“name”。对象方法的 ...
    99+
    2022-11-22
    ES6 javascript
  • es6对象增加新的属性怎么使用
    今天小编给大家分享一下es6对象增加新的属性怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。es6对象增加新的属性是“...
    99+
    2023-07-04
  • css3新增属性是什么
    这篇文章主要介绍css3新增属性是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   一、css3新增边框属性   1、css3新增属性之border-color:为边框设置...
    99+
    2022-10-19
    css3
  • html5中新增加的属性与元素是什么
    本篇内容介绍了“html5中新增加的属性与元素是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    html5
  • es6 number对象的新增方法怎么用
    本文小编为大家详细介绍“es6 number对象的新增方法怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6 number对象的新增方法怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es6 num...
    99+
    2023-07-04
  • java对象动态增加属性怎么实现
    在Java中,对象的属性通常是在编译时确定的,无法在运行时动态地增加属性。然而,可以通过使用Java的反射机制来实现动态增加属性的效...
    99+
    2023-10-12
    java
  • html5新增的属性和废除的属性是什么
    小编给大家分享一下html5新增的属性和废除的属性是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! HTML5中,在新增加...
    99+
    2022-10-19
    html5
  • css3中新增的transition属性是什么
    这篇文章主要为大家展示了“css3中新增的transition属性是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中新增的transition属性是...
    99+
    2022-10-19
    css transition
  • JavaScript中对象属性和添加新属性的示例分析
    这篇文章主要为大家展示了“JavaScript中对象属性和添加新属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中对象属性和添加...
    99+
    2022-10-19
    javascript
  • CSS3新增的属性选择器是什么
    这篇文章主要介绍CSS3新增的属性选择器是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 元素的属性,我们都知道是什么。例如下面代码中type和value就是input元素的属...
    99+
    2022-10-19
    css3
  • ADO.NET DataAdapter对象属性是什么
    这篇文章主要介绍“ADO.NET DataAdapter对象属性是什么”,在日常操作中,相信很多人在ADO.NET DataAdapter对象属性是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ADO.N...
    99+
    2023-06-17
  • CSS3中属性选择器新增加了什么特性
    这篇文章主要介绍“CSS3中属性选择器新增加了什么特性”,在日常操作中,相信很多人在CSS3中属性选择器新增加了什么特性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3...
    99+
    2022-10-19
    css3
  • css增加下划线的属性是什么
    这篇文章主要介绍“css增加下划线的属性是什么”,在日常操作中,相信很多人在css增加下划线的属性是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css增加下划线的属性是什么”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
  • Vue之Vue.set动态新增对象属性的示例分析
    这篇文章给大家分享的是有关Vue之Vue.set动态新增对象属性的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。当我们给一个比如props中,或者data中被观测的对象添...
    99+
    2022-10-19
    vue vue.set
  • Java实例化对象添加属性的方法是什么
    Java实例化对象添加属性的方法是通过调用对象的setter方法来设置属性的值。setter方法是对象的一个公共方法,通常命名为se...
    99+
    2023-09-26
    Java
  • es6新加的特性是什么及怎么用
    这篇文章主要介绍“es6新加的特性是什么及怎么用”,在日常操作中,相信很多人在es6新加的特性是什么及怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6新加的特性是什...
    99+
    2022-10-19
    es6
  • javascript对象属性的特征是什么
    本篇内容介绍了“javascript对象属性的特征是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!对象特征:1、writable:可写w...
    99+
    2023-06-25
  • javascript对象属性值指的是什么
    这篇文章主要介绍了javascript对象属性值指的是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript对象属性值指的是什么文章都会有所收获,下面我们一起来...
    99+
    2022-10-19
    javascript
  • 新增的es6数据结构是什么
    本文小编为大家详细介绍“新增的es6数据结构是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“新增的es6数据结构是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2022-10-19
    es6
  • es6新增的遍历方法是什么
    这篇文章主要介绍es6新增的遍历方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 新增的遍历方法有:1、findIndex(),可遍历数组,查找匹...
    99+
    2022-10-19
    es6
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作