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提交表单 Form.js官方插件介绍
Mar 01 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
python中字典dict常用操作方法实例总结
2015/04/04 Python
解析Python中的异常处理
2015/04/28 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python延时操作实现方法示例
2018/08/14 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python用for循环求和的方法总结
2019/07/08 Python
使用python画社交网络图实例代码
2019/07/10 Python
python的re模块使用方法详解
2019/07/26 Python
python实现简单成绩录入系统
2019/09/19 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
周年庆促销方案
2014/03/15 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
设计师求职信
2014/07/01 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python