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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
javascript实现下雨效果
Mar 27 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
antd form表单数据回显操作
Nov 02 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函数microtime()用法与说明
2013/12/04 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript 对象的定义方法
2007/01/10 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Django中的session用法详解
2020/03/09 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
感恩寄语大全
2014/04/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书