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 操作Word和Excel的实现代码
Oct 26 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
面试常见的js算法题
Mar 23 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
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 Class 文章
2007/04/04 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
降低PHP Redis内存占用
2017/03/23 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
Python中的各种装饰器详解
2015/04/11 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
kali中python版本的切换方法
2019/07/11 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python扫描线填充算法详解
2020/02/19 Python
python 进程池pool使用详解
2020/10/15 Python
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
幼儿园户外活动总结
2014/07/04 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP