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 jQuery插件练习
Dec 24 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
javascript实现简单页面倒计时
Mar 02 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
详解Python中break语句的用法
2015/05/14 Python
python抓取百度首页的方法
2015/05/19 Python
理解Python垃圾回收机制
2016/02/12 Python
Python性能提升之延迟初始化
2016/12/04 Python
简单实现Python爬取网络图片
2018/04/01 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
jupyter 导入csv文件方式
2020/04/21 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
调解协议书
2014/04/16 职场文书
视光学专业自荐信
2014/06/24 职场文书
2015新学期家长寄语
2015/02/26 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL