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 相关文章推荐
选择复选框按钮置灰否则按钮可用
May 22 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
webpack4.0 入门实践教程
Oct 08 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
js+h5 canvas实现图片验证码
Oct 11 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中的正则表达式以及模式匹配
2013/06/19 PHP
php 获取本地IP代码
2013/06/23 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python处理中文标点符号大集合
2018/05/14 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
想学画画?python满足你!
2020/12/24 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
写自荐信要注意什么
2013/12/26 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang