前端基础知识学习
前端基础知识学习: 延续上一篇文章, 继续进行前端基础知识的学习并深入了解 ES6 以上版本新添加的特性以及优化写法（例如 ES8 , ES9 等）.
1. Object.values()
该方法返回一个数组，其成员是参数对象本身遍历属性的键值。
const obj = {
name: “lucy”,
age: 12,
sex: “male”,
};
console.log(Object.values(obj)); // [‘lucy’, 12, ‘male’]
2. String.prototype.padStart()
该方法可以把指定字符串添加到字符串头部，并返回一个新的字符串
// /**
// * str.padStart(targetLen,padStr)
// * targetLen,当前字符串希望被填充到的目标长度，如果targetLen小于当前字符串长度，则返回当前字符串本身
// * padStr,用来填充的字符串，可选参数，如果padStr太长，填充后的字符串长度超过了目标长度，则会被截断，保留左侧部分
// * /
const str = “abc”;
console.log(str.padStart(5)); // ” abc”
console.log(str.padStart(5, “d”)); // “ddabc” 把d填充到字符串前面，并且目标字符串长度为5
console.log(str.padStart(5, “123456”)); //”12abc” 把123456填充到字符串前面，目标字符串长度为5，填充后目标字符串太长，自动截断
console.log(str.padStart(1)); // “abc” 空字符串填充，目标字符串长度为1，小于原字符串，返回原字符串
3. String.prototype.padEnd()
此方法可以将指定的字符串添加到字符串的头中，并返回一个新字符串。
const str = “abc”;
console.log(str.padEnd(5)); // “abc ”
console.log(str.padEnd(5, “d”)); // “abcdd” 把d填充到字符串后面，并且目标字符串长度为5
console.log(str.padEnd(5, “123456”)); //”abc12″ 把123456填充到字符串后面，目标字符串长度为5，填充后目标字符串太长，自动截断
console.log(str.padEnd(1)); // “abc” 空字符串填充，目标字符串长度为1，小于原字符串，返回原字符串
4. for await of
异步迭代器，它可以等待每个promise对象被解析后再进行下一步。
function fTimeOut(times) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(times);
}, times);
});
}
async function timeTest() {
const arr = [fTimeOut(1000), fTimeOut(2000)];
for await (const item of arr) {
console.log(Date.now(), item);
}
}
timeTest();
// 结果：1646533267656 1000
1646533268657 2000
5. Object.fromEntries()
将键值对列表转换为对象。
const arr = [
[“a”, “hello”],
[“b”, “world”],
];
console.log(Object.fromEntries(arr));//{a: ‘hello’, b: ‘world’}
6. try…catch异常可选
在 ES10 之前catch的err参数是必需的，在ES10之后可以省略。
try {
console.log(“ok”);
} catch {
console.log(“error”);
}
7. JSON.Stringify增强
在 ES10 中， JSON.stringify 在显示一些超出范围的Unicode编码时的错误问题得到了修复。
// “\uD83D\uDE0E” 多字节字符
console.log(JSON.stringify(“\uD83D\uDE0E”));//”😎”
console.log(JSON.stringify(“\uD83D”));//”\ud83d” 这是一个无效的字符串，以前会替换为特殊字符，现在转义为JSON转义序列
8. 空值合并运算符（??）
当左操作数未定义或为空时，返回右操作数；否则，返回左操作数。
const str1 = undefined ?? “right”;
const str2 = null ?? “right”;
const str3 = “left” ?? “right”;
console.log(str1); // right
console.log(str2); // right
console.log(str3); // left
9. 逻辑运算符与赋值表达式（&&=，||=，??=）
逻辑与赋值（&&=）
let a = 1;
let b = 2;
a &&= b;
console.log(a); // 2 相当于 a && (a = b)
逻辑或赋值（||=）
let a = 1;
let b = 2;
let c = false;
a ||= b;
c ||= b;
console.log(a, c); // 1 2 相当于a || (a = b)
逻辑空赋值（??=）
let a = 1;
let b = 2;
let c = false;
let d = null;
let e = undefined;
a ??= b;
c ??= b;
d ??= b;
e ??= b;
console.log(a, c, d, e); // 1 false 2 2 相当于a ?? (a = b)
10. 数字分割符“_”
正确写法：
console.log(123_456_789); // 123456789
错误写法：
放在数值最前面或者最后面
两个或以上分隔符放在一起
小数点前后
科学计数法中，表示指数的e（E）前后
友情提示: 前端学习有益于软件定制开发, 多媒体研发, 物联网工, AI 人工智能开发, 网站开发, 大数据平台建设及企业信息化应用等业务呈现更优良的效果, 学习前端道阻且长， 加油吧少年！
友情链接：https://www.ccwisdom.com/industrynews/
文案参考：https://blog.csdn.net/mountain_zq/article/details/122962712
