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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
JS数组splice操作实例分析
Oct 12 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
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python对字典进行排序实例
2014/09/25 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
如何通过python实现人脸识别验证
2020/01/17 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
公司合并协议书范本
2014/09/30 职场文书
美丽人生观后感
2015/06/03 职场文书
朋友离别感言
2015/08/04 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL