0%

https://thenextweb.com/news/writing-efficient-css-understand-your-selectors
https://programmerinnervoice.wordpress.com/2013/12/18/how-does-browser-read-css-selector/
https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-leftt

Don’t Use Inline-Styles

Avoid the !important tag

https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/

https://csswizardry.com/2011/09/writing-efficient-css-selectors/

https://www.youtube.com/watch?v=Qhaz36TZG5Y

https://www.youtube.com/watch?v=iHEkRIF7zxI

背景

今天看阮老师的科技周刊的时候,里头提到了ES2021(作者默认所有的提案最终都会被通过),正好借此梳理一下,ES2020和ES2021,个人使用过的以及后续可能会使用的一些功能,所以这篇不是科普类型,纯属个人喜好的记录。

开始

空值合并运算符:??

**??**是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,则返回右侧操作数,否则返回左侧操作数。所以该运算符完美适配默认值的场景。

1
2
3
4
5
6
7
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

多说一句:

设置默认值以前常用的是:**||**(逻辑或操作符),但是都知道不用用它作为有false和0的情况(因为||**判断时,会把值转换为布尔值,而false和0转为布尔值时都是false,所以对于数字类型和布尔类型的用||设置默认值是不合理的+)

可选的链接运算符:?.

嵌套对象时特别好用。表达式还短。

如果引用为空(null 或 undefined),则表达式会短路返回 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13

if( a && a.b && a.b.c){
//do something...
}
//可换成:
if( a?.b?c){
//do something...
}


const a={}
const test=a?.b?.c
// expected output: undefined
Promise.any() and AggregateError

Promise.any()方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态

阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版

Promise.race和Promise.any

Promise.any()Promise.race()方法很像,只有一点不同,就是不会因为某个 Promise 变成rejected状态而结束。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Promise.race([
new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))
// expected output: Third


Promise.any([
new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))
// expected output: Second
globalThis

全局属性 globalThis 包含全局的 this 值,类似于全局对象(global object)。globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象(也就是全局对象自身)不用在考虑不同的环境获取方式不一样的问题。

String replaceAll()
1
2
const newStr = str.replaceAll(regexp|substr, newSubstr|function).
// 当使用一个 `regex`时,您必须设置全局(“ g”)标志

replaceAll(pattern,replacement) 方法返回一个新字符串,新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExpreplacement可以是一个字符串或一个在每次匹配被调用的函数。

old:

1
2
3
4
5
6
7
8
9
const str = "zhangsan is wangmazi's 舅子,wangmazi is zhangsan's 妹夫";
const newStr = str.replace("is", "isn't");
console.log(newStr);
// expected output:zhangsan isn't wangmazi's 舅子,wangmazi is zhangsan's 妹夫

// 替换所有,只能用正则
const newStr = str.replace(/is/g, "isn't");
console.log(newStr);
//expected output: zhangsan isn't wangmazi's 舅子,wangmazi isn't zhangsan's 妹夫

new:

1
2
3
4
const str = "zhangsan is wangmazi's 舅子,wangmazi is zhangsan's 妹夫";
const newStr = str.replaceAll("is", "isn't");
console.log(newStr);
// expected output: zhangsan isn't wangmazi's 舅子,wangmazi isn't zhangsan's 妹夫
逻辑赋值运算符:(&&= ||= ??=)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
x ||= y;
// 等同
x || (x = y);

x &&= y;
// 等同
x && (x = y);
// 或者
if(x) {
x = y
}

x ??= y;
// 等同
x ?? (x = y);


// 比如
let x = 1;
let y = 2;
x &&= y;
console.log(x);
//expected output: 2

下划线作为数字分隔符
1
2
3
4
5
6
7
8
const billion = 1000_000_000;
console.log(billion);
//expected output:1000000000
const trillion = 1000_000_000_000n;
console.log(trillion.toString());
//expected output: "1000000000000"
console.log(1000_000_000 === 1000000000);
//expected output: true

了解更多

Promise.allSettled

我通常在页面初始化需要多个数据且相互之间又没联系的时候会用它。

**Promise.allSettled()**方法接受一组Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果(不管是fulfilled还是rejected),返回结果是一个对象数组,每个对象表示对应的promise结果。

当有多个彼此不依赖的异步任务成功完成时,或者我们不关心异步操作的结果,只关心每个promise的结果时,通常使用它。

