广告
返回顶部
首页 > 资讯 > 精选 >ES6对象有什么用
  • 155
分享到

ES6对象有什么用

2023-06-28 00:06:28 155人浏览 安东尼
摘要

这篇文章主要介绍了es6对象有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ES6全称 ECMAScript 6.0 ,是 javascript 的下一个版本标准,20

这篇文章主要介绍了es6对象有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

ES6全称 ECMAScript 6.0 ,是 javascript 的下一个版本标准,2015.06 发版,ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ES6对象有什么用

对象字面量

属性的简洁表示法

ES6允许对象的属性直接写变量,这时候属性名是变量名,属性值是变量值。

const age = 12;const name = "Amy";const person = {age, name};person   //{age: 12, name: "Amy"}//等同于const person = {age: age, name: name}

方法名也可以简写

const person = { sayHi(){   console.log("Hi"); }}person.sayHi();  //"Hi"//等同于const person = { sayHi:function(){   console.log("Hi"); }}person.sayHi();//"Hi"

如果是Generator 函数,则要在前面加一个星号:

const obj = { * myGenerator() {   yield 'hello world'; }};//等同于const obj = { myGenerator: function* () {   yield 'hello world'; }};

属性名表达式

ES6允许用表达式作为属性名,但是一定要将表达式放在方括号内。

const obj = {["he"+"llo"](){  return "Hi"; }}obj.hello();  //"Hi"

注意点:属性的简洁表示法和属性名表达式不能同时使用,否则会报错。

const hello = "Hello";const obj = {[hello]};obj  //SyntaxError: Unexpected token }const hello = "Hello";const obj = {[hello+"2"]:"world"};obj  //{Hello2: "world"}

对象的拓展运算符

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

基本用法

let person = {name: "Amy", age: 15};let someone = { ...person };someone;  //{name: "Amy", age: 15}

可用于合并两个对象

let age = {age: 15};let name = {name: "Amy"};let person = {...age, ...name};person;  //{age: 15, name: "Amy"}

注意点

自定义的属性和拓展运算符对象里面属性的相同的时候:自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。

let person = {name: "Amy", age: 15};let someone = { ...person, name: "Mike", age: 17};someone;  //{name: "Mike", age: 17}

自定义的属性在拓展运算度前面,则变成设置新对象默认属性值。

let person = {name: "Amy", age: 15};let someone = {name: "Mike", age: 17, ...person};someone;  //{name: "Amy", age: 15}

拓展运算符后面是空对象,没有任何效果也不会报错。

let a = {...{}, a: 1, b: 2};a;  //{a: 1, b: 2}

拓展运算符后面是null或者undefined,没有效果也不会报错。

let b = {...null, ...undefined, a: 1, b: 2};b;  //{a: 1, b: 2}

对象的新方法

Object.assign(target, source_1, ···)

用于将源对象的所有可枚举属性复制到目标对象中。

基本用法

let target = {a: 1};let object2 = {b: 2};let object3 = {c: 3};Object.assign(target,object2,object3);  // 第一个参数是目标对象,后面的参数是源对象target;  // {a: 1, b: 2, c: 3

如果目标对象和源对象有同名属性,或者多个源对象有同名属性,则后面的属性会覆盖前面的属性。 如果该函数只有一个参数,当参数为对象时,直接返回该对象;当参数不是对象时,会先将参数转为对象然后返回。

Object.assign(3); // Number {3} typeof Object.assign(3); // “object” 因为 null 和 undefined 不能转化为对象,所以会报错:

Object.assign(null);       // TypeError: Cannot convert undefined or null to objectObject.assign(undefined);  // TypeError: Cannot convert undefined or null to object当参数不止一个时,null 和 undefined 不放第一个,即不为目标对象时,会跳过 null 和 undefined ,不报错Object.assign(1,undefined);  // Number {1}Object.assign({a: 1},null);  // {a: 1}Object.assign(undefined,{a: 1});  // TypeError: Cannot convert undefined or null to object

注意点

assign 的属性拷贝是浅拷贝:

let sourceObj = { a: { b: 1}};let targetObj = {c: 3};Object.assign(targetObj, sourceObj);targetObj.a.b = 2;sourceObj.a.b;  // 2

同名属性替换

targetObj = { a: { b: 1, c:2}};sourceObj = { a: { b: "hh"}};Object.assign(targetObj, sourceObj);targetObj;  // {a: {b: "hh"}}

数组的处理

Object.assign([2,3], [5]);  // [5,3]

会将数组处理成对象,所以先将 [2,3] 转为 {0:2,1:3} ,然后再进行属性复制,所以源对象的 0 号属性覆盖了目标对象的 0。

