ECMAscript新特性对象介绍

 更新时间:2021年12月02日 12:04:28   投稿:hqx  
这篇文章主要介绍了ECMAscript新特性对象,对象(object)是JavaScript最重要的数据结构。ECMAScript 2015对它进行了重大升级,下面我们来看一下它的改变

1.对象的属性

1.1属性表示法

ECMAScript 2015允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

示例代码如下所示:

let name = '一碗周'
let job = '前端攻城狮'

// 属性表示法 直接写入变量
let obj1 = {
  name,
  job,
  sayMe() {
    console.log(name)
  }
}
// 等同于 
let obj2 = {
  name: name,
  job: job,
  sayMe: function() {
    console.log(name)
  }
}
console.log(obj1, obj2);

2.计算属性名

JavaScript中,我们定义属性时,有两种方式:中括号[]或.的方式:

// 方法一
obj.foo = true;
// 方法二
obj['a'+'bc'] = 123;


.运算符具有很大的局限性,比如first name这种属性只能通过中括号的方式来定义。中括号的方式允许我们使用变量或者在使用标识符时会导致语法错误的字符串直接量来定义属性。

例如:

let person = {},
  lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";
console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

这两种方式只能通过中括号的方式来定义的。在ES5中,你可以在对象直接量中使用字符串直接量作为属性,例如:

let person = {
  "first name": "Nicholas"
};
console.log(person["first name"]);      // "Nicholas"


但是当我们的属性名存在一个变量中或者需要计算时,使用对象直接量是无法定义属性的。

在ES5之前,如果属性名是个变量或者需要动态计算 ,则只能通过 对象.[变量名] 的方式去访问。

let p = {
  name : '李四',
  age : 20
}
let attName = 'name';
console.log(p[attName]) //这里 attName表示的是一个变量名。
// 李四

而且这种动态计算属性名的方式 在字面量中 是无法使用的。

let attName = 'name';
  let p = {
    attName : '李四',  // 这里的attName是属性名,相当于各级p定义了属性名叫 attName的属性。
    age : 20
  }
console.log(p[attName])  // undefined


ECMAScript 2015中,把属性名用[ ]括起来,则括号中就可以引用提前定义的变量。

let attName = 'name';
  let p = {
    [attName] : '李四',  // 引用了变量attName。相当于添加了一个属性名为name的属性
    age : 20
  }
console.log(p[attName])  // 李四


在对象直接量中的中括号表明属性名是需要被计算的,它的内容被计算为字符串

3.Object 的方法

3.1Object.is() 方法

ECMAScript 2015比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。

  • 但是这两个运算符都具有缺点
  • 使用相等运算符的时候,会自动转换数据类型

全等运算符会导致NaN不等于自身,以及+0等于-0。

ECMAScript 2015提出 “Same-value equality ”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

语法结构如下所示:

Object.is(value1, value2);


参数说明:

  • value1:被比较的第一个值。
  • value2:被比较的第二个值。

返回一个布尔值。

示例代码如下所示:

console.log(+0 === -0); //true
console.log(NaN === NaN); // false

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

3.2Object.assign()方法

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象 。

语法结构如下所示:

Object.assign(target, ...sources)


参数说明:

  • target :目标对象
  • sources :源对象

值得注意的是,如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

示例代码如下所示:

let sources = {
  name: '一碗周',
  job: '前端攻城狮'
}
let target = {}
// 使用 assign() 方法所有可枚举属性的值从一个或多个源对象分配到目标对象。
Object.assign(target, sources)
console.log(target);
// 验证是否为深复制
target.name = '一碗粥'
console.log(target, sources); //{ name: '一碗周', job: '前端攻城狮' } { name: '一碗粥', job: '前端攻城狮' }


4.super 关键字

我们知道,this关键字总是指向函数所在的当前对象,ECMAScript 2015又新增了另一个类似的关键字super,指向当前对象的原型对象。