1
2
3
4
5
6
7
8
9
10
const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000,'failed'));
const p2 = new Promise((resolve, reject) => setTimeout(reject, 2000,'a'));
const p3 = new Promise((resolve, reject) => setTimeout(resolve, 3000,'b'));
// 返回值对象:fulfilled时,对象有value属性,rejected时有reason属性
Promise.allSettled([p1, p2, p3]).then(values => console.log(values));

//expected output: Array
// 0: {status: "fulfilled", value: "failed"}
// 1: {status: "rejected", reason: "a"}
// 2: {status: "fulfilled", value: "b"}

相比之下,Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时就需要立即结束的场景。即Promise.all() 其实无法确定所有请求都结束。

参考资料:

https://github.com/tc39/ecma262/releases

https://backbencher.dev/javascript/es2021-new-features

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247494289&idx=2&sn=d8a0ef1443954b7a5bae79ec90411cbd&chksm=f9525fd2ce25d6c4f1d1ac2ab8ce6b7034f68f484881a3548549648dfe5aedd427c7b930385b&scene=21#wechat_redirect

https://tc39.es/ecma262/2021/#sec-web-scripting

https://www.telerik.com/blogs/learn-new-features-introduced-javascript-es2021

https://blog.fundebug.com/2019/08/28/javascript-nullish-coalescing/

本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。

别想着记住所有东西
https://www.kevinpowell.co/article/youre-worrying-about-the-wrong-things/
https://www.youtube.com/watch?v=vP2MNhC_Igw

为了成为一名前端开发人员,我们需要学习一百万零一件事,似乎每 30 秒就有另一件新东西需要我们添加到我们的武器库中。

学习新事物可能很有趣,但是当我们需要学习的新事物清单似乎不断增加时,它可能会让人不知所措。

还有一个大问题。当我们离开学习所有这些新东西时,我们他妈的怎么能记住我们已经学过的所有东西?

我经常被问到,通过 DM 或来自追随者的电子邮件,或者有时作为 YouTube 评论,询问记住所有内容的最佳策略。

事实是,我什么都不记得。我记得一些东西是因为我一直在使用它们,并且因为我主要关注 CSS。我使用它们的次数越多,与它们相处得越好,与它们相处的乐趣也就越多。但我不记得一切。

事实上,它甚至不接近。

这都是一个大谎言

当您观看我的 YouTube 视频或其他人编写代码时,似乎我无所不知。然后下周我发布了一个关于新主题的新视频,我也知道!

我当然是了!我已经把它写好了,而且我之前已经建立了那个东西。

大多数情况下,有关编码的视频和课程中的人们只是从其他屏幕上的已完成版本中复制代码。

事情需要计划好!否则,课程的质量将很糟糕。

但它确实给人一种错误的感觉,即那里的“专业人士”知道并记住一切。

没有人记得这一切

我喜欢听关于开发的播客的原因之一是当你仰望的人谈论他们是如何忘记事情的时候,或者不得不查找事情的时候(有时是我非常了解的事情!)。

不断在ShopTalk Show 上,他们的名字出现了,我非常尊重,他们谈论他们如何必须为他们写的一本书研究某些东西,然后发现自己不得不阅读他们自己书中的部分内容记住它是如何工作的。

我可以理解这一点,我确实看过我自己视频的一部分来记住如何做某些事情

我知道这是我以前知道的东西(毕竟我确实制作了一个视频!),但是因为我有一段时间没有使用那个东西了,也许即使我制作了那个视频,我也不记得到底是怎么回事它不再起作用了!

这是正常的。

而且我认为重要的是要知道我们不应该记住所有内容。

这不是要记住所有内容,而是要知道解决方案存在

CSS 中有很多小技巧和窍门,很多很酷的小功能,我无法记住它们是如何工作的,或者说,它们甚至都叫什么!

但是出现了一些事情,而不是想“嗯,我不知道我可以在这里做什么”,而是“哦,我知道有这个东西可以帮助解决这个问题”,然后我立即研究它是什么。也许这是我看到一篇文章或视频的东西,或者也许是我过去使用过的东西,只是忘记了它是如何工作的。

这不是要记住一切是如何运作的。你永远不会那样做。相反,它是关于知道解决方案存在。

你做的事情越多,你越需要使用这些晦涩的功能,你就越会记住它们是如何工作的。然后你将不会使用它 6 个月,你会完全忘记。

这很好。