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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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新手上路(二)
2006/10/09 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python与R语言的简要对比
2017/11/14 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
微电影大赛策划方案
2014/06/05 职场文书
学校周年庆活动方案
2014/08/22 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android