ES6学习教程之对象字面量详解

前言

本文主要给大家介绍了关于ES6对象字面量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

ECMAScript6使得声明对象字面量更加简单，提供了属性简写和方法简写功能，属性名计算的新特性。

function getInfo(name, age, weight) {
 return {
  // 如果属性名和属性值同名可以利用、es6的属性简写
  name, // 等同于 make: make
  age, // 等同于 model: model
  weight, // 等同于 value: value

  // ES6的属性名是可计算的
  ['over' + weight]: true,

  // 对象方法名简写可以省略 function 关键字
  descripte() {
   console.log(name, age, weight);
  }
 };
}

let person = getInfo('Kia', 27, 400);
console.log(person);// {name: "Kia", age: 27, weight: 400, over400: true, descripte: ƒ}

如果可以理解上述三个新特性，可以不必往下阅读。下面的文字仅提供给还有疑问的朋友。

属性简写

在 ES5及以前的版本中，对象字面量只支持键值对集合。实际业务中，对象字面量的初始化会有一定的代码重复。

//ES5
function createPeople(name, age) {
 return {
  name: name,
  age: age
 };
}

createPeople函数用来创建一个People的对象，可以看到上面的代码的 name和age分别书写了两次，有些麻烦。在ES6中通过使用属性简写特性可以消除这种属性名称和局部变量之间的重复书写,当对象的属性和变量同名时，可以不必再写冒号和值。

function createPeople(name, age) {
 return {
  name,
  age
 };
}

方法名简写

ES5中若为对象添加方法必须指定方法名称，并完整地定义函数来实现。

var people = {
 name: 'xixi',
 sayName: function () {
  console.log(this.name);
 }
};

ES6的语法更简洁，消除了冒号和方法名。

let people = {
 name: 'xixi',
 sayName() {
  console.log(this.name);
 }
};
people.sayName();// xixi

属性可计算

let lastName = 'last name';
let person = {
 [lastName]: 'yuan'
};
console.log(person[lastName]);// yuan

总结