// 定义一个要作为原型对象的对象
const proto = {
  v: 'Hello'
}
// 定义一个对象
const obj = {
  v: 'World',
  printV1() {
    console.log(this.v);
  },
  // 使用 super 关键字
  printV2() {
    console.log(super.v);
  }
}
// 将obj 对象的原型修改为 prtot
Object.setPrototypeOf(obj, proto)
// this 的用法
obj.printV1() // World
// super 的用法
obj.printV2() // Hello


值得注意的是,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。目前,只有对象方法的简写法可以让JavaScript引擎确认,定义的是对象的方法。

5.对象的扩展运算符

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

示例代码如下所示:

// 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let obj = {
  name: '一碗周',
  job: '前端攻城狮'
}
let newObj = {
  ...obj
}
console.log(newObj); // { name: '一碗周', job: '前端攻城狮' }
// 验证是否为深复制
newObj.name = '一碗粥'
console.log(obj, newObj); // { name: '一碗周', job: '前端攻城狮' } { name: '一碗粥', job: '前端攻城狮' }


由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。

let arr = [1, 2, 3, 4, 5]
let obj = {
  ...arr
}
console.log(obj); // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }


如果扩展运算符后面不是对象,则会自动将其转为对象。

console.log(
  {
  ...1 // 等同于 {...Object(1)}
  }
); // {}
console.log(
  {
  ...true // 等同于 {...Object(true)}
  }
); // {}
console.log(
  {
  ...undefined // 等同于 {...Object(undefined)}
  }
); // {}
console.log(
  {
  ...null // 等同于 {...Object(null)}
  }
); // {}

到此这篇关于ECMAscript新特性对象介绍的文章就介绍到这了,更多相关ECMAscript 对象介绍内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序调用摄像头隐藏式拍照功能

    这篇文章主要介绍了微信小程序调用摄像头隐藏式拍照功能,本文给大家带来了解决方法、官网代码和小编写的比较完整代码,需要的朋友可以参考下
    2018-08-08
  • JS判断是否360安全浏览器极速内核的方法

    JS判断是否360安全浏览器极速内核的方法

    这篇文章主要介绍了JS判断是否360安全浏览器极速内核的方法,对比分析了360安全浏览器极速内核与其他主流浏览器内核的区别及对应的判断技巧,需要的朋友可以参考下
    2015-01-01
  • js使用DOM操作实现简单留言板的方法

    js使用DOM操作实现简单留言板的方法

    这篇文章主要介绍了js使用DOM操作实现简单留言板的方法,涉及javascript中DOM操作的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • javascript闭包的理解和实例

    javascript闭包的理解和实例

    所谓闭包,值得是词法表示包括不必要计算的变量的函数,也就是说,该函数可以使用函数外定义的变量。
    2010-08-08
  • 详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑

    详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑

    这篇文章主要介绍了详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Webpack完整打包流程实现

    Webpack完整打包流程实现

    Webpack是当下流行的JavaScript静态模块打包器,它能够处理应用中的所有资源文件,并将其打包成浏览器兼容的文件,本文就来介绍一下Webpack完整打包流程实现,感兴趣的可以了解一下
    2024-09-09
  • file模式访问网页时iframe高度自适应解决方案

    file模式访问网页时iframe高度自适应解决方案

    最近做到iframe的高度自适应这个问题;发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法:果然网页高度能够自适应(对于其他方案应该也有效果,我没有注意去尝试)感兴趣的朋友可以了解下
    2013-01-01
  • javascript跨域原因以及解决方案分享

    javascript跨域原因以及解决方案分享

    这篇文章主要介绍了javascript跨域原因以及解决方案分享,十分的细致全面,有需要的小伙伴可以参考下。
    2015-04-04
  • bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

    bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

    这篇文章主要为大家详细介绍了bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 详解CocosCreator MVC架构

    详解CocosCreator MVC架构

    这篇文章主要介绍了CocosCreator MVC架构,同学们在制作游戏过程中,尽量使用一些架构,会避免很多问题
    2021-04-04

最新评论