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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Vue异步组件使用详解
Apr 08 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
一个多文件上传的例子(原创)
2006/10/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php中file_exists函数使用详解
2015/05/08 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript 闭包
2011/09/15 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python高斯消除矩阵
2019/01/02 Python
python绘制彩虹图
2019/12/16 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
广州地球村科技数据库题目
2016/04/25 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
自荐信格式范文
2013/10/07 职场文书
网络技术专业求职信
2014/07/13 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
喋血孤城观后感
2015/06/08 职场文书
Golang日志包的使用
2022/04/20 Golang