Object.is(value1, value2)

用来比较两个值是否严格相等,与(===)基本类似。

基本用法

Object.is("q","q");      // trueObject.is(1,1);          // trueObject.is([1],[1]);      // falseObject.is({q:1},{q:1});  // false

与(===)的区别

//一是+0不等于-0Object.is(+0,-0);  //false+0 === -0  //true//二是NaN等于本身Object.is(NaN,NaN); //trueNaN === NaN  //false

感谢你能够认真阅读完这篇文章,希望小编分享的“ES6对象有什么用”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: ES6对象有什么用

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

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

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

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

下载Word文档
猜你喜欢
  • ES6对象有什么用
    这篇文章主要介绍了ES6对象有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ES6全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,20...
    99+
    2023-06-28
  • es6的map对象和原生对象有什么区别
    本篇内容主要讲解“es6的map对象和原生对象有什么区别”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6的map对象和原生对象有什么区别”吧! ...
    99+
    2022-10-19
  • ES6中怎么使用Promise对象
    这期内容当中小编将会给大家带来有关ES6中怎么使用Promise对象,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。在promise之前处理异步回调的方式function&...
    99+
    2022-10-19
  • 怎么使用es6合并对象
    这篇文章给大家分享的是有关怎么使用es6合并对象的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。合并对象在JavaScript中合并多个对象的需求一直存在, 比如在传参时需要把表单...
    99+
    2022-10-19
  • 怎么理解ES6对象
    这篇文章主要讲解了“怎么理解ES6对象”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解ES6对象”吧!对象字面量属性的简洁表示法ES6允许对象的属性直...
    99+
    2022-10-19
  • es6中promise对象的状态是什么
    这篇文章主要介绍“es6中promise对象的状态是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6中promise对象的状态是什么”文章能帮助大家解决问题...
    99+
    2022-10-19
  • ES6对象如何使用
    本篇内容介绍了“ES6对象如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、对象和属性和方法JavaScript中对象:var&nb...
    99+
    2023-06-30
  • es6有没有遍历对象的方法
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。es6遍历对象的6种方法(1)for...infor...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。const obj = {...
    99+
    2022-11-22
    javascript ES6
  • js对象有什么用
    小编给大家分享一下js对象有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript作为一个基于对象(没有类的概...
    99+
    2022-10-19
  • es6有遍历对象的方法吗
    今天小编给大家分享一下es6有遍历对象的方法吗的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。有,遍历方法:1、“for......
    99+
    2023-07-04
  • 怎么理解ES6 Promise对象
    这篇文章主要讲解了“怎么理解ES6 Promise对象”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解ES6 Promise对象”吧!概述是异步编程的...
    99+
    2022-10-19
  • ES6中对象怎么简写
    这篇文章将为大家详细讲解有关ES6中对象怎么简写,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。对象的简写let name = 'zh...
    99+
    2022-10-19
  • es6对象增加新的属性是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。JavaScript 中对象是非常重要的数据结构,ES6 对对象进行了极大的扩展,使用上也更加简洁。其中es6对象增加新的属性是“name”。对象方法的 ...
    99+
    2022-11-22
    ES6 javascript
  • es6遍历对象的方法有哪些
    这篇文章主要介绍了es6遍历对象的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6遍历对象的方法有哪些文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • Javascript ES6中对象类型Sets怎么用
    这篇文章主要介绍Javascript ES6中对象类型Sets怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!介绍ECMAScript 6(以下简称ES6)是JavaScript...
    99+
    2022-10-19
  • es6中map对象的遍历方法是什么
    这篇“es6中map对象的遍历方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es...
    99+
    2022-10-19
  • es6对象解构赋值的方法是什么
    ES6对象解构赋值的方法是通过使用花括号({})来提取对象中的属性,并将其赋值给变量。具体方法为:```javascriptcons...
    99+
    2023-10-09
    es6
  • es6数组对象怎么去重
    ES6中可以使用Set和Array.from()方法来进行数组对象的去重。方法一:使用Set去重```let arr = [{id:...
    99+
    2023-10-09
    es6
  • es6怎么实现对象拷贝
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。在理解对象的深拷贝和浅拷贝之前我们首先要知道JavaScript的数据类型,JavaScript包含两大数据类型,基本数据类型和引用数据类型。基本数据类型...
    99+
    2022-11-22
    javascript ES6
  • ES6对象属性怎么优化
    这篇文章主要为大家展示了“ES6对象属性怎么优化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ES6对象属性怎么优化”这篇文章吧。ES6常见小优化 - 对象属性const x,y&nb...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作