对象字面量扩展的3个新特性介绍完毕，大家可以回到文章开头检查一下自己是否掌握了本小结内容。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 你必须知道的Javascript知识点之"字面量和对应类型"说明介绍

    你必须知道的Javascript知识点之"字面量和对应类型"说明介绍

    代码示例: 复制代码 代码如下: var date1 = new Date(2013,1,1); var date2 = new Date(2013,1,1); date1 == date2;  //执行结果为false date1 === date2;  //执行结果为false var num1 = new Number(10); var num2 = new Number(10); num1 == num2;  //执行结果为false num1 === num2;  //执行结果为fal

  • JavaScript 对象字面量讲解

    JavaScript 对象字面量讲解

    在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外.以下也是JavaScript字面量的例子,如5.true.false和null,它们分别表示一个整数.两个布尔值和一个空对象. JavaScript还支持对象和数组字面量,允许使用一种简洁而可读的记法来创建数组和对象.考虑以下语句,其中创建了一个包含两个属性的对象(firstName和lastName): 还可

  • Javascript对象字面量的理解

    对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的'.',以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来,如 var box = { name:'abc'; age:28 }; alert(box['name']); 给对象定义方法, A:如果用传统定义对象的方式,就需要先定义方法,然后再把这个方法名赋值给对象的一个属性,如果要调用这个方法不加括号,就是返回方法代码:如果要调用这个方法该对象属性后面加上括号,就得到方法的返回值 function objrun

  • JavaScript中用字面量创建对象介绍

    JavaScript中可以用字面量来直接创建一个新对象: 复制代码 代码如下: var obj = {a:27, "b":99}; 如上所述,在用字面量来创建对象的时候,对象中的property定义可以用单引号或双引号来包括,也可以忽略引号.不过,当property中出现空格.斜杠等特殊字符,或者使用的property与JS关键词冲突时,则必须使用引号. 在用字面量来创建对象的时候,property可以是空字符串,property中也可以出现空格: 复制代码 代码如下: //empty

  • javascript的数据类型、字面量、变量介绍

    数据类型: 1.数值型(整型int 浮点型floating) 2.字符串类型(string) 3.布尔型(只有两个值:ture fasle) 字符串字面量 1.转义系列: 在javascript中一些符号是辨别不出来的,只有转义之后正确显示出来.如: \' 单引号 \" 双引号 \n 换行符 \r 回车符 \\ 反斜杠 转义实例: 复制代码 代码如下: <script type="text/javascript"> document.write("hel

  • 浅谈js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal)和 对象字面量(object literal),另外还有函数字面量(function literal). 示例: var test="hello world!"; "hello world!"就是字符串字面量,test是变量名. 二:对象字面量 对象字面量有两种访问方式

  • JavaScript中字面量与函数的基本使用知识

    JavaScript 字面量 在编程语言中,一个字面量是一个常量,如 3.14. 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e). 3.14 1001 123e5 字符串(String)字面量 可以使用单引号或双引号 be written with double or single quotes: "John Doe" 'John Doe' 表达式字面量 用于计算: 5 + 6 5 * 10 数组(Array)字面量 定义一个数组: [40, 100, 1, 5

  • ES6学习教程之对象字面量详解

    前言 本文主要给大家介绍了关于ES6对象字面量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. ECMAScript6使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计算的新特性. function getInfo(name, age, weight) { return { // 如果属性名和属性值同名可以利用.es6的属性简写 name, // 等同于 make: make age, // 等同于 model: model weight, // 等同

  • ES6学习教程之对象的扩展详解

    一. 属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法.意思就是说允许在对象中只写属性名,不用写属性值.这时,属性值等于属性名称所代表的变量.下面分别举一个例子来说明: 属性: function getPoint(){ var x = 1 ; var y = 2; return {x,y} } 等同于 fucntion getPoint(x,y){ var x = 1 ; var y = 2; return {x:x,y:y} } 测试: getPoint();//{x:1,y

  • ES6学习教程之块级作用域详解

    ES6学习教程之块级作用域详解

    前言 众所周知ES5之前javascript语言只有函数作用域和全局作用域,使用var来声明变量,var声明的变量还存在变量提升使人困惑不已.我们先来复习一下ES5的var声明,再对比学习let和const . var var声明之函数作用域和全局作用域. 来段代码体会一下: function getName() { if (1 + 1 === 2) { var name = 'xixi'; } console.log(name); } getName();//xixi 在c或java语言中na

  • Go语言学习教程之反射的示例详解

    Go语言学习教程之反射的示例详解

    目录 介绍 反射的规律 1. 从接口值到反射对象的反射 2. 从反射对象到接口值的反射 3. 要修改反射对象,该值一定是可设置的 介绍 reflect包实现运行时反射,允许一个程序操作任何类型的对象.典型的使用是:取静态类型interface{}的值,通过调用TypeOf获取它的动态类型信息,调用ValueOf会返回一个表示运行时数据的一个值.本文通过记录对reflect包的简单使用,来对反射有一定的了解.本文使用的Go版本: $ go version go version go1.18 dar

  • ES6基础之 Promise 对象用法实例详解

    本文实例讲述了ES6基础之 Promise 对象用法.分享给大家供大家参考,具体如下: Promise 对象 1.Promise对象是ES6对异步编程的一种解决方案,它有以下两个特点: Promise对象代表一个异步操作,它只有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败),并且该状态不会受外界的影响 Promise对象的状态改变,只有两种可能:从 Pending 变为 Resolved 或者从 Pending 变为 Reje

  • Struts2学习教程之输入校验示例详解

    前言 数据校验几乎是每个应用都要做的工作.用户输入的数据,发送到服务器端,天知道用户输入的数据是否是合法的,是否为恶意输入.所以一个健壮的应用系统必须对用户的输入进行校验,将非法的输入阻止在应用之外,防止这些非法的输入进入系统,从而保证系统的稳定性.安全性. 我们都知道,为了更好的用户体验,以及更高的效率,现在的Web应用都存在以下两重数据校验: 客户端数据校验 服务器端数据校验 对于客户端数据校验主要是通过JavaScript代码来完成:而对于服务器端数据校验是整个应用阻止非法数据的最后防线,

  • 正则表达式学习教程之回溯引用backreference详解

    本文实例讲述了正则表达式回溯引用backreference.分享给大家供大家参考,具体如下: 在所有例子中正则表达式匹配结果包含在源文本中的[和]之间,有的例子会使用Java来实现,如果是java本身正则表达式的用法,会在相应的地方说明.所有java例子都在JDK1.6.0_13下测试通过. 一.问题引入 一个在HTML页面中匹配标题标签(H1-H6)的问题: 文本: <body> <h1>Welcome to my page</H1> Content is divid

  • JavaScript对象字面量和构造函数原理与用法详解

    本文实例讲述了JavaScript对象字面量和构造函数.分享给大家供大家参考,具体如下: 对象中只有两种属性:(一种比较细的分法) 属性(数据属性)比如:名字,年龄,性别,出版社,地址等信息: 方法(封装代码的属性:函数 ,在这也是一种属性). 在JS中对象的字面量和构造函数是非常的重点,其实在其他的语言中,是没有对象字面量的. 一.对象的字面量的语法: { 属性名: 属性值, 属性名: 属性值, 方法名: 你们函数 } 这个大括号括起来的整个代码块就是叫做对象. var p1 = { } ①访

  • 详解JS中的对象字面量

    前言 在 ES6 之前,js中的对象字面量(也称为对象初始化器)是非常基础的.可以定义两种类型的属性: 键值对{name1: value1} 获取器{ get name(){..} }和 设置器{ set name(val){..}}的计算属性值 var myObject = { myString: 'value 1', get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number

随机推荐