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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vue中touch和click共存的解决方式
Jul 28 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
唐山大地震观后感
2015/06/05 职场文书
董事长秘书工作总结
2015/08/14 职场文书
爱护环境建议书
2015/09/14 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android