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 相关文章推荐
javascript 常用功能总结
Mar 18 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php curl基本操作详解
2013/07/23 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php上传文件问题汇总
2015/01/30 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
简单的自定义php模板引擎
2016/08/26 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
scrapy爬虫实例分享
2017/12/28 Python
Python对List中的元素排序的方法
2018/04/01 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python的json包位置及用法总结
2020/06/21 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
工程业务员岗位职责
2013/12/31 职场文书
妇女干部培训方案
2014/05/12 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
奔腾年代观后感
2015/06/09 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js