ES6常用对象操作整理
const
简单类型数据常量
// const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
const PI = 3.1415926;
console.log(PI)
对象常量
const foo = Object.freeze({}); // 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
属性的简洁表示
对象,函数都可以简写
var birth = '2000/01/01';
var Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
CommonJS模块输出变量,就非常合适使用简洁写法。
var ms = {}; function getItem(key) {
return key in ms ? ms[key] : null;
} function setItem(key, value) {
ms[key] = value;
} function clear() {
ms = {};
} module.exports = {
getItem,
setItem,
clear
};
// 等同于
module.exports = {
getItem: getItem,
setItem: setItem,
clear: clear
};
Object.is()
+0 === -0 //true
NaN === NaN // false Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign()
用于对象的合并,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
var target = { a: 1 }; var source1 = { b: 2 };
var source2 = { c: 3 }; Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
注意点:
Object.assign 方法实行的是浅拷贝
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1); obj1.a.b = 2;
obj2.a.b // 2
常见用途:
(1)为对象添加属性
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
(2)为对象添加方法
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}
}); // 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};
(3)克隆对象
function clone(origin) {
return Object.assign({}, origin);
}
不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。
想要保持继承链,可以采用下面的代码。
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
(4)合并多个对象
const merge =
(target, ...sources) => Object.assign(target, ...sources);
.
const merge =
(...sources) => Object.assign({}, ...sources);
(5)为属性指定默认值
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
}; function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
console.log(options);
// ...
}
由于存在深拷贝的问题,DEFAULTS
对象和options
对象的所有属性的值,最好都是简单类型,不要指向另一个对象。
属性的遍历
ES6一共有5种方法可以遍历对象的属性。
(1)for...in
for...in
循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。
(2)Object.keys(obj)
Object.keys
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols
返回一个数组,包含对象自身的所有Symbol属性。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys
返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。
(对象自身属性遍历):
for (var i in data) {
if (data.hasOwnProperty(i) === true) {
console.log(data[i])
}
}
Object.keys(),Object.values(),Object.entries()
ES5 引入了Object.keys
方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
ES2017 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for...of循环使用。
var obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
对象的扩展运算符
(1)解构赋值
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
(2)扩展运算符
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
Null 传导运算符
编程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在。比如,要读取message.body.user.firstName
,安全的写法是写成下面这样。
const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';
这样的层层判断非常麻烦,因此现在有一个提案,引入了“Null 传导运算符”(null propagation operator)?.
,简化上面的写法。
const firstName = message?.body?.user?.firstName || 'default';
.
ES6常用对象操作整理的更多相关文章
- ES6常用对象操作
ES6常用对象操作 一. const 简单类型数据常量 // const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动.对于简单类型的数据(数值.字符串.布尔值),值就保存在 ...
- javascript 常用DOM操作整理
.选取了DOM操作中实用并常用的部分,省略了实用但有明显兼容性的部分2.DOM属性和方法的类型归属可能并不完全准确3.某些一般兼容性和特点做了标识(主要是ie8-9上下) 节点类型 节点类型 节点值 ...
- 【linux】工作中linux系统常用命令操作整理
1.Linux如何查看端口 使用lsof(list open files)命令,lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000. 或者使用n ...
- 04、常用RDD操作整理
常用Transformation 注:某些函数只有PairRDD只有,而普通的RDD则没有,比如gropuByKey.reduceByKey.sortByKey.join.cogroup等函数要根据K ...
- es6常用数组操作及技巧汇总
定义数组 const array = [1, 2, 3]; // 或者 const array = new Array(); array[0] = '1'; 检测数组 Array.isArray([] ...
- MySQL常用的操作整理
MySQL是一个十分轻便的dbms,轻便.灵活,更适用于中小型数据的存储与架构.MySQL被数以万计的网站采用,从5版本以后,陆续支持了游标.触发器.事务.存储过程等高级应用,这也给MySQL的易用性 ...
- javascript中字符串常用操作整理
javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...
- 原生JS中常用的Window和DOM对象操作汇总
一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...
- SQL Server编程系列(2):SMO常用对象的有关操作
原文:SQL Server编程系列(2):SMO常用对象的有关操作 在上一篇周公简单讲述了SMO的一些基本概念,实际上SMO体系结构远不止周公在上一篇中讲述的那么简单,下图是MSDN上给出的一个完整的 ...
随机推荐
- Check if a user is in a group
groups or groups user
- 【推导】Codeforces Round #411 (Div. 1) B. Minimum number of steps
最后肯定是bbbb...aaaa...这样. 你每进行一系列替换操作,相当于把一个a移动到右侧. 会增加一些b的数量……然后你统计一下就行.式子很简单. 喵喵喵,我分段统计的,用了等比数列……感觉智障 ...
- 【Floyd】POJ1125-Stockbroker Grapevine
水题,裸的Floyd.最后要求遍历一遍图的最短路径,只需要枚举将当前每一个点作为起始点.如果它不能到达其中的某一点,则该点不可能作为起始点:否则,由该点开始遍历全图的最短路径是到所有点距离中的最大值. ...
- bzoj 1433: [ZJOI2009]假期的宿舍
1433: [ZJOI2009]假期的宿舍 Description Input Output Sample Input 1 3 1 1 0 0 1 0 0 1 1 1 0 0 1 0 0 Sample ...
- [洛谷P3809]【模板】后缀排序
[洛谷P3809][模板]后缀排序 题目大意: 对于给定的长度为\(n(n\le10^6)\)的字符串求后缀数组\(sa[i]\). 思路: 倍增+快排构造后缀数组.代码参考<挑战程序设计竞赛& ...
- Problem B: 年龄问题
#include<stdio.h> int xx(int n,int m,int k) { int a; ) { a=k; } else { a=xx(n-,m,k)+m; } retur ...
- [HTML/CSS]说说position
目录 语法 作用 使用定位的条件 总结 语法 position : static absolute relative(static.absolute.relative常用值). 参数 static : ...
- 【redis】2.redis可视化工具安装使用
redis可视化工具:Redis Desktop Manager 1.redis桌面管理工具[可视化工具]下载 下载地址:https://redisdesktop.com/download 2.点击安 ...
- fmri 实验设计 / 范式设计/ paradigm design
reference:http://www.psychology.gatech.edu/cabi/Resources/Course/index.html sluggish 懒散的,无精打采的.哈哈,pp ...
- Windows命令行的使用
在介绍Windows批处命令前,我们首先来介绍Windows命令行的使用. Windows shell提供了一个黑色的框框界面,即命令行操作界面,关于命令行的作用和好处,我就不费口舌了,下面仅窥见一斑 ...