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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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实现Mysql读写分离
2013/06/28 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript静态的url如何传递
2007/05/03 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python内建模块struct实例详解
2018/02/02 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python数学形态学实例分析
2019/09/06 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
如何提高JDBC的性能
2013/04/30 面试题
房地产端午节活动方案
2014/08/24 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python