FED实验室 - 专注WEB端开发和用户体验

煦涵说ES2017(ES8)新特性

煦涵说 煦涵 469℃ 0评论

在6月底 T39 官方发布了 ES2017(ES8)正式版本,WEBPDF 今天将和大家一起来学习最新版本中的特性及浏览器支持情况。

ES2017(ES8)

字符串填充 padStart/padEnd

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

看函数命名语义,就是在字符串的开头和结束填充字符串已达到预期的长度。第一个参数目标长度,目标长度小于字符串长度时,原样返回;第二个参数可选为填充字符串,如果为空用空格填充。看一组实例:

'es8'.padStart(1);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, 'woof');    // 'es8woo'
'es8'.padEnd(14, 'wow');    // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');       // 'es86666'

浏览器支持:Chrome[57],Firefox[48],Edge[15],IE[15],Safari[10]

Object.values

/**
 * @param  {Object} 对象
 * @return {Array}  返回给定对象的可枚举属性值生成的数组
 */
Object.values(obj);

返回给定对象的可枚举属性值生成的数组。实例:

let person = { name: '煦涵', sex: '男' };
// ["煦涵", "男"]
Object.values(person);

// 处理 key 有序对象
let person = {
    5: "谁",
    1: "煦涵",
    4: "是"
}
/* 
 * ["煦涵", "是", "谁"] 
 * 注意此处返回的顺序是按照key的顺序返回的!!!
 */
Object.values(p);

// 处理 String
let person = "我是煦涵";
// ["我", "是", "煦", "涵"]
Object.values(person)

// 处理 Boolean
let person = true;
// []
Object.values(person)

浏览器支持:Chrome[54],Firefox[47],Edge[no],IE[no],Safari[no]

Object.entries

/**
 * @param  {Object} 对象
 * @return {Array}  数组
 */
Object.entries(obj);

返回给定对象的可枚举属性及对应值[key,value]生成的二维数组

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]

浏览器支持:Chrome[54],Firefox[47],Edge[no],IE[no],Safari[10.1]

Object.getOwnPropertyDescriptors

方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)。

const es = {
    get es7() {
        return 'es2016'
    },
    get es8() {
        return 'es2017'
    }
}
Object.getOwnPropertyDescriptors(es);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }

Async

async function 声明定义了一个异步函数,它返回一个 AsyncFunction 对象。

function fetchTextByPromise() {
    return new Promise(resolve => { 
        setTimeout(() => { 
            resolve("es8");
        }, 2000);
    });
}
async function sayHello() { 
    const externalFetchedText = await fetchTextByPromise();
    console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
console.log('before');
sayHello();
console.log('after');

// print result
// before
// after
// Hello, es8

浏览器支持:Chrome[55],Firefox[52],Edge[no],IE[no],Safari[10.1]

Shared memory and atomics

当共享内存时,多个线程可以在内存中读取和写入相同的数据。原子操作确保可预测的值被写入和读取,即在下一个操作开始之前完成本次操作,并且该次操作不会被中断。接下来我们要介绍 Atomics 命名空间下的 SharedArrayBuffer。

SharedArrayBuffer 对象用来表示一个泛型的,固定长度的原生二进制数据缓冲区,类似于 ArrayBuffer 对象。但在某种程度上,它们能被用于在共享内存上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被移除。

浏览器支持:Chrome[no],Firefox[55],Edge[no],IE[no],Safari[10.1]

感谢您的阅读

EOF

作者[煦涵]

2017年07月16日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址