ES新特性（ES8~ES11）

闲话杂谈：

最近裸辞之后，陆续在杭州约到了一些面试，面试官问有没有持续了解到一些es的新特性，自从毕业工作之后，确实没有怎么去持续学习过新的内容了，这次也确实给了自己一些警醒。那么，我们一起来看看es6之后都有哪些实用的新特性吧。

Object.is(),Object.keys(),Object.values()

• object.is()
  废话不多说，直接上代码。

let a = 1;
let b = "1";

let boolean1 = a == b;
let boolean2 = a === b;

console.log(boolean1, boolean2); // true  false

常规情况下，我们判断两个内容相同 ，可以使用 ==（等于） 或者 ===（全等）进行判断 ，但是如果一些特殊的情况，比如NaN和NaN。

console.log(NaN === NaN, undefined === undefined); // false  true

对于此类情况，我们使用全等无法进行判断。而object.is()就可以实现这个操作。
用法：接收参数为要比较的两个值。 object.is(a, b)

Object.is(NaN, NaN);  // true

• Object.keys(), Object.values()
  这两个API相信大部分人在工作中很少使用，但是面试或者进行机试的时候，会被问到。我之前的一次面试中，面试官问我如何判断一个对象是空对象。（循环遍历或者借助上述两个API）

let obj = {};
let arr = [];
for (let key in obj) {
  arr.push(key);
}
console.log(arr);   // []

// 参数为对象时，分别对应键值对数组，进行输出，返回值为数组。
console.log(Object.keys(obj), Object.values(obj));  // []   []
// 参数为数组时
let arr2 = [1, 2, 3, 4, 5, 6];
console.log(Object.keys(arr2), Object.values(arr2));  
//[ '0', '1', '2', '3', '4', '5' ] [ 1, 2, 3, 4, 5, 6 ]
// 参数为字符串时
let str = "hello world";
console.log(Object.keys(str), Object.values(str));
/*['0', '1', '2',  '3', '4', '5', '6',  '7', '8', '9', '10'] 
  [ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'] */

对于for in 和for of的区别以及用法，推荐大家阅读另外一个博主的文章，解释的很详细。
for in 和 for of 的区别

• Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。

// 参数为对象
const obj = {
  name: "丁小雨",
  age: "25",
  sex: "男",
};
console.log(Object.entries(obj)); //[ [ 'name', '丁小雨' ], [ 'age', '25' ], [ 'sex', '男' ] ]

// 参数为数组
const arr = [1, 2, 3, 4, 5, 6]
console.log(Object.entries(arr));
// [[ '0', 1 ], [ '1', 2 ], [ '2', 3 ], [ '3', 4 ], [ '4', 5 ], [ '5', 6 ]]

// 参数为数组，数组中某些项为对象
const arr2 = [1, 2, 3, { name: "小红" }, { name: "小花" }];
console.log(Object.entries(arr2));
//[ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ], [ '3', { name: '小红' }], [ '4', { name: '小花' }] ]

// 参数为字符串
const str = "hello world";
console.log(Object.entries(str));
/*[ [ '0', 'h' ],  [ '1', 'e' ], [ '2', 'l' ],  [ '3', 'l' ], [ '4', 'o' ],
[ '5', ' ' ], [ '6', 'w' ],  [ '7', 'o' ], [ '8', 'r' ],  [ '9', 'l' ], [ '10', 'd' ] ] */

// 补充一个object转Map
const obj2 = { name: "xiaoding", age: "25", sex: "man"};
console.log(Object.entries(obj2));
const map = new Map(Object.entries(obj2));
console.log(map);
/*[ [ 'name', 'xiaoding' ], [ 'age', '25' ], [ 'sex', 'man' ] ]
Map(4) {
  'name' => 'xiaoding',
  'age' => '25',
  'sex' => 'man'
} */

• padStart(), padEnd()
  这两个方法的作用是分别在字符首部和尾部进行字符填充，需要给定字符的长度。
  接收参数形式为 padStart(num:Number, ‘a’:String)
  padEnd用法与padStart相同，这里就不再做赘述。

const str = "hello front-end";  // length = 15
// 给定的字符串数量按照输入的长度统计添加
let str1 = str.padStart(10, "learn");
console.log(str1); // hello front-end
let str2 = str.padStart(30, "learn");
console.log(str2); // learnlearnlearnhello front-end
let str3 = str.padStart(20, 'a');
console.log(str3); // aaaaahello front-end

实际的一些to C 需求，会出现向用户发送验证码的需求，用户的手机号需要进行部分隐藏，如果是尾部隐藏，我们就可以配合substring方法和padEnd进行生成新的替代字符串进行显示。如果是隐藏中间的字符串，使用字符串截取拼接或者正则截取替换都能够完成。

• 数组扁平化 flat方法进行数组降维
  用法： const array = array.flat(); 默认值为1，infinity表示任意维度。

const arr = [1, 2, 3, 4, [11, 23, [45, 10]], [22, [123, 46, [234, 222]]]];
const arr2 = arr.flat(1);
console.log(arr2); //[ 1, 2, 3, 4, 11, 23, [ 45, 10 ], 22, [ 123, 46, [ 234, 222 ] ] ]
const arr3 = arr.flat(Infinity);
console.log(arr3); //[1,  2,  3,   4, 11,  23, 45, 10, 22, 123, 46, 234, 222]

• flatMap映射
  用法： const array = array.flatMap( (item) => return item );

const str = ["hello world", "life is fucking movies"];

const arr = str.flatMap((item) => {
  return item.split(" ");
});
console.log(arr);  //[ 'hello', 'world', 'life', 'is', 'fucking', 'movies' ]

最后希望大家都能够天天进步，觉得文章不错的话，希望大家能够收藏加关注点一点，共同进步学习！