前端基础（三）ES7~ES12

为了方便记忆和称呼&＃xff0c;ES2015之后的新知识点我们都统称ES6语法&＃xff0c;就没必要去划分得那么细

ES7&＃xff08;2016&＃xff09;

Array.prototype.includes()

includes方法可以判断一个数组是否包含某个指定的值&＃xff0c;如果存在返回true&＃xff0c;否则false

const arr &＃61; ["es6", "es7", "es8", "es9"];console.log(arr.includes("es5")); // falseconsole.log(arr.includes("es6")); // trueconsole.log(arr.includes("es6", 0)); // trueconsole.log(arr.includes("es6", 1)); // falseconsole.log(arr.includes("es6", -1)); // falseconsole.log(arr.includes("es6", -2)); // falseconsole.log(arr.includes("es6", -3)); // falseconsole.log(arr.includes("es6", -4)); // trueconsole.log(arr.includes("es6", -5)); // true/*arr.includes(valueFind,IndexFind)valueFind,想要查询的值includes的第二项参数为可选参数&＃xff0c;即从IndexFind处开始查找&＃xff0c;如果IndexFind为负数&＃xff0c;则从末尾开始往前跳IndexFind绝对值个位置&＃xff0c;然后开始往后找*/


注意&＃xff1a;includes&＃xff08;&＃xff09;方法只能用于判断基本数据类型&＃xff0c;如果是复杂数据类型&＃xff0c;如对象&＃xff0c;二维数组&＃xff0c;则无法判断&＃xff0c;并且能够判断NaN&＃xff0c;null&＃xff0c;undefined&＃xff1a;

const arr1 &＃61; [1, 2, [3, 4], 5, { name: "lucy" }, NaN, null, undefined];console.log(arr1.includes([3, 4])); //falseconsole.log(arr1.includes({ name: "lucy" })); //falseconsole.log(arr1.includes(NaN)); //trueconsole.log(arr1.includes(null)); //trueconsole.log(arr1.includes(undefined)); //true


幂运算符 **
以前可以&＃xff1a;

Math.pow(2,10);// 1024


现在可以&＃xff1a;

console.log(2 ** 10);// 1024


两个**是连在一起的

ES8&＃xff08;2017&＃xff09;

Object.values()

该方法会返回一个数组&＃xff0c;其成员是参数对象自身可遍历属性键值

const obj &＃61; {name: "lucy",age: 12,sex: "male",};console.log(Object.values(obj)); //[&＃39;lucy&＃39;, 12, &＃39;male&＃39;]


Object.entries()

该方法返回一个数组&＃xff0c;其成员是对象自身的可遍历属性的键值对数组

const obj &＃61; {name: "lucy",age: 12,sex: "male",};console.log(Object.entries(obj)); // [[&＃39;name&＃39;, &＃39;lucy&＃39;],[&＃39;age&＃39;, 12],[&＃39;sex&＃39;, &＃39;male&＃39;]]


String.prototype.padStart()

该方法可以把指定字符串添加到字符串头部&＃xff0c;并返回一个新的字符串

// /**// * str.padStart(targetLen,padStr)// * targetLen,当前字符串希望被填充到的目标长度&＃xff0c;如果targetLen小于当前字符串长度&＃xff0c;则返回当前字符串本身// * padStr,用来填充的字符串&＃xff0c;可选参数&＃xff0c;如果padStr太长&＃xff0c;填充后的字符串长度超过了目标长度&＃xff0c;则会被截断&＃xff0c;保留左侧部分// * /const str &＃61; "abc";console.log(str.padStart(5)); // " abc"console.log(str.padStart(5, "d")); // "ddabc" 把d填充到字符串前面&＃xff0c;并且目标字符串长度为5console.log(str.padStart(5, "123456")); //"12abc" 把123456填充到字符串前面&＃xff0c;目标字符串长度为5&＃xff0c;填充后目标字符串太长&＃xff0c;自动截断console.log(str.padStart(1)); // "abc" 空字符串填充&＃xff0c;目标字符串长度为1&＃xff0c;小于原字符串&＃xff0c;返回原字符串


String.prototype.padEnd()

该方法可以把指定字符串添加到字符串末尾&＃xff0c;并返回一个新的字符串&＃xff0c;语法同上

const str &＃61; "abc";console.log(str.padEnd(5)); // "abc "console.log(str.padEnd(5, "d")); // "abcdd" 把d填充到字符串后面&＃xff0c;并且目标字符串长度为5console.log(str.padEnd(5, "123456")); //"abc12" 把123456填充到字符串后面&＃xff0c;目标字符串长度为5&＃xff0c;填充后目标字符串太长&＃xff0c;自动截断console.log(str.padEnd(1)); // "abc" 空字符串填充&＃xff0c;目标字符串长度为1&＃xff0c;小于原字符串&＃xff0c;返回原字符串


ES9&＃xff08;2018&＃xff09;

for await of
异步迭代器&＃xff0c;可以循环等待每一个promise对象变为resolved状态才会进行到下一步。

function fTimeOut(times) {return new Promise((resolve, reject) &＃61;> {setTimeout(() &＃61;> {resolve(times);}, times);});}const arr &＃61; [fTimeOut(1000), fTimeOut(2000)];for (const item of arr) {console.log(Date.now(), item.then(console.log));}


这里可以看出&＃xff0c;for。。。of并没有能够对异步迭代做一个遍历&＃xff0c;它是先得到了结果&＃xff0c;然后才执行的FTimeOut函数
我们换个写法&＃xff1a;

function fTimeOut(times) {return new Promise((resolve, reject) &＃61;> {setTimeout(() &＃61;> {resolve(times);}, times);});}async function timeTest() {const arr &＃61; [fTimeOut(1000), fTimeOut(2000)];for await (const item of arr) {console.log(Date.now(), item);}}timeTest();


看看结果&＃xff1a;

for await of 会等待每个Promise对象变为resolved状态才会进行下一步

ES10&＃xff08;2019&＃xff09;

Object.fromEntries()&＃xff1a;把键值对列表转换成一个对象

const arr &＃61; [["a", "hello"],["b", "world"],];console.log(Object.fromEntries(arr));//{a: &＃39;hello&＃39;, b: &＃39;world&＃39;}


是和Object.entries()对应的操作
String.prototype.trimStart()&＃xff1a;删除字符串开头的空格
String.prototype.trimEnd() &＃xff1a;删除字符串结尾的空格

try…catch异常可选

在ES10之前catch的err参数是必须的&＃xff0c;ES10之后可以省略这个参数

try {console.log("ok");} catch {console.log("error");}


JSON.Stringify增强
ES10中修复了一下对于JSON.stringify在展示一些超范围的Unicode编码时错误的问题。

// "\uD83D\uDE0E" 多字节字符console.log(JSON.stringify("\uD83D\uDE0E"));//"&＃x1f60e;"console.log(JSON.stringify("\uD83D"));//"\ud83d" 这是一个无效的字符串&＃xff0c;以前会替换为特殊字符&＃xff0c;现在转义为JSON转义序列


ES11&＃xff08;2020&＃xff09;

空值合并运算符&＃xff08;??&＃xff09;

当左侧操作数为undefined或者null时&＃xff0c;返回右侧操作数&＃xff0c;否则返回左侧操作数

const str1 &＃61; undefined ?? "right";const str2 &＃61; null ?? "right";const str3 &＃61; "left" ?? "right";console.log(str1); // rightconsole.log(str2); // rightconsole.log(str3); // left


对比逻辑或操作符&＃xff08;||&＃xff09;&＃xff1a; 逻辑或在左侧操作符为假时返回右侧操作数&＃xff0c;但是对于&＃xff08;’’&＃xff0c;0&＃xff0c;NaN&＃xff0c;false&＃xff09;&＃xff0c;均为假&＃xff0c;返回右侧操作数
可选链操作符&＃xff08;?.&＃xff09;
可选链操作符允许获取位于连接对象深处的属性值&＃xff0c;不必明确验证链中的每个引用是否有效&＃xff0c;该操作符类似于’.&＃39;操作符&＃xff0c;但是在引用null或者undefined时不会引起错误&＃xff0c;形式上也更加简洁

const obj &＃61; {a: {sec: {b: "hello world",},},};const str1 &＃61; obj && obj.a && obj.a.sec && obj.a.sec.b;const str2 &＃61; obj?.a?.sec?.b;console.log(str1); // hello worldconsole.log(str2); // hello world


note&＃xff1a;不能用于赋值

const obj &＃61; {}obj?.a &＃61; 1 //Uncaught SyntaxError: Invalid left-hand side in assignment


ES12&＃xff08;2021&＃xff09;

逻辑运算符与赋值表达式&＃xff08;&&&＃61;&＃xff0c;||&＃61;&＃xff0c;??&＃61;&＃xff09;

• 逻辑与赋值&＃xff08;&&&＃61;&＃xff09;

let a &＃61; 1;let b &＃61; 2;a &&&＃61; b;console.log(a); // 2 相当于 a && (a &＃61; b)


• 逻辑或赋值&＃xff08;||&＃61;&＃xff09;

let a &＃61; 1;let b &＃61; 2;let c &＃61; false;a ||&＃61; b;c ||&＃61; b;console.log(a, c); // 1 2 相当于a || (a &＃61; b)


• 逻辑空赋值&＃xff08;??&＃61;&＃xff09;

let a &＃61; 1;let b &＃61; 2;let c &＃61; false;let d &＃61; null;let e &＃61; undefined;a ??&＃61; b;c ??&＃61; b;d ??&＃61; b;e ??&＃61; b;console.log(a, c, d, e); // 1 false 2 2 相当于a ?? (a &＃61; b)


数字分割符“_”

console.log(123456789); // 123456789console.log(123_456_789); // 123456789


note&＃xff1a;以下情况报错

• 放在数值最前面或者最后面
• 两个或以上分隔符放在一起
• 小数点前后
• 科学计数法中&＃xff0c;表示指数的e&＃xff08;E&＃xff09;前后

3._14159263_.14153_e143e_14123__456_123456123456_