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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
小程序实现长按保存图片的方法
Dec 31 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
python 数据加密代码
2008/12/24 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python 中random模块的常用方法总结
2017/07/08 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
《荷花》教学反思
2014/04/16 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
春季运动会开幕词
2015/01/28 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
python中的None与NULL用法说明
2021/05/25 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android