Object.values/Object.entries
Object.values
和 Object.entries
是在ES2017规格中,它和Object.keys
类似,返回数组类型,其序号和Object.keys
序号对应。类似python中的dict.iteritems()。
Object.values
,Object.entries
和Object.keys
各自项返回是数组,相对应包括key,value或者可枚举特定对象property/attribute
在ES8 /ES2017之前,Javascript开发者需要迭代一个对象的自身属性时候不得不用Object.keys
,通过迭代且使用obj[key]
获取value值返回一个数组,很挫的:
let obj = {a: 1, b: 2, c: 3}
Object.keys(obj).forEach((key, index)=>{
console.log(key, obj[key])
})
而使用ES6/ES2015 中for/of
稍微好点:
let obj = {a: 1, b: 2, c: 3}
for (let key of Object.keys(obj)) {
console.log(key, obj[key])
}
Object.values
返回对象自身可以迭代属性值(values)为数组类型。我们最好使用Array.prototype.forEach
迭代它,结合ES6的箭头函数隐形返回值:
let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(value=>console.log(value)) // 1, 2, 3
或者实用for/of:
let obj = {a: 1, b: 2, c: 3}
for (let value of Object.values(obj)) {
console.log(value)
}
// 1, 2, 3
·Object.entries·,在另一方面,将会返回对象自身可迭代属性key-value对数组(作为一个数组),他们(key-value)分别以数组存放数组中:
let obj = {a: 1, b: 2, c: 3}
JSON.stringify(Object.entries(obj))
"[["a",1],["b",2],["c",3]]"
可以使用ES6/ES2015解构,从这嵌套数组中分别声明key和value
let obj = {a: 1, b: 2, c: 3}
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} is ${value}`)
})
// a is 1, b is 2, c is 3
同样使用ES6for/of
(毕竟全部都是数组)遍历Object.entries
返回来的结果值:
let obj = {a: 1, b: 2, c: 3}
for (let [key, value] of Object.entries(obj)) {
console.log(`${key} is ${value}`)
}
// a is 1, b is 2, c is 3
现在从对象中提取values和key-value pairs 变得非常容易了。Object.values
和Object.entries
这种方式不想之前 Object.keys
(自身属性key+顺序相同)结合for/of
(ES6)一起,我们不仅仅可以提取他们还可以迭代他们。
String padding(字符串填充)
String.prototype.padStart
和
String.prototype.padEnd
在javascript字符操作是一个不错的体验,帮助避免依赖而外的库。
padStart()
在开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。从字符串的左边开始(至少大部分西方语言),一个经典例子是使用空格创建列:
console.log('react'.padStart(10).length) // " react" is 10
console.log('backbone'.padStart(10).length) // " backbone" is 10
它对于财务方面非常有用:
console.log('0.00'.padStart(20))
console.log('10,000.00'.padStart(20))
console.log('250,000.00'.padStart(20))
如果是为会计做账之类的,这个很实用,帐做的很整齐?
0.00
10,000.00
250,000.00
第二个参数,让我们放一些其他的填充字符替代空字符串,一个字符串填充:
console.log('react'.padStart(10, '_')) // "_____react"
console.log('backbone'.padStart(10, '*')) // "**backbone"
padEnd
顾名思义就是从字符串的尾端右边开始填充。第二个参数,你能实际上用一个任何长度的字符串。例如:
console.log('react'.padEnd(10, ':-)')) // "react:-):-" is 10
console.log('backbone'.padEnd(10, '*')) // "backbone**" is 10
再赏几个例子作为总结:
// String.prototype.padStart(targetLength [, padString])
'hello'.padStart(10); // ' hello'
'hello'.padStart(10, '0'); // '00000hello'
'hello'.padStart(); // 'hello'
'hello'.padStart(6, '123'); // '1hello'
'hello'.padStart(3); // 'hello'
'hello'.padStart(3, '123'); // 'hello';
// String.prototype.padEnd(targetLength [, padString])
'hello'.padEnd(10); // 'hello '
'hello'.padEnd(10, '0'); // 'hello00000'
'hello'.padEnd(); // 'hello'
'hello'.padEnd(6, '123'); // 'hello1'
'hello'.padEnd(3); // 'hello'
'hello'.padEnd(3, '123'); // 'hello';
Object.getOwnPropertyDescriptors
这新的
Object.getOwnPropertyDescriptors
返回对象obj所有自身属性描述。这是一个多参数版本的
Object.getOwnPropertyDescriptors(obj,propName)将会返回obj中propName属性的一个单独描述。
在我们日常不可变编程(immutable programming)时代中,有了这个方法很方便(记住,Javascript中对象是引用传递)在ES5中,开发者要使用
Object.assign()
来拷贝对象,
Object.assign()
分配属性只有copy和定义新的属性。当我们使用更加复杂对象和类原型,这可能会出问题。
Object.getOwnPropertyDescriptors
允许创建真实的对象浅副本并创建子类,它通过给开发者描述符来做到这一点.在
Object.create(prototype, object)
放入描述符后,返回一个真正的浅拷贝。
Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)
或者可以合并两个对象target
和source
如下:
Object.defineProperties(
target,
Object.getOwnPropertyDescriptors(source)
)
以上是Object.getOwnPropertyDesciptors
用法。但是什么是描述符(descriptor)呢?就是一个对象的描述。
这里有两种描述符号类型:
1.数据描述符(Data descriptor)
2.存取器描述符(Accessor descriptor)
存取描述符有必须属性:get 或者set或者get和set两个就是如你所想的getter和setter函数,然后存取描述符还有可选属性
configurable
和
enumerable
let azatsBooks = {
books: ['React Quickly'],
get latest () {
let numberOfBooks = this.books.length
if (numberOfBooks == 0) return undefined
return this.books[numberOfBooks - 1]
}
}
这个例子数据描述符books
由Object.getOwnPropertyDescriptor(azatsBooks, 'books')
产生结果如下:
Object
configurable: true
enumerable: true
value: Array[1]
writable: true
__proto__: Object
同样的,Object.getOwnPropertyDescriptor(azatsBooks, 'latest')
将会展现latest的描述符,这个latest(get)存取器描述符展现如下:
Object
configurable: truee
numerable: true
get: latest()
set: undefined
__proto__: Object
现在我们调用新方法获取所有的描述符:
console.log(Object.getOwnPropertyDescriptors(azatsBooks))
它会给出这个对象两个描述符books和latest:
Object
books: Object
configurable: true
enumerable: true
value: Array[1]
writable: true
__proto__: Object
latest: Object
configurable: true
enumerable: true
get: latest()
set: undefined
__proto__: Object
__proto__: Object
函数参数列表和调用中的尾逗号(Trailing commas)
尾逗号在函数定义中只是一个纯粹语法变化,在ES5中,将会非法语法,在函数参数后面应该是没有逗号的:
var f = function(a,
b,
c,
d) { // NO COMMA!
// ...
console.log(d)
}
f(1,2,3,'this')
在ES8中,这种尾逗号是没有问题的:
var f = function(a,
b,
c,
d,
) { // COMMA? OK!
// ...
console.log(d)
}
f(1,2,3,'this')
var arr = [1, // Length == 3
2,
3,
] // <--- ok
let obj = {a: 1, // Only 3 properties
b: 2,
c: 3,
} // <--- ok
尾逗号主要有用在使用多行参数风格(典型的是那些很长的参数名),开发者终于可以忘记逗号放在第一位这种奇怪的写法。自从逗号bugs主要原因就是使用他们。而现在你可以到处使用逗号,甚至最后参数都可以。
异步函数(Async Functions)
异步函数(或者async/await)特性操作是
Promise最重要的功能。这种想法是为了在写异步代码中简化它,因为人类大脑最讨厌这种平行非序号思维了。它只是不会演变这种方式。本来以为Promise的到来已经是摆脱node异步的福音了,在ES8,异步函数是那么给力。开发者定义一个
asyc
函数里面不包含或者包含await 基于Promise异步操作。在这引擎之下一个异步函数返回一个Promise,无论无何你在任何地方不会看到这样的一个词Promise。
例如,在ES6中我们可以使用Promise, Axios库向GraphQL服务器发送一个请求:
axios.get(`/q?query=${query}`)
.then(response => response.data)
.then(data => {
this.props.processfetchedData(data) // Defined somewhere else
})
.catch(error => console.log(error))
任何一个Promise库都能兼容新的异步函数,我们可以使用同步try/catch做错误处理
async fetchData(url) => {
try {
const response = await axios.get(`/q?query=${query}`)
const data = response.data
this.props.processfetchedData(data)
} catch (error) {
console.log(error)
}
}
异步函数返回一个Promise,所以我们像下面可以继续执行流程:
async fetchData(query) => {
try {
const response = await axios.get(`/q?query=${query}`)
const data = response.data
return data
} catch (error) {
console.log(error)
}
}
fetchData(query).then(data => {
this.props.processfetchedData(data)
})
有了 async/await,我们的代码执行异步看起来像执行同步一样。可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊!