ES6对象操作实例详解


Posted in Javascript onMay 23, 2020

本文实例讲述了ES6对象操作。分享给大家供大家参考,具体如下:

ES6对象操作实例详解

 1.对象赋值

es5中的对象赋值方式如下:

let name="小明";
let skill= 'es6开发';
var obj= {name:name,skill:skill};
console.log(obj);

结果为:

ES6对象操作实例详解

ES6允许把声明的变量直接赋值给对象,例如:

let name="小明";
let skill= 'es6开发';
var obj= {name,skill};
console.log(obj);

结果与上述相同。

2.对象Key值构建

有时候我们会在后台取出key值,而不是我们前台定义好的,这时候我们可以我们可以把后台定义的key值重新构建返回给后台。

 在前端我们可以用[ ] 的形式,进行对象的构建。

let key='skill';//假定是后台定义的key值
var obj={
  [key]:'web' //构建key值
}
console.log(obj.skill);//web

3.自定义对象方法

 对象方法就是把对象中的属性,用匿名函数的形式编程方法。

var obj={
  add:function(a,b){
    return a+b;
  }
}
console.log(obj.add(1,2)); //3

4.Object.is( ) 对象比较

ES5的对象比较方法,经常使用===来判断,如下:

var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(obj1.name === obj2.name);//true

ES6为我们提供了is方法进行对比,如下:

var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(Object.is(obj1.name,obj2.name))//true

区分=== 和 is方法的区别是什么,看下面的代码输出结果。

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

记忆为:===为同值相等,is()为严格相等。

6.Object.assign( )合并对象

使用assgin( )可以实现像数组一样的合并操作。

var a={a:'a'};
var b={b:'b'};
var c={c:'c'};
let d=Object.assign(a,b,c)
console.log(d);

结果为:

ES6对象操作实例详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
ES6函数和数组用法实例分析
May 23 #Javascript
ES6箭头函数和扩展实例分析
May 23 #Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
二级域名转向类
2006/11/09 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python中字符串的操作方法大全
2018/06/03 Python
用pycharm开发django项目示例代码
2018/10/24 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python简易版停车管理系统
2019/08/12 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
六查六看自查材料
2014/02/17 职场文书
最常使用的求职信
2014/05/25 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang