评论

小打卡前端周刊(2019-08-12)

过去一周前端又出了啥新玩意?大佬我快学不动啦!

爷爷,你关注的“周”刊更新啦!

前端资讯

  • React 发布 v16.9 版本,它包含一些新特性,bug 修复以及新添加的废弃特性警告来为未来主版本的发布做好准备。详细信息

  • 在 JavaScript 中使用异步的生成器(async generator function),异步的生成器函数是很特殊的,因为你即可以使用 await 也可以使用 yield ,但是它的实际用处是什么呢?详细信息

  • 使用 Vue.js 3 来面向未来编程!即将到来的 Vue.js 3 将会提供 基于函数的 API 。那么它解决了什么问题并且它是如何提高代码逻辑性的?详细信息

工具推荐

每周文章:【翻译】ES2019 有啥新玩意?

本文译自JavaScript: What’s new in ES2019
译者 郭梓梁,首次发布于 MeloGuo Blog,转载请保留以上链接

作为最受欢迎并且是 web 开发的主要编程语言之一,JavaScript 在不断地进化并且每次迭代它都会带来新鲜的内部变化。让我们看看 ES2019 中那些能快速放入日常使用的新特性:

Array.flat()

你现在可以指定深度来递归的拍平嵌套数组。深度默认为 1 ,如果你想全部拍平可以使用 Infinity。这个方法不会修改原数组而是会创建一个新的:

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]

如果你在数组中有一个空的槽使用此方法也会被移除

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Array.flatMap()

这是一个结合了基础的 map 函数然后使用 Array.flat() 进行深度为 1 的拍平的方法:

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]; // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]); // [4, 8, 12]

另一个更有用的例子:

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); // [["This","is","a"],["regular"],["sentence"]]
sentence.flatMap(x => x.split(" ")); // ["This","is","a","regular", "sentence"]

String.trimStart() and String.trimEnd()

除了 String.Trim() 可以移除字符串两端的空字符串,现在又有了两个方法可以分别移除左、右两端的空白字符串:

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";

Object.fromEntries

一个将对象的键-值对转换为数组的新方法。它的效果与已经熟知的函数 Object.Entries 正相反,它用于简化将对象转换为数组的操作。在转换完成后,你将会得到一个数组,但是现在你可以返回操作过的数组再变回对象。让我们试着用一个给对象的所有属性的值平方操作的例子:

const obj = { prop1: 2, prop2: 10, prop3: 15 };

let array = Object.entries(obj); // [["prop1", 2], ["prop2", 10], ["prop3", 15]]

让我们使用简单的 map 来求值的平方

array = array.map(([key, value]) => [key, Math.pow(value, 2)]); // [["prop1", 4], ["prop2", 100], ["prop3", 225]]

我们转换了对象的值但是我们留下了一个数组。将这个数组传入 Object.fromEntries ,转换回成一个对象:

const newObj = Object.fromEntries(array); // {prop1: 4, prop2: 100, prop3: 225}

Optional Catch Binding

全新的提案允许你完全忽略 catch() 的参数,在许多情况下你根本不想使用这个参数。

try {
  //...
} catch (er) {
  //handle error with parameter er
}

try {
  //...
} catch {
  //handle error without parameter
}

Symbol.description

你现在可以访问 Symboldescription 属性来获取值来替代使用 toString() 方法:

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"

Function.toString()

调用函数上的 toString() 方法现在会返回函数定义时实际的样子,包括空格和注释。之前的样子:

function /* foo comment */ foo() {}

foo.toString(); // "function foo() {}"

现在是这样:

foo.toString(); // "function /* foo comment */ foo() {}"

JSON.parse() improvements

行分隔符 {\u2028} 和段落分隔符 {\u2029} 现在能够正确的被解析而不是报 SyntaxError 了。

最后一次编辑于  2019-08-12  
点赞 2
收藏
评论

4 个评论

  • motioLiang 〆
    motioLiang 〆
    2019-08-13

    文章开头,有点受宠若惊。

    2019-08-13
    赞同 1
    回复
  • x_Qiang
    x_Qiang
    2019-08-12

    为啥开头就叫,爷爷

    2019-08-12
    赞同 1
    回复
  • 2019-08-12

    React v17 不知道又会出什么大新闻啊,真的学不动了

    2019-08-12
    赞同 1
    回复
  • 好男人
    好男人
    2019-08-13

    各位大佬,前端小白应该从哪学起

    2019-08-13
    赞同
    回复 1
    • 小打卡
      小打卡
      2019-08-19
      从 JavaScript 基础开始,这里有一个前端发展的路径图,可以参考:https://roadmap.sh/frontend
      2019-08-19
      回复
登录 后发表内容